<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gastenboek</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #guestbook {
            margin-top: 20px;
        }
        .entry {
            border: 1px solid #ccc;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>

<h1>Welkom in ons Gastenboek</h1>
<p>Aantal bezoekers: <span id="visitorCount">0</span></p>

<h2>Laat een bericht achter</h2>
<form id="guestbookForm">
    <label for="name">Naam:</label><br>
    <input type="text" id="name" name="name" required><br><br>
    <label for="message">Bericht:</label><br>
    <textarea id="message" name="message" required></textarea><br><br>
    <input type="submit" value="Verstuur">
</form>

<div id="guestbook"></div>

<script>
    let visitorCount = localStorage.getItem('visitorCount') || 0;
    visitorCount++;
    localStorage.setItem('visitorCount', visitorCount);
    document.getElementById('visitorCount').innerText = visitorCount;

    document.getElementById('guestbookForm').addEventListener('submit', function(event) {
        event.preventDefault();
        
        const name = document.getElementById('name').value;
        const message = document.getElementById('message').value;

        const entry = document.createElement('div');
        entry.className = 'entry';
        entry.innerHTML = `<strong>${name}</strong>: ${message}`;
        
        document.getElementById('guestbook').appendChild(entry);
        
        // Reset form
        document.getElementById('guestbookForm').reset();
    });
</script>

</body>
</html>

Uitleg:

Gebruik:

Kopieer de bovenstaande code in een teksteditor en sla het op als gastenboek.html. Open het bestand in een webbrowser om de functionaliteit te zien.