cmda-minor-web · rachelou · Feb 16, 2023 · Feb 17, 2023 · Feb 17, 2023 · Feb 20, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/Prototypes/PrototypeV1.xd b/Prototypes/PrototypeV1.xd
diff --git a/Prototypes/Screens-screenshot.png b/Prototypes/Screens-screenshot.png
diff --git a/Quotes-opdracht-back-up/.DS_Store b/Quotes-opdracht-back-up/.DS_Store
diff --git a/Quotes-opdracht-back-up/Test/index.html b/Quotes-opdracht-back-up/Test/index.html
@@ -0,0 +1,26 @@
+form
+  input.you type='radio' id='you-1' name='you'
+  input.you type='radio' id='you-2' name='you'
+  input.you type='radio' id='you-3' name='you'
+  input.skynet type='radio' id='skynet-1' name='skynet'
+  input.skynet type='radio' id='skynet-2' name='skynet'
+  input.skynet type='radio' id='skynet-3' name='skynet'
+
+  div.options
+    label.r for='you-1'
+    label.p for='you-2'
+    label.s for='you-3'
+  div.game
+    div.go
+      label for='skynet-1'
+      label for='skynet-2'
+      label for='skynet-3'
+  div.it
+    div.r
+    div.p
+    div.s
+  div.results
+    div.win Win
+    div.lose Lose
+    div.tie Tie
+    button type="reset" Again
diff --git a/Quotes-opdracht-back-up/app kopie.js b/Quotes-opdracht-back-up/app kopie.js
@@ -0,0 +1,68 @@
+// Wait for the DOM to load before executing the code inside the callback function
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get references to the HTML elements we'll be updating
+  const quoteElement = document.getElementById("quote");
+  const authorElement = document.getElementById("author");
+  const newQuoteButton = document.getElementById('new-quote-btn');
+
+  // Define an async function for fetching data from the API
+  async function fetchData(maxChars) {
+    // Set the category and URL for the API request
+    const category = 'happiness';
+    const url = `https://api.api-ninjas.com/v1/quotes?category=${category}&limit=10`;
+
+    try {
+      // Make the API request with the specified headers and URL
+      const response = await fetch(url, {
+        headers: {'X-Api-Key': '3JwHEP75fl/aHhG67dLS/A==j8eWwZLo3eujm2mP'}
+      });
+
+      // If the response is not successful, throw an error
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      // Parse the response as JSON
+      const data = await response.json();
+
+      // Filter the data to include only quotes with maxChars or fewer characters
+      const filteredData = data.filter(quote => quote.quote.length <= maxChars);
+
+      // Return the filtered data
+      return filteredData;
+    } catch (error) {
+      // If there's an error, log it to the console
+      console.error('Error fetching data:', error);
+    }
+  }
+
+  // Define a function for displaying a quote
+  function displayQuote() {
+    // Call the fetchData function with a maxChars argument of 80 and use the returned data
+    fetchData(80).then(data => {
+      // Choose a random quote from the data array
+      const randomQuote = data[Math.floor(Math.random() * data.length)];
+
+      // Fade out the quote and author elements
+      quoteElement.style.opacity = 0;
+      authorElement.style.opacity = 0;
+
+      // After a delay of 1000ms (1 second), update the quote and author elements with the new quote and author, and fade them back in
+      setTimeout(() => {
+        quoteElement.textContent = `"${randomQuote.quote}"`;
+        authorElement.textContent = `- ${randomQuote.author}`;
+        quoteElement.style.opacity = 1;
+        authorElement.style.opacity = 1;
+      }, 1000);
+    });
+  }
+
+  // Call the displayQuote function to show a quote when the page loads
+  displayQuote();
+
+  // Add an event listener to the "New Quote" button that calls the displayQuote function when clicked
+  newQuoteButton.addEventListener('click', () => {
+    displayQuote();
+  });
+});
diff --git a/Quotes-opdracht-back-up/app.js b/Quotes-opdracht-back-up/app.js
@@ -0,0 +1,11 @@
+// app.js
+import { displayQuote } from './modules/display.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  displayQuote();
+
+  const newQuoteButton = document.getElementById('new-quote-btn');
+  newQuoteButton.addEventListener('click', () => {
+    displayQuote();
+  });
+});
diff --git a/Quotes-opdracht-back-up/index.html b/Quotes-opdracht-back-up/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> 
+<![endif]-->
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="styles.css">
+
+    </head>
+    <body>
+        <!-- <canvas id="canvas1"> -->
+        <container>
+        <span id="quatation-mark">"</span>
+        <h1 id="quote"></h1>
+        <span id="author">- John C. Maxwell</span>
+        <!-- <p id="page-number">1/3</p> -->
+        <button id="new-quote-btn">New Quote</button>
+
+    </container>
+
+        <!--[if lt IE 7]>
+            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+    <!-- </canvas> -->
+    <script src="./app.js" type="module"></script>
+
+    </body>
+</html>
diff --git a/Quotes-opdracht-back-up/modules/api.js b/Quotes-opdracht-back-up/modules/api.js
@@ -0,0 +1,23 @@
+// api.js
+export async function fetchData(maxChars) {
+    const category = 'happiness';
+    const url = `https://api.api-ninjas.com/v1/quotes?category=${category}&limit=10`;
+
+    try {
+      const response = await fetch(url, {
+        headers: {'X-Api-Key': '3JwHEP75fl/aHhG67dLS/A==j8eWwZLo3eujm2mP'}
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      const data = await response.json();
+      const filteredData = data.filter(quote => quote.quote.length <= maxChars);
+
+      return filteredData;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }
+
diff --git a/Quotes-opdracht-back-up/modules/display.js b/Quotes-opdracht-back-up/modules/display.js
@@ -0,0 +1,27 @@
+// display.js
+import { fetchData } from './api.js';
+
+export function displayQuote() {
+  const quoteElement = document.getElementById("quote");
+  const authorElement = document.getElementById("author");
+  quoteElement.classList.add('skeleton');
+  authorElement.classList.add('skeleton');
+
+  fetchData(80).then(data => {
+    const randomQuote = data[Math.floor(Math.random() * data.length)];
+
+    quoteElement.style.opacity = 0;
+    authorElement.style.opacity = 0;
+
+    setTimeout(() => {
+      quoteElement.textContent = `"${randomQuote.quote}"`;
+      authorElement.textContent = `- ${randomQuote.author}`;
+      quoteElement.style.opacity = 1;
+      authorElement.style.opacity = 1;
+    }, 1000);
+  });
+
+
+
+
+}
diff --git a/Quotes-opdracht-back-up/styles.css b/Quotes-opdracht-back-up/styles.css
@@ -0,0 +1,137 @@
+@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@700&family=Cantata+One&display=swap');
+
+
+#canvas1 {
+  position:absolute;
+  background-color: blue;
+  width: 100%;
+  height: 100%;
+  top: 0;  
+  left: 0;  
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+background-color: #D5EDF6;
+font-family: Contata;
+}
+
+h1 {
+  font-size: 5em
+}
+
+#author {
+  font-size: 1.5em;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
+
+#page-number {
+  font-size: 1.5em;
+}
+
+#quote,#author {
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
+
+#quatation-mark {
+  font-size: 10em;
+  font-family: BIZ UDPGothic;
+}
+
+#new-quote-btn{
+  font-size: 16px;
+  letter-spacing: 2px;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #000;
+  cursor: pointer;
+  border: 3px solid;
+  padding: 0.25em 0.5em;
+  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  height: 100px;
+}
+
+#new-quote-btn:active {
+  box-shadow: 0px 0px 0px 0px;
+  top: 5px;
+  left: 5px;
+}
+
+
+container {
+  display: grid;
+  justify-content: stretch;
+  height: 90vh;
+  width: 90vw;
+  margin: 5%;
+}
+
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: portrait) {
+    /* styles for portrait iPad */
+}
+
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: landscape) {
+    /* styles for landscape iPad */
+}
+
+@media only screen 
+  and (max-width: 767px) {
+
+#quatation-mark{
+font-family: BIZ UDPGothic;
+margin-bottom: -100px !important;
+}
+h1 {
+  grid-column-start: 1;
+  grid-row: 2;
+  text-transform: uppercase;
+  font-size: 2.5em;
+  overflow-wrap: break-word;
+}
+#author {
+  grid-row: 3;
+  font-size: 1.5em;
+  overflow-wrap: break-word;
+}
+
+#quote {
+height:50vh;
+}
+
+#new-quote-btn {
+height: 50px;
+}
+
+#page-number{
+  font-size: 1.5em;
+  grid-column-start: 3;
+  grid-row: 4;
+  align-self: end;
+}
+
+
+    /* styles for mobile devices */
+}
+
+
+
+
diff --git a/README.md b/README.md