Add task

2020-02-17 22:12:02 +01:00
parent d44a55e5b9
commit 8e45aba7a3
4 changed files with 91 additions and 2 deletions
--- a/html/tasks/chapter_8/task3_randomArrayData/oppgave.html
+++ b/html/tasks/chapter_8/task3_randomArrayData/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 X</title>
+    <link rel="stylesheet" href="../../../../resources/css/main.css" />
+    <script async src="./script.js"></script>
+  </head>
+  <body>
+    <h1>Oppgave 3</h1>
+
+    <div class="center">
+      <div class="inline">
+        <button id="getDataButton">Hent data fra listen</button>
+        <span id="dataSpan"></span>
+      </div>
+
+      <table id="dataTable">
+        <tr>
+          <th>Nummer</th>
+          <th>Data</th>
+        </tr>
+      </table>
+
+      <table id="history"></table>
+    </div>
+  </body>
+</html>
--- a/html/tasks/chapter_8/task3_randomArrayData/script.js
+++ b/html/tasks/chapter_8/task3_randomArrayData/script.js
@@ -0,0 +1,61 @@
+/* Initialize variables */
+
+const randomData = [['I am', 'Array'], 'green', 3, true];
+let newData = [];
+
+/* Register HTML DOM elements by variables */
+
+const getDataButton = document.getElementById('getDataButton');
+const dataSpan = document.getElementById('dataSpan');
+const dataTable = document.getElementById('dataTable');
+const historyTable = document.getElementById('history');
+
+/* Add event listeners */
+
+getDataButton.addEventListener('click', getRandomDataEntry, false);
+
+/* Init HTML */
+
+for (const item in randomData) {
+  const line = document.createElement('tr');
+  dataTable.appendChild(line);
+
+  const numberTd = document.createElement('td');
+  numberTd.innerHTML = parseInt(item) + 1;
+  line.appendChild(numberTd);
+
+  const itemTd = document.createElement('td');
+  itemTd.innerHTML = randomData[item];
+  line.appendChild(itemTd);
+}
+
+/* Gets random Data Entry and adds it to  */
+function getRandomDataEntry() {
+  const randomNumber = Math.floor(Math.random() * randomData.length);
+  const item = `${parseInt(randomNumber) + 1}. ${randomData[randomNumber]}`;
+  dataSpan.innerHTML = item;
+  newData.push(randomData[randomNumber]);
+  updateHistory();
+}
+
+function updateHistory() {
+  /* Clear table */
+  historyTable.innerHTML = '';
+
+  /* Add th */
+  const th = document.createElement('th');
+  th.innerHTML = 'Historikk';
+  historyTable.appendChild(th);
+
+  /* For each element, add tr and td */
+  for (let index = 0; index < newData.length; index++) {
+    const element = newData[index];
+
+    const line = document.createElement('tr');
+    historyTable.appendChild(line);
+
+    const td = document.createElement('td');
+    td.innerHTML = element;
+    line.appendChild(td);
+  }
+}
--- a/resources/css/main.css
+++ b/resources/css/main.css
@@ -112,7 +112,6 @@ tr:hover {

 .center * {
  margin: auto;
-  display: block;
 }

 .inline {
--- a/resources/css/scss/_classes.scss
+++ b/resources/css/scss/_classes.scss
@@ -9,7 +9,6 @@
    
    * {
        margin: auto;
-        display: block;
    }
 }