Generatore di citazioni casuali usando HTML, CSS e JavaScript
Nel moderno sviluppo del sito Web, le citazioni sono osservate su qualsiasi lato della pagina web. Queste citazioni casuali sono generate con l'aiuto di un generatore di citazioni casuali. Il generatore di citazione casuale viene creato con l'aiuto di HTML, CSS e JavaScript. Le citazioni sono usate per ottenere gli utenti più focalizzati e con una mente bastografica.
Tenendo conto dell'importanza delle citazioni sulle pagine Web, la Guida di oggi ti aiuterà a creare un generatore di virgolette casuali usando HTML, CSS e JavaScript.
Come creare un generatore di citazioni casuali?
È migliore pratica utilizzare il generatore di citazione casuale sulla tua pagina web. Il funzionamento di un generatore di citazioni casuali è semplice da capire. Estrae una citazione in modo casuale ogni volta premendo un clic e presentandolo nella finestra del browser. Inoltre, gli utenti possono recuperare/estrarre preventivi da fonti diverse, come array, database o API.
Esempio
Un esempio è adattato per generare un generatore di citazioni casuali utilizzando HTML, CSS e JavaScript.
Per una migliore comprensione, abbiamo spiegato esplicitamente i codici HTML, CSS e JavaScript.
Html
Il codice di esempio seguente si riferisce alla parte HTML del generatore di citazioni casuali.
Rel = "Stylesheet"/>
In questo codice, la descrizione è elencata qui:
- Prima di tutto, i caratteri di Google vengono importati e viene inserito anche un collegamento a un foglio di stile esterno (il cui codice è spiegato di seguito).
- Un'area/contenitore è specificato per visualizzare la citazione casuale da tag.
- Dopodiché, il paragrafo Il tag viene utilizzato per passare la citazione come valore a id.
- IL E I tag sono "autore" e "citazione" di ID associato.
- Un pulsante chiamato "Premi il bottone" è creato.
- Infine, il ".js"(Il cui codice è spiegato di seguito) è collegato a questo file HTML.
Usando CSS
Lo scopo di aggiungere un file CSS è quello di dare un aspetto attraente e accattivante all'interfaccia.
*imbottitura: 2;
Margine: 3;
Dimensizzazione di scatole: bordo-box;
Font-Family: "Poppins", sans-serif;
.Pulsante contenitore
Background-color: #ffffff;
confine: nessuno;
imbottitura: 15px 45px;
raggio di confine: 5px;
Font-size: 18px;
Font-Weight: 600;
Colore: verde;
Cursore: puntatore;
corpo
Background-color: White;
La descrizione del codice è la seguente:
- IL imbottitura, margine, dimensionamento della scatola, E famiglia di font sono utilizzati per tutti gli elementi HTML.
- Successivamente, alcune proprietà sono assegnate al pulsante come ad esempio Dimensione del carattere, colore, colore di sfondo, eccetera.
- Finalmente il sfondo Il colore del corpo è selezionato per essere bianco per la visibilità agli utenti.
JavaScript
Il codice JavaScript associato al file HTML è fornito di seguito:
Let Quote = Document.getElementById ("Citazione");Let Author = Document.getElementById ("Autore");
let btn = documento.getElementById ("BTN");
const url = "https: // API.citazione.io/casuale ";
let getq = () =>
Fetch (URL)
.Quindi ((Data) => Data.json ())
.Quindi ((item) =>
citazione.InnerText = Item.contenuto;
autore.InnerText = Item.autore;
);
;
finestra.addEventListener ("carico", getq);
btn.addEventListener ("Click", Getq);
La descrizione del codice è menzionata di seguito:
- In primo luogo, tre variabili (citazione, autore E BTN) sono utilizzati per collegarsi con Html elementi.
- Successivamente, un'API viene importata per rappresentare citazioni casuali.
- Inoltre, il getw () il metodo viene utilizzato per recuperare il contenuto di a citazione con un autore nome.
- Finalmente il addEventlistener La proprietà è impiegata passando a clic valore come argomento.
Produzione
L'output mostra le citazioni casuali nel browser utilizzando HTML, CSS e JavaScript. Premendo ogni volta, nel browser viene generato un nuovo citazione casuale.
Conclusione
UN Generatore di citazioni casuali è sviluppato utilizzando HTML, CSS, E JavaScript. IL Html Il file fornisce l'area/contenitore specifica per visualizzare un preventivo. Il ruolo di a CSS Il file è fornire proprietà di styling come colore del carattere, colore di sfondo, dimensioni del testo, ecc. per rendere il generatore attraente/attraente per gli utenti. Inoltre, JavaScript Fornisce le operazioni logiche per estrarre la citazione casuale. Qui, hai imparato che tutti questi passaggi sono riportati in un ordine ordinato.