C15423602-wks-3

Counter.css

@@ -0,0 +1,19 @@
+.container {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 50px;
+    margin: 5px;
+    border-radius: 10px;
+}
+
+.column {
+    margin: 8px 8px;
+    display: inline-block;
+    min-width: 64px;
+}
+
+.split {
+    float: left;
+    width: 200px;
+    margin-right: 20px;
+    text-align: center;
+}

Counter.js

@@ -0,0 +1,102 @@
+//Stopwatch with RxJS
+
+import { Observable, Rx, fromEvent, interval, subscribe } from 'rxjs/Rx';
+import 'Counter.css';
+
+const canvas = document.getElementById('canvas');
+const digital = document.getElementById('digital');
+const splitting = document.getElementById('splits');
+
+const source = Rx.Observable
+    .interval(100)
+    .timeInterval();
+
+let init = false;
+let time = 0;
+
+const subscription = source.subscribe(
+    x => {
+
+        if(!init) return;
+        time++;
+        drawTime(time);
+        digital.innerHTML = Math.floor(time/600) + ':' + Math.floor((time/10) % 60) + ':' + (time%10) + '0';
+    });
+
+Rx.Observable.fromEvent(document.getElementById('start'), 'click')
+    .subscribe(ev => {
+        console.log('start clicked!');
+        init = true;
+    });
+
+Rx.Observable.fromEvent(document.getElementById('stop'), 'click')
+    .subscribe(ev => {
+        console.log('stop clicked!');
+        init = false;
+    });
+
+Rx.Observable.fromEvent(document.getElementById('split'), 'click')
+    .subscribe(ev => {
+        console.log('SPLIT');
+        splitting.innerHTML += digital.innerHTML + '<br>';
+    });
+
+Rx.Observable.fromEvent(document.getElementById('reset'), 'click')
+    .subscribe(ev => {
+        console.log('reset');
+        init = false;
+        time = 0;
+        drawTime(time);
+        digital.innerHTML = '0:0:00';
+        splitting.innerHTML = "";
+    });
+
+const drawTime = (time) => {
+    if (canvas.getContext) {
+        const ctx = canvas.getContext('2d');
+        const timeSize = 100;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        ctx.beginPath();
+        ctx.arc(timeSize, timeSize, 2, 0, 2 * Math.PI, true);
+
+        ctx.beginPath();
+
+        ctx.arc(timeSize, timeSize, timeSize, 0, Math.PI * 2, true);
+        ctx.arc(timeSize, timeSize, timeSize - 2, 0, Math.PI * 2, true);
+
+
+        for (let i = 0; i < 12; i++) {
+            let angle = i * (Math.PI * 2 / 12);
+            const handLength = timeSize * 0.15;
+            ctx.moveTo(timeSize + timeSize * Math.cos(angle) * 0.96, timeSize + timeSize * Math.sin(angle) * 0.96);
+            ctx.lineTo(timeSize + (timeSize - handLength) * Math.cos(angle) * 0.96, timeSize + (timeSize - handLength) * Math.sin(angle) * 0.96);
+        }
+
+        // shorter lines
+        for (let i = 0; i < 60; i++) {
+            let angle = i * (Math.PI * 2 / 60);
+            const handLength = timeSize * 0.05;
+
+            ctx.moveTo(timeSize + timeSize * Math.cos(angle) * 0.96, timeSize + timeSize * Math.sin(angle) * 0.96);
+            ctx.lineTo(timeSize + (timeSize - handLength) * Math.cos(angle) * timeSize, timeSize + (timeSize - handLength) * Math.sin(angle) * 0.96);
+        }
+
+        let angle = (time/600/60 - 0.25) * (Math.PI * 2);
+        let handLength = timeSize * 0.5;
+        ctx.moveTo(timeSize, timeSize);
+        ctx.lineTo(timeSize + handLength * Math.cos(angle), timeSize + handLength * Math.sin(angle));
+
+        angle = (time/10/60 - 0.25) * (Math.PI * 2);
+        handLength = timeSize * 0.8;
+        ctx.moveTo(timeSize, timeSize);
+        ctx.lineTo(timeSize + handLength * Math.cos(angle), timeSize + handLength * Math.sin(angle));
+
+        ctx.stroke();
+    }
+}
+
+drawTime(time);
+export default Counter;
+

