Week 8 - Tamagotchi eindchallenge | JavaScript Cheatsheet

Wat heb je geleerd?#

In de afgelopen 8 weken heb je geleerd:

Week 1: Variabelen, datatypes, console.log, prompt, innerHTML
Week 2: Functies, onclick, getElementById, style aanpassen
Week 3: If/else, vergelijkingen, state (variabelen onthouden)
Week 4: addEventListener (modernere events)
Week 5: Arrays, Math.random, .value (input uitlezen)
Week 6: setInterval, clearInterval, timers maken
Week 7: For...of loops, arrays met objecten, meerdere states

Alles samenvoegen#

In week 8 combineer je alle concepten in één grote app. Dat betekent:

Meerdere variabelen (states) bijhouden tegelijk
Timers gebruiken om automatisch dingen te laten gebeuren
Knoppen koppelen aan functies met addEventListener
If/else gebruiken voor game logic (game over, win conditions)
Display updaten na elke actie

Debuggen (fouten oplossen)#

Wat is debuggen?
Debuggen is het proces van fouten zoeken en oplossen in je code. Dit is een belangrijke skill!

console.log() is je beste vriend

function feed() {

                      console.log("feed functie wordt
                        aangeroepen");

                      hunger = hunger - 10;

                      console.log("Nieuwe hunger waarde:
                        " +
                    hunger);

                      updateDisplay();

                    }

Waarom console.log gebruiken?

Zie je of een functie überhaupt wordt aangeroepen
Zie je wat de waarde is van variabelen
Zie je waar in je code het misgaat

Console openen in browser:

Chrome/Edge: F12 of Ctrl + Shift + J (Windows) / Cmd + Option + J (Mac)
Firefox: F12 of Ctrl + Shift + K (Windows) / Cmd + Option + K (Mac)
Klik op het tabblad "Console"

Veelvoorkomende fouten oplossen#

1. Functie wordt niet aangeroepen

Check: staat er een addEventListener in je code?
Check: is het id in HTML hetzelfde als in JavaScript?
Check: staat je JavaScript onderaan de HTML (of gebruik DOMContentLoaded)?
Zet console.log("test") bovenaan de functie

2. Display wordt niet geupdate

Check: roep je updateDisplay() aan na elke actie?
Check: staan de id's correct in getElementById?
Zet console.log() in updateDisplay om te zien of hij wordt aangeroepen

3. Timer loopt niet / stopt niet

Check: is de timer opgeslagen in een variabele?
Check: gebruik je clearInterval(timer) om te stoppen?
Check: staat er 1000 voor milliseconden (niet 1)?
Zet console.log() in de timer functie om te zien of hij loopt

4. Variabele heeft verkeerde waarde

Zet console.log(variabeleNaam) om de waarde te zien
Check: vergeet je niet om de variabele te updaten?
Check: gebruik je = (toekennen) of === (vergelijken) correct?

Stappenplan voor grote projecten#

Bouw je app in kleine stapjes:

Stap 1: HTML structuur
- Maak alle HTML elementen met correcte id's
- Test of alles zichtbaar is
Stap 2: Variabelen (state)
- Maak alle variabelen die je nodig hebt
- Log ze in de console om te testen
Stap 3: Display functie
- Maak een updateDisplay() functie
- Test of hij de juiste waardes toont
Stap 4: Eerste knop
- Maak één functie (bijv. feed)
- Koppel hem aan een knop met addEventListener
- Test grondig voordat je verdergaat!
Stap 5: Meer knoppen
- Voeg één voor één extra knoppen toe
- Test elke knop apart
Stap 6: Timer (optioneel)
- Voeg een timer toe die automatisch waardes verandert
- Test of je hem kunt starten en stoppen
Stap 7: Game over logica
- Voeg checks toe: is hunger te hoog? Is energy te laag?
- Toon game over scherm

Gouden regel: Test elke kleine stap voordat je verder gaat. Het is makkelijker om 1 klein probleem op te lossen dan 10 problemen tegelijk!

Code organisatie tips#

Houd je code overzichtelijk:

1. Gebruik commentaar

// ===== STATE =====

                    let hunger = 50;

                    let energy = 50;

                    let happiness = 50;


                    // ===== FUNCTIES =====

                    function feed() {

                      // Code hier

                    }


                    // ===== EVENT LISTENERS =====

                    document.getElementById("feedBtn").addEventListener("click", feed);

2. Duidelijke functienamen

// ✅ Goed - duidelijke namen

                    function feed() { }

                    function sleep() { }

                    function play() { }


                    // ❌ Slecht - onduidelijke namen

                    function f() { }

                    function doSomething() { }

                    function func1() { }

3. Één functie, één taak

// ✅ Goed - aparte functies

                    function decreaseHunger() {

                      hunger = hunger - 10;

                      checkBounds();

                    }


                    function checkBounds() {

                      if (hunger  100) hunger =
                        100;

                        }


                        function updateDisplay() {

                          document.getElementById("hunger").innerHTML = hunger;

                        }

Veelgemaakte fouten week 8#

Te veel code in één keer schrijven zonder te testen → werkt niks en je weet niet waar de fout zit
Geen console.log() gebruiken → blind debuggen is onmogelijk
Vergeten updateDisplay() aan te roepen → display blijft hangen op oude waardes
Meerdere timers starten zonder de oude te stoppen → chaos!
id's in HTML en JavaScript komen niet overeen → elementen worden niet gevonden
Geen grenzen checken bij waardes → negatieve getallen of getallen boven 100
JavaScript laden voordat HTML klaar is → gebruik DOMContentLoaded of zet script onderaan
Onduidelijke variabele namen → na een week weet je zelf niet meer wat x of temp betekent

Je bent klaar!#

Gefeliciteerd! Je hebt alle basis JavaScript concepten geleerd. Je kunt nu:

Interactieve websites maken
Data opslaan en manipuleren
Gebruikersinput verwerken
Timers en animaties maken
Complexe logica schrijven met loops en if/else
Je eigen code debuggen

Volgende stappen:

Blijf oefenen met eigen projecten
Leer over APIs om data op te halen van internet
Experimenteer en maak fouten - zo leer je het beste!