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

Top 10 van gratis bewerkte broncode-editor - herzien

Met professionele codebewerkers zoals Dreamweaver, Coda, Textmate en anderen, is het geen verrassing dat steeds meer mensen de eenvoudige code-editor, zoals het Kladblok van Windows, deels zijn vergeten. We begrijpen dat eenvoudiger niet de beste optie is, maar er zijn eenvoudigere maar professionele code-editors die misschien net geschikt zijn voor wat u nodig heeft

(Technische en ontwerptips)

5 Beste websites voor Full-time Remote Tech Jobs

Het is algemeen bekend dat men wat geld kan binnenbrengen door op afstand te werken. U kunt zelfs een van de miljoenen mensen zijn die naar banen hebben gezocht die u de flexibiliteit en het comfort bieden om te werken waar u maar wilt, of dat nu thuis is, een coffeeshop is of uw persoonlijke creatieve ruimte

(Technische en ontwerptips)