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

Slik laster du ned og installerer programmer på eldre versjon av iOS

IOS 8 kommer med mange forbedringer og mange nye funksjoner som Continuity, Apple Pay og SMS Relay. Dessverre fungerer mange av disse funksjonene ikke på eldre Apple-enheter, som iPhone 4, på grunn av begrensninger. Enda verre, vil mange apper nå kreve minst iOS 7 for å kjøre jevnt . Hvis du prøver å installere en app, vil du trolig be om et varsel som dette:Det betyr imidlertid ikke at du ikke kan få en kompatibel versjon av appen installert . Slik g

(Tekniske og design tips)

5 beste Windows Apps for å overvåke Internett-bruk

Når du kommer til internett hjemme eller som student, er det alltid en hette på din internettbruksgrense . Men når du er online, har du en tendens til å bli båret bort og noen ganger ender opp med å utmanne en hele måneds internettpakke innen et par uker.Det kan være flere grunner til det. For eksempel er noen nettsteder tyngre enn de andre. Tilsva

(Tekniske og design tips)