init

.gitignore

@@ -0,0 +1,2 @@
+#Ignore vscode settings:
+.vscode

html/tasks/chapter_1/hello_world/Images/html5.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+aria-label="HTML5" role="img"
+viewBox="0 0 512 512"><path fill="#e34f26" d="M71 460L30 0h451l-41 460-185 52"/><path fill="#ef652a" d="M256 472l149-41 35-394H256"/><path fill="#ebebeb" d="M256 208h-75l-5-58h80V94H114l15 171h127zm-1 147l-63-17-4-45h-56l7 89 116 32z"/><path fill="#fff" d="M255 208v57h70l-7 73-63 17v59l116-32 16-174zm0-114v56h137l5-56z"/></svg>

html/tasks/chapter_1/hello_world/Images/visualStudioCode.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 261 260" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" version="1.1" id="svg4" sodipodi:docname="vscode.svg" inkscape:version="0.92.2 (unknown)">
+  <metadata id="metadata10">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs8"/>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1360" inkscape:window-height="722" id="namedview6" showgrid="false" inkscape:zoom="0.64183539" inkscape:cx="112.48701" inkscape:cy="128.72041" inkscape:window-x="0" inkscape:window-y="24" inkscape:window-maximized="1" inkscape:current-layer="svg4"/>
+  <path d="M 195.47461 -0.005859375 L 195.47461 223.29688 L 0.49609375 194.33789 L 195.47461 259.99219 L 260.47461 232.95312 L 260.47461 31.064453 L 260.49609 31.054688 L 260.47461 31.011719 L 260.47461 27.035156 L 195.47461 -0.005859375 z " id="path951" style="fill:#007acc;fill-opacity:1"/>
+  <path d="M 127.24219 38.037109 L 67.521484 97.070312 L 31.566406 69.992188 L 16.748047 74.941406 L 53.328125 111.10156 L 16.748047 147.25977 L 31.566406 152.21094 L 67.521484 125.13086 L 67.523438 125.13086 L 127.24023 184.16016 L 163.00781 168.96289 L 163.00781 53.234375 L 127.24219 38.037109 z M 127.24023 80.158203 L 127.24023 142.03711 L 86.154297 111.09766 L 127.24023 80.158203 z " id="path887" style="fill:#007acc;fill-opacity:1"/>
+</svg>

html/tasks/chapter_1/hello_world/Main.css

@@ -0,0 +1,50 @@
+html {
+
+
+}
+
+@font-face {
+  font-family: 'Karate';
+  src:  url('Karate.ttf') format('truetype');
+}
+
+body {
+  margin: 0%;
+  padding: 0%;
+  border: 0%;
+  background-color: rgb(32, 32, 32);
+}
+  
+h1 {
+    color: rgb(0, 255, 13);
+    text-align: center;
+    font-size: 5em;
+    font-family: Karate;
+}
+
+
+p, h2, h3, h4, h5 {
+  color: white;
+}
+
+a { color: rgb(49, 188, 216); }
+a:hover { color: rgb(42, 255, 5); }
+
+.header{ /* This is an example of a class */
+
+
+
+}
+
+#video{ /* This is an example of an ID */
+
+
+}
+
+#linkimage{
+  position: fixed;
+  right: 1em;
+  bottom: 1em;
+  width: 10em;
+  height: 10em;
+}

html/tasks/chapter_1/hello_world/js/lorem-ipsum.js

