Îmbunătățește-ți abilitățile de programare prin exerciții practice în HTML, CSS și Lua. Alege nivelul de dificultate și rezolvă provocările pentru a-ți consolida cunoștințele.
Creează un formular de contact HTML care să conțină următoarele câmpuri: nume, email, subiect, mesaj și un buton de trimitere. Asigură-te că folosești atributele corespunzătoare pentru validare.
<!-- Creează formularul aici -->
<form>
<!-- Adaugă câmpurile necesare -->
</form>
<form action="#" method="post">
<div>
<label for="name">Nume:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="subject">Subiect:</label>
<input type="text" id="subject" name="subject" required>
</div>
<div>
<label for="message">Mesaj:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit">Trimite</button>
</form>
Creează structura unei pagini web folosind elementele semantice HTML5 (header, nav, main, section, article, aside, footer). Pagina ar trebui să conțină un meniu de navigare, un articol principal cu secțiuni și o bară laterală.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagină Semantică HTML5</title>
</head>
<body>
<!-- Creează structura semantică aici -->
</body>
</html>
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagină Semantică HTML5</title>
</head>
<body>
<header>
<h1>Titlul Site-ului</h1>
<nav>
<ul>
<li><a href="#">Acasă</a></li>
<li><a href="#">Despre</a></li>
<li><a href="#">Servicii</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Articol Principal</h2>
<section>
<h3>Prima Secțiune</h3>
<p>Conținutul primei secțiuni...</p>
</section>
<section>
<h3>A Doua Secțiune</h3>
<p>Conținutul celei de-a doua secțiuni...</p>
</section>
</article>
<aside>
<h3>Bară Laterală</h3>
<p>Informații suplimentare, linkuri sau reclame.</p>
</aside>
</main>
<footer>
<p>© 2023 Numele Site-ului. Toate drepturile rezervate.</p>
</footer>
</body>
</html>
Creează un tabel complex care să afișeze un orar săptămânal. Tabelul ar trebui să conțină îmbinări de celule (rowspan și colspan), anteturi pentru coloane și rânduri, și să fie accesibil.
<!-- Creează tabelul aici -->
<table>
<!-- Adaugă structura tabelului -->
</table>
<table border="1">
<caption>Orar Săptămânal</caption>
<thead>
<tr>
<th scope="col">Ora</th>
<th scope="col">Luni</th>
<th scope="col">Marți</th>
<th scope="col">Miercuri</th>
<th scope="col">Joi</th>
<th scope="col">Vineri</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">09:00 - 10:30</th>
<td>Matematică</td>
<td>Istorie</td>
<td>Fizică</td>
<td>Engleză</td>
<td>Geografie</td>
</tr>
<tr>
<th scope="row">10:45 - 12:15</th>
<td>Biologie</td>
<td colspan="2">Laborator Chimie</td>
<td>Informatică</td>
<td>Sport</td>
</tr>
<tr>
<th scope="row">12:15 - 13:00</th>
<td colspan="5" align="center">Pauză de masă</td>
</tr>
<tr>
<th scope="row">13:00 - 14:30</th>
<td>Română</td>
<td>Matematică</td>
<td rowspan="2">Proiect</td>
<td>Fizică</td>
<td>Chimie</td>
</tr>
<tr>
<th scope="row">14:45 - 16:15</th>
<td>Informatică</td>
<td>Engleză</td>
<td>Istorie</td>
<td>Română</td>
</tr>
</tbody>
</table>
Creează un card de produs folosind Flexbox. Cardul ar trebui să conțină o imagine, un titlu, o descriere, un preț și un buton de adăugare în coș. Asigură-te că elementele sunt aranjate corect și că designul este responsive.
<div class="product-card">
<img src="https://via.placeholder.com/300" alt="Produs">
<h3>Nume Produs</h3>
<p class="description">Descriere scurtă a produsului...</p>
<p class="price">99,99 Lei</p>
<button>Adaugă în coș</button>
</div>
/* Adaugă stilurile CSS aici */
.product-card {
/* Folosește Flexbox pentru a aranja elementele */
}
/* Stilizează celelalte elemente */
.product-card {
display: flex;
flex-direction: column;
max-width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product-card h3 {
margin: 1rem 1rem 0.5rem;
font-size: 1.2rem;
color: #333;
}
.product-card .description {
margin: 0 1rem 0.5rem;
font-size: 0.9rem;
color: #666;
flex-grow: 1;
}
.product-card .price {
margin: 0.5rem 1rem;
font-size: 1.3rem;
font-weight: bold;
color: #e63946;
}
.product-card button {
margin: 0.5rem 1rem 1rem;
padding: 0.8rem;
background-color: #4361ee;
color: white;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.product-card button:hover {
background-color: #3a0ca3;
}
@media (max-width: 768px) {
.product-card {
max-width: 100%;
}
}
Creează un layout de pagină folosind CSS Grid. Pagina ar trebui să conțină un header, un meniu de navigare, conținut principal, o bară laterală și un footer. Layout-ul ar trebui să fie responsive și să se adapteze la diferite dimensiuni de ecran.
<div class="grid-container">
<header class="header">Header</header>
<nav class="nav">Navigare</nav>
<main class="main">Conținut Principal</main>
<aside class="sidebar">Bară Laterală</aside>
<footer class="footer">Footer</footer>
</div>
/* Adaugă stilurile CSS Grid aici */
.grid-container {
/* Definește grid-ul */
}
/* Stilizează celelalte elemente */
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 1rem;
padding: 1rem;
}
.header {
grid-area: header;
background-color: #4361ee;
color: white;
padding: 1rem;
border-radius: 8px;
}
.nav {
grid-area: nav;
background-color: #f8f9fa;
padding: 1rem;
border-radius: 8px;
}
.main {
grid-area: main;
background-color: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.sidebar {
grid-area: sidebar;
background-color: #f8f9fa;
padding: 1rem;
border-radius: 8px;
}
.footer {
grid-area: footer;
background-color: #212529;
color: white;
padding: 1rem;
border-radius: 8px;
text-align: center;
}
/* Responsive layout */
@media (max-width: 768px) {
.grid-container {
grid-template-areas:
"header"
"nav"
Creează o animație CSS pentru un buton care să aibă efecte la hover și la click. Animația ar trebui să includă transformări, tranziții și keyframes pentru a crea un efect vizual atractiv.
<button class="animated-button">
<span>Apasă-mă</span>
</button>
/* Adaugă stilurile și animațiile CSS aici */
.animated-button {
/* Stilizează butonul */
}
/* Adaugă efectele hover și animațiile */
.animated-button {
position: relative;
padding: 12px 24px;
background-color: #4361ee;
color: white;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.animated-button span {
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.animated-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #3a0ca3;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
z-index: 0;
}
.animated-button:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-3px);
}
.animated-button:hover::before {
transform: scaleX(1);
transform-origin: left;
}
.animated-button:active {
transform: scale(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.animated-button:active span {
animation: pulse 0.3s ease;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
Scrie o funcție în Lua care să calculeze factorialul unui număr. Factorialul unui număr n (notat n!) este produsul tuturor numerelor întregi pozitive mai mici sau egale cu n.
Exemplu: 5! = 5 × 4 × 3 × 2 × 1 = 120
-- Funcția pentru calcularea factorialului
function factorial(n)
-- Implementează funcția aici
end
-- Testează funcția
print(factorial(5)) -- Ar trebui să afișeze 120
-- Funcția pentru calcularea factorialului
function factorial(n)
-- Verifică dacă n este un număr pozitiv
if n < 0 then
error("Factorialul este definit doar pentru numere pozitive")
end
-- Cazul de bază: 0! = 1
if n == 0 then
return 1
end
-- Calculează factorialul folosind o buclă
local result = 1
for i = 1, n do
result = result * i
end
return result
end
-- Testează funcția
print(factorial(5)) -- Afișează 120
print(factorial(0)) -- Afișează 1
print(factorial(10)) -- Afișează 3628800
-- Alternativă recursivă
function factorial_recursive(n)
if n < 0 then
error("Factorialul este definit doar pentru numere pozitive")
end
if n == 0 then
return 1
else
return n * factorial_recursive(n - 1)
end
end
print(factorial_recursive(5)) -- Afișează 120
Creează funcții pentru a manipula tabele în Lua: una pentru a filtra elementele unui tabel în funcție de un criteriu, una pentru a transforma fiecare element și una pentru a găsi suma elementelor.
-- Funcția pentru filtrarea elementelor
function filter(tabel, conditie)
-- Implementează funcția aici
end
-- Funcția pentru transformarea elementelor
function map(tabel, transformare)
-- Implementează funcția aici
end
-- Funcția pentru calcularea sumei
function sum(tabel)
-- Implementează funcția aici
end
-- Testează funcțiile
numere = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10}
numere_pare = filter(numere, function(x) return x % 2 == 0 end)
numere_patrate = map(numere, function(x) return x * x end)
suma = sum(numere)
print("Numere pare:", table.concat(numere_pare, ", "))
print("Pătratele numerelor:", table.concat(numere_patrate, ", "))
print("Suma numerelor:", suma)
-- Funcția pentru filtrarea elementelor
function filter(tabel, conditie)
local rezultat = {}
for i, valoare in ipairs(tabel) do
if conditie(valoare) then
table.insert(rezultat, valoare)
end
end
return rezultat
end
-- Funcția pentru transformarea elementelor
function map(tabel, transformare)
local rezultat = {}
for i, valoare in ipairs(tabel) do
table.insert(rezultat, transformare(valoare))
end
return rezultat
end
-- Funcția pentru calcularea sumei
function sum(tabel)
local total = 0
for i, valoare in ipairs(tabel) do
total = total + valoare
end
return total
end
-- Testează funcțiile
numere = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10}
numere_pare = filter(numere, function(x) return x % 2 == 0 end)
numere_patrate = map(numere, function(x) return x * x end)
suma = sum(numere)
print("Numere pare:", table.concat(numere_pare, ", "))
print("Pătratele numerelor:", table.concat(numere_patrate, ", "))
print("Suma numerelor:", suma)
-- Exemplu de utilizare combinată
suma_patratelor_pare = sum(map(filter(numere, function(x) return x % 2 == 0 end), function(x) return x * x end))
print("Suma pătratelor numerelor pare:", suma_patratelor_pare)
Creează un sistem simplu de inventar în Lua folosind programarea orientată pe obiecte. Sistemul ar trebui să permită adăugarea, eliminarea și listarea obiectelor, precum și verificarea cantității disponibile.
-- Clasa Inventar
Inventar = {}
Inventar.__index = Inventar
-- Constructor
function Inventar.new()
-- Implementează constructorul
end
-- Metoda pentru adăugarea unui obiect
function Inventar:adaugaObiect(nume, cantitate)
-- Implementează metoda
end
-- Metoda pentru eliminarea unui obiect
function Inventar:eliminaObiect(nume, cantitate)
-- Implementează metoda
end
-- Metoda pentru verificarea cantității
function Inventar:verificaCantitate(nume)
-- Implementează metoda
end
-- Metoda pentru listarea obiectelor
function Inventar:listeazaObiecte()
-- Implementează metoda
end
-- Testează sistemul de inventar
local inventar = Inventar.new()
inventar:adaugaObiect("Sabie", 1)
inventar:adaugaObiect("Poțiune", 5)
inventar:adaugaObiect("Scut", 1)
inventar:listeazaObiecte()
print("Cantitate poțiuni:", inventar:verificaCantitate("Poțiune"))
inventar:eliminaObiect("Poțiune", 2)
print("Cantitate poțiuni după utilizare:", inventar:verificaCantitate("Poțiune"))
-- Clasa Inventar
Inventar = {}
Inventar.__index = Inventar
-- Constructor
function Inventar.new()
local self = setmetatable({}, Inventar)
self.obiecte = {}
return self
end
-- Metoda pentru adăugarea unui obiect
function Inventar:adaugaObiect(nume, cantitate)
cantitate = cantitate or 1
if self.obiecte[nume] then
self.obiecte[nume] = self.obiecte[nume] + cantitate
else
self.obiecte[nume] = cantitate
end
print(string.format("S-a adăugat %d x %s în inventar", cantitate, nume))
end
-- Metoda pentru eliminarea unui obiect
function Inventar:eliminaObiect(nume, cantitate)
cantitate = cantitate or 1
if not self.obiecte[nume] then
print(string.format("Eroare: %s nu există în inventar", nume))
return false
end
if self.obiecte[nume] < cantitate then
print(string.format("Eroare: Nu există suficiente %s în inventar", nume))
return false
end
self.obiecte[nume] = self.obiecte[nume] - cantitate
-- Dacă cantitatea ajunge la 0, eliminăm obiectul din inventar
if self.obiecte[nume] <= 0 then
self.obiecte[nume] = nil
end
print(string.format("S-a eliminat %d x %s din inventar", cantitate, nume))
return true
end
-- Metoda pentru verificarea cantității
function Inventar:verificaCantitate(nume)
return self.obiecte[nume] or 0
end
-- Metoda pentru listarea obiectelor
function Inventar:listeazaObiecte()
print("Inventar:")
local areObiecte = false
for nume, cantitate in pairs(self.obiecte) do
print(string.format(" - %s: %d", nume, cantitate))
areObiecte = true
end
if not areObiecte then
print(" Inventarul este gol")
end
end
-- Testează sistemul de inventar
local inventar = Inventar.new()
inventar:adaugaObiect("Sabie", 1)
inventar:adaugaObiect("Poțiune", 5)
inventar:adaugaObiect("Scut", 1)
inventar:listeazaObiecte()
print("Cantitate poțiuni:", inventar:verificaCantitate("Poțiune"))
inventar:eliminaObiect("Poțiune", 2)
print("Cantitate poțiuni după utilizare:", inventar:verificaCantitate("Poțiune"))
-- Testăm și alte cazuri
print("\nTestăm alte cazuri:")
inventar:eliminaObiect("Poțiune", 10) -- Ar trebui să afișeze o eroare
inventar:eliminaObiect("Carte", 1) -- Ar trebui să afișeze o eroare
inventar:adaugaObiect("Poțiune", 10)
print("Cantitate poțiuni după adăugare:", inventar:verificaCantitate("Poțiune"))
inventar:listeazaObiecte()