oysteikt/IT2
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Add task

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2020-02-17 22:12:02 +01:00
parent d44a55e5b9
commit 8e45aba7a3
4 changed files with 91 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
html/tasks/chapter_8/task3_randomArrayData/oppgave.html Executable file
View File

@@ -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>

61
html/tasks/chapter_8/task3_randomArrayData/script.js Executable file
View File

@@ -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);
}
}

1
resources/css/main.css
View File

@@ -112,7 +112,6 @@ tr:hover {
.center * { .center * {
margin: auto; margin: auto;
display: block;
} }
.inline { .inline {

1
resources/css/scss/_classes.scss
View File

@@ -9,7 +9,6 @@
* { * {
margin: auto; margin: auto;
display: block;
} }
} }