6 #permalink Lista użytkownika plus kurs walut

Ten kod HTML reprezentuje stronę internetową zawierającą różne elementy, takie jak aktualny kurs Euro, zegar, oraz listę zakupów. Oto opis jego elementów:

Element main:

Jest to główny kontener strony, w którym znajdują się wszystkie inne elementy. Div div class="srodek":

Ten

zawiera nagłówek "Aktualny kurs Euro" oraz paragraf, w którym zostanie wyświetlony aktualny kurs Euro po pobraniu. Jest również zawarty nagłówek "Moja Lista Zakupów". Div div id="clock":

To miejsce, w którym zostanie wyświetlony zegar. Prawdopodobnie zostanie zaktualizowany za pomocą JavaScript. Div div class="przesun":

Ten

zawiera pola do wprowadzania nowych przedmiotów na liście zakupów oraz przycisk "Dodaj" do ich dodawania. Wykorzystuje również elementy listy do wyświetlania rzeczy na liście zakupów. W pliku JavaScript o nazwie "lista.js" jest obsługiwana logika dodawania przedmiotów do listy zakupów. Script script src="kursDolara.js" ** /script**:

To odniesienie do pliku JavaScript o nazwie "kursDolara.js". Prawdopodobnie ten skrypt jest używany do pobierania i wyświetlania aktualnego kursu Euro. Kod HTML i pliki JavaScript są prawdopodobnie częścią interaktywnej strony internetowej, która umożliwia użytkownikowi śledzenie kursu Euro, wyświetlanie aktualnego czasu oraz prowadzenie listy zakupów online. JavaScript jest używany do obsługi logiki tych funkcji.

Tabelka ma ustawione color: white co ustawia biały kolor liter, również bacgroud-color jest ustawiony na szary co ustawia szary kolor tła tabelki znacznik h1 wykorzystuje text-aling: center co zawsze ustawia tytuł na środku oraz margin-top: 20px który ustawia 20px margines z góry co pozwala na to by tytuł nie był zaraz przyklejony do navbara Główny kontener wykorzystuje leyout flex do ustawnie wszystkiego zawsze na śrdoku Dodatkowo przycisk i pola mają ustawiony background-color na szary

Example

Aktualny kurs Euro:

Poczekaj na pobranie kursu...

Moja Lista Zakupów

Markup

<main>
<div class="srodek">
  <h1>Aktualny kurs Euro:</h1>
  <p id="exchange-rate">Poczekaj na pobranie kursu...</p>
  <h2>Moja Lista Zakupów</h2>
</div>
<div id="clock"></div>
<div class="przesun"><input type="text" id="item" placeholder="Dodaj rzecz do listy">
  <button onclick="addItem()" class="dodaj">Dodaj</button>
  <ul id="shoppingList">
    <!-- Tutaj zostaną wyświetlone rzeczy z listy -->
  </ul>
  <script src="lista.js">
  </script>
</div>
<script src="kursDolara.js"></script>
  </main>

Source: sklep.css, line 298