Te ćwiczenia są bardziej zaawansowane i wymagają umiejętności programowania w HTML, CSS i JavaScript. Rozwijają zdolności w zakresie interakcji użytkownika oraz tworzenia zaawansowanych elementów strony internetowej.
Stwórz stronę, która będzie dostosowywać swój wygląd do różnych rozdzielczości ekranu (desktop, tablet, telefon). Użyj mediów (media queries) w CSS do dopasowania rozmiarów obrazków, nagłówków i tekstu w zależności od wielkości ekranu:
<header>
<h1>Strona Responsywna</h1>
</header>
<img src="example.jpg" alt="Obrazek">
body {
font-family: Arial, sans-serif;
}
h1 {
color: #1a73e8;
}
@media (max-width: 600px) {
h1 {
font-size: 24px;
}
img {
width: 100%;
}
}
Stwórz formularz rejestracji użytkownika, który będzie miał walidację danych po stronie klienta (np. sprawdzanie, czy pole e-mail jest w odpowiednim formacie):
<form id="registrationForm">
<input type="text" id="name" placeholder="Imię" required>
<input type="email" id="email" placeholder="E-mail" required>
<input type="password" id="password" placeholder="Hasło" required>
<button type="submit">Zarejestruj</button>
</form>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
var email = document.getElementById('email').value;
if (!email.includes('@')) {
alert("Proszę podać poprawny adres e-mail!");
event.preventDefault();
}
});
Stwórz grę, w której komputer losuje liczbę w zakresie od 1 do 100, a użytkownik musi zgadnąć, jaka to liczba:
<input type="number" id="guess" placeholder="Zgadnij liczbę">
<button id="checkBtn">Sprawdź</button>
<p id="result"></p>
var randomNumber = Math.floor(Math.random() * 100) + 1;
document.getElementById("checkBtn").addEventListener("click", function() {
var guess = document.getElementById("guess").value;
if (guess > randomNumber) {
document.getElementById("result").textContent = "Za duża!";
} else if (guess < randomNumber) {
document.getElementById("result").textContent = "Za mała!";
} else {
document.getElementById("result").textContent = "Brawo! Zgadłeś!";
}
});
Stwórz galerię zdjęć, w której przy najechaniu kursorem na zdjęcie pojawia się delikatny efekt przejścia (np. rozmycie lub zmiana rozmiaru):
<div class="gallery">
<img src="image1.jpg">
<img src="image2.jpg">
</div>
.gallery img {
width: 200px;
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.1);
}
Stwórz system kart, które będą się animować przy przejściu kursora:
<div class="card">Karta 1</div>
<div class="card">Karta 2</div>
.card {
width: 200px;
height: 300px;
background-color: #ddd;
margin: 10px;
transition: transform 0.3s ease;
}
.card:hover {
transform: rotateY(10deg);
}
Na stronie umieść listę produktów z ocenami w formie gwiazdek (1-5):
<div class="product">
<p>Produkt 1</p>
<input type="radio" name="rating1" value="1">
<input type="radio" name="rating1" value="2">
<input type="radio" name="rating1" value="3">
<input type="radio" name="rating1" value="4">
<input type="radio" name="rating1" value="5">
</div>
var ratings = document.querySelectorAll('input[type="radio"]');
ratings.forEach(function(rating) {
rating.addEventListener('change', function() {
alert("Ocena: " + this.value);
});
});
Stwórz stronę z wykresem kołowym lub słupkowym przedstawiającym dane (np. sprzedaż):
<canvas id="myChart"></canvas>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
data: [30, 40, 30],
backgroundColor: ['#FF5733', '#33FF57', '#3357FF']
}]
}
});
Stwórz aplikację, która pozwala na dodawanie, usuwanie i oznaczanie zadań jako wykonane:
<input type="text" id="taskInput">
<button id="addTask">Dodaj zadanie</button>
<ul id="taskList"></ul>
document.getElementById("addTask").addEventListener("click", function() {
var taskInput = document.getElementById("taskInput").value;
if (taskInput) {
var li = document.createElement("li");
li.textContent = taskInput;
document.getElementById("taskList").appendChild(li);
taskInput = '';
}
});
Stwórz stronę, która zawiera animację SVG, np. obracający się obiekt:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
svg {
animation: rotate 3s infinite linear;
}
Stwórz kalkulator, który obsługuje podstawowe operacje matematyczne (dodawanie, odejmowanie, mnożenie, dzielenie):
<input type="number" id="num1">
<input type="number" id="num2">
<button id="add">Dodaj</button>
<p id="result"></p>
document.getElementById("add").addEventListener("click", function() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").textContent = "Wynik: " + result;
});
Stwórz stronę, na której tekst pojawia się w sposób animowany, litera po literze:
<p class="animated-text">Witaj na stronie!</p>
.animated-text {
display: inline-block;
opacity: 0;
animation: reveal 2s forwards;
}
@keyframes reveal {
0% { opacity: 0; }
100% { opacity: 1; }
}
Stwórz stronę, na której użytkownik może wybrać kolor tła za pomocą pola wyboru (input type="color"):
<input type="color" id="colorPicker">
document.getElementById('colorPicker').addEventListener('input', function(event) {
document.body.style.backgroundColor = event.target.value;
});
Stwórz stronę z efektem parallax (przesuwające się tło) podczas przewijania:
<div class="parallax">
<h2>Efekt Parallax</h2>
</div>
.parallax {
background-image: url('background.jpg');
height: 100vh;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Stwórz aplikację, która pozwala na dodawanie, edytowanie i usuwanie notatek w pamięci przeglądarki (localStorage):
<textarea id="noteInput"></textarea>
<button id="saveNote">Zapisz notatkę</button>
<ul id="noteList"></ul>
document.getElementById("saveNote").addEventListener("click", function() {
var note = document.getElementById("noteInput").value;
var notes = JSON.parse(localStorage.getItem("notes")) || [];
notes.push(note);
localStorage.setItem("notes", JSON.stringify(notes));
displayNotes();
});
function displayNotes() {
var notes = JSON.parse(localStorage.getItem("notes")) || [];
var noteList = document.getElementById("noteList");
noteList.innerHTML = '';
notes.forEach(function(note, index) {
var li = document.createElement("li");
li.textContent = note;
noteList.appendChild(li);
});
}
displayNotes();
Stwórz układ strony przy użyciu CSS Grid, który będzie składał się z trzech kolumn, z których środkowa będzie szersza:
<div class="grid-container">
<div>Kolumna 1</div>
<div>Kolumna 2</div>
<div>Kolumna 3</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.grid-container div {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
Stwórz przycisk, który po kliknięciu zmienia motyw strony na ciemny lub jasny:
<button id="themeToggle">Zmień motyw</button>
document.getElementById('themeToggle').addEventListener('click', function() {
document.body.classList.toggle('dark-theme');
});
body {
background-color: white;
color: black;
}
.dark-theme {
background-color: #333;
color: white;
}
Stwórz formularz, który sprawdza, czy użytkownik poprawnie wprowadził adres e-mail i numer telefonu:
<form id="contactForm">
<input type="email" id="email" placeholder="E-mail" required>
<input type="tel" id="phone" placeholder="Telefon" required>
<button type="submit">Wyślij</button>
</form>
document.getElementById('contactForm').addEventListener('submit', function(event) {
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var emailPattern = /^[^@]+@[^@]+\.[^@]+$/;
var phonePattern = /^[0-9]{9}$/;
if (!emailPattern.test(email) || !phonePattern.test(phone)) {
alert("Proszę podać poprawny adres e-mail i numer telefonu.");
event.preventDefault();
}
});
Stwórz wyszukiwarkę, która filtruje listę produktów na stronie w zależności od wprowadzonego zapytania:
<input type="text" id="searchInput" placeholder="Wyszukaj">
<ul id="productList">
<li>Laptop</li>
<li>Smartphone</li>
<li>Tablet</li>
</ul>
document.getElementById('searchInput').addEventListener('input', function() {
var query = this.value.toLowerCase();
var items = document.querySelectorAll('#productList li');
items.forEach(function(item) {
if (item.textContent.toLowerCase().includes(query)) {
item.style.display = 'list-item';
} else {
item.style.display = 'none';
}
});
});
Stwórz karuzelę zdjęć, która będzie przełączać się między obrazkami po kliknięciu przycisków:
<div class="carousel">
<img src="image1.jpg" alt="Obrazek 1">
<img src="image2.jpg" alt="Obrazek 2">
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
var currentIndex = 0;
var images = document.querySelectorAll('.carousel img');
document.querySelector('.next').addEventListener('click', function() {
currentIndex = (currentIndex + 1) % images.length;
updateCarousel();
});
document.querySelector('.prev').addEventListener('click', function() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateCarousel();
});
function updateCarousel() {
images.forEach(function(img, index) {
img.style.display = (index === currentIndex) ? 'block' : 'none';
});
}
updateCarousel();
Stwórz formularz, w którym użytkownik może dynamicznie dodawać nowe pola formularza:
<form id="dynamicForm">
<button id="addField">Dodaj pole</button>
<div id="fieldsContainer"></div>
</form>
document.getElementById('addField').addEventListener('click', function() {
var newField = document.createElement('input');
newField.type = 'text';
newField.placeholder = 'Nowe pole';
document.getElementById('fieldsContainer').appendChild(newField);
});