Exerciții de Programare

Î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.

HTML
CSS
Lua

Crearea unui formular de contact

Începător

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.

Exemplu de început
<!-- Creează formularul aici -->
<form>
  <!-- Adaugă câmpurile necesare -->
  
</form>
Soluție
<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>

Crearea unei structuri de pagină cu HTML5 semantic

Intermediar

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ă.

Exemplu de început
<!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>
Soluție
<!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>

Crearea unui tabel complex

Avansat

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.

Exemplu de început
<!-- Creează tabelul aici -->
<table>
  <!-- Adaugă structura tabelului -->
  
</table>
Soluție
<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>

Crearea unui card de produs cu Flexbox

Începător

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.

HTML
<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>
CSS de început
/* Adaugă stilurile CSS aici */
.product-card {
  /* Folosește Flexbox pentru a aranja elementele */
}

/* Stilizează celelalte elemente */
Soluție CSS
.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%;
  }
}

Crearea unui layout de pagină cu Grid

Intermediar

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.

HTML
<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>
CSS de început
/* Adaugă stilurile CSS Grid aici */
.grid-container {
  /* Definește grid-ul */
}

/* Stilizează celelalte elemente */
Soluție CSS
.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"
                        

Crearea unei animații CSS

Avansat

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.

HTML
<button class="animated-button">
  <span>Apasă-mă</span>
</button>
CSS de început
/* Adaugă stilurile și animațiile CSS aici */
.animated-button {
  /* Stilizează butonul */
}

/* Adaugă efectele hover și animațiile */
Soluție CSS
.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);
  }
}

Calcularea factorialului unui număr

Începător

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

Exemplu de început
-- 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
Soluție
-- 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

Manipularea tabelelor în Lua

Intermediar

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.

Exemplu de început
-- 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)
Soluție
-- 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)

Implementarea unui sistem simplu de inventar

Avansat

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.

Exemplu de început
-- 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"))
Soluție
-- 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()