Stwórz stoper, który pozwala na rozpoczęcie, zatrzymanie i resetowanie odliczania.
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
<p id="timer">0</p>
let timer = 0;
let interval;
document.getElementById("start").addEventListener("click", () => {
interval = setInterval(() => {
document.getElementById("timer").textContent = ++timer;
}, 1000);
});
document.getElementById("stop").addEventListener("click", () => clearInterval(interval));
document.getElementById("reset").addEventListener("click", () => {
clearInterval(interval);
timer = 0;
document.getElementById("timer").textContent = timer;
});
Stwórz licznik, który zwiększa swoją wartość przy każdym kliknięciu przycisku.
<button id="clickCounter">Kliknij mnie!</button>
<p id="count">0</p>
let count = 0;
document.getElementById("clickCounter").addEventListener("click", () => {
document.getElementById("count").textContent = ++count;
});
Stwórz prosty kalkulator dodawania dwóch liczb.
<input type="number" id="num1">
<input type="number" id="num2">
<button id="calculate">Oblicz</button>
<p id="result">Wynik: </p>
document.getElementById("calculate").addEventListener("click", () => {
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
document.getElementById("result").textContent = "Wynik: " + (a + b);
});
Stwórz animowany kwadrat, który zmienia położenie po kliknięciu.
<div id="box" style="width: 50px; height: 50px; background-color: red; position: absolute;"></div>
document.getElementById("box").addEventListener("click", function() {
this.style.transform = `translate(${Math.random() * 300}px, ${Math.random() * 300}px)`;
});
Stwórz system powiadomień, który wyświetla komunikat po kliknięciu przycisku.
<button id="notify">Pokaż powiadomienie</button>
document.getElementById("notify").addEventListener("click", function() {
alert("To jest powiadomienie!");
});
Stwórz tabelę, w której użytkownik może edytować wartości.
<table border="1">
<tr>
<td contenteditable="true">Komórka 1</td>
<td contenteditable="true">Komórka 2</td>
</tr>
</table>
Stwórz zegar, który wyświetla bieżący czas.
<p id="clock"></p>
function updateClock() {
let now = new Date();
let hours = now.getHours().toString().padStart(2, "0");
let minutes = now.getMinutes().toString().padStart(2, "0");
let seconds = now.getSeconds().toString().padStart(2, "0");
document.getElementById("clock").textContent = hours + ":" + minutes + ":" + seconds;
}
setInterval(updateClock, 1000);
Stwórz formularz, który sprawdza poprawność wprowadzonych danych.
<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" required>
<label for="password">Hasło:</label>
<input type="password" id="password" required>
<button type="submit">Wyślij</button>
</form>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
if (!email || !password) {
alert("Wszystkie pola są wymagane!");
} else {
alert("Formularz został wysłany!");
}
});
Stwórz pasek, który przewija się w lewo i prawo po kliknięciu przycisku.
<div id="scrollBar" style="width: 100px; height: 30px; background-color: #ccc; overflow-x: auto;">
<div style="width: 200px; height: 30px; background-color: #f00;"></div>
</div>
<button id="scrollLeft">Przewiń w lewo</button>
<button id="scrollRight">Przewiń w prawo</button>
document.getElementById("scrollLeft").addEventListener("click", function() {
document.getElementById("scrollBar").scrollLeft -= 50;
});
document.getElementById("scrollRight").addEventListener("click", function() {
document.getElementById("scrollBar").scrollLeft += 50;
});
Stwórz panel, który rozwija się i zwija po kliknięciu.
<button id="togglePanel">Pokaż/Zwiń Panel</button>
<div id="panel" style="width: 200px; height: 200px; background-color: #aaa; display: none;"></div>
document.getElementById("togglePanel").addEventListener("click", function() {
let panel = document.getElementById("panel");
panel.style.display = (panel.style.display === "none") ? "block" : "none";
});
Stwórz przełącznik, który zmienia swój stan po kliknięciu.
<label for="switch">Przełącznik:</label>
<input type="checkbox" id="switch">
<p id="switchStatus">Wyłączony</p>
document.getElementById("switch").addEventListener("change", function() {
let status = this.checked ? "Włączony" : "Wyłączony";
document.getElementById("switchStatus").textContent = status;
});
Te ćwiczenia pomagają w nauce JavaScript, HTML i CSS poprzez tworzenie interaktywnych elementów na stronie.