<!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>
HTML-structuur: Dit document bevat een titel, een formulier voor het invoeren van een naam en bericht, en een sectie voor weergave van de gastenboekberichten.
JavaScript:
Houdt het aantal bezoekers bij
met behulp van localStorage
.
Voegt nieuwe berichteinvoer toe aan de pagina wanneer het formulier wordt verzonden.
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.