init

2020-01-29 12:56:06 +01:00
commit 04efff0d15
51 changed files with 1673 additions and 0 deletions
--- a/html/tasks/chapter_6/canvas/oppgave.html
+++ b/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>
--- a/html/tasks/chapter_6/canvas/script.js
+++ b/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;
+}
--- a/html/tasks/chapter_6/canvashouse/oppgave.html
+++ b/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>
--- a/html/tasks/chapter_6/canvashouse/script.js
+++ b/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();
+}
--- a/html/tasks/chapter_6/task10_localstorage/custom.css
+++ b/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;
+}
--- a/html/tasks/chapter_6/task10_localstorage/oppgave.html
+++ b/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>
--- a/html/tasks/chapter_6/task10_localstorage/script.js
+++ b/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);
+    }
+}
--- a/html/tasks/chapter_6/task3_kvitter/custom.css
+++ b/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;
+}
--- a/html/tasks/chapter_6/task3_kvitter/oppgave.html
+++ b/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>
--- a/html/tasks/chapter_6/task3_kvitter/script.js
+++ b/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();
+}