Веб дизајн/К2 Јун 2021

Извор: SI Wiki
Пређи на навигацију Пређи на претрагу

Drugi kolokvijum u junskom roku 2021. godine održan je 10. juna. Postavka je dostupna sa stranice predmeta. JQuery biblioteka se uvozila preko minifikovanog JQuery fajla koji je bio dat u materijalima.

Rešenje

zadatak2.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="./jquery-3.7.1.min.js"></script>
		<script src="zadatak2.js"></script>
		<title>Document</title>
	</head>

	<style>
		td {
			height: 100px;
			width: 100px;
			border: 3px solid black;
		}
	</style>
	<body>
		<table>
			<tr>
				<td id="1"></td>
				<td id="2"></td>
				<td id="3"></td>
			</tr>
			<tr>
				<td id="4"></td>
				<td id="5"></td>
				<td id="6"></td>
			</tr>
			<tr>
				<td id="7"></td>
				<td id="8"></td>
				<td id="9"></td>
			</tr>
		</table>

		<br />

		Tezina: <input type="text" name="" id="tezina" />
		<button onclick="pokreniIgru()">Pokreni</button>
	</body>
</html>

zadatak2.js

var tezina;

function pokreniIgru() {
	tezina = document.getElementById("tezina").value;
	if (/^\d+$/.test(tezina)) {
		tezina = parseInt(tezina);
	} else {
		alert("Morate uneti tezinu");
		return;
	}
	let prev;
	let cnt = 0;

	let interval = setInterval(() => {
		if (cnt == tezina) {
			if (prev) $("#" + prev).css("background-color", "white");
			clearInterval(interval);
			return;
		}
		let id = Math.floor(Math.random() * 9 + 1);
		if (prev) {
			$("#" + prev).css("background-color", "white");
		}
		$("#" + id).css("background-color", "red");
		prev = id;
		cnt++;
	}, 1000);
}

$(document).ready(function () {
	$("td").click(function () {
		let clickedTd = $(this);
		let id = clickedTd.attr("id");
		$("#" + id).css("background-color", "green");

		setTimeout(function () {
			let color = $("#" + id).css("background-color");
			if (
				$("#elementId").is(":not(:animated)") &&
				(color === "blue" || color === "rgb(0, 0, 255)")
			) {
				$("#" + id).css("background-color", "white");
			}
		}, 1000);
	});

	$("td").dblclick(function () {
		let clickedTd = $(this);
		let id = clickedTd.attr("id");
		let color = $("#" + id).css("background-color");
		if (color === "rgb(0, 0, 255)" || color === "blue") {
			$("#" + id).css("background-color", "white");
		} else {
			$("#" + id).css("background-color", "blue");
		}
	});
});