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

Bouw snel dynamische grafieken op D3 met Plottable.js

De gratis D3.js-bibliotheek is slechts een van de vele waarmee u interactieve afbeeldingen op de pagina kunt maken. Hoewel D3 misschien wel het populairst is, is leren om het te gebruiken geen eenvoudige taak.Dat is de reden waarom Plottable.js zo'n waardevolle bibliotheek is. Het is een gratis open-sourceproject dat bovenop D3

(Technische en ontwerptips)

Mythe - CSS van de toekomst schrijven

CSS heeft een hele reeks nieuwe functies geïntroduceerd, zoals CSS Gradients, Shadows, Border Radius en Animation, die allemaal puur met CSS kunnen worden bereikt. Er zijn ook verschillende functies die nog moeten worden geïmplementeerd vanwege de ondersteuning van browsers voor CSS-variabelen en CSS calc() -functies.

(Technische en ontwerptips)