geir/startit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

reaksjonstid

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-09-17 14:35:16 +02:00
parent 7364a1ded7
commit 9cda2e09ce
3 changed files with 95 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
oppgaver/uke7/reaksjonstid/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="body">
<div id="app">
<script src="mvc.js"></script>
</div>
</body>
</html>

49
oppgaver/uke7/reaksjonstid/mvc.js Normal file
View file

@ -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 + `<button onclick="lightUpRandomLamp()">Light up random lamp</button>`;
}
// controller
function twentyFive() {
lampArray = [];
let lamp = 0;
for (i = 0; i < 25; i++) {
html += /*HTML*/ `
<div class="circles" id="${lamp}"></div>
`;
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`;
}
}
}

27
oppgaver/uke7/reaksjonstid/style.css Normal file
View file

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