diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..35efeffe
Binary files /dev/null and b/.DS_Store differ
diff --git a/Prototypes/PrototypeV1.xd b/Prototypes/PrototypeV1.xd
new file mode 100644
index 00000000..19d4afff
Binary files /dev/null and b/Prototypes/PrototypeV1.xd differ
diff --git a/Prototypes/Screens-screenshot.png b/Prototypes/Screens-screenshot.png
new file mode 100644
index 00000000..acea6d17
Binary files /dev/null and b/Prototypes/Screens-screenshot.png differ
diff --git a/Quotes-opdracht-back-up/.DS_Store b/Quotes-opdracht-back-up/.DS_Store
new file mode 100644
index 00000000..405e469f
Binary files /dev/null and b/Quotes-opdracht-back-up/.DS_Store differ
diff --git a/Quotes-opdracht-back-up/Test/index.html b/Quotes-opdracht-back-up/Test/index.html
new file mode 100644
index 00000000..959f5968
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/Quotes-opdracht-back-up/app kopie.js b/Quotes-opdracht-back-up/app kopie.js
new file mode 100644
index 00000000..756e80ba
--- /dev/null
+++ 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
new file mode 100644
index 00000000..702f72f9
--- /dev/null
+++ 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();
+ });
+});
\ No newline at end of file
diff --git a/Quotes-opdracht-back-up/index.html b/Quotes-opdracht-back-up/index.html
new file mode 100644
index 00000000..3292769e
--- /dev/null
+++ b/Quotes-opdracht-back-up/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "
+
+ - John C. Maxwell
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Quotes-opdracht-back-up/modules/api.js b/Quotes-opdracht-back-up/modules/api.js
new file mode 100644
index 00000000..7c3f64b2
--- /dev/null
+++ 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);
+ }
+ }
+
\ No newline at end of file
diff --git a/Quotes-opdracht-back-up/modules/display.js b/Quotes-opdracht-back-up/modules/display.js
new file mode 100644
index 00000000..0f50a039
--- /dev/null
+++ 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
new file mode 100644
index 00000000..6aab3fbf
--- /dev/null
+++ 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
deleted file mode 100644
index 55092a6d..00000000
--- a/README.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Web App From Scratch @cmda-minor-web 2021 - 2022
-
-In this course you will learn to build a web application without frameworks or unnecessary libraries, but with vanilla HTML, CSS & JavaScript as much as possible. The end result is a modular, single page web app (SPA). Data will be retrieved from an external API, manipulated and finally shown in the UI of the App. You will learn to apply interface principles when building and testing the interface. With the gained knowledge you will be able to build interactive prototypes, based on a user story and real data. Also you will gain a better understanding of how API's, frameworks and libraries work.
-
-## Assignment
-
-1. [Visitekaartje](https://github.com/cmda-minor-web/web-app-from-scratch-2223/blob/main/course/week-1.md#1-visitekaartje): Ontwerp en maak met HTML, CSS en JS een visitekaartje.
-2. [Squadpagina](https://github.com/cmda-minor-web/web-app-from-scratch-2223/blob/main/course/week-1.md#2-squadpagina): Ontwerp en maak met je team een squadpagina waarin je de verschillende visitekaartjes toont.
-3. [Single Page App](https://github.com/cmda-minor-web/web-app-from-scratch-2223/blob/master/course/week-2.md): Design and build a single page web app based on a User Story.
-
----
-
-## Program
-
-| Planning | Maandag | Dinsdag | Vrijdag |
-|---|---|---|---|
-| [Week 1 - Hellooo π€Έ](https://github.com/cmda-minor-web/web-app-from-scratch-2223/blob/master/course/week-1.md) | Introduction + visitekaartje | Squadpagina | Teambespreking |
-| [Week 2 - Hello API π](https://github.com/cmda-minor-web/web-app-from-scratch-2223/blob/master/course/week-2.md) | College + briefing opdracht | College + Work | Feedbackgesprekken |
-| [Week 3 - Refactor π ](https://github.com/cmda-minor-web/web-app-from-scratch-2223/blob/master/course/week-3.md) | College + work | College + work | Feedbackgesprekken |
-| Voorjaarsvakantie | | | |
-| [Week 4 - Wrapping up π](https://github.com/cmda-minor-web/web-app-from-scratch-2223/blob/master/course/week-4.md) | College + work | Review + work | Beoordelingsgesprekken |
-
-## Best Practices
-
-All work during this course will be tested against our [Best Practices for JavaScript](https://github.com/cmda-minor-web/best-practices/blob/master/javascript.md).
-
-## Rubric
-
-Your efforts will be graded using a single point rubric (see below). You will have to pass the criterion (centre column) to pass the course. During the test you will be consulted and will be given feedback on things we think deficient and things we think are an improvement on the criterion.
-
-| Deficiency | Criterion | Improvement |
-|:--|:--|:--|
-| | *User Interface* - you design, build and test the user interface by applying interface design principles | |
-| | *Code structure* - you write modular, consistent and efficient HTML, CSS and JavaScript code by applying structure and best practices. You manage state for the application and the UI | |
-| | *Data management* - you understand how you can work with an external API using asynchronous code. You can retrieve data, manipulate and dynamically convert it to structured html | |
-| | *Project* - your app is working and published on GitHub Pages. Your project is thoroughly documented in the `README.md` file in your repository. | |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/Test/index.html b/Test/index.html
new file mode 100644
index 00000000..959f5968
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/examples/image-reflow/index.html b/examples/image-reflow/index.html
deleted file mode 100644
index 3f19e60e..00000000
--- a/examples/image-reflow/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
- Image Reflow
-
-
-
-
-
Hello World!
-
-
-
-
\ No newline at end of file
diff --git a/examples/image-reflow/style.css b/examples/image-reflow/style.css
deleted file mode 100644
index 53093f2b..00000000
--- a/examples/image-reflow/style.css
+++ /dev/null
@@ -1,34 +0,0 @@
-body{
- margin: 0;
-}
-
-h1{
-padding-left: 2em;
-}
-
-.content {
- background-color:grey;
- /* width: 1280px;
- height: 714px; */
-
- /* max-width: 100%;
- height: auto; */
-
- max-width: 100%;
- position: absolute;
- width: 100%;
- height: 100%;
-
- object-fit: cover;
-}
-
-.container {
- display: block;
- position: relative;
- height: 0;
-}
-
-.ratio {
- /* ratio calc = (100% / 16) * 9 */
- padding-bottom: 26.25%;
-}
\ No newline at end of file
diff --git a/examples/local-storage/assets/css/master.css b/examples/local-storage/assets/css/master.css
deleted file mode 100644
index a2635854..00000000
--- a/examples/local-storage/assets/css/master.css
+++ /dev/null
@@ -1,21 +0,0 @@
-*,*:after,*:before{
- padding: 0;
- margin: 0;
- box-sizing: border-box;
-}
-
-body{
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 100vh;
- padding: 2rem;
-}
-
-h1{
- text-align: center;
- font-family: 'Lato';
- letter-spacing: .3rem;
- text-transform: uppercase;
- text-shadow: 0 0 10px rgba(0,0,0,.15);
-}
\ No newline at end of file
diff --git a/examples/local-storage/assets/js/app.js b/examples/local-storage/assets/js/app.js
deleted file mode 100644
index be71c25f..00000000
--- a/examples/local-storage/assets/js/app.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {api} from '../js/modules/api.js'
-import {config} from '../js/modules/config.js'
-import {location} from '../js/modules/location.js'
-import {store} from '../js/modules/store.js'
-import {render} from '../js/modules/render.js'
-import {time} from '../js/modules/time.js'
-
-const app = {
- init:async()=>{
- console.log('π starting app')
- const coords = await location.get()
- if(coords.lat && !store.get('weather-data')){
- store.set('weather-coords',coords)
- store.set('weather-data',await api.get(config.cors + config.base + config.key + `/${coords.lat},${coords.long}`))
- store.modify('weather-coords','time',new Date)
- }else if(time.expired(store.get('weather-coords')['time'],{minutes:1})){
- store.set('weather-data',await api.get(config.cors + config.base + config.key + `/${coords.lat},${coords.long}`))
- store.modify('weather-coords','time',new Date)
- }
- store.get('weather-data') && render.tagline(store.get('weather-data'))
- }
-}
-
-app.init()
\ No newline at end of file
diff --git a/examples/local-storage/assets/js/modules/api.js b/examples/local-storage/assets/js/modules/api.js
deleted file mode 100644
index 9b57843b..00000000
--- a/examples/local-storage/assets/js/modules/api.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const api = {
- get(url,headers = {}) {
- console.log('π Fetching data')
- return new Promise((resolve,reject)=>[
- fetch(url,headers)
- .then(res => res.json())
- .then(response => {
- console.log('π Fetched data')
- resolve(response)
- })
- .catch(err =>
- Promise.reject(new Error('π Fetching failed'))
- .then(resolve(err))
- )
- ])
- }
-}
-
-export {api}
\ No newline at end of file
diff --git a/examples/local-storage/assets/js/modules/config.js b/examples/local-storage/assets/js/modules/config.js
deleted file mode 100644
index 7e63aa3f..00000000
--- a/examples/local-storage/assets/js/modules/config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const config = {
- cors: 'https://cors-anywhere.herokuapp.com/',
- base: 'https://api.darksky.net/forecast',
- key: '/36a3855fd0934dd8210f55f62b4a207a'
-}
-
-export {config}
\ No newline at end of file
diff --git a/examples/local-storage/assets/js/modules/location.js b/examples/local-storage/assets/js/modules/location.js
deleted file mode 100644
index e3905333..00000000
--- a/examples/local-storage/assets/js/modules/location.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const location = {
- get() {
- console.log('π Requesting location')
- return new Promise((resolve,reject) => {
- let pos
- navigator.geolocation.getCurrentPosition((position)=>{
- pos = {
- lat: position.coords.latitude,
- long: position.coords.longitude
- }
- console.log('π Allowed location')
- resolve(pos)
- },()=>{
- Promise.reject(new Error('π Disallowed location')).then(resolve(false))
- })
- })
- }
-}
-
-export {location}
diff --git a/examples/local-storage/assets/js/modules/render.js b/examples/local-storage/assets/js/modules/render.js
deleted file mode 100644
index 6d8bad39..00000000
--- a/examples/local-storage/assets/js/modules/render.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const render = {
- tagline(data) {
- const newH1 = document.createElement('h1')
- newH1.classList.add('tagline')
- newH1.innerText = data.daily.summary
- document.body.appendChild(newH1)
- }
-}
-
-export {render}
\ No newline at end of file
diff --git a/examples/local-storage/assets/js/modules/store.js b/examples/local-storage/assets/js/modules/store.js
deleted file mode 100644
index 0bda8610..00000000
--- a/examples/local-storage/assets/js/modules/store.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const store = {
- set(key,data) {
- console.log(`π¦ Adding ${key} to localStorage`)
- localStorage.setItem(key,JSON.stringify(data))
- },
- get(key) {
- console.log(`π¦ Trying to get ${key} from localStorage`)
- if(localStorage.getItem(key)){
- console.log(`π¦ Found ${key} in localStorage`)
- return JSON.parse(localStorage.getItem(key))
- }else{
- console.log(`π¦ Didn't find ${key} in localStorage`)
- return false
- }
- },
- remove(key) {
- console.log(`π¦ Removing ${key} from localStorage`)
- localStorage.removeItem(key)
- },
- clear() {
- console.log(`π¦ Clearing localStorage`)
- localStorage.clear()
- },
- modify(key,objKey,value) {
- let data = this.get(key)
- if(data && typeof data === 'object'){
- console.log(`π¦ Modified ${objKey} in ${key} `)
- data[objKey] = value
- this.set(key,data)
- return data
- }
- }
-}
-
-export {store}
\ No newline at end of file
diff --git a/examples/local-storage/assets/js/modules/time.js b/examples/local-storage/assets/js/modules/time.js
deleted file mode 100644
index 695de128..00000000
--- a/examples/local-storage/assets/js/modules/time.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const time = {
- expired(oldStamp,expiry) {
- const newStamp = Number(new Date().valueOf())
- oldStamp = Number(new Date(oldStamp).valueOf()) + (expiry.minutes * 60 * 60 * 1000)
- oldStamp < newStamp ? console.log('β° Expired') : console.log('β° Expiredn\'t')
- return oldStamp < newStamp
- }
-}
-
-export {time}
\ No newline at end of file
diff --git a/examples/local-storage/index.html b/examples/local-storage/index.html
deleted file mode 100644
index 62652ebb..00000000
--- a/examples/local-storage/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
-
-
- w e a t h e r
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/modules/favicon.ico b/examples/modules/favicon.ico
deleted file mode 100644
index a01ad196..00000000
Binary files a/examples/modules/favicon.ico and /dev/null differ
diff --git a/examples/modules/index.html b/examples/modules/index.html
deleted file mode 100644
index 8ae0d75b..00000000
--- a/examples/modules/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
- Giphy
-
-
-
-
-
-
-
-
-
-
-
-
-
-
In general, use the Network panel when you need to make sure that resources are being downloaded or uploaded as expected. The most common use cases for the Network panel are:
-
-
Making sure that resources are actually being uploaded or downloaded at all.
-
Inspecting the properties of an individual resource, such as its HTTP headers, content, size, and so on.
-
-
-
If you're looking for ways to improve page load performance, don't start with the Network panel. There are many types of load performance issues that aren't related to network activity. Start with the Audits panel because it gives you targeted suggestions on how to improve your page.
Web developers often log messages to the Console to make sure that their JavaScript is working as expected. To log a message, you insert an expression like console.log('Hello, Console!') into your JavaScript. When the browser executes your JavaScript and sees an expression like that, it knows that it's supposed to log the message to the Console.
The console.log() method may get the job done, but breakpoints can get it done faster. A breakpoint lets you pause your code in the middle of its execution, and examine all values at that moment in time.
-
-
-
-
-
- `;
- main.insertAdjacentHTML('beforeend', html);
- });
-}
-
-/*** Transparency templating engine -> refactor into module later ***/
-
-const footer = document.querySelector('footer');
-const data = {
- title: 'Developer Tools',
- text: '... are totally wicked π¦'
-};
-
-setTimeout(renderTemplate(footer, data), 1000);
-
-// Transparency
-function renderTemplate(element, data) {
- return () => {
- Transparency.render(element, data);
- };
-}
diff --git a/examples/routing-fetching-templating/static/js/vendor/routie.min.js b/examples/routing-fetching-templating/static/js/vendor/routie.min.js
deleted file mode 100644
index 0c47f45c..00000000
--- a/examples/routing-fetching-templating/static/js/vendor/routie.min.js
+++ /dev/null
@@ -1,157 +0,0 @@
-/*!
- * routie - a tiny hash router
- * v0.3.2
- * http://projects.jga.me/routie
- * copyright Greg Allen 2016
- * MIT License
-*/
-var Routie = function(a, b) {
- var c = [],
- d = {},
- e = 'routie',
- f = a[e],
- g = function(a, b) {
- (this.name = b),
- (this.path = a),
- (this.keys = []),
- (this.fns = []),
- (this.params = {}),
- (this.regex = h(this.path, this.keys, !1, !1));
- };
- (g.prototype.addHandler = function(a) {
- this.fns.push(a);
- }),
- (g.prototype.removeHandler = function(a) {
- for (var b = 0, c = this.fns.length; c > b; b++) {
- var d = this.fns[b];
- if (a == d) return void this.fns.splice(b, 1);
- }
- }),
- (g.prototype.run = function(a) {
- for (var b = 0, c = this.fns.length; c > b; b++)
- this.fns[b].apply(this, a);
- }),
- (g.prototype.match = function(a, b) {
- var c = this.regex.exec(a);
- if (!c) return !1;
- for (var d = 1, e = c.length; e > d; ++d) {
- var f = this.keys[d - 1],
- g = 'string' == typeof c[d] ? decodeURIComponent(c[d]) : c[d];
- f && (this.params[f.name] = g), b.push(g);
- }
- return !0;
- }),
- (g.prototype.toURL = function(a) {
- var b = this.path;
- for (var c in a) b = b.replace('/:' + c, '/' + a[c]);
- if (
- ((b = b.replace(/\/:.*\?/g, '/').replace(/\?/g, '')),
- -1 != b.indexOf(':'))
- )
- throw new Error('missing parameters for url: ' + b);
- return b;
- });
- var h = function(a, b, c, d) {
- return a instanceof RegExp
- ? a
- : (a instanceof Array && (a = '(' + a.join('|') + ')'),
- (a = a
- .concat(d ? '' : '/?')
- .replace(/\/\(/g, '(?:/')
- .replace(/\+/g, '__plus__')
- .replace(/(\/)?(\.)?:(\w+)(?:(\(.*?\)))?(\?)?/g, function(
- a,
- c,
- d,
- e,
- f,
- g
- ) {
- return (
- b.push({ name: e, optional: !!g }),
- (c = c || ''),
- '' +
- (g ? '' : c) +
- '(?:' +
- (g ? c : '') +
- (d || '') +
- (f || (d && '([^/.]+?)') || '([^/]+?)') +
- ')' +
- (g || '')
- );
- })
- .replace(/([\/.])/g, '\\$1')
- .replace(/__plus__/g, '(.+)')
- .replace(/\*/g, '(.*)')),
- new RegExp('^' + a + '$', c ? '' : 'i'));
- },
- i = function(a, b) {
- var e = a.split(' '),
- f = 2 == e.length ? e[0] : null;
- (a = 2 == e.length ? e[1] : e[0]),
- d[a] || ((d[a] = new g(a, f)), c.push(d[a])),
- d[a].addHandler(b);
- },
- j = function(a, b) {
- if ('function' == typeof b) i(a, b), j.reload();
- else if ('object' == typeof a) {
- for (var c in a) i(c, a[c]);
- j.reload();
- } else 'undefined' == typeof b && j.navigate(a);
- };
- (j.lookup = function(a, b) {
- for (var d = 0, e = c.length; e > d; d++) {
- var f = c[d];
- if (f.name == a) return f.toURL(b);
- }
- }),
- (j.remove = function(a, b) {
- var c = d[a];
- c && c.removeHandler(b);
- }),
- (j.removeAll = function() {
- (d = {}), (c = []);
- }),
- (j.navigate = function(a, b) {
- b = b || {};
- var c = b.silent || !1;
- c && o(),
- setTimeout(function() {
- (window.location.hash = a),
- c &&
- setTimeout(function() {
- n();
- }, 1);
- }, 1);
- }),
- (j.noConflict = function() {
- return (a[e] = f), j;
- });
- var k = function() {
- return window.location.hash.substring(1);
- },
- l = function(a, b) {
- var c = [];
- return b.match(a, c) ? (b.run(c), !0) : !1;
- },
- m = (j.reload = function() {
- for (var a = k(), b = 0, d = c.length; d > b; b++) {
- var e = c[b];
- if (l(a, e)) return;
- }
- }),
- n = function() {
- a.addEventListener
- ? a.addEventListener('hashchange', m, !1)
- : a.attachEvent('onhashchange', m);
- },
- o = function() {
- a.removeEventListener
- ? a.removeEventListener('hashchange', m)
- : a.detachEvent('onhashchange', m);
- };
- return n(), b ? j : void (a[e] = j);
-};
-'undefined' == typeof module
- ? Routie(window)
- : (module.exports = Routie(window, !0));
diff --git a/examples/routing-fetching-templating/static/js/vendor/transparency.min.js b/examples/routing-fetching-templating/static/js/vendor/transparency.min.js
deleted file mode 100644
index a389eca0..00000000
--- a/examples/routing-fetching-templating/static/js/vendor/transparency.min.js
+++ /dev/null
@@ -1,840 +0,0 @@
-!(function t(e, n, r) {
- function i(s, u) {
- if (!n[s]) {
- if (!e[s]) {
- var l = 'function' == typeof require && require;
- if (!u && l) return l(s, !0);
- if (o) return o(s, !0);
- var a = new Error("Cannot find module '" + s + "'");
- throw ((a.code = 'MODULE_NOT_FOUND'), a);
- }
- var h = (n[s] = { exports: {} });
- e[s][0].call(
- h.exports,
- function(t) {
- var n = e[s][1][t];
- return i(n ? n : t);
- },
- h,
- h.exports,
- t,
- e,
- n,
- r
- );
- }
- return n[s].exports;
- }
- for (
- var o = 'function' == typeof require && require, s = 0;
- s < r.length;
- s++
- )
- i(r[s]);
- return i;
-})(
- {
- 1: [
- function(t, e, n) {
- var r,
- i,
- o,
- s,
- u,
- l =
- [].indexOf ||
- function(t) {
- for (var e = 0, n = this.length; n > e; e++)
- if (e in this && this[e] === t) return e;
- return -1;
- };
- (s = t('../lib/lodash.js')),
- (u = t('./helpers')),
- (i = t('./context')),
- (o = {}),
- (o.render = function(t, e, n, r) {
- var l, a;
- return (
- null == e && (e = []),
- null == n && (n = {}),
- null == r && (r = {}),
- (a = r.debug && console ? u.consoleLogger : u.nullLogger),
- a('Transparency.render:', t, e, n, r),
- t
- ? (s.isArray(e) || (e = [e]),
- (t = (l = u.data(t)).context || (l.context = new i(t, o))),
- t.render(e, n, r).el)
- : void 0
- );
- }),
- (o.matcher = function(t, e) {
- return (
- t.el.id === e ||
- l.call(t.classNames, e) >= 0 ||
- t.el.name === e ||
- t.el.getAttribute('data-bind') === e
- );
- }),
- (o.clone = function(t) {
- return r(t).clone()[0];
- }),
- (o.jQueryPlugin = u.chainable(function(t, e, n) {
- var r, i, s, u;
- for (u = [], i = 0, s = this.length; s > i; i++)
- (r = this[i]), u.push(o.render(r, t, e, n));
- return u;
- })),
- (('undefined' != typeof jQuery && null !== jQuery) ||
- ('undefined' != typeof Zepto && null !== Zepto)) &&
- ((r = jQuery || Zepto),
- null != r && (r.fn.render = o.jQueryPlugin)),
- ('undefined' != typeof e && null !== e ? e.exports : void 0) &&
- (e.exports = o),
- 'undefined' != typeof window &&
- null !== window &&
- (window.Transparency = o),
- ('undefined' != typeof define && null !== define
- ? define.amd
- : void 0) &&
- define(function() {
- return o;
- });
- },
- { '../lib/lodash.js': 7, './context': 3, './helpers': 5 }
- ],
- 2: [
- function(t, e, n) {
- var r,
- i,
- o,
- s,
- u,
- l,
- a,
- h,
- c = function(t, e) {
- function n() {
- this.constructor = t;
- }
- for (var r in e) p.call(e, r) && (t[r] = e[r]);
- return (
- (n.prototype = e.prototype),
- (t.prototype = new n()),
- (t.__super__ = e.prototype),
- t
- );
- },
- p = {}.hasOwnProperty;
- (a = t('../lib/lodash')),
- (h = t('./helpers')),
- (e.exports = i = {
- Attributes: {},
- createAttribute: function(t, e) {
- var n;
- return new (n = i.Attributes[e] || r)(t, e);
- }
- }),
- (r = (function() {
- function t(t, e) {
- (this.el = t),
- (this.name = e),
- (this.templateValue = this.el.getAttribute(this.name) || '');
- }
- return (
- (t.prototype.set = function(t) {
- return (
- (this.el[this.name] = t),
- this.el.setAttribute(this.name, t.toString())
- );
- }),
- t
- );
- })()),
- (o = (function(t) {
- function e(t, e) {
- (this.el = t),
- (this.name = e),
- (this.templateValue = this.el.getAttribute(this.name) || !1);
- }
- var n, r, o, s;
- for (
- c(e, t),
- n = [
- 'hidden',
- 'async',
- 'defer',
- 'autofocus',
- 'formnovalidate',
- 'disabled',
- 'autofocus',
- 'formnovalidate',
- 'multiple',
- 'readonly',
- 'required',
- 'checked',
- 'scoped',
- 'reversed',
- 'selected',
- 'loop',
- 'muted',
- 'autoplay',
- 'controls',
- 'seamless',
- 'default',
- 'ismap',
- 'novalidate',
- 'open',
- 'typemustmatch',
- 'truespeed'
- ],
- r = 0,
- o = n.length;
- o > r;
- r++
- )
- (s = n[r]), (i.Attributes[s] = e);
- return (
- (e.prototype.set = function(t) {
- return (
- (this.el[this.name] = t),
- t
- ? this.el.setAttribute(this.name, this.name)
- : this.el.removeAttribute(this.name)
- );
- }),
- e
- );
- })(r)),
- (l = (function(t) {
- function e(t, e) {
- var n;
- (this.el = t),
- (this.name = e),
- (this.templateValue = function() {
- var t, e, r, i;
- for (
- r = this.el.childNodes, i = [], t = 0, e = r.length;
- e > t;
- t++
- )
- (n = r[t]),
- n.nodeType === h.TEXT_NODE && i.push(n.nodeValue);
- return i;
- }
- .call(this)
- .join('')),
- (this.children = a.toArray(this.el.children)),
- (this.textNode = this.el.firstChild)
- ? this.textNode.nodeType !== h.TEXT_NODE &&
- (this.textNode = this.el.insertBefore(
- this.el.ownerDocument.createTextNode(''),
- this.textNode
- ))
- : this.el.appendChild(
- (this.textNode = this.el.ownerDocument.createTextNode(''))
- );
- }
- return (
- c(e, t),
- (i.Attributes.text = e),
- (e.prototype.set = function(t) {
- for (var e, n, r, i, o; (e = this.el.firstChild); )
- this.el.removeChild(e);
- for (
- this.textNode.nodeValue = t,
- this.el.appendChild(this.textNode),
- i = this.children,
- o = [],
- n = 0,
- r = i.length;
- r > n;
- n++
- )
- (e = i[n]), o.push(this.el.appendChild(e));
- return o;
- }),
- e
- );
- })(r)),
- (u = (function(t) {
- function e(t) {
- (this.el = t),
- (this.templateValue = ''),
- (this.children = a.toArray(this.el.children));
- }
- return (
- c(e, t),
- (i.Attributes.html = e),
- (e.prototype.set = function(t) {
- for (var e, n, r, i, o; (e = this.el.firstChild); )
- this.el.removeChild(e);
- for (
- this.el.innerHTML = t + this.templateValue,
- i = this.children,
- o = [],
- n = 0,
- r = i.length;
- r > n;
- n++
- )
- (e = i[n]), o.push(this.el.appendChild(e));
- return o;
- }),
- e
- );
- })(r)),
- (s = (function(t) {
- function e(t) {
- e.__super__.constructor.call(this, t, 'class');
- }
- return c(e, t), (i.Attributes['class'] = e), e;
- })(r));
- },
- { '../lib/lodash': 7, './helpers': 5 }
- ],
- 3: [
- function(t, e, n) {
- var r, i, o, s, u, l, a;
- (a = t('./helpers')),
- (s = a.before),
- (o = a.after),
- (u = a.chainable),
- (l = a.cloneNode),
- (i = t('./instance')),
- (e.exports = r = (function() {
- function t(t, e) {
- (this.el = t),
- (this.Transparency = e),
- (this.template = l(this.el)),
- (this.instances = [new i(this.el, this.Transparency)]),
- (this.instanceCache = []);
- }
- var e, n;
- return (
- (n = u(function() {
- return (
- (this.parent = this.el.parentNode),
- this.parent
- ? ((this.nextSibling = this.el.nextSibling),
- this.parent.removeChild(this.el))
- : void 0
- );
- })),
- (e = u(function() {
- return this.parent
- ? this.nextSibling
- ? this.parent.insertBefore(this.el, this.nextSibling)
- : this.parent.appendChild(this.el)
- : void 0;
- })),
- (t.prototype.render = s(n)(
- o(e)(
- u(function(t, e, n) {
- for (
- var r, o, s, u, a, h, c;
- t.length < this.instances.length;
-
- )
- this.instanceCache.push(this.instances.pop().remove());
- for (; t.length > this.instances.length; )
- (u =
- this.instanceCache.pop() ||
- new i(l(this.template), this.Transparency)),
- this.instances.push(u.appendTo(this.el));
- for (c = [], s = o = 0, a = t.length; a > o; s = ++o)
- (h = t[s]),
- (u = this.instances[s]),
- (r = []),
- c.push(
- u
- .prepare(h, r)
- .renderValues(h, r)
- .renderDirectives(h, s, e)
- .renderChildren(h, r, e, n)
- );
- return c;
- })
- )
- )),
- t
- );
- })());
- },
- { './helpers': 5, './instance': 6 }
- ],
- 4: [
- function(t, e, n) {
- var r,
- i,
- o,
- s,
- u,
- l,
- a,
- h,
- c,
- p,
- f,
- d = {}.hasOwnProperty,
- m = function(t, e) {
- function n() {
- this.constructor = t;
- }
- for (var r in e) d.call(e, r) && (t[r] = e[r]);
- return (
- (n.prototype = e.prototype),
- (t.prototype = new n()),
- (t.__super__ = e.prototype),
- t
- );
- };
- (p = t('../lib/lodash.js')),
- (f = t('./helpers')),
- (r = t('./attributeFactory')),
- (e.exports = s = {
- Elements: { input: {} },
- createElement: function(t) {
- var e, n;
- return new (e =
- 'input' === (n = t.nodeName.toLowerCase())
- ? s.Elements[n][t.type.toLowerCase()] || u
- : s.Elements[n] || o)(t);
- }
- }),
- (o = (function() {
- function t(t) {
- (this.el = t),
- (this.attributes = {}),
- (this.childNodes = p.toArray(this.el.childNodes)),
- (this.nodeName = this.el.nodeName.toLowerCase()),
- (this.classNames = this.el.className.split(' ')),
- (this.originalAttributes = {});
- }
- return (
- (t.prototype.empty = function() {
- for (var t; (t = this.el.firstChild); ) this.el.removeChild(t);
- return this;
- }),
- (t.prototype.reset = function() {
- var t, e, n, r;
- (n = this.attributes), (r = []);
- for (e in n) (t = n[e]), r.push(t.set(t.templateValue));
- return r;
- }),
- (t.prototype.render = function(t) {
- return this.attr('text', t);
- }),
- (t.prototype.attr = function(t, e) {
- var n, i;
- return (
- (n =
- (i = this.attributes)[t] ||
- (i[t] = r.createAttribute(this.el, t, e))),
- null != e && n.set(e),
- n
- );
- }),
- (t.prototype.renderDirectives = function(t, e, n) {
- var r, i, o, s;
- o = [];
- for (i in n)
- d.call(n, i) &&
- ((r = n[i]),
- 'function' == typeof r &&
- ((s = r.call(t, {
- element: this.el,
- index: e,
- value: this.attr(i).templateValue
- })),
- null != s ? o.push(this.attr(i, s)) : o.push(void 0)));
- return o;
- }),
- t
- );
- })()),
- (a = (function(t) {
- function e(t) {
- e.__super__.constructor.call(this, t),
- (this.elements = f.getElements(t));
- }
- return (
- m(e, t),
- (s.Elements.select = e),
- (e.prototype.render = function(t) {
- var e, n, r, i, o;
- for (
- t = t.toString(),
- i = this.elements,
- o = [],
- e = 0,
- n = i.length;
- n > e;
- e++
- )
- (r = i[e]),
- 'option' === r.nodeName &&
- o.push(r.attr('selected', r.el.value === t));
- return o;
- }),
- e
- );
- })(o)),
- (c = (function(t) {
- function e() {
- return e.__super__.constructor.apply(this, arguments);
- }
- var n, r, i, o;
- for (
- m(e, t),
- n = [
- 'area',
- 'base',
- 'br',
- 'col',
- 'command',
- 'embed',
- 'hr',
- 'img',
- 'input',
- 'keygen',
- 'link',
- 'meta',
- 'param',
- 'source',
- 'track',
- 'wbr'
- ],
- r = 0,
- i = n.length;
- i > r;
- r++
- )
- (o = n[r]), (s.Elements[o] = e);
- return (
- (e.prototype.attr = function(t, n) {
- return 'text' !== t && 'html' !== t
- ? e.__super__.attr.call(this, t, n)
- : void 0;
- }),
- e
- );
- })(o)),
- (u = (function(t) {
- function e() {
- return e.__super__.constructor.apply(this, arguments);
- }
- return (
- m(e, t),
- (e.prototype.render = function(t) {
- return this.attr('value', t);
- }),
- e
- );
- })(c)),
- (h = (function(t) {
- function e() {
- return e.__super__.constructor.apply(this, arguments);
- }
- return m(e, t), (s.Elements.textarea = e), e;
- })(u)),
- (i = (function(t) {
- function e() {
- return e.__super__.constructor.apply(this, arguments);
- }
- return (
- m(e, t),
- (s.Elements.input.checkbox = e),
- (e.prototype.render = function(t) {
- return this.attr('checked', Boolean(t));
- }),
- e
- );
- })(u)),
- (l = (function(t) {
- function e() {
- return e.__super__.constructor.apply(this, arguments);
- }
- return m(e, t), (s.Elements.input.radio = e), e;
- })(i));
- },
- { '../lib/lodash.js': 7, './attributeFactory': 2, './helpers': 5 }
- ],
- 5: [
- function(t, e, n) {
- var r, i, o, s;
- (r = t('./elementFactory')),
- (n.before = function(t) {
- return function(e) {
- return function() {
- return t.apply(this, arguments), e.apply(this, arguments);
- };
- };
- }),
- (n.after = function(t) {
- return function(e) {
- return function() {
- return e.apply(this, arguments), t.apply(this, arguments);
- };
- };
- }),
- (n.chainable = n.after(function() {
- return this;
- })),
- (n.onlyWith$ = function(t) {
- return ('undefined' != typeof jQuery && null !== jQuery) ||
- ('undefined' != typeof Zepto && null !== Zepto)
- ? (function(e) {
- return t(arguments);
- })(jQuery || Zepto)
- : void 0;
- }),
- (n.getElements = function(t) {
- var e;
- return (e = []), i(t, e), e;
- }),
- (i = function(t, e) {
- var o, s;
- for (o = t.firstChild, s = []; o; )
- o.nodeType === n.ELEMENT_NODE &&
- (e.push(new r.createElement(o)), i(o, e)),
- s.push((o = o.nextSibling));
- return s;
- }),
- (n.ELEMENT_NODE = 1),
- (n.TEXT_NODE = 3),
- (s = function() {
- return (
- '<:nav>' !==
- document.createElement('nav').cloneNode(!0).outerHTML
- );
- }),
- (n.cloneNode =
- 'undefined' == typeof document || null === document || s()
- ? function(t) {
- return t.cloneNode(!0);
- }
- : function(t) {
- var e, r, i, s, u;
- if (
- ((e = Transparency.clone(t)), e.nodeType === n.ELEMENT_NODE)
- )
- for (
- e.removeAttribute(o),
- u = e.getElementsByTagName('*'),
- i = 0,
- s = u.length;
- s > i;
- i++
- )
- (r = u[i]), r.removeAttribute(o);
- return e;
- }),
- (o = 'transparency'),
- (n.data = function(t) {
- return t[o] || (t[o] = {});
- }),
- (n.nullLogger = function() {}),
- (n.consoleLogger = function() {
- return console.log(arguments);
- }),
- (n.log = n.nullLogger);
- },
- { './elementFactory': 4 }
- ],
- 6: [
- function(t, e, n) {
- var r,
- i,
- o,
- s,
- u = {}.hasOwnProperty;
- (i = t('../lib/lodash.js')),
- (o = (s = t('./helpers')).chainable),
- (e.exports = r = (function() {
- function t(t, e) {
- (this.Transparency = e),
- (this.queryCache = {}),
- (this.childNodes = i.toArray(t.childNodes)),
- (this.elements = s.getElements(t));
- }
- return (
- (t.prototype.remove = o(function() {
- var t, e, n, r, i;
- for (
- r = this.childNodes, i = [], t = 0, e = r.length;
- e > t;
- t++
- )
- (n = r[t]), i.push(n.parentNode.removeChild(n));
- return i;
- })),
- (t.prototype.appendTo = o(function(t) {
- var e, n, r, i, o;
- for (
- i = this.childNodes, o = [], e = 0, n = i.length;
- n > e;
- e++
- )
- (r = i[e]), o.push(t.appendChild(r));
- return o;
- })),
- (t.prototype.prepare = o(function(t) {
- var e, n, r, i, o;
- for (i = this.elements, o = [], n = 0, r = i.length; r > n; n++)
- (e = i[n]), e.reset(), o.push((s.data(e.el).model = t));
- return o;
- })),
- (t.prototype.renderValues = o(function(t, e) {
- var n, r, o, s;
- if (i.isElement(t) && (n = this.elements[0]))
- return n.empty().el.appendChild(t);
- if ('object' == typeof t) {
- o = [];
- for (r in t)
- u.call(t, r) &&
- ((s = t[r]),
- null != s &&
- (i.isString(s) ||
- i.isNumber(s) ||
- i.isBoolean(s) ||
- i.isDate(s)
- ? o.push(
- function() {
- var t, e, i, o;
- for (
- i = this.matchingElements(r),
- o = [],
- t = 0,
- e = i.length;
- e > t;
- t++
- )
- (n = i[t]), o.push(n.render(s));
- return o;
- }.call(this)
- )
- : 'object' == typeof s
- ? o.push(e.push(r))
- : o.push(void 0)));
- return o;
- }
- })),
- (t.prototype.renderDirectives = o(function(t, e, n) {
- var r, i, o, s;
- s = [];
- for (o in n)
- u.call(n, o) &&
- ((r = n[o]),
- 'object' == typeof r &&
- ('object' != typeof t && (t = { value: t }),
- s.push(
- function() {
- var n, s, u, l;
- for (
- u = this.matchingElements(o),
- l = [],
- n = 0,
- s = u.length;
- s > n;
- n++
- )
- (i = u[n]), l.push(i.renderDirectives(t, e, r));
- return l;
- }.call(this)
- )));
- return s;
- })),
- (t.prototype.renderChildren = o(function(t, e, n, r) {
- var i, o, s, u, l;
- for (l = [], o = 0, u = e.length; u > o; o++)
- (s = e[o]),
- l.push(
- function() {
- var e, o, u, l;
- for (
- u = this.matchingElements(s),
- l = [],
- e = 0,
- o = u.length;
- o > e;
- e++
- )
- (i = u[e]),
- l.push(
- this.Transparency.render(i.el, t[s], n[s], r)
- );
- return l;
- }.call(this)
- );
- return l;
- })),
- (t.prototype.matchingElements = function(t) {
- var e, n, r;
- return (
- (r =
- (e = this.queryCache)[t] ||
- (e[t] = function() {
- var e, r, i, o;
- for (
- i = this.elements, o = [], e = 0, r = i.length;
- r > e;
- e++
- )
- (n = i[e]),
- this.Transparency.matcher(n, t) && o.push(n);
- return o;
- }.call(this))),
- s.log("Matching elements for '" + t + "':", r),
- r
- );
- }),
- t
- );
- })());
- },
- { '../lib/lodash.js': 7, './helpers': 5 }
- ],
- 7: [
- function(t, e, n) {
- var r = {};
- (r.toString = Object.prototype.toString),
- (r.toArray = function(t) {
- for (var e = new Array(t.length), n = 0; n < t.length; n++)
- e[n] = t[n];
- return e;
- }),
- (r.isString = function(t) {
- return '[object String]' == r.toString.call(t);
- }),
- (r.isNumber = function(t) {
- return '[object Number]' == r.toString.call(t);
- }),
- (r.isArray =
- Array.isArray ||
- function(t) {
- return '[object Array]' === r.toString.call(t);
- }),
- (r.isDate = function(t) {
- return '[object Date]' === r.toString.call(t);
- }),
- (r.isElement = function(t) {
- return !(!t || 1 !== t.nodeType);
- }),
- (r.isPlainValue = function(t) {
- var e;
- return (
- (e = typeof t),
- ('object' !== e && 'function' !== e) || n.isDate(t)
- );
- }),
- (r.isBoolean = function(t) {
- return t === !0 || t === !1;
- }),
- (e.exports = r);
- },
- {}
- ]
- },
- {},
- [1]
-);
diff --git a/examples/user-stories/endless-medical.html b/examples/user-stories/endless-medical.html
deleted file mode 100644
index c3ca8943..00000000
--- a/examples/user-stories/endless-medical.html
+++ /dev/null
@@ -1,129 +0,0 @@
-
-
-
-
-
-
-
- JSON laden
-
-
-
-
-
-
-
Als patient, wil ik zelf thuis een bertouwbare diagnose kunnen stellen, zodat ik beter kan inschatten of ik een afspraak bij de huisarts moet maken.
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/user-stories/fdnd-quotes.html b/examples/user-stories/fdnd-quotes.html
deleted file mode 100644
index 56699567..00000000
--- a/examples/user-stories/fdnd-quotes.html
+++ /dev/null
@@ -1,129 +0,0 @@
-
-
-
-
-
-
-
- JSON laden
-
-
-
-
-
-
-
Als student digital design, wil ik inspirerende web design quotes kunnen bekijken, zodat ik weer een beetje energie krijg wanneer ik het even niet meer zie zitten met al die hard-core deadlines die op me afkomen.
-
-
-
Er is nog niets geladen ...
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/user-stories/frisbee-tournament.html b/examples/user-stories/frisbee-tournament.html
deleted file mode 100644
index 165699a8..00000000
--- a/examples/user-stories/frisbee-tournament.html
+++ /dev/null
@@ -1,142 +0,0 @@
-
-
-
-
-
-
-
- JSON laden
-
-
-
-
-
-
-
Als frisbee speler, wil ik na een wedstrijd de scores kunnen opslaan en doorgeven, zodat ik weet waar en wanneer we de volgende wedstrijd moeten spelen.
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/user-stories/healthy-food-checker.html b/examples/user-stories/healthy-food-checker.html
deleted file mode 100644
index 8faaf650..00000000
--- a/examples/user-stories/healthy-food-checker.html
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
-
-
-
- JSON laden
-
-
-
-
-
-
-
Als foodie, wil ik tijdens het boodschappen doen makkelijk informatie over een product kunnen zoeken en bekijken, zodat ik goede keuze kan maken of het bij mijn dieet past.
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/user-stories/index.html b/examples/user-stories/index.html
deleted file mode 100644
index 1b590e54..00000000
--- a/examples/user-stories/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
-
-
-
-
-
-
-
- Ajax starting point
-
-
-
-
-
-
-
Ajax starting point
-
-
-
-
The Conqueror Worm, Edgar Allen Poe, 1843
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/user-stories/rijksmuseum.html b/examples/user-stories/rijksmuseum.html
deleted file mode 100644
index 228c4235..00000000
--- a/examples/user-stories/rijksmuseum.html
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-
-
-
-
-
- JSON laden
-
-
-
-
-
-
-
Als kunstliefhebber, wil ik thuis kunst uit het Rijksmuseum kunnen zoeken en bekijken, zodat ik tijdens een lockdown toch van kunst kan genieten.
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/user-stories/t-shirt-maker.html b/examples/user-stories/t-shirt-maker.html
deleted file mode 100644
index 26f1c79e..00000000
--- a/examples/user-stories/t-shirt-maker.html
+++ /dev/null
@@ -1,96 +0,0 @@
-
-
-
-
-
-
-
- JSON laden
-
-
-
-
-
-
-
-
-
-
- This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
- Learn more about bidirectional Unicode characters
-
-
-
-
-
-
- You canβt perform that action at this time.
-
-
-
-
- You signed in with another tab or window. Reload to refresh your session.
- You signed out in another tab or window. Reload to refresh your session.
-
-
-
-
- This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
- Learn more about bidirectional Unicode characters
-
-
-
-
-
-
- You canβt perform that action at this time.
-
-
-
-
- You signed in with another tab or window. Reload to refresh your session.
- You signed out in another tab or window. Reload to refresh your session.
-
-
-
-
- This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
- Learn more about bidirectional Unicode characters
-
-
-
-
-
-
- You canβt perform that action at this time.
-
-
-
-
- You signed in with another tab or window. Reload to refresh your session.
- You signed out in another tab or window. Reload to refresh your session.
-
-
-
-
- This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
- Learn more about bidirectional Unicode characters
-
-
-
-
-
-
- You canβt perform that action at this time.
-
-
-
-
- You signed in with another tab or window. Reload to refresh your session.
- You signed out in another tab or window. Reload to refresh your session.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..fa6b4c82
--- /dev/null
+++ b/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..96671f79
--- /dev/null
+++ b/main.js
@@ -0,0 +1,18 @@
+// app.js
+
+// Import the displayQuote function from the render.js module
+import { displayQuote } from './modules/render.js';
+
+// Add an event listener to the category select element that calls the displayQuote function when the value changes
+const categorySelect = document.getElementById("category-select");
+categorySelect.addEventListener("change", displayQuote); // call function when value changes
+
+// Call the displayQuote function on DOMContentLoaded and when the "New Quote" button is clicked
+document.addEventListener('DOMContentLoaded', () => {
+ displayQuote();
+
+ const newQuoteButton = document.getElementById('new-quote-btn');
+ newQuoteButton.addEventListener('click', () => {
+ displayQuote();
+ });
+});
\ No newline at end of file
diff --git a/modules/api.js b/modules/api.js
new file mode 100644
index 00000000..f20e791a
--- /dev/null
+++ b/modules/api.js
@@ -0,0 +1,21 @@
+// Fetches data from the API based on the maximum number of characters in a quote and a specified category
+export async function fetchData(maxChars, category) {
+ 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'} // Add API key to headers
+ });
+
+ const data = await response.json(); // Parse the response data as JSON
+ const filteredData = data.filter(quote => quote.quote.length <= maxChars); // Filter the data to only include quotes with less than or equal to the specified maximum number of characters
+
+ if (filteredData.length === 0) { // if quote is equal to 0
+ throw new Error('No quotes found'); // throw error
+ }
+
+ return filteredData; // Return the filtered data
+ } catch (error) {
+ console.error('Error fetching data:', error); // Log any errors that occur during the fetch
+ }
+}
diff --git a/modules/render.js b/modules/render.js
new file mode 100644
index 00000000..929793b2
--- /dev/null
+++ b/modules/render.js
@@ -0,0 +1,39 @@
+// Import the fetchData function from the api.js file
+import { fetchData } from './api.js';
+
+// Get the quote and author elements from the DOM
+const quoteElement = document.getElementById("quote");
+const authorElement = document.getElementById("author");
+
+
+
+// Get the category select element from the DOM
+const categorySelect = document.getElementById("category-select");
+
+// Get the selected category value from the category select element
+const category = categorySelect.value;
+
+// Define a function to display a random quote from the selected category
+export function displayQuote() {
+ // Add loading class to quote and author elements
+ quoteElement.classList.add('loading');
+ authorElement.classList.add('loading');
+
+ // Clear the quote and author elements
+ quoteElement.innerHTML = '';
+ authorElement.innerHTML = '';
+
+ // Call the fetchData function to get a random quote from the selected category
+ fetchData(80,category).then(data => {
+ const randomQuote = data[Math.floor(Math.random() * data.length)];
+
+ // Remove loading class from quote and author elements
+ quoteElement.classList.remove('loading');
+ authorElement.classList.remove('loading');
+
+ // Update quote and author elements with fetched data
+ quoteElement.textContent = randomQuote.quote;
+ authorElement.textContent = randomQuote.author;
+
+ });
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..3bc5f7a5
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,176 @@
+@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@700&family=Cantata+One&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+background-color: #fbfeff;
+font-family: Cantata;
+}
+
+h1 {
+ font-size: 5em
+}
+
+#author {
+ font-size: 1.5em;
+ grid-row: 3;
+}
+
+#page-number {
+ font-size: 1.5em;
+}
+
+#quote,#author {
+}
+
+
+#quatation-mark {
+ font-size: 10em;
+ font-family: BIZ UDPGothic;
+ grid-column: 1/1;
+}
+
+#category-select {
+grid-column: 2/4;
+-webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ font-size: 18px;
+ color: #161616;
+ border: none;
+ text-align: center;
+ background-color: buttonface;
+ border-radius: 25px;
+ max-height: 7vh;
+}
+
+#new-quote-btn{
+grid-row:4;
+grid-column: 1/4;
+ font-size: 18px;
+ 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;
+ user-select: none;
+ -webkit-user-select: none;
+ height: 100px;
+}
+
+#new-quote-btn:active {
+ box-shadow: 0px 0px 0px 0px;
+ top: 5px;
+ left: 5px;
+}
+
+
+container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr 1fr;
+ row-gap: 1em;
+ 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 {
+ font-size: 1.5em;
+ overflow-wrap: break-word;
+}
+
+#quote {
+height:50vh;
+grid-column: 1/4;
+}
+
+#new-quote-btn {
+height: 50px;
+}
+
+#page-number{
+ font-size: 1.5em;
+ grid-column-start: 3;
+ grid-row: 4;
+ align-self: end;
+}
+
+}
+
+/* to hide the overflow of the skeleton state due transform overflow is used */
+.loading {
+ background: #c1c1c1;
+ min-height: 30px;
+ position:relative;
+ overflow:hidden;
+ border-radius: 2px;
+}
+
+.loading:nth-of-type(2) {
+ max-height: 30px;
+}
+
+.loading::before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(to right, transparent, #d0d0d0, transparent);
+ transform: translateX(-100%);
+ animation: loading 1s infinite;
+
+}
+
+@keyframes loading {
+100% {
+ transform: translateX(100%);
+}
+
+}
+
+
+
+
+
+
+
+
+
diff --git a/visitekaartje/Rachid-ai.png b/visitekaartje/Rachid-ai.png
new file mode 100644
index 00000000..c1f1ed5d
Binary files /dev/null and b/visitekaartje/Rachid-ai.png differ
diff --git a/visitekaartje/Rachid-ai.psd b/visitekaartje/Rachid-ai.psd
new file mode 100644
index 00000000..2341b8c1
Binary files /dev/null and b/visitekaartje/Rachid-ai.psd differ
diff --git a/visitekaartje/github.png b/visitekaartje/github.png
new file mode 100644
index 00000000..480fbd96
Binary files /dev/null and b/visitekaartje/github.png differ
diff --git a/visitekaartje/index.html b/visitekaartje/index.html
index 8b137891..49fde18e 100644
--- a/visitekaartje/index.html
+++ b/visitekaartje/index.html
@@ -1 +1,63 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+