Skip to main content

DOM manipulation opdrachten

 

 

 

 

Opdracht

Je krijgt een eenvoudige HTML-pagina met een invoerveld voor de geboortedatum, een knop, en een leeg element waar een persoonlijke groet zal verschijnen. Jouw taak is om JavaScript te schrijven dat het volgende doet:

image-1712312652557.png

  1. Wanneer de gebruiker op de knop klikt, lees de ingevoerde geboortedatum uit het invoerveld.
  2. Bereken de leeftijd van de gebruiker op basis van de huidige datum en de ingevoerde geboortedatum.
  3. Genereer een persoonlijke groet die de leeftijd van de gebruiker bevat en toon dit in het lege element op de pagina.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Persoonlijke Groet</title>
</head>
<body>
    <h1>Welkom!</h1>
    <div>
      <label for="birthdate">Voer je geboortedatum in (YYYY-MM-DD):</label>
      <input type="date" id="birthdate" name="birthdate">
    </div>
  
    <div>
      <button id="greetButton">Toon Groet</button>
      <div id="greetingMessage"></div>
    </div>
  
    <script>
        // Jouw JavaScript code gaat hier
    </script>
</body>
</html>
  1. Voeg een event listener toe aan de knop zodat er een functie wordt uitgevoerd wanneer er op de knop wordt geklikt.
  2. In de functie, haal de waarde van het geboortedatumveld op en converteer deze naar een JavaScript Date object.
  3. Bereken de leeftijd door het verschil tussen de huidige datum en de geboortedatum te nemen. Zorg ervoor dat je rekening houdt met de maanden en dagen (niet alleen de jaren) om de leeftijd nauwkeurig te berekenen.
  4. Genereer een persoonlijke groet zoals "Hallo! Je bent nu [leeftijd] jaar oud.".
  5. Toon de groet in het element met id greetingMessage door de innerText of innerHTML eigenschap van het element aan te passen.

Inleveren

 

Opdracht

Neem de goedgekeurde opdracht xxx en maak de volgende aanpassingen:

  • Voeg een controle toe die verzekert dat de ingevoerde geboortedatum niet in de toekomst ligt.
  • Maak de groet persoonlijker door de tijd van de dag te gebruiken (goedemorgen, goedemiddag, goedenavond).
  • Voeg stijlen toe aan de webpagina om het er aantrekkelijker uit te laten zien.

Inleveren

Back to top