Tilfeldig sitatgenerator ved bruk av HTML, CSS og JavaScript
I moderne nettstedutvikling observeres sitater på hvilken som helst side av websiden. Disse tilfeldige sitatene genereres ved hjelp av en tilfeldig sitatgenerator. Den tilfeldige sitatgeneratoren er opprettet ved hjelp av HTML, CSS og JavaScript. Sitatene brukes for å få brukerne mer fokusert og med et sinn-til-innholds sinn.
Når du ser på viktigheten av sitater på websider, vil dagens guide hjelpe deg med å lage en tilfeldig anførselstegenerator ved hjelp av HTML, CSS og JavaScript.
Hvordan lage en tilfeldig sitatgenerator?
Det er beste praksis å bruke den tilfeldige sitatgeneratoren på websiden din. Arbeidet med en tilfeldig sitatgenerator er enkel å forstå. Det trekker ut et sitat tilfeldig hver gang ved å trykke på et klikk og presentere det i nettleservinduet. Dessuten kan brukere hente/trekke ut sitater fra forskjellige kilder, for eksempel matriser, databaser eller API -er.
Eksempel
Et eksempel er tilpasset for å generere en tilfeldig sitatgenerator ved å bruke HTML, CSS og JavaScript.
For bedre forståelse har vi eksplisitt forklart HTML-, CSS- og JavaScript -kodene.
Html
Følgende eksempel kode refererer til HTML -delen av den tilfeldige sitatgeneratoren.
rel = "Stylesheet"/>
I denne koden er beskrivelsen oppført her:
- Først av alt importeres Google -skrifter og en lenke til et eksternt stilark (hvis kode er forklart nedenfor) er også plassert.
- Et område/beholder er spesifisert for å vise det tilfeldige sitatet av Tagger.
- Etter det, avsnittet Tag brukes til å gi sitatet som en verdi til id.
- De og Tagger er tilknyttet IDs "Forfatter" og "sitat".
- En knapp som heter “Trykk på knappen" er skapt.
- Til slutt ".JS”(Hvis kode er forklart nedenfor) er koblet til denne HTML -filen.
Bruke CSS
Hensikten med å legge til en CSS -fil er å gi et attraktivt og tiltalende utseende til grensesnittet.
*polstring: 2;
Margin: 3;
Bokstørrelse: Border-Box;
Font-Family: "Poppins", sans-serif;
.Container -knapp
Bakgrunnsfarge: #FFFFFF;
Grense: Ingen;
polstring: 15px 45px;
Border-Radius: 5px;
Font-størrelse: 18px;
Fontvekt: 600;
Farge: grønn;
Markør: peker;
kropp
bakgrunnsfarge: hvit;
Beskrivelsen av koden er som følger:
- De polstring, margin, kassestørrelse, og Fontfamilie brukes til alle HTML -elementene.
- Etter det tildeles noen egenskaper til knappen som for eksempel Fontstørrelse, farge, bakgrunnsfarge, etc.
- Til slutt bakgrunn Fargen på kroppen er valgt til å være hvit for synlighet for brukerne.
JavaScript
JavaScript -koden tilknyttet HTML -filen er gitt nedenfor:
La QUOTE = dokument.getElementById ("sitat");La forfatter = dokument.getElementById ("Forfatter");
La BTN = dokument.getElementById ("BTN");
const url = "https: // api.siterbar.io/tilfeldig ";
la getq = () =>
hente (url)
.da ((data) => data.json ())
.da ((element) =>
sitat.Innertext = element.innhold;
forfatter.Innertext = element.forfatter;
);
;
vindu.AddEventListener ("Last", getq);
btn.AddEventListener ("klikk", getq);
Beskrivelsen av koden er nevnt nedenfor:
- For det første tre variabler (sitat, forfatter og btn) brukes til å koble til Html elementer.
- Etter det importeres en API for å representere tilfeldige sitater.
- Videre getw () metoden brukes til å hente innholdet i en sitat med en Forfatterens Navn.
- Til slutt AddEventListener Eiendom er ansatt ved å passere en Klikk Verdi som et argument.
Produksjon
Utgangen viser de tilfeldige sitatene i nettleseren ved å bruke HTML, CSS og JavaScript. Ved å trykke hver gang genereres et nytt tilfeldig sitat i nettleseren.
Konklusjon
EN Tilfeldig sitatgenerator er utviklet ved å bruke HTML, CSS, og JavaScript. De Html Filen gir det spesifikke området/beholderen for å vise et tilbud. Rollen som en CSS Filen er å gi stylingegenskaper som skriftfarge, bakgrunnsfarge, tekststørrelse osv. For å gjøre generatoren attraktiv/appellerer til brukerne. Dessuten, JavaScript gir logiske operasjoner for å hente ut det tilfeldige tilbudet. Her har du lært at alle disse trinnene er gitt i en sortert rekkefølge.