diff --git a/src/css/styles.css b/.gitignore similarity index 100% rename from src/css/styles.css rename to .gitignore diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..77d769d --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Aron + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index f991e5a..8b13789 100644 --- a/README.md +++ b/README.md @@ -1,88 +1 @@ -# Project 1 @cmda-minor-web · 2020-2021 -## Digitaal leermateriaal voor een leven lang leren @OBA - -In een week bouwt iedere student aan de hand van een user story een eigen prototype. Technieken geleerd bij [CSS to the Rescue](https://github.com/cmda-minor-web/css-to-the-rescue-2021) en [Web App from Scratch](https://github.com/cmda-minor-web/web-app-from-scratch-2021) worden toegepast bij het bouwen van de de prototypes. - - -## Programma - -### Kickoff - -Het project vindt plaats bij de Centrale OBA. Maandagochtend is om 10.00 uur de kickoff (09:30 uur inloop), vrijdag zijn de presentaties van de resultaten. - -We verzamelen vanaf 09:30 uur op de 1e verdieping van de Centrale OBA, [Oosterdokskade 143](https://www.google.com/maps/place/OBA+library+of+Amsterdam/@52.3756983,4.9082087,15z/data=!4m2!3m1!1s0x0:0x6b97f693e6ecb494?ved=2ahUKEwioo6OrzubgAhWLNOwKHR6KDQgQ_BIwCnoECAYQCA). - -## Opdrachtomschrijving -Binnen het OBA thema leven lang leren willen we de Amsterdammers van zoveel mogelijk bronnen voorzien om informeel te kunnen (blijven) leren. -Naast de informatieve boeken, cursussen, videos enzovoort hebben we als nieuwe bron: open leermaterialen. Dit zijn onderzoeken en andere ondersteunende materialen op mbo/hbo/wo niveau . Deze verschillende bronnen willen we graag op thema doorzoekbaar maken en zinnig vormgegeven aanbieden aan de Amsterdammers. -Aan jullie dus de opdracht om de verschillende bronnen via de api doorzoekbaar te maken, en deze voor de doelgroep volwassen, aan de hand van onderstaande thema's, vormgegeven aan te bieden. - -**Voeding en diëtiek** -Als sportieve twintiger wil ik mij verdiepen in het effect van gezonde voeding op mijn conditie, om te leren hoe ik mijn sport beter kan beoefenen. - -**Digitaal burgerschap** -Als oudere burger wil ik leren hoe ik digitale formulieren van de gemeente kan vinden, invullen en versturen, om zodoende de digitalisering van de maatschappij beter het hoofd te kunnen bieden. - -**Ondernemen** -Als jonge ondernemer wil ik meer informatie vinden over het opzetten van een onderneming, om zodoende meer kans te hebben op succes. - -Je bouwt een Single Page Application met data uit de API. Voor de vormgeving van de interface mag je out of the box denken. Je kan elementen uit de huisstijl van de OBA gebruiken, maar bent hier niet aan gebonden. Maak gebruik van al je CSS kennis en ga het experiment aan! - -## Weekplanning - -| Dag | Tijd | Wat | -|---|---|--| -| Maandag 14/03 | 10:00 uur | Kickoff | -| | 11:00 - 16:00 uur | Werken aan de opdracht @OBA | -| Dinsdag 15/03 | 9:30 - 16:00 uur | Gebruikers interviewen @OBA| -| Woensdag 16/03 | 9:30 - 16:00 uur | Standups met coaches en opdrachtgever @OBA | -| | 16:00 uur | Weekly Nerd | -| Donderdag 17/03 | 9:30 - 16:00 uur | Testen met gebruikers @OBA | -| Vrijdag 18/03 | 12:00 uur | Presentaties en beoordeling @OBA | - - - -## Werkwijze en Criteria - -### Werkwijze - -Full-time week werken aan (technisch) bewijzen van een concept-idee. Vrijdag is de pitch! Student laat zien dat hij/zij de vakken [CSS to the Rescue](https://github.com/cmda-minor-web/css-to-the-rescue-2021) en [Web App from Scratch](https://github.com/cmda-minor-web/web-app-from-scratch-2021) begrijpt en beheerst. - -Op maandag, woensdag en vrijdag zijn er coaches aanwezig voor coaching en feedback. Maandag is de kickoff, woensdag zijn er standups om de status door te spreken. Waar ben je mee bezig? Loop je ergens vast of heb je hulp nodig? Waar sta je? Vrijdag is de beoordeling. - -### Beoordeling -Tijdens de beoordeling krijg je feedback op het resultaat en op je functioneren. De vakdocenten kijken naar je code en beoordelen In hoeverre je in het project laten zien dat je de bijhorende vakken beheerst en goed hebt toegepast. - -Het project telt als AVV mee met de Meesterproef. - -### Feedback over functioneren -Je hebt een leergierig, gedreven en zelfredzame houding nodig om de minor te kunnen halen. Welke vaardigheden heb je laten zien? Onderzoekend vermogen? Creativiteit? Conceptueel? In hoeverre komen je houding en verworven vaardigheden overeen met wat een frontender in de praktijk nodig heeft? - -### Feedback over Web App from Scratch -In het vak [Web App from Scratch](https://github.com/cmda-minor-web/web-app-from-scratch-2021) heb je geleerd een web app te maken zonder frameworks of onnodige libraries, dus zoveel mogelijk met native HTML, CSS & JavaScript. Het eindproduct is een modulair opgezet prototype voor een single page web app. Data wordt opgehaald uit een externe API, waar nodig gemanipuleerd en vervolgens getoond in de Web App. Je leert hoe structuur aan te brengen in je code en hoe je hiermee 'from scratch' een web app kan maken. - -### Feedback over CSS to the Rescue -In het vak [CSS to the Rescue](https://github.com/cmda-minor-web/css-to-the-rescue-2021) heb je geleerd over de (brede) scope van CSS, over Progressive Enhancement, de _cascase_, _inheritance_ en _specifity_. Het is belangrijk om deze basisprincipes van CSS goed te begrijpen. Niet alleen op praktisch niveau, ook op experimenteel niveau. Zonder goed begrip van de basisprincipes is CSS magisch en weird. Met een goed begrip heb je CSS onder controle en kan je het laten doen wat jij wil. En dat is nodig om webpagina’s vorm te geven met attention to detail; webpagina’s waar mensen blij van worden. - -### Oplevering & criteria -- Presentatie met je bevindingen bij de OBA. -- Github met je code en readme. - - - - - - - - - - - - - - - - - - diff --git a/docs/css/styles.css b/docs/css/styles.css deleted file mode 100644 index 072148a..0000000 --- a/docs/css/styles.css +++ /dev/null @@ -1,79 +0,0 @@ -:root { - --dark: #000; - --course: #00CD84; - --light: #fff; -} -body { - background-color: var(--dark); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); - color: var(--light); - font-family: monospace; - font-size: 1.5em; - line-height: 1.5; - margin: 0; -} -main { - max-width: 800px; - margin: 10vh auto; -} -header { - background: var(--course); - color: var(--dark); - height: 30vh; - display: flex; - justify-content: center; - align-items: center; -} -h1 { - font-size: 5em; -} -h2 { - font-size: 2em; - margin-top: 1.5em; -} -ul { - display: flex; - /flex-wrap: wrap; - justify-content: space-between; - list-style-type: none; - padding: 0; - margin: 0 -1rem; -} -ul li { - display: flex; - flex-direction: column; - align-items: center; - margin: 1rem; -} -ul img { - border: 2px solid var(--light); - margin-top: 2em; - margin-bottom: 2em; -} -img { - max-width: 100%; -} - -section#lecturers img { - border-radius: 100%; - margin-right: 1em; -} - -.button { - background: var(--light); - color: var(--dark); - padding: 1em; -} - -.examples img { - max-width: 25vh; -} - -a, -a:visited { - color: var(--course); -} - -footer { - font-style: italic; -} diff --git a/docs/img/placeholder.png b/docs/img/placeholder.png deleted file mode 100644 index 41d321d..0000000 Binary files a/docs/img/placeholder.png and /dev/null differ diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 78b038d..0000000 --- a/docs/index.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - - - Course name - Minor Web Development - CMD Amsterdam - - - - -
-