Questions.txt

@@ -0,0 +1,17 @@
+C15423602-wks-3
+________________
+
+1. Explain what is meant by the stream abstraction. What is the relationship between streams and the observer pattern? What are streams useful for modelling and when might you use them in Rich Web development?
+
+Stream abstraction are used to model asynchronous data sources. It's a powerful technique when processing data if the potential size or arrival time period is unknown or uncertain. The processing of streams must be done in time-separated chunks in sequence or concurrently, hence in streams.
+	While streams work by pushing data as it becomes available, the observer pattern is the object literal to capture values observed and returned before reaching a final block. Observers are a collection of callbacks that knows how to listen to values delivered by the Observable. 
+	Streams are useful in Rich Web development as mentioned before, streams provides asynchronous solutions to a problem. Using streams allows the application architecture to reduce a stream processing problem to merge into one or more data streams. This applies to  mouse clicks, keyboard inputs and network responses.
+
+__________________
+
+2. Assume that you are building an interface to an API in your Rich Web App. Describe in detail how you could use the RxJS library to handle asynchronous network responses to API requests. In your opinion, what are the benefits to using a streams library for networking over, say, promises? And what do you think are the downsides?
+
+
+We use RxJS to implement event stream abstraction to make it easier to compose asynchronous or callback-based code. It has better performance, better modularity and better debuggable call stacks. What makes RxJS powerful is its ability to produce values using pure functions, meaning your code is less prone to errors. To get started with RxJS, a web pack bundle is to be installed, through this the server is called and the application will be run through that. The bundle includes a web pack-config which serves as a configuration entry point for paths, JSON packages.
+
+Promises are values that capture a future value which can be processed independently from the rest of the API calls. They can also be composed or passed as an argument to functions, which can be resolved or rejected when future values arrive. Promises can also be chained to provide the same functionality as nested callbacks, which might be a downfall as if the promise is rejected, then the whole callback is rejected.

calc.js

@@ -0,0 +1,59 @@
+<!-- Calculator with rxjs -->
+import {merge, fromEvent, subscribe} from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+
+import '../src/style.css';
+
+let result = 0;
+let exp = '';
+let num;
+
+const btns = document.getElementsByClassName("grid-item");
+
+function calculator() {
+
+
+    const btnsStream$ = Observable.fromEvent(btns, 'click');
+    const keysStream$ = Observable.fromEvent(document, 'keypress');
+
+    const stream$ = merge(btnsStream$, keysStream$);
+
+    stream$.subscribe(key => {
+        if (x.type == 'click') {
+            num = x['srcElement'].value;
+        }
+        else if (x.type == 'keypress') {
+            num = x['key'];
+        }
+
+        display(num)
+
+        // Display number input into text box
+        function display(val) {
+            console.log(num);
+            let text = document.getElementById('text');
+
+            text.value += val;
+            exp += val;
+            console.log(exp);
+        }
+
+        if (value === 'c') {
+            clr();
+        }
+
+        if (value === '=') {
+            let display = document.getElementById('text');
+            let x = eval(exp);
+            text.value = x;
+            exp = 0;
+            console.log(x);
+        }
+    });
+
+}
+function clr() {
+    document.value = 0;
+    result = "";
+}
+

components/Counter/Counter.css

@@ -0,0 +1,19 @@
+.container {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 50px;
+    margin: 5px;
+    border-radius: 10px;
+}
+
+.column {
+    margin: 8px 8px;
+    display: inline-block;
+    min-width: 64px;
+}
+
+.split {
+    float: left;
+    width: 200px;
+    margin-right: 20px;
+    text-align: center;
+}

components/Counter/Counter.js

