Skip to content

Instantly share code, notes, and snippets.

@vlazar-

vlazar-/kalkulator.html

Last active January 10, 2023 19:38
Show Gist options
  • Save vlazar-/80abd82b1654c1b27b392f4af602d87e to your computer and use it in GitHub Desktop.
Save vlazar-/80abd82b1654c1b27b392f4af602d87e to your computer and use it in GitHub Desktop.
Download ZIP
Js vjezbe 1
Raw
kalkulator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator</title>
</head>
<body>
<input id="display" type="text"></input>
<br>
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="op-div">/</button>
<br>
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="op-mult">*</button>
<br>
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="op-sub">-</button>
<br>
<button id="num-0">0</button>
<button id="decimal">.</button>
<button id="equals">=</button>
<button id="op-add">+</button>
<br>
<button id="clear">Očisti</button>
<script>
var display = document.getElementById("display");
var buttons = document.querySelectorAll("button");
var clear = document.getElementById("clear");
clear.addEventListener("click", function(event){
display.value = "";
});
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(event) {
var value = event.target.textContent;
if (value >= "0" && value <= "9") {
if (display.value === "0") {
display.value = value;
} else {
display.value += value;
}
} else if (value === "+" || value === "-" || value === "*" || value === "/") {
display.value += " " + value + " ";
} else if (value === "C") {
display.value = "0";
} else if (value === "=") {
var expression = display.value;
display.value = eval(expression);
}
});
}
</script>
</body>
</html>
Raw
krizic-kruzic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Križić-kružić</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
}
#reset-button {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<td id="cell-1"></td>
<td id="cell-2"></td>
<td id="cell-3"></td>
</tr>
<tr>
<td id="cell-4"></td>
<td id="cell-5"></td>
<td id="cell-6"></td>
</tr>
<tr>
<td id="cell-7"></td>
<td id="cell-8"></td>
<td id="cell-9"></td>
</tr>
</table>
<button type="submit" onClick="newGame()">Nova Igra</button>
<script>
var currentPlayer = "X";
var gameWon = false;
for (var i = 1; i <= 9; i++) {
var cell = document.getElementById("cell-" + i);
cell.addEventListener("click", function (event) {
if (event.target.textContent === "" && !gameWon) {
event.target.textContent = currentPlayer;
checkForWinner();
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
});
}
function checkForWinner() {
var cells = document.querySelectorAll("td");
var combinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (var i = 0; i < combinations.length; i++) {
if (cells[combinations[i][0]].textContent === cells[combinations[i][1]].textContent &&
cells[combinations[i][1]].textContent === cells[combinations[i][2]].textContent &&
cells[combinations[i][0]].textContent !== "") {
gameWon = true;
alert("Igrač " + cells[combinations[i][0]].textContent + " je pobijedio!");
}
}
}
function newGame(){
window.location.reload();
}
</script>
</body>
</html>
Raw
palindrom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrom</title>
</head>
<body>
<form>
<label for="word">Unesi tekst</label>
<input type="text" id="word">
<button type="button" id="check">Provjeri</button>
</form>
<p>Rezultat: <span id="result"></span></p>
<script>
function checkPalindrome(){
let word = document.querySelector("#word").value.toLowerCase();
let reverse = word.split('').reverse().join('');
let result = "nije palindrom";
if(word === reverse){
result = "palindrom";
}
document.querySelector("#result").innerHTML = result;
}
let button = document.querySelector("#check");
button.addEventListener("click", function(){
checkPalindrome();
});
</script>
</body>
</html>
Raw
zbroj.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zbrajanje</title>
</head>
<body>
<form>
<label for="num1">Unesi prvi broj:</label>
<input type="text" id="num1">
<label for="num2">Unesi drugi broj:</label>
<input type="text" id="num2">
<button type="button" onclick="calculateSum()">Izračunaj sumu</button>
</form>
<p>Rezultat: <span id="result"></span></p>
<script>
function calculateSum(){
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var sum = num1 + num2;
document.getElementById("result").innerHTML = sum;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment