From 4581f41517b899d45513aa151bcc9c6898e31fcd Mon Sep 17 00:00:00 2001 From: h7x4 Date: Wed, 23 Sep 2020 14:48:27 +0200 Subject: [PATCH] Add assigment --- Exercise 5/index.html | 61 +++++++++++++++++++++++++++ Exercise 5/script.js | 95 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 156 insertions(+) create mode 100644 Exercise 5/index.html create mode 100644 Exercise 5/script.js diff --git a/Exercise 5/index.html b/Exercise 5/index.html new file mode 100644 index 0000000..e7eccfb --- /dev/null +++ b/Exercise 5/index.html @@ -0,0 +1,61 @@ + + + + + + IT2805 assignment 5: JavaScript introduction + + + + + + + + + + +

+ +

Part 5

+
+ + + +
+
1
+
2
+ +

Part 6

+ + + + + \ No newline at end of file diff --git a/Exercise 5/script.js b/Exercise 5/script.js new file mode 100644 index 0000000..36a15cb --- /dev/null +++ b/Exercise 5/script.js @@ -0,0 +1,95 @@ +/* -------------------------------------------------------------------------- */ +/* Part 2 */ +/* -------------------------------------------------------------------------- */ + +console.log('PART 2') + +/* Log i from 1 until i is no longer less than or equal to 20 */ +for (i=1; i<=20; i++) { + console.log(i); +} + +/* -------------------------------------------------------------------------- */ +/* Part 3 */ +/* -------------------------------------------------------------------------- */ + +console.log('PART 3') + +const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] + +/* A function that returns eplekake, eple, kake or n based on what n can be divided by */ +const eplekakeCheck = (n) => { + /* if it's divisible by 15 (which is 3*5), it's also divisible by both 3 and 5 */ + if (i % 15 == 0) return 'eplekake'; + else if (i % 3 == 0) return 'eple'; + else if (i % 5 == 0) return 'kake'; + else return String(n); +} + +/* Print the output of eplekakeCheck for each element in numbers */ +for (i of numbers) { + console.log(eplekakeCheck(i)); +} + +/* -------------------------------------------------------------------------- */ +/* Part 4 */ +/* -------------------------------------------------------------------------- */ + +/* Store the DOM node as a variable and change its innerText */ +const title = document.getElementById("title"); +title.innerText = 'Hello JavaScript'; + +/* -------------------------------------------------------------------------- */ +/* Part 5 */ +/* -------------------------------------------------------------------------- */ + +const magicBox = document.getElementById('magic'); + +function changeDisplay () { + magicBox.style.display = 'none' +} + +function changeVisibility () { + magicBox.style.display = 'block' + magicBox.style.visibility = 'hidden' +} + +function reset () { + magicBox.style.display = 'block' + magicBox.style.visibility = 'visible' +} + +/* Connect each button to their respective function */ +document.getElementById('displayButton').addEventListener('click', changeDisplay); +document.getElementById('visibilityButton').addEventListener('click', changeVisibility); +document.getElementById('resetButton').addEventListener('click', reset); + +/* -------------------------------------------------------------------------- */ +/* Part 6 */ +/* -------------------------------------------------------------------------- */ + +const technologies = [ + 'HTML5', + 'CSS3', + 'JavaScript', + 'Python', + 'Java', + 'AJAX', + 'JSON', + 'React', + 'Angular', + 'Bootstrap', + 'Node.js' +]; + +const technologyList = document.getElementById("tech"); + +/* + for each technology, create an HTML element, add the technology as innertext and append + the element as a child of the list +*/ +for (technology of technologies) { + const listElement = document.createElement('li'); + listElement.innerText = technology; + technologyList.appendChild(listElement); +}