Losowy generator cytatu za pomocą HTML, CSS i JavaScript
W nowoczesnym opracowywaniu stron internetowych cytaty są obserwowane po każdej stronie strony internetowej. Te losowe cytaty są generowane za pomocą losowego generatora cytatu. Losowy generator cytatów jest tworzony za pomocą HTML, CSS i JavaScript. Cytaty są używane do zwiększenia skupienia użytkowników i z umysłem trzymania się.
Uważając znaczenie cytatów na stronach internetowych, dzisiejszy przewodnik pomoże Ci utworzyć losowy generator cytatów za pomocą HTML, CSS i JavaScript.
Jak utworzyć losowy generator cytatów?
Najlepszą praktyką jest korzystanie z losowego generatora cytatu na swojej stronie internetowej. Działanie losowego generatora cytatów są proste do zrozumienia. Wyodrębnia wycenę losowo za każdym razem, naciskając kliknięcie i prezentując ją w oknie przeglądarki. Ponadto użytkownicy mogą pobierać/wyodrębniać cytaty z różnych źródeł, takich jak tablice, bazy danych lub interfejsy API.
Przykład
Przykład jest dostosowany do generowania losowego generatora cytatu przy użyciu HTML, CSS i JavaScript.
Aby lepiej zrozumieć, wyraźnie wyjaśniliśmy kody HTML, CSS i JavaScript.
Html
Poniższy przykładowy kod odnosi się do części HTML losowego generatora cytatu.
rel = "Stylesheet"/>
W tym kodzie opis jest wymieniony tutaj:
- Przede wszystkim czcionki Google są importowane i jest również umieszczany link do zewnętrznego arkusza stylów (którego kod wyjaśniono poniżej).
- Obszar/kontener jest określony do wyświetlania losowego wyceny według tagi.
- Następnie akapit znacznik służy do przekazywania wyceny jako wartości ID.
- I Tagi są powiązanymi „autorami” i „cytatem”.
- Przycisk nazwany „Naciśnij przycisk" jest tworzone.
- Wreszcie „„.JS”(Którego kod wyjaśniono poniżej) jest połączone z tym plikami HTML.
Korzystanie z CSS
Celem dodania pliku CSS jest nadanie atrakcyjnego i atrakcyjnego spojrzenia na interfejs.
*Wyściółka: 2;
Margines: 3;
Rozmiar pola: granica;
Font-family: „Poppins”, bez Serif;
.przycisk pojemnika
kolor tła: #ffffff;
Border: Brak;
Wyściółka: 15px 45px;
RADIUS BERDER: 5px;
Rozmiar czcionki: 18px;
czcionek: 600;
Zielony kolor;
Kursor: wskaźnik;
ciało
kolor tła: biały;
Opis kodu jest następujący:
- wyściółka, margines, rozmiar pudełka, I rodzina czcionek są wykorzystywane dla wszystkich elementów HTML.
- Następnie niektóre właściwości są przypisywane do przycisku, takie jak Rozmiar czcionki, kolor, kolor tła, itp.
- Wreszcie tło Kolor ciała jest wybrany jako biały w celu widoczności dla użytkowników.
JavaScript
Kod JavaScript powiązany z plikiem HTML znajduje się poniżej:
Niech Quote = dokument.getElementById („Cytat”);Niech autor = dokument.getElementById („autor”);
Niech btn = dokument.getElementById („btn”);
const url = "https: // api.godny zacytowania.IO/losowe ”;
Niech getQ = () =>
Fetch (URL)
.Następnie ((dane) => Dane.JSON ())
.Następnie ((item) =>
cytat.innerText = pozycja.treść;
autor.innerText = pozycja.autor;
);
;
okno.addEventListener („ładuj”, getQ);
Btn.addEventListener („kliknij”, getQ);
Opis kodu jest wspomniany poniżej:
- Po pierwsze, trzy zmienne (cytat, autor I BTN) są wykorzystywane do łączenia Html elementy.
- Następnie API jest importowany do reprezentowania losowych cytatów.
- Ponadto getw () Metoda służy do pobierania zawartości cytat z autorski nazwa.
- Wreszcie addEventListener nieruchomość jest zatrudniona przez przekazywanie Kliknij wartość jako argument.
Wyjście
Dane wyjściowe pokazuje losowe cytaty w przeglądarce, stosując HTML, CSS i JavaScript. Naciskając za każdym razem, w przeglądarce generowana jest nowy losowy cytat.
Wniosek
A Losowy generator cytatu jest opracowywane przez wykorzystanie HTML, CSS, I JavaScript. Html Plik zawiera określony obszar/kontener do wyświetlania wyceny. Rola CSS Plik to podanie właściwości stylizacji, takie jak kolor czcionki, kolor tła, rozmiar tekstu itp. aby generator był atrakcyjny/atrakcyjny dla użytkowników. Ponadto, JavaScript zapewnia operacje logiczne w celu wyodrębnienia losowego wyceny. Tutaj dowiedziałeś się, że wszystkie te kroki są podawane w sortowanej kolejności.