@@ -0,0 +1,227 @@
+/**
+ * @fileOverview Generates "Lorem ipsum" style text.
+ * @author rviscomi@gmail.com Rick Viscomi,
+ * 		tinsley@tinsology.net Mathew Tinsley
+ * @version 1.0
+ */
+
+/**
+ *	Copyright (c) 2009, Mathew Tinsley (tinsley@tinsology.net)
+ *	All rights reserved.
+ *
+ *	Redistribution and use in source and binary forms, with or without
+ *	modification, are permitted provided that the following conditions are met:
+ *		* Redistributions of source code must retain the above copyright
+ *		  notice, this list of conditions and the following disclaimer.
+ *		* Redistributions in binary form must reproduce the above copyright
+ *		  notice, this list of conditions and the following disclaimer in the
+ *		  documentation and/or other materials provided with the distribution.
+ *		* Neither the name of the organization nor the
+ *		  names of its contributors may be used to endorse or promote products
+ *		  derived from this software without specific prior written permission.
+ *
+ *	THIS SOFTWARE IS PROVIDED BY MATHEW TINSLEY ''AS IS'' AND ANY
+ *	EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ *	WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ *	DISCLAIMED. IN NO EVENT SHALL <copyright holder> BE LIABLE FOR ANY
+ *	DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ *	(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ *	LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ *	ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ *	(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ *	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @class Jibborish generator.
+ */
+var LoremIpsum = function () {
+};
+
+/**
+ * Average number of words per sentence.
+ * @constant {number}
+ */
+LoremIpsum.WORDS_PER_SENTENCE_AVG = 24.460;
+
+/**
+ * Standard deviation of the number of words per sentence.
+ * @constant {number}
+ */
+LoremIpsum.WORDS_PER_SENTENCE_STD = 5.080;
+
+/**
+ * List of possible words.
+ * @constant {Array.string}
+ */
+LoremIpsum.WORDS = [
+		'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur',
+		'adipiscing', 'elit', 'curabitur', 'vel', 'hendrerit', 'libero',
+		'eleifend', 'blandit', 'nunc', 'ornare', 'odio', 'ut',
+		'orci', 'gravida', 'imperdiet', 'nullam', 'purus', 'lacinia',
+		'a', 'pretium', 'quis', 'congue', 'praesent', 'sagittis', 
+		'laoreet', 'auctor', 'mauris', 'non', 'velit', 'eros',
+		'dictum', 'proin', 'accumsan', 'sapien', 'nec', 'massa',
+		'volutpat', 'venenatis', 'sed', 'eu', 'molestie', 'lacus',
+		'quisque', 'porttitor', 'ligula', 'dui', 'mollis', 'tempus',
+		'at', 'magna', 'vestibulum', 'turpis', 'ac', 'diam',
+		'tincidunt', 'id', 'condimentum', 'enim', 'sodales', 'in',
+		'hac', 'habitasse', 'platea', 'dictumst', 'aenean', 'neque',
+		'fusce', 'augue', 'leo', 'eget', 'semper', 'mattis', 
+		'tortor', 'scelerisque', 'nulla', 'interdum', 'tellus', 'malesuada',
+		'rhoncus', 'porta', 'sem', 'aliquet', 'et', 'nam',
+		'suspendisse', 'potenti', 'vivamus', 'luctus', 'fringilla', 'erat',
+		'donec', 'justo', 'vehicula', 'ultricies', 'varius', 'ante',
+		'primis', 'faucibus', 'ultrices', 'posuere', 'cubilia', 'curae',
+		'etiam', 'cursus', 'aliquam', 'quam', 'dapibus', 'nisl',
+		'feugiat', 'egestas', 'class', 'aptent', 'taciti', 'sociosqu',
+		'ad', 'litora', 'torquent', 'per', 'conubia', 'nostra',
+		'inceptos', 'himenaeos', 'phasellus', 'nibh', 'pulvinar', 'vitae',
+		'urna', 'iaculis', 'lobortis', 'nisi', 'viverra', 'arcu',
+		'morbi', 'pellentesque', 'metus', 'commodo', 'ut', 'facilisis',
+		'felis', 'tristique', 'ullamcorper', 'placerat', 'aenean', 'convallis',
+		'sollicitudin', 'integer', 'rutrum', 'duis', 'est', 'etiam',
+		'bibendum', 'donec', 'pharetra', 'vulputate', 'maecenas', 'mi',
+		'fermentum', 'consequat', 'suscipit', 'aliquam', 'habitant', 'senectus',
+		'netus', 'fames', 'quisque', 'euismod', 'curabitur', 'lectus',
+		'elementum', 'tempor', 'risus', 'cras'
+];
+
+/**
+ * Generate "Lorem ipsum" style words.
+ * @param num_words {number} Number of words to generate.
+ * @return {string} "Lorem ipsum..."
+ */
+LoremIpsum.prototype.generate = function (num_words) {
+	var words, ii, position, word, current, sentences, sentence_length, sentence;
+	
+	/**
+	 * @default 100
+	 */
+	num_words = num_words || 100;
+	
+	words = [LoremIpsum.WORDS[0], LoremIpsum.WORDS[1]];
+	num_words -= 2;
+	
+	for (ii = 0; ii < num_words; ii++) {
+		position = Math.floor(Math.random() * LoremIpsum.WORDS.length);
+		word = LoremIpsum.WORDS[position];
+		
+		if (ii > 0 && words[ii - 1] === word) {
+			ii -= 1;
+			
+		} else {
+			words[ii] = word;
+		}
+	}
+	
+	sentences = [];
+	current = 0;
+	
+	while (num_words > 0) {
+		sentence_length = this.getRandomSentenceLength();
+		
+		if (num_words - sentence_length < 4) {
+			sentence_length = num_words;
+		}
+		
+		num_words -= sentence_length;
+		
+		sentence = [];
+		
+		for (ii = current; ii < (current + sentence_length); ii++) {
+			sentence.push(words[ii]);
+		}
+		
+		sentence = this.punctuate(sentence);
+		current += sentence_length;
+		sentences.push(sentence.join(' '));
+	}
+	
+	return sentences.join(' ');
+};
+
+/**
+ * Insert commas and periods in the given sentence.
+ * @param {Array.string} sentence List of words in the sentence.
+ * @return {Array.string} Sentence with punctuation added.
+ */
+LoremIpsum.prototype.punctuate = function (sentence) {
+	var word_length, num_commas, ii, position;
+	
+	word_length = sentence.length;
+	
+	/* End the sentence with a period. */
+	sentence[word_length - 1] += '.';
+	
+	if (word_length < 4) {
+		return sentence;
+	}
+	
+	num_commas = this.getRandomCommaCount(word_length);
+	
+	for (ii = 0; ii <= num_commas; ii++) {
+		position = Math.round(ii * word_length / (num_commas + 1));
+		
+		if (position < (word_length - 1) && position > 0) {
+			/* Add the comma. */
+			sentence[position] += ',';
+		}
+	}
+	
+	/* Capitalize the first word in the sentence. */
+	sentence[0] = sentence[0].charAt(0).toUpperCase() + sentence[0].slice(1);
+	
+	return sentence;
+};
+
+/**
+ * Produces a random number of commas.
+ * @param {number} word_length Number of words in the sentence.
+ * @return {number} Random number of commas
+ */
+LoremIpsum.prototype.getRandomCommaCount = function (word_length) {
+	var base, average, standard_deviation;
+	
+	/* Arbitrary. */
+	base = 6;
+	
+	average = Math.log(word_length) / Math.log(base);
+	standard_deviation = average / base;
+	
+	return Math.round(this.gaussMS(average, standard_deviation));
+};
+
+/**
+ * Produces a random sentence length based on the average word length
+ * of an English sentence.
+ * @return {number} Random sentence length
+ */
+LoremIpsum.prototype.getRandomSentenceLength = function () {
+	return Math.round(
+			this.gaussMS(
+					LoremIpsum.WORDS_PER_SENTENCE_AVG,
+					LoremIpsum.WORDS_PER_SENTENCE_STD
+			)
+	);
+};
+
+/**
+ * Produces a random number.
+ * @return {number} Random number
+ */
+LoremIpsum.prototype.gauss = function () {
+	return (Math.random() * 2 - 1) +
+			(Math.random() * 2 - 1) +
+			(Math.random() * 2 - 1);
+};
+
+/**
+ * Produces a random number with Gaussian distribution.
+ * @param {number} mean
+ * @param {number} standard_deviation
+ * @return {number} Random number
+ */
+LoremIpsum.prototype.gaussMS = function (mean, standard_deviation) {
+	return Math.round(this.gauss() * standard_deviation + mean);
+};

