PdxCodeGuild · realworldsurf · Jan 5, 2022 · Jan 5, 2022 · Jan 5, 2022 · Jan 5, 2022
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,7 @@ Code/Theo/quote_login.py
 Code/josh/labs/API_lab/.env
 env
 secrets.*
-
+images/
 
 
 Code/Theo/django/blog/db.sqlite3
@@ -20,7 +20,8 @@ Code/Theo/django/blog/db.sqlite3
 *.pot
 *.pyc
 __pycache__
-db.sqlite3
+*db.sqlite3
+
 media
 uploads/
 
@@ -134,3 +135,4 @@ GitHub.sublime-settings
 .history
 
 .vscode/settings.json
+Code/Austen/js-05/scripts/secrets.js
diff --git a/3 JavaScript/demo/quoteAPISolution/index.css b/3 JavaScript/demo/quoteAPISolution/index.css
@@ -0,0 +1,139 @@
+@import url("https://fonts.googleapis.com/css2?family=Questrial&family=Varela+Round&display=swap");
+
+* {
+  font-family: "Questrial", sans-serif;
+}
+
+h1,
+blockquote {
+  font-family: "Varela Round", sans-serif;
+}
+
+h1 {
+  font-size: 3rem;
+}
+html,
+body,
+blockquote {
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  background-color: burlywood;
+  min-height: 100vh;
+  width: 100%;
+
+  padding-top: 100px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  position: relative;
+}
+
+form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+#search-query-input {
+  width: 70vw;
+  padding: 15px;
+  margin: 25px;
+  border: none;
+  border-radius: 100px;
+
+  font-size: 1.5rem;
+}
+
+#search-query-input:focus {
+  outline: 2px solid teal;
+}
+
+.button-icon {
+  font-size: 3rem;
+  transition: all 0.3s ease-in-out;
+}
+
+.button-icon:hover {
+  cursor: pointer;
+  color: teal;
+}
+
+#page-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 60vw;
+}
+
+#page-change-arrows {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin: 20px;
+  width: 60vw;
+}
+
+#current-page-number {
+  font-size: 2rem;
+}
+
+#quotes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+blockquote {
+  background-color: rgba(165, 60, 60);
+  border-radius: 10px;
+  padding: 30px;
+  margin: 30px 0px;
+  max-width: 80%;
+
+  font-size: 2rem;
+}
+
+blockquote cite {
+  font-size: 1.5rem;
+  float: right;
+  margin-top: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  #search-query {
+    width: 40vw;
+  }
+
+  #page-change-arrows {
+    width: 20vw;
+  }
+}
+
+.spinner {
+    animation: spin 2s infinite linear;
+    color:rgba(165, 42, 42, 0.8)
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg)
+    }
+    25% {
+        transform: rotate(90deg)
+    }
+    50% {
+        transform: rotate(180deg)
+    }
+    75% {
+        transform: rotate(279deg)
+    }
+    100% {
+        transform: rotate(360deg)
+    }
+}
diff --git a/3 JavaScript/demo/quoteAPISolution/index.html b/3 JavaScript/demo/quoteAPISolution/index.html
@@ -0,0 +1,48 @@
+<!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" />
+    <link rel="stylesheet" href="./index.css" />
+
+    <!-- AXIOS -->
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+    <!-- FONT AWESOME -->
+    <script
+      src="https://kit.fontawesome.com/7e23fc28a2.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <title>Says Who?</title>
+  </head>
+  <body>
+    <section class="container">
+      <h1>Says Who?</h1>
+      <form>
+        <input type="text" id="search-query-input" />
+        <i class="fas fa-search button-icon" id="search-button"></i>
+      </form>
+      <div id="page-controls">
+        <div id="page-change-arrows">
+          <i
+            class="fas fa-arrow-circle-left button-icon"
+            id="previous-page-arrow"
+          ></i>
+          <i
+            class="fas fa-arrow-circle-right button-icon"
+            id="next-page-arrow"
+          ></i>
+        </div>
+        <div id="current-page-number" title="Current Page">1</div>
+      </div>
+      <div id="quotes">
+        <!-- render quotes with JS -->
+      </div>
+    </section>
+
+    <script src="secrets.js"></script>
+    <script src="quoteAPI.js"></script>
+  </body>
+</html>
diff --git a/3 JavaScript/demo/quoteAPISolution/quoteAPI.js b/3 JavaScript/demo/quoteAPISolution/quoteAPI.js
@@ -0,0 +1,169 @@
+let quoteContainer = document.querySelector('#quotes'),
+  pageChangeArrows = document.querySelector('#page-change-arrows'),
+  searchButton = document.querySelector('#search-button'),
+  searchQueryInput = document.querySelector('#search-query-input'),
+  pageControls = document.querySelector('#page-controls'),
+  previousPageArrow = document.querySelector('#previous-page-arrow'),
+  nextPageArrow = document.querySelector('#next-page-arrow'),
+  currentPageNumber = document.querySelector('#current-page-number')
+
+// global state variables,
+// these are manipulated at a global level
+// because they are used in various places
+let currentPage = 1
+let searchQuery = ''
+
+// Fetch the quote of the day from FAVQs api and render it on the page
+function fetchQuoteOfTheDay () {
+  let url = 'https://favqs.com/api/qotd'
+  // let quotes = []
+
+  // create an object for HTTP headers
+  const headers = {
+    'Content-Type': 'application/json'
+  }
+
+  // axios.get(url, configObject)
+  axios
+    .get(url, { headers: headers })
+    .then(response => {
+      quote = response.data.quote
+      renderQuotes([quote])
+      renderPageArrows([quote])
+    })
+    .catch(error => console.log(error))
+}
+
+// search for the filterQuery
+function fetchQuotes (pageNumber = 1, filterQuery = '') {
+  let url = 'https://favqs.com/api/quotes'
+  let quotes, isLastPage
+
+  // create an object for HTTP headers
+  const headers = {
+    'Content-Type': 'application/json',
+    Authorization: `Token token=${FAVQ_API_KEY}`
+  }
+
+  // create an object for the URL query parameters
+  const params = {
+    page: pageNumber,
+    filter: filterQuery
+  }
+
+  // axios.get(url, configObject)
+  axios
+    .get(url, {
+      headers: headers,
+      params: params
+    })
+    .then(response => {
+      // pull the data out of the HTTP response
+      quotes = response.data.quotes
+      currentPage = response.data.page
+      isLastPage = response.data.last_page
+
+      //
+      renderQuotes(quotes)
+      renderPageArrows(quotes, pageNumber, isLastPage)
+    })
+    .catch(error => console.log(error))
+}
+
+// render the page navigation arrows based on the currentPage and
+function renderPageArrows (quotes, pageNumber, isLastPage) {
+  // hide the arrows unless there is more than one quote
+  if (quotes.length < 2) {
+    pageControls.style.display = 'none'
+  } else {
+    pageControls.style.display = 'flex'
+
+    // hide the left arrow if we're on the first page
+    if (pageNumber === 1) {
+      previousPageArrow.style.display = 'none'
+    } else {
+      previousPageArrow.style.display = 'block'
+    }
+
+    // hide the right arrow if we're on the last page
+    if (isLastPage) {
+      nextPageArrow.style.display = 'none'
+    } else {
+      nextPageArrow.style.display = 'block'
+    }
+  }
+
+  currentPageNumber.innerHTML = currentPage
+}
+
+function renderQuotes (quotes) {
+  let quote, blockquote, cite
+  quoteContainer.innerHTML = ''
+
+  if (quotes[0].body.toLowerCase() === 'no quotes found') {
+    quoteContainer.innerHTML = `<h1>No quotes found</h1>`
+  } else {
+    for (quote of quotes) {
+      blockquote = document.createElement('blockquote')
+      cite = document.createElement('cite')
+
+      blockquote.classList.add('quote')
+
+      blockquote.innerHTML = quote.body + '<br/>'
+
+      cite.innerHTML = `- ${quote.author}`
+      blockquote.appendChild(cite)
+
+      quoteContainer.appendChild(blockquote)
+    }
+  }
+}
+
+// when the searchButton is clicked,
+searchButton.addEventListener('click', function () {
+  // set the searchQuery to the current value of the searchQueryInput,
+  // reset the currentPage to 1
+  searchQuery = searchQueryInput.value
+  currentPage = 1
+
+  // set loading message
+  quoteContainer.innerHTML =
+    '<h1><i class="fas fa-stroopwafel spinner"></i></h1>'
+
+  // call the API with the new currentPage
+  // number and previous searchQuery
+  fetchQuotes(currentPage, searchQuery)
+})
+
+function handlePageChange (direction) {
+  // set loading message
+  quoteContainer.innerHTML =
+    '<h1><i class="fas fa-stroopwafel spinner"></i></h1>'
+
+  // change the currentPage based on the direction
+  if (direction === 'previous') {
+    currentPage--
+  } else if (direction === 'next') {
+    currentPage++
+  }
+
+  // call the API with the new currentPage
+  // number and previous searchQuery
+  fetchQuotes(currentPage, searchQuery)
+}
+
+// handlePageChange could also be defined like this
+// using a ternary if/else operation and an arrow function:
+// const handlePageChange = direction =>
+//   fetchQuotes(direction === 'next' ? currentPage++ : currentPage--, searchQuery)
+
+// when the previousPageArrow is clicked,
+// call handlePageChange to decrease page number
+previousPageArrow.addEventListener('click', () => handlePageChange('previous'))
+
+// when the nextPageArrow is clicked,
+// call handlePageChange to increase page number
+nextPageArrow.addEventListener('click', () => handlePageChange('next'))
+
+// load the initial quote
+fetchQuoteOfTheDay()
diff --git a/3 JavaScript/demo/vueIntro/index.css b/3 JavaScript/demo/vueIntro/index.css
@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
+
+* {
+    font-family: 'Montserrat', sans-serif;
+}