Inleiding
Development is 1 van de leeruitkomsten van ICT & Media Design semester 2. Met de volgende projecten wil ik deze leeruitkomst aantonen.
Dr.Doofenshmirtz
In sprint 1 hebben we een opdracht gekregen om een bestaande website na te maken. De nadruk lag hier op het gebruik van CSS Flexbox of Grid
De eerste keer toen ik mijn code liet zien aan de docent kreeg ik als feedback om geen position absolute en relative te gebruiken, omdat bij deze positioneringstechnieken het moeilijk is om responsieve lay-out te maken. Ik heb na de feedback mijn code aangepast en de docent vond mijn code al een stuk beter. Deze keer heb ik alleen margin gebruikt om de positie van div-elementen te veranderen. Als laatste aanpassing op verzoek van de docent heb ik alle div-elementen in grotere div-elementen geplaats die net zo breed zijn als de pagina, omdat je hierdoor veel makkelijker elementen kan centreren op de pagina doormiddel van flexbox en hoef je veel minder gebruik te maken van margin-left. Dit maakt het positionering veel nauwkeuriger
Slideshow
Hierboven is de volledige code voor mijn SlideShow. De pagina bestaat uit een div-container waar alle afbeeldingen zich in bevinden. Aan beide kanten van de pagina zitten buttons, waarmee je vooruit en achteruit kan gaan in de SlideShow. Verder switcht de Slideshow vanzelf van afbeelding om de 5 seconden.
Met document.querySelectorAll(".slides img") worden alle afbeeldingen in de div-container opgehaald en opgeslagen in de variabel slides. Vervolgens wordt er bijgehouden bij welke afbeelding we ons bevinden (slideIndex). Er wordt ook een intervalId gemaakt, die gebruikt wordt voor de automatische overgang van de afbeeldingen.
Door gebruik te maken van document.addEventListener("DOMContentLoaded", initializeSlider) start de Slideshow pas als de gehele pagina is geladen, waardoor je laadfouten vermijd.
Bij initializeSlider() wordt er gekeken of er meer dan 0 afbeeldingen zijn en als dit het geval is, wordt er een class displaySlide toegevoegd aan de div “slides”, waardoor de eerste afbeelding zichtbaar wordt. Verder wordt er met setInterval(nextSlide, 5000) een timer ingesteld van 5 seconden waarna de afbeelding veranderd.
Bij de showSlide functie wordt er gekeken waar de slideShow zich precies bevind. Als de Slideshow bij de laatste afbeelding is, gaat de slideshow weer naar de eerste afbeelding. Als de Slideshow bij de eerste afbeelding is en je klikt op de knop prevSlide, gaat de Slideshow naar de laatste afbeelding van de reeks. Als laatste bij slides.forEach wordt bij alle afbeeldingen de class “displaySlide” weggehaald, behalve bij de huidige afbeelding.
Wanneer er op de knoppen wordt geklikt, worden de functies prevSlide of nextSlide gebruikt. bij de functies wordt de interval op 0 gezet, waardoor je tijd krijgt om naar de afbeelding te kijken. Bij de prevSlide gaat de afbeelding 1 achteruit en bij nextSlide gaat de afbeelding 1 vooruit, doormiddel van - - en ++. Als laatste word de nieuwe afbeelding getoond met de showSlide functie.
Character Generator
Bij deze Karakter generator kan je op de button “genereer” klikken, waardoor de afbeeldingen in de div-elementen willekeurig worden aangepast. Hierdoor krijg je elke keer een andere karakter met een grappig effect.
Als eerste wordt er een functie uitgevoerd, wanneer er op de button wordt geklikt met de Id “button-knop”. Vervolgens zien we dat er 3 arrays worden aangemaakt waar alle afbeeldingen worden opgeslagen van de hoofden, lichamen en benen.
Om elke keer een andere afbeelding te krijgen, wordt er gebruik gemaakt van de Math.random-functie. Deze getal tussen de 0 en 1 wordt vermenigvuldigd met de lengte van de array. Daarna wordt het getal afgerond met de Math.floor-functie.
Als laatste wordt de gekozen afbeelding continu vervangen voor de huidige afbeelding in elke div-element, wanneer er op de knop wordt geklikt.
Steen Papier Schaar
Ik heb 3 buttons aangemaakt met een Onclick event handler en binnen deze event-handler zit een functie genaamd “playGame”. Bij deze Functie hoort een parameter dat de keuze van de speler moet voorstellen.
Om de keuze van de computer te beslissen, is er een aparte functie aangemaakt die math.random gebruikt om elke keer een andere keuze van de computer te krijgen. Deze keuze wordt opgeslagen in een constante variabel genaamd computerMove. Verder is er een lege variabel aangemaakt waar de resultaat van het spel wordt opgeslagen. Hierboven zien we dat aan de hand van een grote if-statement eerst wordt gekeken wat de keuze is van de speler. Als de keuze van de speler bijvoorbeeld ‘’scissors’’ is, wordt daarna de keuze van de computer vergeleken met “scissors”. Aan het einde wordt het resultaat geüpdatet in de variabel result.
Om een pop-up te krijgen wanneer er op een knop wordt geklikt, heb ik gebruik gemaakt van de alert-functie. Binnen deze functie wordt de zin elke keer aangepast aan de hand van de keuzes/resultaten die zijn gemaakt en geüpdatet met ${} (expressie-interpolatie).
Hierboven is de functie om een computerkeuze te genereren aan de hand van Math.random. Met de Math.random functie wordt een getal tussen de 0 en 1 gegenereerd. Omdat we 3 keuzes hebben, is het handig om alle getallen tussen de 0 en 1 te splitsen in 3 gelijken stukken, waardoor we een random keuze krijgen als we elke keer een random getal genereren.
Hierboven is een afbeelding van de logica achter de code. Als de random getal tussen de 0 en 1/3 van 1 valt, wordt de keuze van de computer “rock”. Dit geldt ook voor de andere keuzes. Als we nu naar mijn code kijken, gebruik ik een if-statement om te checken in welke stuk de random gegenereerde getal valt. Als deze getal bijvoorbeeld groter is dan 1/3 van 1 en kleiner is dan 2/3 van 1, dan wordt de keuze opgeslagen in de variabel “computerMove” en gebruikt bij de functie “playGame”.