html/tasks/chapter_1/hello_world/oppgave.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+<html lang="nb">
+
+    <head>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" href="Main.css">
+        <style>
+            body{
+                margin-bottom: 13em;
+                margin-left: 4em;
+                margin-right: 17em; 
+            }
+        </style>
+        <script src="./js/lorem-ipsum.js"></script>
+
+        <title>Hello World!</title>
+    </head>
+
+    <body>
+        
+        <!--Comment-->
+        <h1>Header</h1>
+        <p>This is an example of a website. Please turn down the volume in order to play the soundcloud track. (Which doesn't exist anymore because I removed it some time ago ¯\_(ツ)_/¯</p>
+        <br>
+
+
+        <h2 class=header>Class Header</h2>
+        <p>
+            <a href="">Click me!</a>
+        </p>
+        <br>
+
+
+        <h2>Lorem Ipsum</h2>
+        <p>
+            <script>
+                lorem = new LoremIpsum();
+                loremtext = lorem.generate(1000);
+                document.write(loremtext);
+            </script>
+        </p>
+
+        
+        <img src="./Images/html5.svg" id="linkimage">
+
+    </body>
+
+</html>

html/tasks/chapter_1/oppgave 2/oppgave.html

@@ -0,0 +1,15 @@
+<!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>Oppgave X</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Oppgave X</h1>
+    </body>
+</html>

html/tasks/chapter_2/clock/oppgave.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../../../../resources/css/main.css">
+    <title>Clock</title>
+</head>
+<body>
+    <h1>Clock</h1>
+    <p>The clock right now is: <span id="pointOfTime">Couldn't recieve data</span>.</p>
+
+    <script src="script.js"></script>
+</body>
+</html>

html/tasks/chapter_2/clock/script.js

@@ -0,0 +1,15 @@
+window.onload = updateTime;
+
+function updateTime() {
+    var time = new Date();
+    var timeBox = document.getElementById("pointOfTime");
+    var hours = time.getHours();
+    var minutes = time.getMinutes();
+    var seconds = time.getSeconds();
+
+    timeBox.innerHTML = hours+":"+minutes+":"+seconds;
+
+/*  setTimeout(updateTime, 1000);   */
+}
+
+setInterval(updateTime, 1000);

html/tasks/chapter_3/examples/oppgave.html

@@ -0,0 +1,56 @@
+<!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">
+    <link rel="stylesheet" href="../../../../resources/css/main.css">
+    <title>Document</title>
+</head>
+<body>
+    <!-- HTML -->
+    <h1 id="header_1">Header</h1>
+    <p id="paragraph_1">A paragraph</p>
+    <button type="button" id="button_1">Do something!</button>
+    <br>
+    <p>Button clicks: <span id="counter">0</span></p>
+
+    
+
+    <!-- Script -->
+    <script>
+        console.log("The script is working");
+        //alert("Test");
+        document.write("<p>test</p>");
+
+        //var navn = prompt("What is your name?"); //XSS not possible
+        //console.log("Name: " + navn)
+
+        var num1 = 3;
+        var num2 = 4;
+        var Oneplus2 = num1 + num2; //Variable name cannot start with a number?
+        console.log("Num1 and num2 is: " + Oneplus2);
+        console.log("Num1 and num2 is: " + num1 + num2); //Wrong. Need to escape string type
+        console.log("Num1 and num2 is: " + (num1 + num2)); //Right.
+        
+        //num = parseInt(prompt("Tall1: "));
+
+
+        var clickcount = 0;
+        var button_1 = document.getElementById("button_1");
+        button_1.onclick = go; //Be careful not to write () or the function will execute upon site loading and not react to the button.
+
+        function go(){
+            var paragraph1 = document.getElementById("paragraph_1");
+            paragraph1.innerHTML = "New paragraph"
+
+            document.getElementById("header_1").innerHTML = "New Header";
+
+            clickcount += 1; //JS allows these ways of writing math
+            document.getElementById("counter").innerHTML = clickcount;
+            
+
+        }
+    </script>
+</body>
+</html>

html/tasks/chapter_5/task11_tables/oppgave.html

@@ -0,0 +1,30 @@
+<!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>Oppgave 11</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Oppgave 11</h1>
+
+        <div class=center>
+            <div class="inline">
+                Lag <input type="number" id="amount" value="0" min="0" max="999"> tilfeldige tall mellom 0 og <input type="number" id="range" value="0" min="0">
+                <button id="reload">Reload</button>
+            </div>
+
+            <table id="table">
+                <thead>
+                    <tr>
+                        <th>Tall</th>
+                    </tr>
+                </thead>
+            </table>
+        </div>
+    </body>
+</html>

html/tasks/chapter_5/task11_tables/script.js

@@ -0,0 +1,34 @@
+const table = document.getElementById("table");
+const globalAmount = document.getElementById("amount");
+const globalRange = document.getElementById("range");
+const reloadButton = document.getElementById("reload");
+
+const listHeader = table.innerHTML;
+
+globalAmount.addEventListener("input", updateList, false);
+globalRange.addEventListener("input", updateList, false);
+reloadButton.addEventListener("click", updateList, false);
+
+function updateList() {
+	addToList(generateNums(globalAmount.value, globalRange.value), table);
+}
+
+function addToList(numArray, table) {
+	rows = '';
+	for (i in numArray) {
+		rows += '<tr><td>' + numArray[i] + '</td></tr>';
+	}
+	table.innerHTML = listHeader + rows;
+}
+
+function generateNums(amount, range) {
+	let array = [];
+	for (i=0; i<amount; i++) {
+		array[i] = Math.ceil(Math.random()*range);
+	}
+	return array;
+}
+
+function sumTable(table) {
+	
+}

html/tasks/chapter_5/task12_encryption/oppgave.html

@@ -0,0 +1,38 @@
+<!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>Rot n</title>
+    <link rel="stylesheet" href="../../../../resources/css/main.css">
+    <script async src="script.js"></script>
+</head>
+<body>
+    
+    <h1>Rot(n)</h1>
+
+    <h2>Encryption</h2>
+    <form id="encrypt">
+        Message<br>
+        <input type="text" name="Message" id="emess">
+         Cipher:
+        <input type="number" name="Cipher" min="0" max="26" id="enum"> 
+        <input type="submit" value="Submit">
+      </form>
+
+      <p id="etext"></p>
+
+      <h2>Decryption</h2>
+      <form id="decrypt">
+        Message<br>
+        <input type="text" name="Message" id="dmess">
+        Cipher: 
+        <input type="number" name="Cipher" min="0" max="26" id="dnum"> 
+        <input type="submit" value="Submit">
+      </form>
+
+      <p id="dtext"></p>
+
+</body>
+</html>

html/tasks/chapter_5/task12_encryption/script.js

@@ -0,0 +1,71 @@
+var encForm = document.getElementById("encrypt");
+var emess = document.getElementById("emess");
+var eciph = document.getElementById("enum");
+var etext = document.getElementById("etext");
+encForm.onsubmit=function(evt){
+    evt.preventDefault();
+    etext.innerHTML = encrypt(emess.value, parseInt(eciph.value));
+}
+
+var decForm = document.getElementById("decrypt");
+var dmess = document.getElementById("dmess");
+var dciph = document.getElementById("dnum");
+var dtext = document.getElementById("dtext");
+decForm.onsubmit=function(evt){
+    evt.preventDefault();
+    dtext.innerHTML = decrypt(dmess.value, parseInt(dciph.value));
+}
+
+function mod(x,n){
+    return ((x%n)+n)%n;
+}
+
+
+function encrypt(mess,number){
+    messArray=mess.split('');
+    result=[];
+
+    for (i in messArray){
+        x=messArray[i].charCodeAt(0);
+
+        if (x>64 && x<91){
+            x-=64;
+            x+=number;
+            x=mod(x,26);
+            x+=64;
+        } else if (x>96 && x<123){
+            x-=96;
+            x+=number;
+            x=mod(x,26);
+            x+=96;
+        }
+        result.push(String.fromCharCode(x));
+    }
+    result = result.join("");
+    return result;
+
+}
+
+function decrypt(mess,number){
+    messArray=mess.split('');
+    result=[];
+
+    for (i in messArray){
+        x=messArray[i].charCodeAt(0);
+
+        if (x>64 && x<91){
+            x-=64;
+            x-=number;
+            x=mod(x,26);
+            x+=64;
+        } else if (x>96 && x<123){
+            x-=96;
+            x-=number;
+            x=mod(x,26);
+            x+=96;
+        }
+        result.push(String.fromCharCode(x));
+    }
+    result = result.join("");
+    return result;
+}

html/tasks/chapter_6/canvas/oppgave.html

@@ -0,0 +1,13 @@
+<!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>Canvas Test</title>
+    <script async src="script.js"></script>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+</body>
+</html>

html/tasks/chapter_6/canvas/script.js

@@ -0,0 +1,64 @@
+var canvas=document.getElementById("canvas");
+ 
+document.getElementsByTagName("body")[0].style.margin="0cm";
+canvas.width = document.documentElement.clientWidth;
+canvas.height = document.documentElement.clientHeight;
+ 
+const ctx = canvas.getContext("2d");
+let canvasColor = '#000000';
+let rectSize = 20;
+ 
+ 
+rect(0,0,33,20);
+rect(100,100,120,203);
+ 
+ 
+function rect(x, y, length, height) {
+    ctx.beginPath();
+    ctx.rect(x, y, length, height);
+    ctx.fillRect(x, y, length, height);
+    ctx.stroke();
+}
+ 
+canvas.onclick = function(evt) {
+    x = evt.clientX;
+    y = evt.clientY;
+    rect(x-(rectSize/2), y-(rectSize/2), rectSize, rectSize);
+}
+ 
+document.getElementsByTagName("body")[0].addEventListener('keydown', changeColor, false);
+ 
+function changeColor(evt) {
+    if (evt.key == "r") {
+        canvasColor = '#ff0000'
+    }
+    if (evt.key == "B") {
+        canvasColor = '#000000'
+    }
+    if (evt.key == "g") {
+        canvasColor = '#00ff00'
+    }
+    if (evt.key == "b") {
+        canvasColor = '#0000ff'
+    }
+    if (evt.key == "y") {
+        canvasColor = '#ffff00'
+    }
+    if (evt.key == "+") {
+        rectSize+=4;
+    }
+     
+    if (evt.key == "-") {
+        try {
+            rectSize-=4;
+            if (rectSize < 0) throw "rectSize too small"
+        } catch(err) {
+            rectSize+=4;
+            console.error(err);
+        }
+    }
+     
+ 
+    ctx.strokeStyle = canvasColor;
+    ctx.fillStyle = canvasColor;
+}

html/tasks/chapter_6/canvashouse/oppgave.html

@@ -0,0 +1,23 @@
+<!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>Canvas House</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Canvas House</h1>
+
+        <div class="center">
+            <canvas id="House"></canvas>
+            <br>
+            <canvas id="color"></canvas>
+            <br>
+            <input type="color" id="colorPicker">
+        </div>
+    </body>
+</html>

html/tasks/chapter_6/canvashouse/script.js

@@ -0,0 +1,117 @@
+const houseC = document.getElementById("House");
+const colorC = document.getElementById("color");
+const colorPick = document.getElementById("colorPicker");
+
+/*Define dimensions of canvas */
+houseC.width = 480;
+houseC.height = 480;
+colorC.width = 480;
+colorC.height = 480;
+
+/*Initialize canvas contexts */
+const house = houseC.getContext("2d");
+const color = colorC.getContext("2d");
+
+/*Define points for house */
+const housePoints = [
+    {x: houseC.width/2, y: houseC.height/3},
+    {x: houseC.width/3, y: houseC.height/2},
+    {x: houseC.width/3, y: houseC.height/4*3},
+    {x: houseC.width/3*2, y: houseC.height/4*3},
+    {x: houseC.width/3*2, y: houseC.height/2}
+];
+
+/*Initialize script */
+clearCanvas();
+drawHouseOutline();
+drawHouse("#ffffff");
+drawColors();
+
+
+colorC.addEventListener("click", chooseColor, false);
+
+/*Changes color of the house depending on clicked color on colorCanvas */
+function chooseColor(evt) {
+    x = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; //BUG: goes from -1 to 479
+    y = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+
+    x -= colorC.offsetLeft;
+    y -=colorC.offsetTop;
+
+    if (((x>colorC.width/5) && (x<colorC.width/5*2)) && ((y>colorC.height/5*2) && (y<colorC.height/5*3))) {
+        drawHouse("#ff0000");
+    }
+    if (((x>colorC.width/5*2) && (x<colorC.width/5*3)) && ((y>colorC.height/5*2) && (y<colorC.height/5*3))) {
+        drawHouse("#00ff00");
+    }
+    if (((x>colorC.width/5*3) && (x<colorC.width/5*4)) && ((y>colorC.height/5*2) && (y<colorC.height/5*3))) {
+        drawHouse("#0000ff");
+    }
+}
+
+/*Add color from colorPicker to house */
+colorPick.addEventListener("input", pickColor, false);
+function pickColor() {
+    drawHouse(colorPick.value);
+}
+
+/*Fills canvases with white at init*/
+function clearCanvas() {
+    house.beginPath();
+    house.fillStyle='#ffffff';
+    house.fillRect(0, 0, houseC.width, houseC.height);
+    house.stroke();
+
+    color.beginPath();
+    color.fillStyle='#ffffff';
+    color.fillRect(0, 0, colorC.width, colorC.height);
+    color.stroke(); 
+}
+
+/*Draws the color boxes in colorCanvas at init*/
+function drawColors() {
+
+    for(i=0; i<3; i++) {
+        color.beginPath();
+        switch (i) {
+            case 0:
+                color.fillStyle="#ff0000";
+                break;
+            case 1:
+                color.fillStyle="#00ff00";
+                break;
+            case 2:
+                color.fillStyle="#0000ff";
+                break;
+        }
+        x = colorC.width/5*(i+1);
+        y = colorC.height/5*2;
+        size = colorC.width/5;
+        color.fillRect(x, y, size, size);
+        color.stroke();
+    }
+    
+}
+
+/*Draws the outline of the house at init */
+function drawHouseOutline() {
+    house.beginPath();
+    house.lineJoin = "round";
+    house.strokeStyle = '#000000';
+    house.lineWidth = 20;
+    for (points in housePoints) {
+        house.lineTo(housePoints[points].x, housePoints[points].y);
+    }
+    house.closePath();
+    house.stroke();
+}
+
+/*Fills the house with a color*/
+function drawHouse(color) {
+    house.beginPath();
+    house.fillStyle=color;
+    for (points in housePoints) {
+        house.lineTo(housePoints[points].x, housePoints[points].y);
+    }
+    house.fill();
+}

html/tasks/chapter_6/task10_localstorage/custom.css

@@ -0,0 +1,15 @@
+.textboxGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ justify-content: space-evenly;
+}
+
+.textboxGridElement {
+    justify-self: center;
+    align-self: center;
+    width: 30%;
+    margin: 1em;
+    place-self: center;
+    background-color: rgb(120, 120, 120);
+    padding: 40px;
+}

