Advanced Javascript

Countdown Timer

Voor Mijn Verjaardag!
Dagen
Uren
Minuten
Seconde

Deze POC is een countdown timer. Hij staat ingesteld op mijn verjaardag volgend jaar.
Ik heb deze POC hier gevonden, en dacht dat deze prima van pas kon komen in mijn collectie POC's.
Ik vind dat hij er vrij simpel uit ziet, maar er zit nogal wat rekenwerk achter. Ik maak eerst vier verschillende variabelen aan: days, hours, minutes en seconds. Vervolgens sla ik in de variabele now de dag, uren, minuten en seconden van nu op. Deze trek ik vervolgens van de datum af die ik heb ingesteld om naar af te tellen. Vervolgens wordt er per variabele (dag, uur, etc.) een rekensom uitgerekend om het verschil hiertussen uit te rekenen, en dit wordt gelijk weer opgeslagen in de variabele.
Als laatste maak ik een "if-statement" aan met tussen de haakjes: t < 0. Dit betekent dat als de variabele t (deadline - now) kleiner is dan 0, de deadline is bereikt, en de countdown dus stopt. Hierna wordt dan ook in de HTML code laten zien: GEFELICITEERD!

Klik hier voor de broncode.

Vooruitgang

Deze sprint zat ik eigenlijk best wel een beetje in een put. Ik heb heel veel YouTube tutorials gekeken, online-cursusen gevolgd, klasgenoten gevraagd, maar ik kwam er maar niet uit. Ik vond deze paar weken heel snel gaan. Vooral het idee dat je in drie weken van de basics ineens de stap moet maken naar Advanced JS. Dit was wel een drempel voor mij. Echter als iemand wat aan mij vroeg hoe iets werkte, wist ik wel altijd waar diegene het over had en hoe je dat zou moeten oplossen. De stof zat er dus al wel in, het toepassen ging alleen niet...
Hier ben ik mee aan de gang gegaan door eerst alle JS-code tussen mijn HTML code te halen en in een appart js-bestand te zetten, en vervolgens deze bestanden te koppelen met elkaar.
Vervolgens was er onduidelijkheid over wat er voor de oplevering nou eigenlijk verwacht werd. Wij vonden het allemaal een beetje vaag. En daar kwam nog eens mijn gestresste hoofd bij kijken omdat ik dacht dat er een werkende applicatie werd verwacht... Echter heb ik een klein gesprekje gehad met mijn docent Lisette, en daaruit bleek dat het niet gaat om wat je uiteindelijk oplevert, maar wat jouw proces is geweest dit semester. Hier viel wel wat van mijn schouders af, en ik was al een stuk minder gestressed, maar dit maakte me ook bewust dat ik niet alleen maar opdrachten moet laten zien. Het gaat juist om de groei die ik maak door de opdrachten die ik maak, en daar gaat het nou juist om!

Feedback

De belangrijkste feedback die ik heb gekregen is dat het niet gaat om wat voor applicatie je oplevert, maar dat het gaat om het proces dat jij als student doorloopt, en hoe je groeit in je vaardigheden (hiernaast ook beschreven). Dit zette mij wel aan het denken. Iemand die vanaf niveau 0 begint met JS (ik), leert heel anders dan iemand die al een vooropleiding heeft gedaan.
Ook vroeg mijn docent aan Kenny en aan mij of wij al eens met PHP hadden gewerkt. Kenny en ik hebben daar al mee gewerkt, waarop onze docent ons vertelde dat je dat ook mag gebruiken in je website. Ik antwoorde daarop dat het wel heel handig zou zijn als ik de header en footer zou includen i.p.v. alles te kopieren en te plakken. Als je namelijk een linkje moet aanpassen, hoef je dat maar één keer te doen, en hoef je niet alles te kopieren. Dit ga ik dus zeker een keer doen!

JSON POC

Tijdens het bouwen van mijn grote applicatie ben ik natuurlijk problemen tegen gekomen. Dingen als met JS voor het eerst JSON ophalen was niet het makkelijkste wat ik kon doen (vond ik). Toch is het mij gelukt om de inhoud van een test JSON file in de console te loggen.
Om dit te zien, hoef je alleen maar de DevTools te openen en naar de console te navigeren. Daar staat de inhoud.

In vond dit een goede POC om op mijn portfolio te laten zien. Ik vind het namelijk al een lastig project, en dat dit stukje werkte gaf me gelijk een goed gevoel en motivatie om door te gaan!

Klik hier voor de broncode en hier voor de JSON.

JSON POC 2.0

Ik ben verder gegaan met de vorige POC en heb hem verbeterd door de tutorial verder te volgen. Ik heb onder andere toegevoegd dat de knop verdwijnt wanneer alle JSON inhoud op de pagina wordt weergegeven. Zo kan de gebruiker niet nog een keer op de knop klikken en merken dat er niets meer gebeurd.
Verder heb ik nog toegevoegd dat er wat html tekst tussen de variabele staat waardoor het een lopende zin wordt, en de gebruiker niet in de gaten heeft dat zo'n zin is samengesteld.

Klik hier voor de broncode, hier voor het eerste JSON bestand, en hier voor het tweede JSON bestand.

Vooruitgang

Hierboven vertelde ik dat ik een beetje met mezelf in de knoop zat omdat ik JS erg moeilijk vond. Dit is nog steeds zo, maar ik ben er (voor de zoveelste keer) achter gekomen dat je gewoon dingen moet gaan maken voordat je iets leerd. Ik ben daarom dus in sprint 3 begonnen aan mijn 'grote' JS-applicatie.
Toen ik eenmaal begonnen was kwam ik natuurlijk wat dingen tegen die niet helemaal goed werkte, maar dit lostte ik tot mijn eigen verbazing prima zelf op. Hierdoor kreeg ik meer zelfvertrouwen en ook vertrouwen in dat ik een project echt kon gaan realiseren! Hierboven dus de POC's die vooraf zijn gegaan aan mijn applicatie.
Ik zie dit zelf als nog een vooruitgang, en ik denk dat ik bij development echt grote stappen heb gezet. Niet alleen in kennis over JS, maar ook stappen vooruit in mijn zelfvertrouwen op het gebied van coderen! Dit doet me goed.