Hoe maak je een Simple Advent-kalender in JavaScript

De advent is de periode van wachten en voorbereiden op Kerstmis die vier zondagen vóór de vooravond van Kerstmis begint. Het verstrijken van de Adventtijd wordt traditioneel gemeten met behulp van een adventskalender of een adventskrans. Hoewel het begin van Advent geen vaste datum is, beginnen adventskalenders gewoonlijk op 1 december.

Op basis van lokale gebruiken kunnen Advent-kalenders verschillende ontwerpen hebben, maar meestal hebben ze de vorm van grote rechthoekige kaarten met 24 ramen of deuren die de dagen markeren tussen 1 december en 24 december. De deuren verbergen berichten, gedichten, gebeden of kleine verrassingen.

In dit bericht laat ik je zien hoe je een adventskalender maakt in object-georiënteerd JavaScript . Omdat het is gemaakt in vanilla JavaScript, kunt u de code gemakkelijk in uw eigen website plaatsen.

• demonstratie
• Download de bron

JavaScript-kalender ontwerpen

Onze adventskalender heeft 24 deuren met een achtergrondafbeelding met een kerstthema. Elke deur verbergt een kerstgerelateerd citaat dat verschijnt in de vorm van een waarschuwingsbericht wanneer de gebruiker op de deur klikt . De deuren blijven gesloten tot de aangegeven dag, zoals het geval is met de adventskalender in het echte leven; de deuren kunnen niet voor de juiste dag worden geopend.

Deuren die al zijn ingeschakeld, hebben een andere achtergrondkleur (wit) dan de uitgeschakelde (lichtgroen). We zullen HTML5, CSS3 en JavaScript gebruiken om onze adventskalender voor te bereiden die er ongeveer zo uitziet:

Stap 1 - Maak bestandsstructuur en bronnen

Allereerst moeten we een mooie achtergrondafbeelding kiezen. Ik heb er een met portretoriëntatie gekozen op Pixabay, dus mijn agenda bevat 4 kolommen en 6 rijen .

Het is prima als je de voorkeur geeft aan een liggende oriëntatie. Wijzig gewoon de posities van de deuren in de JavaScript-code, want u heeft 6 kolommen en 4 rijen . Als u uw afbeelding hebt, maakt u een map met de naam / afbeeldingen en slaat u deze op.

Dit is onze enige beeldbron voor dit project.

Maak voor de JavaScript-bestanden een map / scripts in uw hoofdmap. Plaats er twee lege tekstbestanden in en noem ze calendar.js en messages.js . Calendar.js bevat de functionaliteit, terwijl messages.js de reeks berichten bevat die verschijnen wanneer de gebruiker de deuren "opent" (klikt).

We hebben ook een HTML- en een CSS-bestand nodig, dus maak twee lege bestanden in je hoofdmap en geef ze de namen index.html en style.css .

Wanneer je klaar bent, heb je de bronnen en bestandsstructuur die je nodig hebt om dit project te voltooien, en je rootmap ziet er ongeveer zo uit:

Stap 2 - Maak de HTML

De HTML-code die we gebruiken is vrij eenvoudig. Het CSS-stylesheet is gekoppeld in de sectie, terwijl de twee JavaScript-bestanden zich onderaan de sectie bevinden. Dat laatste is nodig, want als we de scripts in de sectie, de code zou niet worden uitgevoerd, omdat het de elementen van de geladen HTML-pagina gebruikt .

De adventskalender zelf wordt geplaatst binnen de

semantische tag. We laden de kerstafbeelding als een HTML-element en niet als een CSS-achtergrondeigenschap, omdat we op deze manier eenvoudig toegang hebben tot het element als onderdeel van de DOM.

Onder de afbeelding plaatsen we een lege ongeordende lijst met de id-selector "adventDoors" die wordt gevuld door de scripts. Als de gebruiker JavaScript niet heeft ingeschakeld in zijn browser, ziet hij een eenvoudige kerstafbeelding.

 Advent kalender 
 (function () {var doors = []; for (var i = 0; i <24; i ++) {deuren [i] = nieuwe deur (myCal, i + 1); deuren [i] .content ();} terug deuren;}) (); 

• demonstratie
• Download de bron

Met de bijgewerkte reisdiensten van Google kunnen gebruikers goedkope vluchten en hotelkamers boeken

Met het einde van het jaar vakantie om de hoek, zijn veel begonnen met het plannen van hun vakantie online. Voor degenen die op zoek zijn naar de beste deals als het gaat om vluchten en hotelreserveringen, heeft Google zijn reisservices bijgewerkt, die u op de hoogte brengen van potentiële of feitelijke prijswijzigingen .

(Technische en ontwerptips)

Hoe Screencast in YouTube te registreren

Screencast is een effectieve manier om iets op het computerscherm aan te tonen en uit te leggen. Meestal gebruiken we specifieke software om een ​​screencast op te nemen, te uploaden naar een aantal videostreaming of een hostingservice voor bestanden en uiteindelijk de link met anderen te delen. Maar, wat als ik je vertel over een optie in YouTube Creator Studio om daar een screencast op YouTube op te nemen? .H

(Technische en ontwerptips)