html/tasks/chapter_6/task10_localstorage/oppgave.html

@@ -0,0 +1,39 @@
+<!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>Oppgave 10</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <link rel="stylesheet" href="custom.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Oppgave 10</h1>
+
+        <div class="center">
+            <div class="inline">
+                <label for="author">Author: </label>
+                <input type="text" id="author">
+                <label for="title">Title: </label>
+                <input type="text" id="title">
+                <button id=input style="
+                    border-radius: 5px;
+                    font-size: 15px;
+                    padding: 5px;
+                    ">Input</button>
+            </div>
+
+            <div class="inline">
+                <button id="send">Send to localstorage</button>
+                <button id="get">Retrieve from localstorage</button>
+            </div>
+
+            <div class="textboxGrid">
+            </div>
+
+        </div>
+    </body>
+</html>

html/tasks/chapter_6/task10_localstorage/script.js

@@ -0,0 +1,46 @@
+authorTextBox = document.getElementById("author");
+titleTextBox = document.getElementById("title");
+inputButton = document.getElementById("input");
+sendLocalstorageButton = document.getElementById("send");
+getLocalstorageButton = document.getElementById("get");
+grid = document.getElementsByClassName("textboxGrid")[0]
+
+inputButton.addEventListener("click", addTextBoxLocal, false);
+sendLocalstorageButton.addEventListener("click", sendLocalstorage, false);
+getLocalstorageButton.addEventListener("click", getLocalstorage, false);
+
+function addTextBoxLocal() {
+    addTextBox(authorTextBox.value, titleTextBox.value);
+    authorTextBox.value = "";
+    titleTextBox.value = "";
+}
+
+function addTextBox(author, title) {
+    box = '<div class="textboxGridElement">';
+    box+= '<h2>' + author + '</h2>';
+    box += '<p>' + title + '</p>';
+    box += '</div>';
+    grid.innerHTML += box;
+}
+
+function sendLocalstorage() {
+    const elements = document.getElementsByClassName("textboxGridElement");
+
+    // Make array of objects that contain title and author, and send to localstorage
+    let objectArray = [];
+    for (i=0; i<elements.length; i++) {
+        let author = elements[i].querySelector("h2").innerHTML;
+        let title = elements[i].querySelector("p").innerHTML;
+        objectArray[i] = {author: author, title: title};
+    }
+    localStorage.setItem('messages', JSON.stringify(objectArray));
+    grid.innerHTML = "";
+}
+
+function getLocalstorage() {
+
+    let objectArray = JSON.parse(localStorage.getItem('messages'));
+    for (i=0; i<objectArray.length; i++) {
+        addTextBox(objectArray[i].author, objectArray[i].title);
+    }
+}

