-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathOppgave2.html
68 lines (60 loc) · 2.38 KB
/
Oppgave2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script>
// hjelpevariable for både view og controller
let contentDiv = document.getElementById('content');
// model
let numbers = [7, 3, 1, 5, 8];
let selectBarNo;
let inputValue;
let error = null;
// view
show();
function show() {
let svgInnerHtml = '';
let buttonState = selectBarNo == null ? 'disabled' : '';
for (let i = 0; i < numbers.length; i++) {
svgInnerHtml += createBar(numbers[i], i + 1);
}
contentDiv.innerHTML = `
<svg id="chart" width="500" viewBox="0 0 80 60">
${svgInnerHtml}
</svg><br/>
Valgt stolpe: <i>${selectBarNo || 'ingen'}</i>
<br/>
Verdi:
<input type="number" min="1" max="10" value="${inputValue || ''}" oninput="inputValue = this.value"/>
<button onclick="addBar()">Legg til stolpe</button>
<button ${buttonState} onclick="changeBar()" >Endre valgt stolpe</button>
<button ${buttonState} onclick="removeBar()">Fjerne valgt stolpe</button>
<div id="error" style="color:red">${error || ''}</div>
`;
}
function createBar(number, barNo) {
const width = 8;
const spacing = 2;
let x = (barNo - 1) * (width + spacing) + 1;
let height = number * 5;
let y = 60 - height;
let color = calcColor(1, 10, barNo);
let barStyle = selectBarNo == barNo ? 'stroke-width:1px;stroke:black' : '';
return `<rect onclick="selectBar(${barNo})" style="${barStyle}"
width="${width}" height="${height}" x="${x}" y="${y}" fill="${color}"></rect>`;
}
function calcColor(min, max, val) {
var minHue = 240, maxHue = 0;
var curPercent = (val - min) / (max - min);
var colString = "hsl(" + ((curPercent * (maxHue - minHue)) + minHue) + ",100%,50%)";
return colString;
}
</script>
<script src="Oppgave2.js"></script>
</body>
</html>