Začetna verzija spletnega stroboskopa

lovre · Mar 5, 2016 · 2596e81 · 2596e81
1 parent 7b4bd13
commit 2596e81
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 675 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1 +1,11 @@
-# stroboskop
+# Spletni barvni stroboskop
+
+1\. domača naloga pri predmetu [Osnove informacijskih sistemov](https://ucilnica1516.fri.uni-lj.si/course/view.php?id=54) (opis)
+
+## Kratek opis naloge
+
+Na [GitHub](https://github.com) je na voljo javni repozitorij [https://github.com/lovre/stroboskop](https://github.com/lovre/stroboskop), ki vsebuje nedelujoč spletni stroboskop. V okviru domače naloge ustvarite kopijo repozitorija ter popravite in dopolnite obstoječo implementacijo spletne strani tako, da bo končna aplikacija z vsemi delujočimi funkcionalnostimi izgledala kot na sliki spodaj. 
+
+![Stroboskop](stroboskop.gif)
+
+
diff --git a/nepotrebno.js b/nepotrebno.js
@@ -0,0 +1,10 @@
+/**
+ * nepotrebno - Useless JavaScript
+ *
+ * @license GPLv3
+ * @author  OIS
+ * @version 1.0.0
+ */
+
+var foo = 1; var bar = 2;
+var baz = foo + bar;
diff --git a/skripta.js b/skripta.js
@@ -0,0 +1,59 @@
+window.addEventListener('load', function() {
+	//stran nalozena
+
+	//Dodaj novo barvo
+	var dodajBarvo = function(event) {
+		var input = document.createElement('button');
+        var picker = new jscolor(input);
+        picker.fromRGB(Math.floor(Math.random()*255), Math.floor(Math.random()*255), Math.floor(Math.random()*255))
+        document.getElementById("barve").appendChild(input);
+	}
+
+	document.querySelector("#novaBarva") 
+		.addEventListener('click', dodajBarvo);
+
+	//Odstrani barve
+
+	//Stroboskop
+	var vrednosti = [];
+	var minCas = 0;
+	var maxCas = 0;
+	var ustavi = false;
+
+	var spremeniBarvo = function(id) {
+		document.getElementById("stroboskop").style.backgroundColor = "#"+vrednosti[id];
+
+		if (ustavi) {
+			ustavi = false;
+		} else {
+			novId = (id+1) % vrednosti.length;
+			timeout = Math.floor((Math.random() * (maxCas-minCas)) + minCas);
+			setTimeout(function() {spremeniBarvo(novId)} , timeout);
+		}		
+	}
+
+	var stop = function(event) {
+		ustavi = true;
+	}
+
+	var zagon = function(event) {
+		vrednosti = [];
+		var barve = document.querySelectorAll("#barve > button");
+		for (i = 0; i < barve.length; i++) {
+			var barva = barve[i];
+			vrednosti.push(barva.innerHTML);
+		}
+
+		minCas = 1000;
+		maxCas = 1000;
+		spremeniBarvo(0);
+
+		var start = document.querySelector("#start");
+		start.innerHTML = "Ustavi stroboskop";
+		start.removeEventListener('click', zagon);
+		start.addEventListener('click', stop);
+	}
+
+	document.querySelector("#start").addEventListener('click', zagon);
+
+});
diff --git a/stili.css b/stili.css
@@ -0,0 +1,47 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+glava {
+    margin: 20px;
+}
+
+telo {
+    flex: auto;
+   	margin: 10px;
+	width: calc(100% - 50px);
+	overflow: auto;
+	padding: 10px;
+}
+
+.stroboskop {
+	margin: 0px; 
+	margin-bottom: 5px;
+	position: relative; 
+	height: 20px; 
+	width: calc(100% - 20px); 
+	float: left; 
+	padding: 10px;
+}
+
+#barve > button {
+	border: 0px;
+	margin: 5px;
+}
+
+#start {
+    float: right;
+    width: 200px;
+    background: white;
+    height: 50px;
+    font-size: 18px;
+}
+
+#novaBarva, #odstraniBarve {
+	background: white;
+}
diff --git a/stroboskop.gif b/stroboskop.gif
diff --git a/stroboskop.html b/stroboskop.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>..:: Stroboskop ::..</title>
+    <meta charset="UTF-8">
+
+    <script src="skripta.js"></script>
+</head>
+<body>
+
+
+<!-- GLAVA -->
+<glava>
+	<table style="width: 100%;">
+		<tr>
+			<td style="width: 200px;">
+				Izberi barve:
+			</td>
+			<td style="width: calc(100% - 20px);">
+				<span id="barve"></span> 
+				<input id="novaBarva" type="button" value="Dodaj barvo" />
+			</td>
+			<td rowspan="2" style="width: 300px;">
+				<button id="start">Zaženi stroboskop</button>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				Časovni interval: 
+			</td>
+			<td>
+				od najmanj <input id="min" value="50" /> ms do največ
+				<input id="max" value="500" /> ms
+			</td>
+
+		</tr>
+	</table>
+</glava>
+
+<!-- TELO -->
+<telo id="stroboskop"></telo>
+
+</body>
+</html>