html/tasks/chapter_6/task3_kvitter/custom.css

@@ -0,0 +1,66 @@
+
+#mainBody {
+
+  background-color: rgb(80, 80, 80);
+  margin: auto;
+  width: 60%;
+  padding: 10%;
+  height: max-content;
+
+}
+
+form {
+  margin: auto;
+  width: 60%;
+}
+
+textarea {
+  resize: none;
+  
+  border: 2px solid lightseagreen;
+  border-radius: 1em;
+  padding: 0.5em;
+
+  display: block;
+  margin : 0 auto;
+
+  font-size: 20px;
+
+  width: 8em; /*https://www.w3schools.com/css/css3_transitions.asp*/
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+}
+  
+/* When the input field gets focus, change its width to 100% */
+textarea:focus {
+  width: 100%;
+}
+
+input[type=submit] {
+
+  border: 2px solid red;
+  background-color: rgb(255, 173, 173);
+  border-radius: 4em;
+  text-align: center;
+  font-size: large;
+
+  margin: 0 auto;
+  width: 12%;
+
+  cursor: pointer;
+
+  -webkit-transition: width 0.2s ease-in-out;
+  transition: width 0.2s ease-in-out;
+
+}
+
+input[type=submit]:hover {
+  background-color: rgb(253, 138, 138);
+
+  width: 15%;
+}
+
+.error {
+  color: red;
+  visibility: hidden;
+}

html/tasks/chapter_6/task3_kvitter/oppgave.html

