JohannesMorkrid.github.io/Alarm klokke.html at master · JohannesMorkrid/JohannesMorkrid.github.io · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alarm</title>
<link rel="stylesheet" href="Alarm.css" type="text/css">
</head>

<body>

	<div class="setup">
		<h1>Setup skjerm</h1>
		<form>
			<label>Tittel:    </label><input id="title" name="title" required><br>
			<label>Antall minutter:    </label><input id="min" type="number" name="time" step="any" required>
			<button disabled title="Fyll inn inputene">GO!</button>
		</form>
	</div>

	<div class="main">
		<div class="overlay">
			<h1>DAILY SPRINT MEETING</h1>
		</div>
		<div id="bar"></div>
		<h1 id="clock">01:55</h1>
	</div>

	<iframe src="silent.mp3" allow="autoplay" style="display:none" id="iframeAudio"></iframe>
	<script>

		//Lagrer lyden til alarmen
		var sound = new Audio("sound.mp3");

		//Lagrer h1, input, div og button elementene fra html dokumentet
		var h1El = document.getElementsByTagName("h1");
		var input = document.getElementsByTagName("input");
		var divEl = document.getElementsByTagName("div");
		var button = document.getElementsByTagName("button")[0];

		//Angir en rekke variabler for tid
		var time = 0;
		var barTime = 0;
		var startTime = 0;
		var i = 0;

		//Angir en global variabel som senere skal brukes til oppdatering av klokka
		var update = "";

		//Lagrer søk for parametere til nettsiden
		var urlParams = new URLSearchParams(window.location.search);

		//Sjekker om parameterne er satt
		if((urlParams.has("title")) && (urlParams.has("time"))) {

			//Kjører koden
			change();

		}

		//Legger til eventlistner for når brukeren skriver i inputene
		input[0].addEventListener("input", test);
		input[1].addEventListener("input", test);

		//Sjekker om inputene har value
		test();

		//Lager en funksjon å sjekke om inputene ikke er blanke
		function test() {


			//Sjekker om tittelen og tallet ikke er blanke
			if((input[0].value != "") && (input[1].value != "") && !(/^\s+$/.test(input[0].value))) {

				//Fjerner diabled attributen
				button.removeAttribute("disabled");

			} else {

				//Legger til disabled attributen
				button.setAttribute("disabled","");

			}

		}

		//Lager en funksjon som kjører når knappen presses
		function change() {

			//Setter tiden, bar tiden og start tiden til det brukeren har inputet
			time = Math.round(urlParams.get("time")*60);
			barTime = time;
			startTime = time;

			//Setter tittelen til det brukeren har inputa
			h1El[1].innerHTML = urlParams.get("title");

			//Displayer klokka, og fjerner startenyen
			divEl[0].style.display = "none";
			divEl[1].style.display = "block";

			//Endrer tiden
			h1El[2].innerHTML = convertToTime(time);

			//Trigger funksjonen en gang å legger til en interval som kjører hvert 10ms
			trigger();
			update = setInterval(trigger, 10);

		}

		//Lager en funksjon som endrer tid og progresjons bar
		function trigger() {

			//Minsker baren
			divEl[3].style.width = (barTime/startTime)*window.innerWidth + "px";
			barTime -= 0.01;

			//Øker tallet for klokke oppdatering
			i++;

			//Sjekker om i >= 100 for å oppdatere klokka
			if(i >= 100) {

				//Oppdaterer tiden, men verdien kan ikke bli mindre enn 0
				time = (time - 1) < 0 ? 0 : time - 1;

				//Reseter i
				i = 0;

			}

			//Oppdaterer klokka
			h1El[2].innerHTML = convertToTime(time);

			//Sjekker om bartime er mindre eller lik 0
			if(barTime <= 0) {

				//Endrer teksten sin farge
				h1El[2].style.color = "#e00505";

				//Spiller av lyden
				sound.play();

				//Fjerner baren
				divEl[3].style.width = 0;

				//Legger til class flick for å få animasjon
				h1El[2].className = "flick";

				//Fjerner intervalet, slik at klokken ikke oppdateres
				clearInterval(update);

			} else if(barTime <= 30) { //Sjekker ellers om 30 eller mindre sekunder igjen

				//Endrer baren sin farge
				divEl[3].style.backgroundColor = "#ec1d1d";

				//Legger til en animasjon
				divEl[3].style.animation = "colorChange .2s";

			}

		}

		//Lager en funksjon som tar imot et tall og gjør det om i en tid i formate "mm:ss"
		function convertToTime(a) {

			//Returnerer tid stringen
			return isNaN(a) ? "00:00" : (Math.floor(a/60) > 9 ? Math.floor(a/60) : "0" + Math.floor(a/60) ) + ":" + (a%60 > 9 ? a%60 :  "0" + a%60);

		}

	</script>
</body>
</html>