Slik bygger du en enkel adventskalender i JavaScript

Advent er ventetiden og forbereder seg til jul som begynner fire søndager før julaften. Forløpet av Advent-tiden måles tradisjonelt ved hjelp av enten en Adventskalender eller en Adventkran. Selv om begynnelsen av Advent ikke er en fast dato, begynner Adventskalendere vanligvis 1. desember.

Adventskalendere kan, basert på lokale skikker, ha forskjellige design, men oftest de tar form av store rektangulære kort med 24 vinduer eller dører som markerer dagene mellom 1. og 24. desember. Dørene skjuler meldinger, dikt, bønner eller små overraskelser.

I dette innlegget vil jeg vise deg hvordan du lager en Adventskalender i objektorientert JavaScript . Som det er laget i vanilla JavaScript, kan du enkelt legge koden inn på din egen nettside.

JavaScript Calendar Design

Vår Adventskalender vil ha 24 dører på et julemiddag bakgrunnsbilde. Hver dør vil gjemme et julelatert sitat som vil dukke opp i form av en varselmelding når brukeren klikker på døren . Dørene forblir stengt inntil den oppgitte dagen kommer, slik det er tilfelle med virkeligheten Advent Calendar; Dørene kan ikke åpnes før den rette dagen.

Dører som allerede er aktivert, vil ha en annen grense og bakgrunnsfarge (hvit) enn de funksjonshemmede (lysegrønne). Vi vil bruke HTML5, CSS3 og JavaScript for å forberede vår adventskalender som ser noe ut som dette:

Først av alt, må vi velge et fint bakgrunnsbilde. Jeg valgte en med stående orientering fra Pixabay, så kalenderen min vil inneholde 4 kolonner og 6 rader .

Det er greit hvis du foretrekker en landskapsretning. Bare endre posisjonene til dørene i JavaScript-koden, da du har 6 kolonner og 4 rader . Hvis du har bildet ditt, lager du en mappe som heter / bilder, og lagrer den.

Vi vil også trenge en HTML og en CSS-fil, så opprett to tomme filer inne i rotmappen din og gi dem navnene index.html og style.css .

Når du er klar har du ressurser og filstruktur du trenger for å oppnå dette prosjektet, og rotmappen din ser slik ut:

HTML-koden vi bruker, er ganske enkel. CSS stilarket er koblet i delen, mens de to JavaScript-filene er inkludert i bunnen av delen. Sistnevnte er nødvendig, fordi hvis vi legger skriptene inn i delen, vil koden ikke bli utført, da den bruker elementene i den lastede HTML-siden .

semantisk tag. Vi legger julbildet som en HTML-element, og ikke som en CSS-bakgrunnsegenskap, fordi denne måten vi lett kan få tilgang til som et element i DOM.

Under bildet legger vi en tom, uordnet liste med «adventDoors» -identifikatoren som vil bli befolket av skriptene. Hvis brukeren ikke har Javascript aktivert i nettleseren, vil de bare se et enkelt julbilde.

 Adventskalender  Adventskalender 
 (funksjon () {vardører = []; for (var i = 0; i <24; i ++) {dører [i] = ny dør (myCal, i + 1); dører [i] .content returnere dører;}) ();

Demo
Last ned kilde

3 Vanlige feil i skriving og hvordan du kan unngå å gjøre dem

Å finne sin stemme i frilans innholdsskrift innebærer ofte å ofre perfekt setningsstruktur. Det er trist, men sant. Likevel betyr dette ikke at hver setning i en artikkel eller et blogginnlegg må være feil.Kreativ lisens og stil dikterer at vi skriver i noen ganger mindre enn perfekt, men helt forståelig format for å nå målgruppen, et publikum som kanskje ikke har en perfekt forståelse av det engelske språket (men ærlig, hvem gjør det?).Det er mis

(Tekniske og design tips)

Opprett minimalistiske responsive layouter med Mini.css

En frontend ramme bør være lett og enkel å bruke . Bootstrap er den mest populære, selv om det også er en av de tyngste. Og i en verden med mange alternativer til Bootstrap, kan det være vanskelig å finne en du liker.Mini.css er et nyere rammeverk og det lever virkelig opp til navnet sitt. For tiden i versjon 2.x, har

(Tekniske og design tips)