@@ -0,0 +1,44 @@
+<!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>Kvitter</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <link rel="stylesheet" href="./custom.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Kvitter - Skriv innlegg</h1>
+
+        <div id=mainBody>
+
+            <form id=postData autocomplete="off">
+
+                <textarea id="postText"
+                    rows="5"
+                    cols="10"
+                    maxlength="100"
+                    wrap="soft"
+                    placeholder="Skriv noe her!" 
+                    autofocus
+                    required></textarea>
+                <p style="text-align: right;"><span id="charNum"></span>/100</p>
+
+                <h2>Captcha</h2>
+
+                <p id="captchaQuestion"></p>
+
+                <input type="number" pattern="[0-10]" id="captchaAnswer" required><br>
+                <p class="error" id="captchaError"> Du svarte feil. Prøv igjen.</p> <br>
+                Hvilken dag er det i dag? <input type="date" id="date"> <br>
+                <p class="error" id=dateError>Feil dato. Prøv igjen.</p>
+                <input type="submit" value="Post">
+
+            </form>
+
+        </div>
+    </body>
+</html>

html/tasks/chapter_6/task3_kvitter/script.js

@@ -0,0 +1,67 @@
+var postData = document.getElementById("postData");
+var postText = document.getElementById("postText");
+var charNum = document.getElementById("charNum");
+var captchaDate = document.getElementById("date");
+var dateError = document.getElementById("dateError");
+var captchaText = document.getElementById("captchaQuestion");
+var captchaAnswer = document.getElementById("captchaAnswer");
+var captchaError = document.getElementById("captchaError");
+
+let captchaNum;
+
+captchaText.onload = generateCaptcha();
+
+postData.onsubmit=function(evt){
+    evt.preventDefault();
+
+    if (!checkCaptcha()) {
+        captchaError.style.visibility = "visible";
+        generateCaptcha();
+        return false;
+    }
+    if (!checkDate()) {
+        dateError.style.visibility = "visible";
+        return false;
+    }
+
+    clearPost();
+    
+}
+
+postText.oninput=function(){
+charNum.innerHTML = postText.value.length;
+}
+
+
+function generateCaptcha() {
+    let Num1 = Math.ceil(Math.random()*5);
+    let Num2 = Math.ceil(Math.random()*5);
+    captchaNum = Num1+Num2;
+    captchaText.innerHTML = (String(Num1) + " + " + String(Num2));
+}
+
+function checkCaptcha() {
+    return (captchaAnswer.value == captchaNum) ? true : false;
+}
+
+function checkDate() {
+    var today = new Date();
+
+    var month = String(today.getMonth()+1);
+    if (month.length != 2) {
+        month = "0" + month;
+    }
+
+    var date = today.getFullYear() + "-" + month + "-" + today.getDate();
+    return (date == captchaDate.value) ? true : false;
+}
+
+function clearPost() {
+    postText.value = "";
+    captchaError.style.visibility = "hidden";
+    dateError.style.visibility = "hidden";
+    date.value = "";
+    captchaAnswer.value = "";
+    charNum.innerHTML = "0";
+    generateCaptcha();
+}

html/tasks/extra/task1/oppgave.html

@@ -0,0 +1,13 @@
+<!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>Almost Increasing Sequence</title>
+        <script async src="script.js"></script>
+    </head>
+    <body>
+        Se i terminalen.
+    </body>
+</html>

html/tasks/extra/task1/script.js

