cmda-minor-web-1718 · mohammedmulazada · Feb 8, 2018 · Feb 8, 2018 · Feb 8, 2018 · Feb 8, 2018
diff --git a/README.md b/README.md
@@ -1,11 +1,66 @@
 # wafs
-The course repo for 'Web App From Scratch'
 
-## Advantages and disadvantages of JavaScript libraries/frameworks
-...
+# Vanilla JS vs Libraries & Frameworks
 
-## Advantages and disadvantages of client-side single page web apps
-...
+To talk about the benefits and cons of using a framework or library instead of pure vanilla JS, we need to define what a framework and a library is.
+
+## Frameworks
+
+A framework is an usually opinionated source of code that defines a way for you to use it. It is more often used for large projects starting at the beginning.
+
+## Libraries
+
+A library is a resource where you can use small pieces of code to help you in your project. The code can be used as you wish and is up to you to be manipulated or not.
+
+## The advantages of using a Framework
+
+Frameworks tend to pop up every other month. They exist to help solve a problem, such as making the use of ease much better.
+
+* Express.js, a popular Node.js framework exists to make setting up routes and such much easier, making you write less code.
+* React is a framework developed by Facebook, it primarily benefits the developers to work in a very clear and easy to maintain and reuse way.
+
+## The cons
+
+* A framework dictates the way you have to use it, if you don't use it as stated, it will more than likely not work.
+* Frameworks have you at the mercy of it's maintainers, if they suddenly make significant changes, you have to learn everything.
+* There is no guarantee that a framework will be updated
+
+## The advantages of using a Library
+
+Libraries have been around forever. They usually come from developers getting frustrated with current solutions, which makes them very popular.
+
+* A library can be used entirely or just in small chunks, it's all up to you.
+* You can manipulate the code in any way you wish
+* There are a lot of libraries, so there is almost always a good amount of choice
+
+## The cons
+
+* Using a library can make you a lazy developer, instead of figuring out the problem you just go for the easy route
+
+## The advantages of using vanilla JS
+
+* It's simply better performance wise, since it's compiles down and that's it. No need for it to work in conjuction with a framework or library.
+* You writing the code means you actually understand what happens
+* The understanding of vanilla JS leads to you understanding what happens in new frameworks and/or libraries
+* Frameworks can come and go, vanilla JS is here to stay
+
+## The cons
+
+* It's not hyped enough
+
+# SPA'S
+
+Single page web apps don't need a server to serve the pages. All the navigation gets done without the browsers needing to refresh.
+
+# Pro's
+
+* SPA's are extremely quick, it just needs to download the files once and that's it
+* SPA's are very simple and quick to deploy, just upload the files and that's it
+* It's good for the user experience because everything happens quickly
+
+# Cons
+
+* You are forced to have Javascript enabled, the page won't work otherwise
 
 ## Best practices
 ...
diff --git a/app/.eslintrc.json b/app/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+    "extends": "airbnb-base"
+}
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>SPA</title>
+	<link rel="stylesheet" href="./static/css/style.css">
+	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+</head>
+<body>
+
+	<nav>
+		<ul>
+			<li>
+				<a href="#home">Start</a>
+			</li>
+			<li>
+				<a href="#pokemon">Pokemon</a>
+			</li>
+		</ul>
+	</nav>
+
+	<section id='home'>
+			<h1>Poké-Dex</h1>
+			<p>Welkom op de SPA pagina.</p>
+		</section>
+
+	<section id="pokemon">
+		<h2>All Pokemon</h2>
+		<input type="text">
+		<ul id='pokemon-list'>
+			<li>
+				<a data-bind='name'></a>
+			</li>
+		</ul>
+	</section>
+
+	<section id="pokemon-detail">
+		<h2 data-bind='name'></h2>
+		<img data-bind="sprite" src="" alt="">
+	</section>
+
+	<script src="./static/js/routie.js"></script>
+	<script src="./static/js/transparency.js"></script>
+	<script src="./static/js/app.js"></script>
+</body>
+</html>
diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -0,0 +1,110 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+nav {
+	background: green;
+	height: 52px;
+	display: flex;
+	align-items: center;
+	padding: 0 1rem;
+}
+
+nav ul {
+	display: flex;
+	list-style: none;
+}
+
+nav ul li {
+	margin-right: 1rem;
+}
+
+body > nav > ul li a {
+	color: white;
+	text-decoration: none;
+}
+
+body {
+	font-family: 'Roboto';
+}
+
+#home {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+}
+
+#practices {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+}
+
+#pokemon-detail h2 {
+	font-size: 4rem;
+	text-align: center;
+}
+
+#pokemon-detail {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+}
+
+#pokemon-detail h2:first-letter {
+	text-transform: uppercase;
+}
+
+#pokemon-detail img {
+	width: 20rem;
+}
+
+.hidden {
+	display: none;
+	visibility: hidden;
+}
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
diff --git a/app/static/js/app.js b/app/static/js/app.js
@@ -0,0 +1,111 @@
+(function() {
+	'use strict'
+	const settings = {
+		sections: document.querySelectorAll('section')
+	}
+	const app = {
+		init() {
+			sections.init()
+			router.init()
+			router.checkHash()
+		}
+	}
+	const router = {
+		init() {
+			routie({
+				'home': function() {
+					sections.toggle("home")
+				},
+				'pokemon': function() {
+					sections.toggle("pokemon")
+
+					const fetchPokeList = async () =>
+						await (await fetch('https://pokeapi.co/api/v2/pokemon/?limit=151')).json()
+
+					fetchPokeList()
+						.then((data) => {
+
+							const directives = {
+								name: {
+									href() {
+										return `#pokemon/${this.name}`
+									}
+								}
+							}
+
+							let dataPokemon = data.results.map(function(i) {
+								return {
+									name: i.name,
+									url: i.url
+								}
+							})
+
+							Transparency.render(document.querySelector('#pokemon-list'), dataPokemon, directives)
+						})
+						.catch(reason => console.log(reason.message))
+				},
+				'pokemon/?:name': function(name) {
+					const fetchPokeList = async () =>
+						await (await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)).json()
+
+					fetchPokeList().then((data) => {
+						const directives = {
+							sprite: {
+								src() {
+									return `${this.sprite}`
+								},
+								alt() {
+									return `A sprite image of the pokemon ${this.name}`
+								}
+							}
+						}
+
+						const pokeDetails = {
+							name: data.name,
+							id: data.id,
+							sprite: data.sprites.front_default
+						}
+
+						sections.toggle(name)
+
+						document.querySelector('#pokemon-detail').classList.remove('hidden')
+						Transparency.render(document.querySelector('#pokemon-detail'), pokeDetails, directives)
+					})
+				}
+			})
+		},
+		checkHash() {
+			if (window.location.hash) {
+				sections.toggle(helpers.splitHash(location.hash))
+			} else {
+				document.querySelector('#home').classList.remove('hidden')
+			}
+		}
+	}
+	const sections = {
+		init() {
+			settings.sections.forEach((el) => {
+				el.classList.add('hidden')
+			})
+		},
+		toggle(route) {
+			settings.sections.forEach((el) => {
+				if (el.id === route) {
+					el.classList.remove('hidden')
+				} else {
+					el.classList.add('hidden')
+				}
+			})
+		}
+	}
+
+	const helpers = {
+		splitHash(hash) {
+			return hash.split('#')[1]
+		},
+		splitSlash(slash) {
+			return slash.split('/')[1]
+		}
+	}
+	app.init()
+})()