Untitled
unknown
plain_text
4 months ago
3.2 kB
2
Indexable
<!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...
Leave a Comment