index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
    <title>Document</title>
</head>
<body>
    <h1 id="title">Welkom op mijn website!</h1>
    <button id="changeTitle">Wijzig titel</button>

    <p id="paragraph">Dit is een alinea.</p>
<button id="addText">Voeg extra tekst toe</button>

<div id="colorBox" style="width: 200px; height: 200px; background-color: lightblue;"></div>
<button id="changeColor">Verander kleur</button>

<p id="text">Je kunt me zien!</p>
<button id="hideText">Verberg tekst</button>

<ul id="itemList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="addItem">Voeg item toe</button>
</body>
</html>