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

6 CSS-trucs om inhoud verticaal uit te lijnen

Laten we het hebben over verticale uitlijning in CSS, of om preciezer te zijn hoe het niet uitvoerbaar is. CSS heeft nog geen officiële manier gegeven om inhoud verticaal in de container te centreren. Het is een probleem dat webontwikkelaars waarschijnlijk overal heeft gefrustreerd. Maar niet te vrezen, in deze post gaan we een aantal trucjes achter je laten die je kunnen helpen het effect na te bootsen .

(Technische en ontwerptips)

Meld u aan bij meerdere accounts op dezelfde site met deze Chrome-extensie

Het beheren van meerdere accounts van een enkele sociale netwerkservice kan een gedoe zijn, omdat de noodzaak om constant uit te loggen en in te loggen bij een service niet bepaald leuk is. Gelukkig is er een Chrome-extensie genaamd SessionBox die accountbeheer een stuk eenvoudiger maakt .Zoals de naam al aangeeft, is SessionBox een extensie waarmee u meerdere sessies van een bepaalde website in één venster kunt starten .A

(Technische en ontwerptips)