Added task

2020-01-30 19:20:36 +01:00
parent 2b6b96c2c8
commit a937b6c29c
3 changed files with 122 additions and 0 deletions
--- a/html/tasks/chapter_3/javascript_practises/oppgave.html
+++ b/html/tasks/chapter_3/javascript_practises/oppgave.html
@@ -0,0 +1,27 @@
+<!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>Good Javascript Practises</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Good Javascript Practises</h1>
+
+        <div class="center">
+            <p>Look in script.js</p>
+
+            
+
+
+
+        </div>
+
+
+
+    </body>
+</html>
--- a/html/tasks/chapter_3/javascript_practises/script.js
+++ b/html/tasks/chapter_3/javascript_practises/script.js
@@ -0,0 +1,94 @@
+/* https://www.youtube.com/watch?v=Mus_vwhTCq0 */
+
+
+
+
+
+/*Debugging */
+const person1 = { name: 'Tom', age:30};
+const person2 = { name: 'Bernie', age:40};
+const person3 = { name: 'Harry', age:35};
+
+console.log('%c People', 'color: orange; font-weight: bold;');
+console.log({person1, person2, person3});
+console.debug('People in a table'); //Show verbose
+console.table([person1, person2, person3]);
+
+console.trace('Trace me');
+
+
+
+
+
+/*String with variables */
+let name = 'me'
+console.log(`I am ${name}`);
+
+
+
+
+
+/*Variable destructuring */
+let parameter = {
+    num1: 1,
+    num2: 2,
+    num3: 3,
+    otherNums: [4,5,6]
+};
+
+function execute(parameter) {
+    let {num1, num2, num3, otherNums} = parameter;
+    console.log(`${num1}, ${num2} and ${num3} and even ${otherNums.join(' and ')}`);
+}
+
+execute({num1: 1, num2: 2, num3: 3, otherNums: [4, 5, 6]});
+
+
+
+
+
+/*Spread syntax */
+const species = {name: 'Pikachu'};
+const stats = {hp: 40, attack:60, defense:45};
+
+const pikachu = {...species, ...stats};
+
+pokemon = ['Bulbasaur', 'Ivysaur', 'Venusaur'];
+pokemon = [...pokemon, 'Charmander', 'Charmeleon', 'Charizard'];
+
+
+
+
+
+/*Loops */
+const orders = [199, 50, 123, 229, 40];
+
+let total = 0; //Sum everything
+let withTax = []; //Add tax to every price
+let highValue = []; //Filter out the high value orders
+for (let i=0; i<orders.length; i++) {
+    
+    //Reduce
+    total+=orders[i];
+
+    //Map
+    withTax.push(orders[i]*1.1);
+
+    //Filter
+    if (orders[i] > 100) {
+        highValue.push(orders[i]);
+    }
+}
+
+console.log([total, withTax, highValue]);
+
+//Reduce
+total = orders.reduce((accumulatedValue, currentValue) => accumulatedValue + currentValue);
+
+//Map
+withTax = orders.map(v => v*1.1);
+
+//Filter
+highValue = orders.filter(v => v>100);
+
+console.log([total, withTax, highValue]);
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@

                <h2>Kapittel 3</h2>
                <p><a href="./html/tasks/chapter_3/examples/oppgave.html">Variable Examples</a></p>
+                <p><a href="./html/tasks/chapter_3/javascript_practises/oppgave.html">Javascript Best Practises</a></p>

                <h2>Kapittel 5</h2>
                <p><a href="./html/tasks/chapter_5/task11_tables/oppgave.html">Oppgave 11 - Table Number Generator</a></p>