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/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);
+    }
+}