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

60 hyperrealistische schilderijen

Hyper-realistisch of hyperrealisme is een soort kunstschilderkunst die technische kunst op een zeer hoog niveau tilt. Wat een door de kunstenaar genomen hoge resolutie foto lijkt, is in plaats daarvan een handgetekende schilderij. Neem deze mand met fruit. Je zult waarschijnlijk niet onder de indruk zijn van deze afbeelding als het een foto was, maar je realiseert je dat het een nauwgezet met de hand getekend schilderij is dat je in de war zou kunnen brengen

(Technische en ontwerptips)

Hoe terug te geven aan de Design Community

We hebben allemaal voorbeelden gezien na het voorbeeld van perfect weergegeven ontwerpen die onze verbeelding prikkelen en soms zelfs een beetje jaloers maken. Het lijkt erop dat sommige ontwerpers goddelijk getalenteerd zijn, in staat om verbazingwekkend werk te creëren met bijna helemaal geen zichtbare strijd.

(Technische en ontwerptips)