cmda-minor-web-1718 · niyorn · Feb 12, 2018 · Feb 12, 2018 · Feb 12, 2018 · Feb 12, 2018
diff --git a/README.md b/README.md
@@ -1,11 +1,74 @@
-# wafs
-The course repo for 'Web App From Scratch'
+# Web-App-from-Scratch
+This is an single page web app. It is created from scratch without using any unnecessary libraries. 
 
-## Advantages and disadvantages of JavaScript libraries/frameworks
-...
+## Single page web app in general
+*A single-page application (SPA) is an app that works inside a browser and does not require page reloading during use. You are using this type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub.*
 
-## Advantages and disadvantages of client-side single page web apps
-...
+### Pro
+- SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.
+
+- SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.
+
+- The development is simplified and streamlined. There is no need to write code to render pages on the server. It is much easier to get started because you can usually kick off development from a file file://URI, without using any server at all.
+
+### Con
+- It is slow to download because heavy client frameworks are required to be loaded to the client.
+
+- It requires JavaScript to be present and enabled. If any user disables JavaScript in his or her browser, it won’t be possible to present application and its actions in a correct way.
+
+Neoteric ('Single-page application vs. multiple-page application'), taken from: https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
+
+## Frameworks in general
+
+### Pro
+- A good programmer know how to get the job done well and fast. If you don't need to write code from scratch why should you? Frameworks are just tools, tools that any profession has to work better. 
+
+- Efficiency is also about lines of code.
+
+
+### Con
+
+- If you don't know the underlying principles of the web, you'll eventually hit a wall thanks to the evolution of the language itself and the constant arrival of new frameworks.
+
+- People start using frameworks and libraries without even thinking about how to solve the problem without them. Often, a solution in VanillaJS is very easy, but people are so used to work with frameworks and libraries that they load a lot of extra code to do very simple things.
+
+
+Francois-Xavier P. Darveau ('Yes, You Should Learn Vanilla JavaScript Before Fancy JS Frameworks'), taken from: https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks
+
+Marco Alka ('Vanilla JavaScript vs. Frameworks & Libraries sFinding a good balance'), taken from : https://hashnode.com/post/vanilla-javascript-vs-frameworks-and-libraries-finding-a-good-balance-civ1zfus90pphdc53q8vtakz5
 
 ## Best practices
 ...
+
+
+## Inspiration
+*The first thing I did was looking for inspiration and and good examples of single page application.*
+
+### district0x
+url: https://district0x.io/
+
+District0x makes great use of typography, color, and scroll animation. When viewing the site on mobile, the site is still great to use. The animation that is displayed still plays at around 60fps. And there is alot of whitespaces that gives the content more air to display itself.\
+![district0x](readme-assets/district0x.gif "district0x")
+
+### Kollergorna
+url: https://radar.kollegorna.se/
+
+Kollergorna is a beautifull site that doens't use a traditional layout. Also they give the user an option to view their content in a different layout. Lastly the loadying of the content in insanely fast. 
+
+![Kolergona](readme-assets/kollergorna.gif "kolergona")
+
+
+# To do
+1. Create an issue for Leonie
+2. Create an issue for Kevin
+3. create responsive menu
+4. Best practices
+5. Manage routes en states
+6. Get / Post data van/naar API
+7. Data manipuleren
+8. Data presenteren
+9. Web Worker implementeren (extra)
+10. Code review
+
+
+
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,31 @@
+<!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>Web app</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> 
+    <link rel="stylesheet" href="static/style/style.css">
+</head>
+
+<body>
+
+    <section id="start" class="crypto">
+        <div>
+            <a  data-bind="coin_id" href="">
+                    <span data-bind="rank" class="rank"></span>
+                    <span data-bind="name" class="name"></span>
+                    <span data-bind="price" class="price"></span>
+                    <span data-bind="percent_change_24h" class="change change-24"></span>
+            </a>
+        </div>
+    </section>
+
+    <script src="static/script/routie.js"></script>
+    <script src="static/script/transparency.js"></script>
+    <script src="static/script/app.js"></script>
+</body>
+
+</html>
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
diff --git a/app/static/js/script.js b/app/static/js/script.js
diff --git a/app/static/script/app.js b/app/static/script/app.js
@@ -0,0 +1,82 @@
+//Use IIFE to create variable but only in the IIFE scope
+(function () {
+    'use strict'; //use strict mode only in this scope
+
+    var app = {
+        init: function () {
+            let xhr = new XMLHttpRequest();
+            let url = "https://api.coinmarketcap.com/v1/ticker/";
+            xhr.open("GET", url, true);
+            xhr.onload = function (e) {
+                if (xhr.readyState === 4) {
+                    if (xhr.status === 200) {
+                        var data = JSON.parse(xhr.responseText);
+                        routes.init(data); //init route
+                    } else {
+                        console.error(xhr.statusText);
+                    }
+                }
+            };
+            xhr.send();
+        }
+    }
+
+    var routes = {
+        init: function (data) {
+            this.routie(data);
+        },
+        routie(data) {
+            routie({
+                '': function () { //start page
+                    section.insert(data);
+                },
+                '/detail/*': function () {
+                    section.insert(data);
+                }
+            });
+        }
+    }
+
+    var section = {
+        toggle: function (route) {
+
+            //remove all active class
+            let section = document.querySelectorAll('section');
+            section.forEach(function (i) {
+                i.classList.remove('active');
+            });
+
+            //Add active class to the page-link that you've clicked
+            document.querySelector(route).classList.add('active');
+        },
+
+        insert: function (data) {
+            let dataCoin = data.map(function (i) { //Map function thanks to Keving Wang
+                return {
+                    id: i.id,
+                    rank: i.rank,
+                    name: i.name,
+                    price: i.price_usd,
+                    percent_change_24h: i.percent_change_24h
+                }
+            });
+
+            let directives = {
+                coin_id: {
+                    href: function (params) {
+                        return "index.html/detail/" + this.id
+                    },
+                    percent_change_24h: {
+                        class: function (params) {
+                            return this.percent_change_24h
+                        }
+                    }
+                }
+            };
+
+            Transparency.render(document.querySelector('#start div'), dataCoin, directives);
+        }
+    }
+
+    app.init(); //start application
+})();