PdxCodeGuild · logandouglass · May 23, 2022 · May 23, 2022 · May 23, 2022 · May 23, 2022
diff --git a/code/logan/javascript/lab04/index.html b/code/logan/javascript/lab04/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> Vue-tiful Quotations </title>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <script src="script.js" defer></script>
+    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
+</head>
+<body class = "bg-near-white pl4">
+
+    <div id="app">
+
+       <h1 class = "purple calisto">{{headline}}</h1>
+
+
+       <br>
+       <br>
+
+       <h3 class = "courier"> {{faveQ}} </h3>
+       <h4 class = "courier"> - {{qAuthor}} </h4>
+
+        <br>
+
+       <h3 class = "green calisto">Random Quotes</h3>
+
+       <li v-for="quote in fQuotes" class = "courier mb2">
+        {{quote}}
+        </li>
+
+        <br>
+        <br>
+
+        <button type = "button" @click.prevent = "getQuote" class = "mb3">
+
+            Get Quote
+
+       </button>
+
+        <form @submit.prevent="searchQuote" class = "mt3">
+            <label for="search-term">Enter Search Term:</label>
+            <input v-model="searchTerm" type="text" id="search-term" class = "mh2">
+            <input type="submit" value="Search FaveQs">
+        </form>
+
+        <h3 class = "green calisto">{{results}}</h3>
+
+            <li v-for="quote in sQuotes" class = "courier mb3 mt3">
+                {{quote.body}}
+            </li>
+
+            <div v-show="pagButton">
+                <button type = "button" @click.prevent = "nextPage"> next page </button>
+            </div>
+
+
+    </div>
+
+</body>
+</html>
diff --git a/code/logan/javascript/lab04/script.js b/code/logan/javascript/lab04/script.js
@@ -0,0 +1,103 @@
+const App = {
+	data () {
+		return {
+			test: 'Hello World',
+            headline: 'Vue Quotes',
+            faveQ: "",
+            qAuthor: "",
+            qotdURL: "https://favqs.com/api/qotd",
+			baseURL: "https://favqs.com/api/quotes/",
+            fQuotes: [],
+			sQuotes: undefined,
+            searchTerm: "",
+			error: "",
+			sQuoteData: undefined,
+			pagButton: false,
+			pagData: undefined,
+			pagCounter: 1,
+			results: "",
+
+		}
+	},
+
+    created () {
+
+		let i = 0
+		while (i < 5) {
+    	i++
+		this.getQuote()
+		}
+    },
+
+	methods: {
+		// heavily indebted to that Pete code
+        getQuote () {
+			// console.log({ 'this in getDadJoke': this }) // this is the vue app
+			// this.dadJoke = 'Dad joke incoming...'
+			axios({ // this entire thing will return a promise
+				// url: this.baseUrl,
+                url: this.qotdURL,
+				headers: { Accept: 'application/json' },
+				method: 'get'
+			}).then(res => {
+				// console.log({ 'this in .then': this }) // this is the Window if not in an arrow function
+				// this will still be the vue app if in an arrow function
+
+                this.faveQ = res.data.quote.body
+                this.qAuthor = res.data.quote.author
+				this.fQuotes.push(this.faveQ)
+
+
+
+	})},
+		// heavily indebted to that Pete code
+        searchQuote () {
+			this.pagButton = false
+			this.pagCounter = 1
+			this.error = ''
+			this.results = "Results"
+		axios({
+			method: 'get',
+			url: this.baseURL,
+			headers: { Accept: 'application/json', Authorization: "Token token=75781e1e8edbf2eb68848384abbbd2bb"}, // doesn't work
+			params: { filter: this.searchTerm },
+		}).then(res => {
+			// throw new Error('Something went wrong. Please try again.')
+			console.log(res.data)
+			this.sQuotes = res.data.quotes
+			this.sQuoteData = res.data
+			this.pagData = res.data.last_page
+
+			if (this.pagData === false){
+				this.pagButton = true}
+		}).catch(err => this.error = err.message) // .catch will run if an error occurs
+
+	},
+
+	nextPage () {
+			this.error = ''
+			this.pagCounter += 1
+			// alert("this is working")
+		axios({
+			method: 'get',
+			url: this.baseURL,
+			headers: { Accept: 'application/json', Authorization: "Token token=75781e1e8edbf2eb68848384abbbd2bb"}, // doesn't work
+			params: { filter: this.searchTerm, page: this.pagCounter},
+		}).then(res => {
+			// throw new Error('Something went wrong. Please try again.')
+			console.log(res.data)
+			this.sQuotes = res.data.quotes // might need to fool with this .results
+			this.sQuoteData = res.data
+			this.pagData = res.data.last_page
+			if (this.pagData === false){
+				this.pagButton = true}
+			else {pagButton = false}
+
+		}).catch(err => this.error = err.message) // .catch will run if an error occurs
+
+
+}}}
+
+
+const app = Vue.createApp(App)
+app.mount('#app')
diff --git a/code/logan/javascript/minicapstone/minicap.html b/code/logan/javascript/minicapstone/minicap.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <script src="testscript.js" defer></script>
+    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
+
+
+
+
+
+    <title>Capstone</title>
+</head>
+<body class="bg-near-white">
+
+    <div id = "app">
+
+        <h1 class = "calisto purple tc f1">{{message}}</h1>
+        <!-- {{breedIDList}} -->
+        <!-- {{catFetch}} -->
+
+        <br>
+
+        <div class = "flex items-center justify-around ph4 mb7">
+
+        <div>
+
+            <h2 class = "green calisto tc"> Hall of Fame </h2>
+            <img class = "h5 w5 mt2 mb4" v-for="image in hallOfFame" :src="image.url"/>
+
+        </div>
+
+        <div>
+
+            <h2 class = "red calisto tc"> Hall of Shame </h2>
+            <img class = "h5 w5 mt2 mb4" v-for="image in hallOfShame" :src="image.url"/>
+
+        </div>
+
+
+
+        </div>
+
+
+        <div class = "flex flex-column items-center justify-center ph4" v-show = "clickCheck">
+            <h2 class = "blue calisto"> Judge Me </h2>
+            <img class = "h5 w5 mt2 mb4" v-for="image in imgURLs" :src="image.url"/>
+            <button class = "bg-washed-green" @click.prevent = "rFame" > Hall of Fame </button>
+            <button class = "bg-washed-red" @click.prevent = "rShame" > Hall of Shame </button>
+        </div>
+
+
+
+        <div class = "flex flex-wrap justify-center ph4 mt2">
+            <button class = "mt3" type="button" @click.prevent = "getCat" > Random Cat </button>
+        </div>
+
+        <br>
+
+
+        <hr class = "mb4">
+
+        <h1 class = "calisto purple tc f1">FUN FACTS BY BREED</h1>
+
+        <p class = "courier f4 navy"> 
+            {{desc}}
+        </p>
+
+        <div class = "flex flex-wrap justify-center">
+        <div class = "" v-for = "breed in breedList">
+            <button class = "ma1" @click.prevent = "searchCat (breed)"> {{breed}} </button>
+        </div>
+        </div>
+
+        <!-- <button class = "mt3" type="button" @click.prevent = "breedGrab" > Get Breeds </button> -->
+
+
+
+
+
+
+
+
+
+    <!-- <form id="myForm">
+        <select id="selectBreed">
+              <option>Select a breed</option>
+        </select>
+    </form> -->
+
+
+
+    <!-- <form @submit.prevent="searchCat" class = "mt3">
+        <label for="search-term">Enter Search Term:</label>
+        <input v-model="searchTerm" type="text" id="search-term" class = "mh2">
+        <input type="submit" value="Search 4 Cats">
+    </form> -->
+
+
+
+    </div>
+
+
+
+
+
+
+</body>
+</html>