diff --git a/oppgaver/uke7/reaksjonstid/index.html b/oppgaver/uke7/reaksjonstid/index.html new file mode 100644 index 0000000..9c606a6 --- /dev/null +++ b/oppgaver/uke7/reaksjonstid/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + +
+ + +
+ + + \ No newline at end of file diff --git a/oppgaver/uke7/reaksjonstid/mvc.js b/oppgaver/uke7/reaksjonstid/mvc.js new file mode 100644 index 0000000..d4833d9 --- /dev/null +++ b/oppgaver/uke7/reaksjonstid/mvc.js @@ -0,0 +1,49 @@ +// model +var app = document.getElementById('app'); +var html = ' '; +var lampArray = []; +var lightOn; + +// view +updateView(); +twentyFive(); +lightUpRandomLamp(); +function updateView() { + app.innerHTML = html + ``; +} + +// controller +function twentyFive() { + lampArray = []; + let lamp = 0; + for (i = 0; i < 25; i++) { + html += /*HTML*/ ` +
+ `; + lampArray.push(lamp) + lamp++; + } + updateView(); + +} + +function lightUpRandomLamp() { + checkForLightOn(); + let divToReplace = ' '; + let selectedLampIndex = Math.floor(Math.random() * lampArray.length); + divToReplace = document.getElementById(selectedLampIndex); + let divToreplaceWith = document.getElementById(selectedLampIndex).classList = `circles lightOn` + html = html.replace(divToReplace, divToreplaceWith); + clearScreen(); +} +function clearScreen() { + html = ''; +} +function checkForLightOn() { + for (i = 0; i < lampArray.length; i++) { + document.getElementById(i).classList.contains('circles') + if (document.getElementById(i).classList.contains("lightOn")) { + document.getElementById(i).classList = `circles`; + } + } + } diff --git a/oppgaver/uke7/reaksjonstid/style.css b/oppgaver/uke7/reaksjonstid/style.css new file mode 100644 index 0000000..8a9e681 --- /dev/null +++ b/oppgaver/uke7/reaksjonstid/style.css @@ -0,0 +1,27 @@ +#body { + margin: 0; + display: grid; + background: rgb(91, 85, 200); + background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 14%, rgba(0,212,255,1) 56%); +} +#app{ + position: relative; + display: grid; + grid-template-columns: repeat(5, 1fr); + + +} +.circles { + justify-items: stretch; + background-color: rgb(22, 2, 2); + border-radius: 50%; + height: 50px; + width: 50px; +} + +.lightOn { + background-color: yellow; + border-radius: 50%; + height: 50px; + width: 50px; +} \ No newline at end of file