Project 1

-
-
-
-

Description

-

- Quick, hack, prototype @ OBA -

-
- -
-

Student work

- -
- -
-

Lecturers

- -
- -
-

Program

-

This course is part of the minor Web Development, a semester program at Communication and Multimedia Design, a design bachelor focused on interactive digital products and services. CMD is part of the Faculty of Digital Media and Creative Industries at the Amsterdam University of Applied Sciences.

-
- -
-

Conduct

-

This course has a Code of Conduct. Anyone interacting with this repository, organisation, or community is bound by it. Staff and students of the Amsterdam University of Applied Sciences (Hogeschool van Amsterdam) are additionally bound by the Regulation Undesirable Conduct (Regeling Ongewenst Gedrag).

-
- - -
- - diff --git a/example/oba-api/index.html b/example/oba-api/index.html deleted file mode 100644 index a547ab1..0000000 --- a/example/oba-api/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - Developers - - - - - - -
-

OBA Api

-
- - - - diff --git a/example/oba-api/static/css/style.css b/example/oba-api/static/css/style.css deleted file mode 100644 index 9d3302c..0000000 --- a/example/oba-api/static/css/style.css +++ /dev/null @@ -1,20 +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; -} -main { - padding: 2rem; -} diff --git a/example/oba-api/static/js/app.js b/example/oba-api/static/js/app.js deleted file mode 100644 index bb4dfdc..0000000 --- a/example/oba-api/static/js/app.js +++ /dev/null @@ -1,42 +0,0 @@ -/*** Fetching data -> refactor into module later ***/ -const main = document.querySelector('main'); -const cors = 'https://cors-anywhere.herokuapp.com/'; -const endpoint = 'https://zoeken.oba.nl/api/v1/search/?q='; -const query = 'tolkien'; -const key = '1e19898c87464e239192c8bfe422f280'; -const secret = '4289fec4e962a33118340c888699438d'; -const detail = 'Default'; -const url = `${cors}${endpoint}${query}&authorization=${key}&detaillevel=${detail}&output=json`; - -const config = { - Authorization: `Bearer ${secret}` -}; - -fetch(url, config) - .then(response => { - return response.json(); - }) - .then(data => { - render(data); - }) - .catch(err => { - console.log(err); - }); - -// render data -function render(data) { - const results = data.results; - console.dir(results); - results.forEach((item, i) => { - const html = ` -
-

