diff --git a/html/tasks/chapter_8/task3_randomArrayData/oppgave.html b/html/tasks/chapter_8/task3_randomArrayData/oppgave.html new file mode 100755 index 0000000..3b0e919 --- /dev/null +++ b/html/tasks/chapter_8/task3_randomArrayData/oppgave.html @@ -0,0 +1,30 @@ + + + + + + + Oppgave X + + + + +

Oppgave 3

+ +
+
+ + +
+ + + + + + +
NummerData
+ +
+
+ + diff --git a/html/tasks/chapter_8/task3_randomArrayData/script.js b/html/tasks/chapter_8/task3_randomArrayData/script.js new file mode 100755 index 0000000..c1ea98f --- /dev/null +++ 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); + } +} diff --git a/resources/css/main.css b/resources/css/main.css index 52e48cf..8c09a08 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -112,7 +112,6 @@ tr:hover { .center * { margin: auto; - display: block; } .inline { diff --git a/resources/css/scss/_classes.scss b/resources/css/scss/_classes.scss index dafc305..ae19d1a 100644 --- a/resources/css/scss/_classes.scss +++ b/resources/css/scss/_classes.scss @@ -9,7 +9,6 @@ * { margin: auto; - display: block; } }