@@ -0,0 +1,102 @@
+//Stopwatch with RxJS
+
+import { Observable, Rx, fromEvent, interval, subscribe } from 'rxjs/Rx';
+import 'Counter.css';
+
+const canvas = document.getElementById('canvas');
+const digital = document.getElementById('digital');
+const splitting = document.getElementById('splits');
+
+const source = Rx.Observable
+    .interval(100)
+    .timeInterval();
+
+let init = false;
+let time = 0;
+
+const subscription = source.subscribe(
+    x => {
+
+        if(!init) return;
+        time++;
+        drawTime(time);
+        digital.innerHTML = Math.floor(time/600) + ':' + Math.floor((time/10) % 60) + ':' + (time%10) + '0';
+    });
+
+Rx.Observable.fromEvent(document.getElementById('start'), 'click')
+    .subscribe(ev => {
+        console.log('start clicked!');
+        init = true;
+    });
+
+Rx.Observable.fromEvent(document.getElementById('stop'), 'click')
+    .subscribe(ev => {
+        console.log('stop clicked!');
+        init = false;
+    });
+
+Rx.Observable.fromEvent(document.getElementById('split'), 'click')
+    .subscribe(ev => {
+        console.log('SPLIT');
+        splitting.innerHTML += digital.innerHTML + '<br>';
+    });
+
+Rx.Observable.fromEvent(document.getElementById('reset'), 'click')
+    .subscribe(ev => {
+        console.log('reset');
+        init = false;
+        time = 0;
+        drawTime(time);
+        digital.innerHTML = '0:0:00';
+        splitting.innerHTML = "";
+    });
+
+const drawTime = (time) => {
+    if (canvas.getContext) {
+        const ctx = canvas.getContext('2d');
+        const timeSize = 100;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        ctx.beginPath();
+        ctx.arc(timeSize, timeSize, 2, 0, 2 * Math.PI, true);
+
+        ctx.beginPath();
+
+        ctx.arc(timeSize, timeSize, timeSize, 0, Math.PI * 2, true);
+        ctx.arc(timeSize, timeSize, timeSize - 2, 0, Math.PI * 2, true);
+
+
+        for (let i = 0; i < 12; i++) {
+            let angle = i * (Math.PI * 2 / 12);
+            const handLength = timeSize * 0.15;
+            ctx.moveTo(timeSize + timeSize * Math.cos(angle) * 0.96, timeSize + timeSize * Math.sin(angle) * 0.96);
+            ctx.lineTo(timeSize + (timeSize - handLength) * Math.cos(angle) * 0.96, timeSize + (timeSize - handLength) * Math.sin(angle) * 0.96);
+        }
+
+        // shorter lines
+        for (let i = 0; i < 60; i++) {
+            let angle = i * (Math.PI * 2 / 60);
+            const handLength = timeSize * 0.05;
+
+            ctx.moveTo(timeSize + timeSize * Math.cos(angle) * 0.96, timeSize + timeSize * Math.sin(angle) * 0.96);
+            ctx.lineTo(timeSize + (timeSize - handLength) * Math.cos(angle) * timeSize, timeSize + (timeSize - handLength) * Math.sin(angle) * 0.96);
+        }
+
+        let angle = (time/600/60 - 0.25) * (Math.PI * 2);
+        let handLength = timeSize * 0.5;
+        ctx.moveTo(timeSize, timeSize);
+        ctx.lineTo(timeSize + handLength * Math.cos(angle), timeSize + handLength * Math.sin(angle));
+
+        angle = (time/10/60 - 0.25) * (Math.PI * 2);
+        handLength = timeSize * 0.8;
+        ctx.moveTo(timeSize, timeSize);
+        ctx.lineTo(timeSize + handLength * Math.cos(angle), timeSize + handLength * Math.sin(angle));
+
+        ctx.stroke();
+    }
+}
+
+drawTime(time);
+export default Counter;
+

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Counter</title>
+</head>
+<body>
+  <div class="app"></div>
+    <div class="container">
+      <div class="column>
+
+        <canvas id="canvas" width="250" height="250"></canvas>
+
+        <div id="digital">0:0:00</div>
+
+        <div>
+          <button id="start">Start</button>
+          <button id="stop">Stop</button>
+          <button id="split">Split</button>
+          <button id="reset">Reset</button>
+        </div>
+      </div>
+      <div class="split" id="splits">
+      </div>
+    </div>
+
+  <script src="Counter.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,4 @@
+import Counter from "./components/Counter/Counter";
+import "./style.css";
+
+document.querySelector("#app").appendChild(Counter({initialValue:0}));