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 - - - - - - - - - -
-
- -
-

Giphy

-
- - - -
- wait for it! -
- - diff --git a/examples/modules/static/css/style.css b/examples/modules/static/css/style.css deleted file mode 100644 index a1121d75..00000000 --- a/examples/modules/static/css/style.css +++ /dev/null @@ -1,111 +0,0 @@ -* { - box-sizing: border-box; -} -html { - margin: 0; - padding: 0; - font: 100% / 200% 'Trebuchet MS'; -} -body { - font-size: 1em; - padding: 0 0 5rem; - margin: 0; - color: pink; - background-color: #000; - scroll-behavior: smooth; -} -ul { - list-style: none; -} -main { - padding: 1em; - display: flex; -} -main header { - width: 100%; -} -main article { - transform: translate(1rem, 2rem); -} -h1 { - width: 100%; - font-size: 1.5em; - line-height: 1.25; -} -h1 em { - font-size: 2.5em; - color: #f8e7ea; - font-weight: normal; -} - -a { - color: aqua; -} -section { - background-color: aqua; - padding: 1rem; - color: #000; - opacity: 0; - transition: 0.25s; - position: absolute; - width: 100%; - top: 5em; - left: 0; - display: flex; - flex-wrap: wrap; - z-index: 10; -} -section[data-route='giphy'] img { - width: 80vw; - height: auto; -} -section h2 { - width: 100%; -} -section.active { - opacity: 1; - z-index: 20; -} -section a { - color: #000; -} - -article { - border-width: 1px 0; - margin: 1rem; -} - -img { - height: 20vw; -} -footer { - background-color: pink; - color: #000; - position: fixed; - bottom: 0; - right: 0; - padding: 1rem; - z-index:100; -} -div.loader { - animation: fontbulger 0.5s infinite; - opacity: 0; - transition: 0.25s; - transition-delay: 0.3s; - position: absolute; - top: 1rem; - right: 1rem; -} -div.loading { - opacity: 1; - transition-delay: 0; -} - -@keyframes fontbulger { - 0%, - 100% { - } - 50% { - transform: scale(1.2, 1.2); - } -} diff --git a/examples/modules/static/js/app.js b/examples/modules/static/js/app.js deleted file mode 100644 index e9495daa..00000000 --- a/examples/modules/static/js/app.js +++ /dev/null @@ -1,5 +0,0 @@ -import { handleRoutes } from './modules/router.js' - - -handleRoutes() - diff --git a/examples/modules/static/js/modules/data.js b/examples/modules/static/js/modules/data.js deleted file mode 100644 index 2bbe8c23..00000000 --- a/examples/modules/static/js/modules/data.js +++ /dev/null @@ -1,66 +0,0 @@ -import { state } from './state.js' -import { $ } from './ui.js' - -export function get(id) { - const endpoint = 'https://api.giphy.com/v1/gifs/' - const query = 'search?q=' - const topic = 'kitten' - const key = 'jhcL7QPGb2ObrOHw1dEJuL9w2j71zfEk' - const limit = 25 - let url = '' - - id - ? url = `${endpoint}${id}?api_key=${key}` - : url = `${endpoint}${query}${topic}&api_key=${key}&limit=${limit}` - - state('loading') - - return fetch(url) - .then(response => response.json()) - .then(json => filter(json)) - .then(data => clean(data)) - .then(data => calcBytes(data)) - .catch(err => state(err)) - .finally(() => state('loaded')) -} - -function filter(json) { - // Filter on Content Rating Level 1: G - // Contains images that are broadly accepted as appropriate and commonly witnessed by people in a public environment. - // https://developers.giphy.com/docs/optional-settings#rating - const ratingLevel = 'g' - const data = json.data - - // Convert single item in array πŸ’©, refactor later! - let giphies = [] - - !Array.isArray(data) - ? giphies.push(data) - : giphies = data - - return giphies.filter(giphy => giphy.rating === ratingLevel) -} - -function clean(data) { - return data.map(giphy => { - const {id, title, images} = giphy - const size = Number(images.original.size) - return { - id, - title, - size - } - }) -} - -function calcBytes(data) { - const totalSize = data.reduce((prev,curr) => { - return (prev + curr.size) - }, 0) - - $('footer').innerHTML = `Total image size: ${totalSize} bytes` - - return data -} - - diff --git a/examples/modules/static/js/modules/render.js b/examples/modules/static/js/modules/render.js deleted file mode 100644 index 78700f8d..00000000 --- a/examples/modules/static/js/modules/render.js +++ /dev/null @@ -1,47 +0,0 @@ -import { $ } from './ui.js' - -export function render(data, id) { - if (!id) { - collection(data) - } else { - item(data) - } -} - -function collection(data) { - const section = $('section[data-route=gifs]') - - data.forEach((item) => { - const { id } = item - const html = ` -
- - - -
- `; - - section.insertAdjacentHTML('beforeend', html) - }) -} - -function item(data) { - const section = $('section[data-route=giphy]') - const { title, id } = data[0] - - const html = ` -
-

${title}

- -
- `; - - clearElement(section) - section.insertAdjacentHTML('beforeend', html) -} - -function clearElement(node) { - while (node.firstChild) { - node.removeChild(node.lastChild) - } -} diff --git a/examples/modules/static/js/modules/router.js b/examples/modules/static/js/modules/router.js deleted file mode 100644 index 3ba24abf..00000000 --- a/examples/modules/static/js/modules/router.js +++ /dev/null @@ -1,26 +0,0 @@ -import { get as getData } from './data.js' -import { render } from './render.js' -import { updateUI } from './ui.js' -import './vendor/routie.min.js' - -export function handleRoutes() { - routie( - { - 'gifs': () => { //entreepagina - getData().then(data => { - render(data) - updateUI('gifs') - }); - }, - 'gifs/:id': id => { //detailpagina - getData(id).then(data => { - render(data, id) - updateUI('giphy') - }); - }, - 'about': () => { - updateUI('about') - } - - }) -} diff --git a/examples/modules/static/js/modules/state.js b/examples/modules/static/js/modules/state.js deleted file mode 100644 index 50f35e27..00000000 --- a/examples/modules/static/js/modules/state.js +++ /dev/null @@ -1,8 +0,0 @@ -import { $ } from './ui.js' - -export function state(current) { - const loader = $('div.loader') - current === 'loading' - ? loader.classList.add('loading') - : loader.classList.remove('loading') -} diff --git a/examples/modules/static/js/modules/ui.js b/examples/modules/static/js/modules/ui.js deleted file mode 100644 index 1aaf9e6c..00000000 --- a/examples/modules/static/js/modules/ui.js +++ /dev/null @@ -1,18 +0,0 @@ -export function updateUI(route) { - const sections = $$('section'); - const activeSection = $(`[data-route=${route}]`); - - sections.forEach(section => { - section.classList.remove('active') - }); - - activeSection.classList.add('active') -} - -export function $(element){ - return document.querySelector(element) -} - -export function $$(elements){ - return document.querySelectorAll(elements) -} diff --git a/examples/modules/static/js/modules/vendor/routie.min.js b/examples/modules/static/js/modules/vendor/routie.min.js deleted file mode 100644 index 0c47f45c..00000000 --- a/examples/modules/static/js/modules/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/readme.md b/examples/readme.md deleted file mode 100644 index d5f4b8ad..00000000 --- a/examples/readme.md +++ /dev/null @@ -1,16 +0,0 @@ -# Examples of patterns used with SPA's - -## Local Storage -[Livelink](https://codepen.io/Senpaizuri/pen/LYVZjQB) - -## Routing, fetching and templating in functions -[Livelink] - -## Routing, fetching, rendering in methods which live in objects -This example goes one step further and scopes functions to objects, one step closer to modules. - -[Livelink](https://vizhub.com/Razpudding/21168a56571643e8ba7951892787f9b3?edit=files&file=index.js) - -## Routing, fetching, rendering in methods which live in modules -This example takes the previous example one stap further and converts the objects to modules. -[Livelink] diff --git a/examples/routing-fetching-templating/index.html b/examples/routing-fetching-templating/index.html deleted file mode 100644 index 59c6066b..00000000 --- a/examples/routing-fetching-templating/index.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - Developers - - - - - - -
-
-

Debugging with DevTools

- -
- - - - - -
- -
-
-

Network

- -

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:

- - -

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.

- -

From: developers.google.com

- - Back to top -
- -
-

Console

-

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.

-

From: developers.google.com

- - Back to top -
- -
-

Debugger

-

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.

-

From: developers.google.com

- Back to top -
- -
-

Errors

-

Are no fun...

- Back to top -
-
- - - - - - - - diff --git a/examples/routing-fetching-templating/static/css/style.css b/examples/routing-fetching-templating/static/css/style.css deleted file mode 100644 index fa28c1c1..00000000 --- a/examples/routing-fetching-templating/static/css/style.css +++ /dev/null @@ -1,94 +0,0 @@ -* { - box-sizing: border-box; -} -html { - margin: 0; - padding: 0; - font: 100% / 200% 'Trebuchet MS'; -} -body { - font-size: 1em; - padding: 0; - margin: 0; - color: pink; - background-color: #000; - max-width: 50em; - margin: 0 auto 100em; -} -main { - padding: 1em; - display: flex; -} -main header { - width: 100%; -} -main article { - transform: translate(1rem, 2rem); -} -h1 { - width: 100%; - font-size: 1.5em; - line-height: 1.25; -} -h1 em { - font-size: 2.5em; - color: #f8e7ea; - font-weight: normal; -} -article h2 { - position: absolute; - left: -666em; -} -a { - color: pink; -} -div.wrapper { - position: relative; - - background-color: pink; -} -section { - padding: 1rem; - color: #000; - opacity: 0; - transition: 0.25s; - position: absolute; - width: 100%; - top: 0; - left: 0; -} -section.active { - opacity: 1; -} -section a { - color: #000; -} -section[data-route='network'] { - background-color: #efb399; -} -section[data-route='console'] { - background-color: #d17249; -} -section[data-route='debugger'] { - background-color: #bdffbe; -} -section[data-route='errors'] { - background-color: #78cc50; -} -article { - border-width: 1px 0; - margin: 1rem; -} - -img { - height: 20vw; -} -footer { - background-color: pink; - color: #000; - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - padding: 1rem; -} diff --git a/examples/routing-fetching-templating/static/js/app.js b/examples/routing-fetching-templating/static/js/app.js deleted file mode 100644 index af3efda2..00000000 --- a/examples/routing-fetching-templating/static/js/app.js +++ /dev/null @@ -1,83 +0,0 @@ -/*** Handle routes -> refactor into module later ***/ -const sections = document.querySelectorAll('section'); - -routie({ - //#giphy/425367 - 'giphy/:id': id => { - console.log(id); - }, - network: () => { - updateUI('network'); - }, - console: () => { - updateUI('console'); - }, - debugger: () => { - updateUI('debugger'); - }, - errors: () => { - updateUI('errors'); - } -}); - -// update UI from route (hashchange) -function updateUI(route) { - sections.forEach(section => { - section.classList.remove('active'); - }); - activeSection = document.querySelector(`[data-route=${route}]`); - console.log(activeSection); - activeSection.classList.add('active'); -} - -/*** Fetching data -> refactor into module later ***/ -const main = document.querySelector('main'); -const endpoint = 'https://api.giphy.com/v1/gifs/search?q='; -const topic = 'developer'; -const key = 'jhcL7QPGb2ObrOHw1dEJuL9w2j71zfEk'; -const limit = 1; -const url = `${endpoint}${topic}&api_key=${key}&limit=${limit}`; - -fetch(url) - .then(response => { - return response.json(); - }) - .then(data => { - render(data.data); - }) - .catch(err => { - console.log(err); - }); - -// render data -function render(data) { - data.forEach((item, i) => { - const html = ` -
-

${item.title}

- - - - -
- `; - 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 - - - - - - -

T-Shirt Maker

- -
-
- - - - \ No newline at end of file diff --git a/examples/user-stories/verse1.txt b/examples/user-stories/verse1.txt deleted file mode 100644 index e49c9932..00000000 --- a/examples/user-stories/verse1.txt +++ /dev/null @@ -1,1628 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - learning-area/verse1.txt at main Β· mdn/learning-area Β· GitHub - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Skip to content - - - - - - - - - - -
- -
- - - - - - - -
- - - -
- - - - - - - - - - -
-
-
- - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - - - - Permalink - - -
- -
-
- - - main - - - - -
-
-
- Switch branches/tags - -
- - - -
- -
- -
- - -
- -
- - - - - - - - - - - - - - - - -
- - -
-
-
-
- -
- -
- - - - Go to file - - -
- - - - -
-
-
- - - - -
- -
-
- - @chrisdavidmills - - -
- - Latest commit - c2f9787 - Mar 13, 2017 - - - - - - History - - -
-
- -
- -
-
- - - 1 - - contributor - - -
- -

- Users who have contributed to this file -

-
- - - - - - -
-
-
-
- - - - - - - -
- -
- - -
- - 16 lines (16 sloc) - - 506 Bytes -
- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - -
-
- -
- -
-
- - - -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Lo! 'tis a gala night
Within the lonesome latter years!
An angel throng, bewinged, bedight
In veils, and drowned in tears,
Sit in a theatre, to see
A play of hopes and fears,
While the orchestra breathes fitfully
The music of the spheres.
Mimes, in the form of God on high,
Mutter and mumble low,
And hither and thither fly-
Mere puppets they, who come and go
At bidding of vast formless things
That shift the scenery to and fro,
Flapping from out their Condor wings
Invisible Woe!
-
- - - -
- -
- - - - -
- - -
- - -
-
- - -
- - - -
-
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - diff --git a/examples/user-stories/verse2.txt b/examples/user-stories/verse2.txt deleted file mode 100644 index 68ed749c..00000000 --- a/examples/user-stories/verse2.txt +++ /dev/null @@ -1,1596 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - learning-area/verse2.txt at main Β· mdn/learning-area Β· GitHub - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Skip to content - - - - - - - - - - -
- -
- - - - - - - -
- - - -
- - - - - - - - - - -
-
-
- - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - - - - Permalink - - -
- -
-
- - - main - - - - -
-
-
- Switch branches/tags - -
- - - -
- -
- -
- - -
- -
- - - - - - - - - - - - - - - - -
- - -
-
-
-
- -
- -
- - - - Go to file - - -
- - - - -
-
-
- - - - -
- -
-
- - @chrisdavidmills - - -
- - Latest commit - c2f9787 - Mar 13, 2017 - - - - - - History - - -
-
- -
- -
-
- - - 1 - - contributor - - -
- -

- Users who have contributed to this file -

-
- - - - - - -
-
-
-
- - - - - - - -
- -
- - -
- - 8 lines (8 sloc) - - 269 Bytes -
- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - -
-
- -
- -
-
- - - -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That motley drama- oh, be sure
It shall not be forgot!
With its Phantom chased for evermore,
By a crowd that seize it not,
Through a circle that ever returneth in
To the self-same spot,
And much of Madness, and more of Sin,
And Horror the soul of the plot.
-
- - - -
- -
- - - - -
- - -
- - -
-
- - -
- - - -
-
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - diff --git a/examples/user-stories/verse3.txt b/examples/user-stories/verse3.txt deleted file mode 100644 index c410643f..00000000 --- a/examples/user-stories/verse3.txt +++ /dev/null @@ -1,1533 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - learning-area/verse3.txt at main Β· mdn/learning-area Β· GitHub - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Skip to content - - - - - - - - - - -
- -
- - - - - - - -
- - - -
- - - - - - - - - - -
-
-
- - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - - - - Permalink - - -
- -
-
- - - main - - - - -
-
-
- Switch branches/tags - -
- - - -
- -
- -
- - -
- -
- - - - - - - - - - - - - - - - -
- - -
-
-
-
- -
- -
- - - - Go to file - - -
- - - - -
-
-
- - - - -
- -
-
-
 
-
- -
-
 
- Cannot retrieve contributors at this time -
-
- - - - - - - -
- -
- - -
- - 8 lines (8 sloc) - - 253 Bytes -
- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - -
-
- -
- -
-
- - - -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
But see, amid the mimic rout
A crawling shape intrude!
A blood-red thing that writhes from out
The scenic solitude!
It writhes!- it writhes!- with mortal pangs
The mimes become its food,
And seraphs sob at vermin fangs
In human gore imbued.
-
- - - -
- -
- - - - -
- - -
- - -
-
- - -
- - - -
-
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - diff --git a/examples/user-stories/verse4.txt b/examples/user-stories/verse4.txt deleted file mode 100644 index 90475f0a..00000000 --- a/examples/user-stories/verse4.txt +++ /dev/null @@ -1,1596 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - learning-area/verse4.txt at main Β· mdn/learning-area Β· GitHub - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Skip to content - - - - - - - - - - -
- -
- - - - - - - -
- - - -
- - - - - - - - - - -
-
-
- - - - - - - - - - - - - - - - -
-
- - - - - - - - -
- - - - - Permalink - - -
- -
-
- - - main - - - - -
-
-
- Switch branches/tags - -
- - - -
- -
- -
- - -
- -
- - - - - - - - - - - - - - - - -
- - -
-
-
-
- -
- -
- - - - Go to file - - -
- - - - -
-
-
- - - - -
- -
-
- - @chrisdavidmills - - -
- - Latest commit - c2f9787 - Mar 13, 2017 - - - - - - History - - -
-
- -
- -
-
- - - 1 - - contributor - - -
- -

- Users who have contributed to this file -

-
- - - - - - -
-
-
-
- - - - - - - -
- -
- - -
- - 8 lines (8 sloc) - - 280 Bytes -
- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - -
-
- -
- -
-
- - - -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Out- out are the lights- out all!
And, over each quivering form,
The curtain, a funeral pall,
Comes down with the rush of a storm,
While the angels, all pallid and wan,
Uprising, unveiling, affirm
That the play is the tragedy, "Man,"
And its hero the Conqueror Worm.
-
- - - -
- -
- - - - -
- - -
- - -
-
- - -
- - - -
-
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - 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 + + +
+
+

Ben jij opzoek naar een Designer?

+
+
+
+
+
Dit is... Afbeelding van Rachid in AI
+
+
+
+
+
+
+ +
+
+

html & css

+
+
+
+

Javascript

+
+
+
+

UX/UI

+
+
+
+
+
+

Rachid's Skills

+
+
+ +
+ +
Contact opnemen?
+
linkedin link +
website link
+
Github link
+
+
+ + + + + +
+ + + \ No newline at end of file diff --git a/visitekaartje/linkedin.png b/visitekaartje/linkedin.png new file mode 100644 index 00000000..64301d09 Binary files /dev/null and b/visitekaartje/linkedin.png differ diff --git a/visitekaartje/myscript.js b/visitekaartje/myscript.js new file mode 100644 index 00000000..0aca0286 --- /dev/null +++ b/visitekaartje/myscript.js @@ -0,0 +1,34 @@ +// const apiUrl = 'https://whois.fdnd.nl/api/v1/member?id=cldex20th48sl0avw4a2xw1nw' +// async function getData() { +// const response = await fetch(apiUrl); +// const data = await response.json(); +// document.getElementById('name').textContent = data.member.name; +// document.getElementById('bio').textContent = data.member.bio.html; +// document.querySelector("#flex-item a").href = data.member.website; +// document.getElementById("html-css-fill").style.width = "60%"; +// document.getElementById("javascript-fill").style.width = "40%"; +// document.getElementById("ux-ui-fill").style.width = "75%"; +// } +// getData(); + + + function fetchData (){ + var category = 'happiness'; + const url1 = `https://api.api-ninjas.com/v1/quotes?category=${category}&limit=10`; + const options = { + headers: {'X-Api-Key': '3JwHEP75fl/aHhG67dLS/A==j8eWwZLo3eujm2mP'} + }; + + return fetch(url1, options) + .then(response => response.json() + + ) + + +} + + + + + + diff --git a/visitekaartje/styles.css b/visitekaartje/styles.css new file mode 100644 index 00000000..e468080c --- /dev/null +++ b/visitekaartje/styles.css @@ -0,0 +1,243 @@ +/* Google font inladen*/ +@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Lobster&family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap'); + +/* Default browser padding & margin verwijderen */ +* { + margin: 0; + padding: 0; +} + +body { + font-family: kaushan script; + font-size: 4em; + color: white; + background-color: #101820FF +} + +h2 { + font-size: 1.2em; +} + +h3 { + font-size: 1em; +} + +#parallax_wrapper { + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + perspective: 300px; + /* Hoe dichtbij object komt */ +} + +.intro_screen { + height: 100vh; + background-color: #101820FF; + display: flex; + justify-content: center; + align-items: center; +} + +.intro_screen h1 { + font-size: 1.3em; +} + +.outro_screen { + height: 100vh; + background-color: #FEE715FF; + color: #101820FF; + display: flex; + justify-content: center; + align-items: center; +} + +.parallax_group { + position: relative; + height: 100vh; + transform-style: preserve-3d; +} + +.parallax_layer { + padding-top: 175px; + padding-left: 100px; + position: absolute; + inset: 0; +} + +.parallax_layer h3 { + padding-top: 25px; + padding-bottom: 25px; +} + +/* scale calculation: 1 + ((z transform value * -1) / perspective) */ +.base_layer { + transform: translateZ(-300px) scale(2); +} + +.mid_layer { + transform: translateZ(0); +} + +.top_layer { + transform: translateZ(210px) scale(0.3); + padding-top: 50px; + font-weight: 300; +} + +#intro { + z-index: 0; +} + +#group-1 { + z-index: -1; + color: #101820FF; + +} + +#group-1>.base_layer { + background-color: #FEE715FF ; +} + + +#group-2>.mid_layer { + background-color: #101820FF; + +} + +img { + width: 300px; +} + +.flex-container img { + width: 50px; +} + + +.grid-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 90%; + justify-content: center; + align-items: center; +} + +.grid-item { + font-family: kaushan script; +} + +.grid-item:nth-of-type(2){ + font-weight: 600; + grid-row-start: 2; + grid-column-start: 2; + +} + +.grid-item:nth-of-type(1) { + grid-row-start: 2; + grid-row-end: 2; + grid-column-start: 1; +} + +.grid-item:nth-of-type(3) { + grid-row-start: 3; + align-self: center; +} + + + +.flex-container { + display: flex; + flex-direction: column;; + align-content: space-between; +} + +#flex-item:first-child { + width: 100%; + text-align: center; +} + +#flex-item:not(:first-child) { + display: inline-block; + width: auto; + text-align: center; + margin-top: 1vh; +} + +.grid-item:nth-of-type(2) { + font-size: 0.4em; + font-family: montserrat; +} + +.grid-item:nth-of-type(3) { + font-size: 0.4em; + font-family: montserrat; + margin-top: -20vh; +} + +.progress-bar { + width: 500px; + height: 20px; + background-color: #ddd; + border-radius: 50px; + position: relative; +} + +.progress-fill { + height: 100%; + width: 50%; + background-color: #FEE715FF; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + transition: width 10s; + animation: fill 10s ease-in-out forwards; +} + + +@media (max-width: 767px) { + .intro_screen h1 { + font-size: 0.9em; + text-align: center; + } + .grid-container { + display: block; + grid-template-columns: repeat(2, 1fr); + width: 100%; + justify-content: center; + align-items: center; + } + + #group-1 { + margin-top: 75vh; + height: 200vh; + text-align: center; + } + .parallax_layer { +padding: 5vh; +} + +#group-2 { +margin-top: 100vh; +} + +.progress-bar:nth-of-type(3){ + font-size: 0.8em; + width: 300px; +} + +.parallax_layer #html-en-css{ +margin-top: 30vh; +} + +.parallax_layer h3{ +padding-bottom: 5px; +padding-top: 15px; + } + + +@media (min-width: 768px) and (max-width: 1024px) { + .intro_screen h1 { + text-align: center; + } +} \ No newline at end of file diff --git a/visitekaartje/web.png b/visitekaartje/web.png new file mode 100644 index 00000000..4c6eca65 Binary files /dev/null and b/visitekaartje/web.png differ