@@ -0,0 +1,24 @@
+/*
+Om vi ser på tallene som trappetrinn, kan vi omdefinere problemet til at tallene
+ikke må trappe ned to ganger i løpet av rekken. Enten må vi ta vekk det ene nedtrappet
+eller så må vi ta vekk det andre, men vi står fortsatt alltid igjen med ett av dem.
+*/
+
+function almostIncreasingSequence(sequence) {
+    let decreaseCounter=0;
+    for (elements in sequence){
+        if (sequence[elements] > sequence[parseInt(elements)+1]) {
+            decreaseCounter++;
+            if (decreaseCounter > 1) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+/* Test */
+console.log("[1,3,2,1]" + " -> " + almostIncreasingSequence([1,3,2,1]));
+console.log("[1,3,2]" + " -> " + almostIncreasingSequence([1,3,2]));
+console.log("[1,3,2,4,5,6,8]" + " -> " + almostIncreasingSequence([1,3,2,4,5,6,8]));
+console.log("[1,3,2,4,5,6,8,2]" + " -> " + almostIncreasingSequence([1,3,2,4,5,6,8,2]));

html/tasks/template/OppgaveMal/oppgave.html

@@ -0,0 +1,15 @@
+<!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>Oppgave X</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Oppgave X</h1>
+    </body>
+</html>

html/test_15.11.19/html/task1.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Oppgave 1</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+    <h1>Oppgave 1</h1>
+
+    <script src="../javascript/task1.js"></script>
+
+    <p>Sjekk terminalen</p>
+
+</body>
+</html>

html/test_15.11.19/html/task2.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Oppgave 2</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+    <h1>Oppgave 2</h1>
+
+    <script src="../javascript/task2.js"></script>
+
+    <p>Sjekk terminalen</p>
+
+</body>
+</html>

html/test_15.11.19/html/task3.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Oppgave 3</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+    <h1>Oppgave 3</h1>
+
+    <script src="../javascript/task3.js"></script>
+
+    <p>Sjekk terminalen</p>
+    
+</body>
+</html>

html/test_15.11.19/html/task4.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Oppgave 4</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+    <h1>Oppgave 4</h1>
+
+    <script src="../javascript/task4.js"></script>
+
+    <p>Sjekk terminalen</p>
+    
+</body>
+</html>

html/test_15.11.19/html/task5.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Oppgave 5</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+    <h1>Oppgave 5</h1>
+
+    <p>Alder: <span id="age"></span> år</p>
+    <p>Standard pris: <span id="standardPrice">kr</span></p>
+    <p>Rabatt: <span id="discount"></span>%</p>
+    <p>Sluttpris: <span id="endPrice">kr</span></p>
+
+    <script src="../javascript/task5.js"></script>
+    
+</body>
+</html>

html/test_15.11.19/html/task6.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Oppgave 6 + 6C</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+    <h1>Oppgave 6 + 6C</h1>
+
+    <h3>Spørsmål</h3>
+    <p><span id="question"></span></p>
+
+    <button id="refreshButton">Oppdater side</button>
+
+    <script src="../javascript/task6.js"></script>
+    
+</body>
+</html>

html/test_15.11.19/html/task7.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Oppgave 7</title>
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+    <h1>Oppgave 7</h1>
+
+    <p>Antall 6ere: <span id="6s"></span></p>
+    <p>Antall tall over 50: <span id="biggerThan50Amount"></span></p>
+    <p>Prosent tall over 50: <span id="biggerThan50Percent"></span>%</p>
+
+    <script src="../javascript/task7.js"></script>
+
+
+    
+</body>
+</html>

html/test_15.11.19/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="no">
+<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>Prøve 15.11.19</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <h1>Prøve 15.11.2019</h1>
+    
+    <a href="html/task1.html">Oppgave 1</a>
+    <br>
+    <a href="html/task2.html"> Oppgave 2</a>
+    <br>
+    <a href="html/task3.html">Oppgave 3</a>
+    <br>
+    <a href="html/task4.html"> Oppgave 4</a>
+    <br>
+    <a href="html/task5.html">Oppgave 5</a>
+    <br>
+    <a href="html/task6.html"> Oppgave 6</a>
+    <br>
+    <a href="html/task7.html"> Oppgave 7</a>
+
+
+
+</body>
+</html>

html/test_15.11.19/javascript/task1.js

@@ -0,0 +1,4 @@
+const num1 = 5;
+const num2 = 10;
+
+console.log(num1 + " ganger " + num2 + " er " + (num1 * num2));

html/test_15.11.19/javascript/task2.js

@@ -0,0 +1,14 @@
+/*Input from user and convert to lower case*/
+const firstName = prompt("Hva er fornavnet ditt?").toLowerCase();
+const surname = prompt("Hva er etternavnet ditt?").toLowerCase();
+const domain = prompt("Skriv inn et domenenavn", "eksempel.no").toLowerCase();
+
+
+/*Combine the input and print it out*/
+const email = firstName + "." + surname + "@" + domain;
+console.log("Email: " + email);
+
+/*Combine and add a random number between 1 and 100  with a little bit lower probability for 1 and 100*/
+const mailNum = parseInt((Math.random() *100) +1);
+const altEmail = firstName + "." + surname + mailNum + "@" + domain;
+console.log ("Alternativ Email: " + altEmail);

html/test_15.11.19/javascript/task3.js

@@ -0,0 +1,14 @@
+//Oppgave a
+console.log("a)");
+
+var gate = "Kongens gate";
+var husnr = 432;
+var oppgang = "b"; //added quotation marks
+var adresse = gate + husnr + oppgang;
+console.log(adresse); //added semicolon
+
+//Oppgave b
+console.log("b)");
+
+console.log("Adressen er " + gate + " " + husnr + oppgang);
+console.log("Gaten er " + gate + ", husnummeret er " + husnr + ", oppgang " + oppgang);

html/test_15.11.19/javascript/task4.js

@@ -0,0 +1,18 @@
+//Oppgave a
+const priceSum = 857;
+const discountNum = 0.25;
+const tipNum = 0.1;
+
+//Oppgave b
+
+/*Jeg antar at tipsen blir regnet ut før rabatten er påført*/
+
+let totalPrice = (priceSum - (discountNum*priceSum) + (tipNum*priceSum));
+
+//Oppgave c
+
+const personNum = 5;
+const pricePerPerson = (totalPrice/personNum).toFixed(2);
+
+console.log("Antall personer: " + personNum);
+console.log("Pris per person: " + pricePerPerson + "kr");

html/test_15.11.19/javascript/task5.js

@@ -0,0 +1,47 @@
+/*Input and variables */
+const routePrice = [150, 250, 50];
+const ageDiscount = [0.0, 0.5, 1.0, 0.3];
+
+let route = prompt("Hvilken reisestrekning skal du reise? Skriv inn et tall \n 1 = By-Sjø \n 2 = Sjø-Fjell \n 3 = Fjell-By", "1");
+
+let pris = 0;
+let totalsum = 0;
+
+let age = parseInt(prompt("Hvor mange år er du?"));
+
+/*Jeg antar at 0-2 betyr fra og med 0 til (ikke med) 2 */
+
+/*Process what discount should be chosen based on age */
+if ( age >= 0 && age < 2) {
+    discountNum = 0;
+} else if (age < 16) {
+    discountNum = 1;
+} else if (age < 65) {
+    discountNum = 2;
+} else if (age >= 65) {
+    discountNum = 3;
+}
+
+/*I dette punktet i pseudokoden står det at
+* den rabatterte prisen ut ifra alder og rute
+* skal stå i variabel "pris", men jeg går ut
+* ifra at "pris" er ment som standard pris og at
+* "totalsum" er den rabatterte prisen.
+*/
+
+pris = routePrice[route];
+totalsum = routePrice[route]*ageDiscount[discountNum];
+
+
+/*Output */
+let ageBox = document.getElementById("age");
+ageBox.innerHTML = age;
+
+let standardPriceBox = document.getElementById("standardPrice");
+standardPriceBox.innerHTML = pris;
+
+let discountBox = document.getElementById("discount");
+discountBox.innerHTML = (1.0-ageDiscount[discountNum])*100;
+
+let endPriceBox = document.getElementById("endPrice");
+endPriceBox.innerHTML = totalsum;

html/test_15.11.19/javascript/task6.js

@@ -0,0 +1,25 @@
+const questions = [
+    "Hvor mange centimeter er det i en meter", //Dette spørsmålet mangler spørsmålstegn med vilje
+    "Hvor mange mennesker bor det i verden?",
+    "Hvilke toner finnes i en C-dur skala?",
+    "Hvem har verdensrekorden i 100-meter løping?"
+];
+
+/*Set a random question from "questions[]" into "questionbox" */
+let questionBox = document.getElementById("question");
+let randomNum = Math.floor((Math.random()*questions.length));
+questionBox.innerHTML = questions[randomNum];
+
+/*Check for question marks in the current question (no need to search at the last character as this is a one sentence question) */
+if (!(questions[randomNum].includes("?"))){
+    questionBox.style = "color: red";
+    questionBox.innerHTML = "Spørsmålet kan ikke bli vist frem ettersom det mangler spørsmålstegn. Kontakt administrator.";
+}
+
+/*Button function */
+function refresh(){
+    window.location.assign(window.location.hostname); // Kilde: https://www.w3schools.com/js/js_window_location.asp
+}
+
+let refreshBut = document.getElementById("refreshButton");
+refreshBut.onclick = refresh;

html/test_15.11.19/javascript/task7.js

@@ -0,0 +1,24 @@
+/*Initialize variables */
+let numbers = [0];
+let statement1Counter = 0;
+let statement2Counter = 0;
+
+/*Add numbers to the array and check if the number is 6 or equal to/bigger than 50 */
+for(i=0; i<1000; i++) {
+    numbers[i] = Math.floor(Math.random()*101);
+    if (numbers[i] == 6) {
+        statement1Counter++;
+    } else if (numbers[i] >= 50) {
+        statement2Counter++;
+    }
+}
+
+/*Output */
+const statement1Box = document.getElementById("6s");
+statement1Box.innerHTML = statement1Counter;
+
+const statement2Box = document.getElementById("biggerThan50Amount");
+statement2Box.innerHTML = statement2Counter;
+
+const statement2Box2 = document.getElementById("biggerThan50Percent");
+statement2Box2.innerHTML = ((statement2Counter/numbers.length)*100);

html/test_15.11.19/style.css

@@ -0,0 +1,18 @@
+h1{
+    color: rgb(130, 130, 255);
+    text-align: center;
+}
+
+h3{
+    color: rgb(140, 255, 130); 
+}
+
+body{
+    background-color: rgb(36, 36, 36);
+    margin-left: 10%;
+    color: white;
+}
+
+a{
+    color: turquoise;
+}

index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+<html>
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="author" content="Øystein Kristoffer Tveit">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <html lang="nb">
+
+        <title>Indeks IT2</title>
+        <link rel="stylesheet" href="./resources/css/main.css">
+        <link rel="stylesheet" href="https://use.typekit.net/kmr1aoz.css">
+    </head>
+
+    <body>
+        <h1>Indeks IT2</h1>
+
+        <div class="center">
+            <div class="leftalign">
+
+                <h2>Kapittel 1</h2>
+                <p><a href="./html/tasks/chapter_1/hello_world/oppgave.html">Oppgave 1 - Hello World</a></p>
+                <p><a href="./html/tasks/chapter_1/oppgave 2/oppgave.html">Oppgave 2</a></p>
+
+                <h2>Kapittel 2</h2>
+                <p><a href="./html/tasks/chapter_2/clock/oppgave.html">Clock</a></p>
+
+                <h2>Kapittel 3</h2>
+                <p><a href="./html/tasks/chapter_3/examples/oppgave.html">Variable Examples</a></p>
+
+                <h2>Kapittel 5</h2>
+                <p><a href="./html/tasks/chapter_5/task11_tables/oppgave.html">Oppgave 11 - Table Number Generator</a></p>
+                <p><a href="./html/tasks/chapter_5/task12_encryption/oppgave.html">Oppgave 12 - Rot(n) Encryption</a></p>
+
+                <h2>Kapittel 6</h2>
+                <p><a href="./html/tasks/chapter_6/canvas/oppgave.html">Canvas test</a></p>
+                <p><a href="./html/tasks/chapter_6/canvashouse/oppgave.html">Canvas House</a></p>
+                <p><a href="./html/tasks/chapter_6/task3_kvitter/oppgave.html">Oppgave 3 - Kvitter</a></p>
+                <p><a href="./html/tasks/chapter_6/task10_localstorage/oppgave.html">Oppgave 10 - Localstorage & JSON test</a></p>
+
+                <br><br>
+
+                <h2>Ekstra</h2>
+                <p><a href="./html/tasks/extra/task1/oppgave.html">Almost Increasing Sequence</a></p>
+                
+            </div>
+        </div>
+
+    </body>
+
+</html>

resources/css/main.css

@@ -0,0 +1,123 @@
+body {
+
+    --blue: rgb(40, 131, 208);
+    --green: rgb(145, 226, 44);
+    --red: rgb(249, 38, 119);
+    --yellow: rgb(253, 151, 31);
+    --purple: rgb(174, 129, 255);
+
+    --grey1: rgb(40, 40, 40);
+    --grey2: rgb(60, 60, 60);
+    --grey3: rgb(80, 80, 80);
+    --grey4: rgb(120, 120, 120);
+
+    --border-color: white;
+
+    --radius: 15px;
+    --standardMargin: 15px;
+ 
+    background-color: var(--grey1);
+    color: white;
+ 
+    margin: 0px;
+    padding: 0px;
+         
+    margin-right: 2%;
+    margin-left: 8%;
+    margin-top: 5%;
+     
+    font-family: museo-sans-rounded, sans-serif;
+    font-weight: 300;
+    font-style: normal;
+ 
+}
+
+button {
+    background-color: var(--grey4);
+    padding: 15px;
+    display: inline-block;
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius);
+    color: white;
+    font-size: 16pt;
+}
+button:hover {background-color: var(--grey3);}
+button:focus {outline:0;}
+ 
+h1 {
+    color: var(--blue);
+    text-align: center;
+    background-color: var(--grey2);
+    padding: 15px;
+    margin-left: 10%;
+    margin-right: 10%;
+    border-radius: var(--radius);
+}
+ 
+h2 {
+    color: var(--green);
+}
+ 
+a { color: #66D9EF; }
+a:hover { color: #A6E22E; }
+ 
+form {
+ 
+}
+ 
+input[type=text] {
+    
+}
+
+input[type=color] {
+    width: 4em;
+    height: 2em;
+    background-color: var(--grey4);
+}
+ 
+.center {
+    background-color: var(--grey3);
+    margin: auto;
+    margin-bottom: 10%;
+    width: 70%;
+    padding: 5%;
+    height: max-content;
+    border-radius: var(--radius);
+}
+ 
+.center * {
+    margin: auto;
+    display: block;
+}
+
+.inline {
+    margin: var(--standardMargin);
+}
+
+.inline * {
+    display: inline-block;
+}
+
+.leftalign * {
+    margin: var(--standardMargin);
+    text-align: left;
+}
+
+
+table {
+    width: 100%;
+}
+
+td, th {
+    border: 1px solid var(--border-color);
+    padding: 8px;
+}
+
+tr:nth-child(even) { background-color: #00000033}
+
+tr:hover { background-color: rgba(255, 255, 255, 0.281);}
+
+th {
+    text-align: left;
+    background-color: #4CAF50;
+}