Przez Kasia Furtak w JavaScript — 3 lis 2025 JavaScript III - Zadanie 1 Photo by Annie Spratt / Unsplash Zadanie 1:Używając omawianych do tej pory elementów HTML zbuduj stronę SPA (single page application). Strona powinna zawierać większość omawianych elementów w tym Nawigację / menu oraz zakładki wewnątrz dokumentu, tytuły, treści a w nich listy i osadzone obrazki i multimedia Nie zapomnijcie o dostępności i strukturze semantycznej dokumentu podzieleniu go na logiczne sekcje i artykuły, nagłówek i stopkę.Obrazki powinny występować w 2 rozmiarach (mały w treści i większy po kliknięciu w nowym oknie). Zaplanujcie stronę w taki sposób, żeby można było dodawać do niej następne sekcje w przyszłości.Dodatkowe materiały:https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/ https://file-examples.com/index.php/sample-video-files/sample-mp4-files/ https://picsum.photos/ https://www.lipsum.com/ https://www.w3schools.com/html/html_links.aspRealizacja:Pierwszy draft strony SPA poradni dietetycznej Zrób Sobie Zdrowie<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zrób sobie zdrowie</title> <link rel="icon" type="image/x-icon" href="static\favicon1.png"> </head> <body> <header> <h1>Zrób sobie zdrowie</h1> <h2>Zdrowe jedzenie to nie obowiązek, tylko inwestycja w Twoje zdrowie, dobre samopoczucie i codzienną energię. Naucz się jeść tak, by czuć się świetnie każdego dnia.</h2> <img src="static/zrobsobiezdrowie1.jpg" alt="Uśmiechęte dietetyczki przy stole" width="900"> </header> </header> <nav id="menu" role="navigation" aria-label="Menu główne"> <nav> <li> <a href="#menu">Menu główne</a></li> <li> <a href="#about">O nas</a></li> <li> <a href="#offer">Oferta <ul> <li a href="#consultations">Konsultacje indywidualne</li> <li a href="#workshops">Szkolenia</li> <li a href="#dietplans">Plany dietetyczne</li> </ul> </a></li> <li> <a href="#calculators">Kalkulatory <ul> <li a href="#bmi">Kalkulator BMI</li> <li a href="#ppm">Kalkulator PPM</li> </ul> </a></li> <li> <a href="#blog">Blog</a></li> <li> <a href="#form">Umów się na konsultację</a></li> <li> <a href="#contact"> Kontakt </a></li> </nav> </header> <main> <section id="about" aria-label="O nas"> <h2> O nas </h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor lacinia turpis. Mauris nec sapien dui. Maecenas id enim magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis eget neque ut venenatis. Mauris elementum justo mattis nisl mollis dapibus. Donec efficitur erat at vulputate laoreet.</p> <img src="static\dietetyczka1.png" alt="Dietetyczka Ania przedstawia się" width="200"> <p>Nulla maximus eros purus, vel condimentum risus efficitur a. Sed lacinia sodales massa vel maximus. Aenean sed laoreet quam. Duis at lacinia ante, sed cursus nisl. Sed dolor nisl, tincidunt ac ipsum vitae, sollicitudin porttitor elit. Nam id enim congue, rutrum dolor pharetra, sodales magna. Aenean turpis purus, placerat ac sodales vel, sodales ac tortor.</p> <img src="static\dietetyczka2.png" alt="Dietetyczka Beata przedstawia się" width="200"> <p>Nulla maximus eros purus, vel condimentum risus efficitur a. Sed lacinia sodales massa vel maximus. Aenean sed laoreet quam. Duis at lacinia ante, sed cursus nisl. Sed dolor nisl, tincidunt ac ipsum vitae, sollicitudin porttitor elit. Nam id enim congue, rutrum dolor pharetra, sodales magna. Aenean turpis purus, placerat ac sodales vel, sodales ac tortor.</p> </section> <section id="offer" aria-label="Oferta"> <h2>Oferta</h2> <p> <img src="static/zrobsobiezdrowie3.jpg" alt="Uśmiechęte dietetyczki witają się z gościem na stronie" width="300"> Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sollicitudin metus ut elementum blandit. Nam vel fermentum tellus. Sed id suscipit diam. Nam nec erat arcu. Vestibulum ullamcorper, ligula at sollicitudin congue, nulla quam ornare leo, id cursus neque dui in neque.</p> <section id="consultation" aria-label="Konsultacje indywidualne"> <h3>Konsultacje indywidualne</h3> <div> <img src="static\konsultacje.jpg" alt="ikona obrazująca konsultację" width="200"> Mauris malesuada leo ac nisi mollis, non tincidunt urna vehicula. Sed semper leo at metus consectetur, id cursus ante suscipit. In hac habitasse platea dictumst. Pellentesque luctus tortor at lectus varius, ac viverra quam pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam dictum lacinia augue, sit amet placerat dolor ultrices at. </div> </section> <section id="workshops" aria-label="Szkolenia"> <h3>Szkolenia</h3> <div> <img src="static\szkolenia.jpg" alt="ikona obrazująca szkolenie" width="200"> Duis consectetur, odio in sagittis consectetur, ligula ex accumsan neque, vel gravida purus libero a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum a arcu vitae rhoncus. Nullam maximus commodo ipsum in euismod. In et nisl magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </section> <section id="dietplans" aria-label="Plany dietetyczne"> <h3>Plany dietetyczne</h3> <div> <img src="static\planydietetyczne.jpg" alt="ikona obrazująca plan dietetyczny" width="200"> Mauris non libero neque. Nullam efficitur, elit in bibendum mattis, nunc nulla finibus justo, nec elementum eros purus a sapien. In ut velit sit amet ex euismod tristique. Curabitur diam ex, scelerisque sit amet diam venenatis, sollicitudin fringilla libero. </div> </section> </section> <section id="calculators" aria-label="Kalkulatory"> <h2> Kalkulatory </h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor quam massa, in elementum felis sagittis non. Proin eu nunc elementum, tincidunt libero non, sagittis mi. Curabitur in magna eget dolor dictum pellentesque in quis sem. Maecenas lectus lacus, bibendum non elit sit amet, aliquet dignissim libero. Phasellus auctor nisi nec aliquet aliquam.</p> <section id="bmi" aria-label="Kalkulator BMI"> <h3> Kalkulator BMI</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor quam massa, in elementum felis sagittis non. Proin eu nunc elementum, tincidunt libero non, sagittis mi. Curabitur in magna eget dolor dictum pellentesque in quis sem. Maecenas lectus lacus, bibendum non elit sit amet, aliquet dignissim libero. Phasellus auctor nisi nec aliquet aliquam.</p> <p> <table> <thead> <tr> <th scope="col"> Wartość BMI </th> <th scope="col"> Uwagi </th> </tr> </thead> <tbody> <tr> <td> 18.5 i niżej </td> <td> Niedowaga </td> </tr> <tr> <td> 18.5 - 24.9 </td> <td> Waga prawidłowa </td> </tr> <tr> <td> 25.0 - 29.9 </td> <td> Nadwaga </td> </tr> <tr> <td> 30.0 - 34.9 </td> <td> Otyłość I stopnia </td> </tr> <tr> <td> 35.0 - 39.9 </td> <td> Otyłość II stopnia </td> </tr> <tr> <td> 40.0 i wyżej </td> <td> Otyłość III stopnia </td> </tr> </tbody> </table> </p> <form id="bmi" action="/advanced-form" method="POST"> <legend><strong>Oblicz swoje BMI</strong></legend> <label for="gender"> Płeć </label> <input type="radio" id="gender" name="gender" value="male"checked> <label for="gender"> Mężczyzna </label> <input type="radio" id="gender" name="gender" value="female"> <label for="gender"> Kobieta </label> <p> <label for="weight">Masa ciała (kg)</label> <input type="number" required="required" id="weight" placeholder="Wpisz swoją masę ciała"> <label for="height">Wzrost (cm)</label> <input type="number" required="required" id="height" placeholder="Wpisz swój wzrost"> </p> <button type="submit"> Oblicz BMI </button> </form> </section> <section id="ppm" aria-label="Kalkulator PPM"> <h3> Kalkulator PPM</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor quam massa, in elementum felis sagittis non. Proin eu nunc elementum, tincidunt libero non, sagittis mi. Curabitur in magna eget dolor dictum pellentesque in quis sem. Maecenas lectus lacus, bibendum non elit sit amet, aliquet dignissim libero. Phasellus auctor nisi nec aliquet aliquam.</p> <form id="ppm" action="/advanced-form" method="POST"> <legend> <strong>Oblicz swoją Podstawową Przemianę Materii</strong></legend> <label for="gender"> Płeć </label> <input type="radio" id="gender" name="gender" value="male"checked> <label for="gender"> Mężczyzna </label> <input type="radio" id="gender" name="gender" value="female"> <label for="gender"> Kobieta </label><br><br> <label for="wiek">Wiek</label> <input type="number" id="wiek" name="wiek" required><br><br> <label for="waga">Masa ciała (kg):</label> <input type="number" id="waga" name="waga" required><br><br> <label for="wzrost">Wzrost (cm):</label> <input type="number" id="wzrost" name="wzrost" required><br><br> <button type="submit"> Oblicz PPM </button> </form> </section> </section> <section id="blog" aria-label="Blog"> <h2>Blog</h2> <p>Suspendisse placerat blandit tincidunt. Nulla varius consectetur blandit.</p> <article> <h3>Cynk przy przeziębieniu lepszy od rosołu?</h3> <img src="static\cynk.jpg" alt="zdjęcie produktów bogatych w cynk" width="300"> Mauris malesuada leo ac nisi mollis, non tincidunt urna vehicula. Sed semper leo at metus consectetur, id cursus ante suscipit. In hac habitasse platea dictumst. Pellentesque luctus tortor at lectus varius, ac viverra quam pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam dictum lacinia augue, sit amet placerat dolor ultrices at. </article> <article> <h3>Żelazo. Jakie produkty ze sobą łączyć by zapewnić skuteczne wchłanianie.</h3> <img src="static\żelazo.jpg" alt="zdjęcie produktów bogatych w żelazo" width="300"> Duis consectetur, odio in sagittis consectetur, ligula ex accumsan neque, vel gravida purus libero a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum a arcu vitae rhoncus. Nullam maximus commodo ipsum in euismod. In et nisl magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </article> <article> <h3>Jak to jest z tą soją? Obalamy mity na temat białka soi.</h3> <img src="static\soja.jpg" alt="zdjęcie produktów sojowych i ziaren soi" width="300"> Mauris non libero neque. Nullam efficitur, elit in bibendum mattis, nunc nulla finibus justo, nec elementum eros purus a sapien. In ut velit sit amet ex euismod tristique. Curabitur diam ex, scelerisque sit amet diam venenatis, sollicitudin fringilla libero. </article> </section> <section id="form" aria-label="Umów się na konsultację"> <h2>Umów się na konsultację</h2> <p> Cras placerat at dui eget consectetur. Proin facilisis augue sed nisi bibendum condimentum. Aliquam pellentesque dolor a mauris volutpat lacinia. Nunc non tempus velit. Nullam pharetra orci in felis aliquet ultrices sed quis dolor. Sed vitae bibendum est, et pulvinar enim. </p> <form action="/advanced-form" method="POST"> <fieldset> <legend> <strong>Dane osobowe </strong></legend> <label for="full-name"> Imię i Nazwisko </label> <input type="text" id="full-name" name="fullname" required placeholder="Jan Kowalski"> <label for="age"> Wiek </label> <input type="number" id="age" name="age" required> <p></p> <label for="contact-email"> Email: </label> <input type="email" id="contact-email" name="email" required placeholder="[email protected]"> <label for="phone numer"> Numer telefonu (+48) </label> <input type="text" id="phone-number" name="phone" pattern="[0-9]{9}" placeholder="123 456 789" required> </fieldset> <fieldset> <legend> <strong>Cel konsultacji </strong></legend> <label for="your-goal"> Jaki jest Twój główny cel? </label> <select id="your-goal" name="goal" required> <option value="">-- Zaznacz cel konsultacji --</option> <option value="goal-1">Chcę się zdrowiej odżywiać</option> <option value="goal-2">Chcę zredukować masę ciała</option> <option value="goal-3">Chcę zwiększyć masę ciała</option> <option value="goal-4">Chcę dostosować dietę do treningów</option> <option value="goal-5">Potrzebuję dostosować dietę do swojego stanu zdrowia - podaj szczegóły poniżej</option> </select> </fieldset> <fieldset> <legend> <strong>Dodatkowe informacje</strong></legend> <label for="additional">Tu możesz dokładniej opisać swój cel</label> <textarea id="additional" name="additional" rows="5" placeholder="Jeśli masz jakiekolwiek choroby metaboliczne, stwierdzone allergie czy nietolerancje, wymień je tutaj."></textarea> </fieldset> <button type="submit"> Zatwierdź </button> </form> </section> </main> <footer id="contact" role="contentinfo"> <section> <h2> Kontakt</h2> <address> <strong> Zrób Sobie Zdrowie Poradnia Dietetyczna</strong><br> ul. Zdrowa 5<br> 12-345 Warszawa <br> Telefon: <a href="tel:+48123456789"> +48 123 456 789 </a><br> Email: <a href="[email protected]"> [email protected] </a> </address> </section> <div> <a href="#" title="Top">Powrót na górę strony</a> </div> </footer> </body>
JavaScript Pętle Zaawansowane BREAK i CONTINUE Używanie instrukcji break i continue w pętlach JavaScriptu pozwala
JavaScript Operatory i konwersje typów. Wstęp do pętli OPERATORY ARYTMETYCZNE - poniżej najczęściej wykorzystywane: OPERATOR DODAWANIA KONKATENACJA - łączenie łańcuchów
