codebar · kyorkston · Nov 8, 2019 · Nov 8, 2019 · Jan 10, 2020 · Jan 31, 2020
diff --git a/examples/trivia-quiz/index.html b/examples/trivia-quiz/index.html
@@ -0,0 +1,24 @@
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <link rel="stylesheet" href="styles.css">
+    <script src="index.js"></script>
+    <title>codebar.io - Trivia!</title>
+  </head>
+  <body>
+    <header>
+    <img id="logo" src='https://raw.github.com/codebar/planner/master/app/assets/images/logo.png' width='200' />
+    </header>
+    <div id="container">
+      <div id="selector-container">
+        <h2>Select Difficulty:</h2>
+      </div>
+      <h1>Questions</h1>
+      <div id="questions">
+      </div>
+    </div>
+    <footer>
+    <div id="content"> by <a href="http://codebar.io">codebar</a> </div>
+    </footer>
+  </body>
+</html>
diff --git a/examples/trivia-quiz/index.js b/examples/trivia-quiz/index.js
@@ -0,0 +1,78 @@
+// As fetch() is an asynchronous function we can add the async/await keywords
+async function fetchQuizQuestions(difficulty)  {
+  return await fetch(`https://opentdb.com/api.php?amount=10&difficulty=${difficulty}`)
+  .then(response => {
+      return response.json()
+  })
+  .then(data => {
+      renderQuizQuestions(data)
+  })
+  .catch(error => {
+    console.error('Error: ', error)
+  })
+}
+
+function renderQuizQuestions(data) {
+  const container = document.getElementById('questions')
+  //when new data is fetched we want to remove the pre-existing list
+  container.removeChild(container.firstChild)
+
+  const list = document.createElement('ul')
+  container.appendChild(list)
+
+  data.results.map((questionObject) => {
+      const listElement = document.createElement('li')
+      const text = document.createTextNode(questionObject.question)
+      listElement.appendChild(text)
+      list.appendChild(listElement)
+  })
+}
+
+// Bonus part of the tutorial functions
+function createSelector() {
+  const difficulties = ['easy', 'medium', 'hard']
+
+  const selectorContainer = document.getElementById('selector-container')
+  const selector = document.createElement('select')
+  selector.id = 'selector'
+
+  difficulties.map((difficulty) => {
+      const option = new Option(difficulty, difficulty)
+      selector.appendChild(option)
+  })
+  selectorContainer.appendChild(selector)
+}
+
+function selectorChangeListener() {
+  const selector = document.getElementById('selector')
+
+  selector.addEventListener('change', event => {
+      const difficulty = event.target.value.toLowerCase()
+
+      fetchQuizQuestions(difficulty)
+  })   
+}
+// // //
+
+function renderApp() {
+  createSelector()
+  // set to easy to load the page with
+  fetchQuizQuestions('easy')
+  selectorChangeListener()
+}
+
+document.addEventListener('readystatechange', event => {
+  const readyState = event.target.readyState
+  const container = document.getElementById('questions')
+
+  if (readyState === 'interactive') {
+      const image = new Image(100, 100)
+      image.src = 'spinner.gif'
+
+      container.appendChild(image)
+  } else if (readyState === 'complete') {
+      //remove spinner when document is ready
+      container.removeChild(container.firstChild)
+      renderApp()
+  }
+})
diff --git a/examples/tv-schedule/spinner.gif → examples/trivia-quiz/spinner.gif b/examples/tv-schedule/spinner.gif → examples/trivia-quiz/spinner.gif
diff --git a/examples/trivia-quiz/styles.css b/examples/trivia-quiz/styles.css
@@ -0,0 +1,40 @@
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  border-top: 5px solid #4c4066;
+  margin: 0px auto;
+  font-size: 16px;
+}
+
+header {
+  text-align: center;
+}
+
+li {
+  padding-bottom: 10px;
+}
+
+#selector {
+  font-size: 16px;
+}
+
+#questions {
+  max-width: 750px;
+}
+
+#logo {
+  position: relative;
+  top: 2px;
+}
+
+#container {
+  width: 1040px;
+  padding-left: 8px;
+  min-height: 750px;
+}
+
+footer {
+  padding-bottom: 10px;
+  border-bottom: 5px solid #4c4066;
+  position: absolute;
+  width: 100%;
+}
diff --git a/examples/tv-schedule/index.html b/examples/tv-schedule/index.html
diff --git a/examples/tv-schedule/script.js b/examples/tv-schedule/script.js
diff --git a/examples/tv-schedule/style.css b/examples/tv-schedule/style.css