${item.titles[0]}

-

${item.summaries ? item.summaries[0] : 'Geen samenvatting'}

- -
- `; - main.insertAdjacentHTML('beforeend', html); - }); -} diff --git a/example/oba-api/static/js/vendor/routie.min.js b/example/oba-api/static/js/vendor/routie.min.js deleted file mode 100644 index 0c47f45..0000000 --- a/example/oba-api/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/example/oba-api/static/js/vendor/transparency.min.js b/example/oba-api/static/js/vendor/transparency.min.js deleted file mode 100644 index a389eca..0000000 --- a/example/oba-api/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/images/OBA__Amsterdam.png b/images/OBA__Amsterdam.png new file mode 100644 index 0000000..81fe6b6 Binary files /dev/null and b/images/OBA__Amsterdam.png differ diff --git a/index.html b/index.html index 8b13789..b4cb8e0 100644 --- a/index.html +++ b/index.html @@ -1 +1,36 @@ - + + + + + + + + + + + + + + +
+ OBA logo +
+
+
+ +
+
+ + + diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..8e27877 --- /dev/null +++ b/scripts/app.js @@ -0,0 +1,66 @@ +const ul = document.querySelector('ul'); +const dropDown = document.querySelector("#selectNumber") +dropDown.addEventListener("change", function(e) { + replace() + getBooks() +}); + +function getBooks() { + const cors = 'https://cors-anywhere.herokuapp.com/'; + const endpoint = 'https://zoeken.oba.nl/api/v1/search/?q='; + const valueDropdown = dropDown.options[dropDown.selectedIndex].value.toString(); + const key = '17a9c4d4d56a41b55abc2d3096e94be4'; + const secret = '4289fec4e962a33118340c888699438d'; + const detail = 'Default'; + const url = `${cors}${endpoint}${valueDropdown}&authorization=${key}&detaillevel=${detail}&output=json`; + const config = { + Authorization: `Bearer ${secret}` + }; + showLoading() + fetch(url, config).then(response => { + return response.json(); + }).then(data => { + renderBooks(data); + hideLoading() + }).catch(err => { + console.log(err); + }); +} + +function renderBooks(data) { + const results = data.results; + console.dir(results); + results.forEach((book) => { + const html = ` +
  • + +

    ${book.titles[0]}

    +

    ${book.summaries ? book.summaries[0] : 'Sorry, geen samenvatting beschikbaar.'}

    +

    ${book.authors}

    +
    • + `; + ul.insertAdjacentHTML('beforeend', html); + }); +} + +function showLoading() { + const loadingSection = document.querySelector('div'); + loadingSection.classList.add('loader'); +} + +function hideLoading() { + const loadingSection = document.querySelector('.loader'); + loadingSection.classList.remove('loader'); +} + +function replace() { + for (const node of document.querySelectorAll("li:not(li:first-of-type), li h2, li p, li img")) { + const parent = node.parentNode; + const children = Array.from(node.children); + for (const child of children) { + node.removeChild(child); + parent.insertBefore(child, node); + } + parent.removeChild(node); + } +} \ No newline at end of file diff --git a/src/js/script.js b/src/js/script.js deleted file mode 100644 index 8b13789..0000000 --- a/src/js/script.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/styles/mainStyles.css b/styles/mainStyles.css new file mode 100644 index 0000000..c9e68cc --- /dev/null +++ b/styles/mainStyles.css @@ -0,0 +1,146 @@ +* { + margin: 0; + padding: 0; +} +::-webkit-scrollbar { + height: .8em; + width: .5em; +} +::-webkit-scrollbar-track { + background: #000; +} +::-webkit-scrollbar-thumb { + background-color: #FF0000; +} +body { + font-family: 'Montserrat', sans-serif; + background-color: #fff; +} +header { + display: flex; + justify-content: center; + position: fixed; + width: 100%; + transform: rotate(-90deg) translateX(-50%); + transform-origin: left top; + top: 50%; + left: 0; + font-size: 1.4rem; + background-color: #fff; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; +} +header a { + text-decoration: none; + color: #000; + transition: .5s; +} +header a:hover { + transform: scale(1.05); +} +header a img { + width: 5em; + transform: rotate(180deg) +} +main > section { + position: absolute; + width: 100vw; + display: flex; + overflow: auto; + height: 100vh; + scroll-snap-type: x mandatory; +} +main > section > ul { + display: flex; + flex-wrap: nowrap; + list-style: none; + justify-content: center; + align-items: center; +} +main > section > ul > li:first-of-type { + width: 100vw; + height: 98.5vh; + display: flex; + flex-direction: column; + list-style: none; + justify-content: center; + align-items: center; + scroll-snap-align: center; + margin-right: -16vw; +} +main > section > ul > li:not(li:first-of-type) { + width: 100vw; + height: 98.5vh; + display: grid; + list-style: none; + grid-template: repeat(5, 1fr 2fr) / repeat(5, 3fr 2fr); + scroll-snap-align: center; + margin-right: -16vw; +} +.loader { + position: absolute; + top: 43em; + width: 3em; + height: 3em; + border: .1em solid #000; + border-radius: 50%; + animation: loaderAnim 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} +main > section > ul > li > h1{ + text-transform: uppercase; + text-align: center; + font-size: 4em; + width: 60%; + color: #000; + line-height: 1.3em; +} +main > section > ul > li > label{ + margin-top: 3em; +} +main > section > ul > li > select { + width: 20em; + border-radius: .5em; + box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; + transition: all .5s ease; + font-size: 1em; + text-align: left; + border: none; + padding: .8em .5em; + margin-top: 4em; +} +main > section > ul > li img { + grid-area: 2 / 2 / span 2 / span 2; + width: 23em; + box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; +} +main > section > ul > li h2 { + padding: .2em 0; + text-align: left; + grid-area: 3 / 5 / span 3 / span 6; + max-width: 65%; + font-size: 2em; +} +main > section > ul > li p:first-of-type{ + padding: 3em 0; + grid-area: 5 / 5 / span 3 / span 6; + max-width: 65%; + line-height: 1.7em; +} +main > section > ul > li p:last-of-type { + font-style: italic; + grid-area: 9 / 2 / span 5 / span 3; + max-width: 25em; +} +@keyframes loaderAnim { + 0% { + transform: scale(0); + opacity: 1; + } + 50% { + transform: scale(3); + opacity: 0; + } + 100% { + transform: scale(0); + opacity: 1; + } + } \ No newline at end of file