Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kursy</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>
<body>
    <header>
        <h1>KURSY</h1>
    </header>
<main>
    <div class="left">
        <h2>Lista <p class="kurs"></p>:</h2>
        <ol>

        </ol>
    </div>
    <div class="right">
        <h2>Zapisz się:</h2>
        <form>
            <input type="text" name="name" id="name" placeholder="imię i nazwisko">
            <input type="number" name="num" id="num" placeholder="Numer kursu" min="1" max="3">
            <button type="submit">Zapisz</button>
        </form>
    </div>
</main>
    <footer>
        PESEL
    </footer>
</body>
</html>
 <!-- - Strona składa się z 4 sekcji (nagłówek, panel lewy, panel prawy, stopka)
- Nagłowek: wysokość 100px, kolor tła czerwony, wyśrodkowany i pochylony nagłówek pierwszego stopnia o treści "KURSY"
- Panel lewy: wysokość 450px, kolor tła LightGreen, marginesy wewnętrzne na 20px, szerokość 40%
	Nagłówek drugiego stopnia o treści "Lista (ilość):" gdzie ilość to liczba dostępnych kursów generowana automatycznie
	Lista numerowana z nazwami kursów generowana automatycznie, lista numerowana cyframi rzymskimi
- Panel prawy: wysokość 450px, kolor tła Yellow, marginesy wewnętrzne 20px, szerokość 60%	
	Podkreślony nagłówek drugiego stopnia o treści "Zapisz się:"
	Formularz z 
        - polem tekstowym na imię i nazwisko z placeholderem
	    - polem numerycznym na numer kursu z placeholderem
	    - przycisk wysyłający formularz o treści "Zapisz"
- Stopka: kolor tła czarny, wysokość 60px, wyśrodkowany paragraf w kolorze białym z peselem

JS:
Utwórz listę zawierającą 3 kursy: Kurs JS, Kurs PHP, Kurs HTML
Wyświetl listę numerowaną kursów w panelu lewym
Wyświetl ilość dostępnych kursów w panelu lewym
Po wysłaniu formularza wyświetl alert o treści:
Uczestnik IMIE NAZWISKO zapisał się na kurs NAZWA KURSU  -->
CSS:
header {
    height: 100px;
    background-color: red;
    text-align: center;
    text-decoration-style: wavy;
}
.left {
    height: 450px;
    background-color: lightgreen;
    padding: 20px;
    width: 40%;
}
.right {
    height: 450px;
    background-color: yellow;
    padding: 20px;
    width: 60%;
}
footer {
    background-color: black;
    height: 60px;
    text-align: center;
    color: white;
}
main {
    display: flex;
}
form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
input {
    width: 30%;
}
button {
    width: 20%;
}

JAVASCRIPT:
const form = document.querySelector("form")
const left = document.querySelector(".left")
const ol = document.querySelector("ol")
const li1 = document.createElement("li")
const li2 = document.createElement("li")
const li3 = document.createElement("li")

li1.innerText = "Kurs JS"
li2.innerText = "Kurs PHP"
li3.innerText = "Kurs HTML"

ol.append(li1,li2,li3)

form.addEventListener('submit', e => {
    e.preventDefault()
    
})
Editor is loading...