RobinBoers/tablegenerator.html

## tablegenerator.html
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">

    <title>tablegeneratorsnake</title>

    <!-- Om de tabel zichtbaar te maken -->
    <style>
    	html,body {
        	height: 90%;
            font-family: sans-serif;
        }
    	table {
        	float: right;
            width: 700px;
            height: 700px;
            border-collapse: collapse;
        }
        td {
            border: 1px solid black;
            background-color: gold;
            margin: 0;
        }
        #error {
        	color: red;
        	font-weight: bolder;
        }
    </style>

</head>
<body onload="generateTable(5, 'table')">

	<table id="table" class="tabel">
    </table>

    <div class="tabelmaken">
        <p style="display:none" id="error">Please use a valid interger above 0 and below 100</p>

        <input id="number" type="number"></input>
        <br>

        <!-- Als er op de knop geklikt wordt call ik een Javascript functie met als input de value van de number input -->
        <button onclick="generateTable(document.getElementById('number').value, 'table')">Generate tabel</button>
    </div>

    <script>

    	// Kleuren voor de cellen. Kan worden veranderd, behalve de
        // laatste, want dit moet de originele kleur zijn
    	var colors = ["red","blue","green", "gold"]

        // Als de muis over een cel gaat wordt de achtergrond kleur veranderd. x seconden 		  // later weer, en weer en weer totdat de originele kleur terug is
        function onHover(cell, duration) {
        	cell.style.background = colors[0]; // begint altijd bij 0, i dunno why either
            setTimeout(() => {cell.style.background = colors[1]}, duration);
            setTimeout(() => {cell.style.background = colors[2]}, duration * 2);
            setTimeout(() => {cell.style.background = colors[3]}, duration * 3);
    	}

        // Functie om een tabel te genereren
        function generateTable(num, id) {

            // Als het getal onder 1 is of boven 100 is, geef een error melding
            if(num > 100 || num < 1) {
                document.getElementById("error").style.display = "block";
                return;
            }

            var table = document.getElementById(id);

            // Verberg de errormelding (voor als de vorige keer een error had)
            document.getElementById("error").style.display = "none";

            // Maak de tabel leeg
            table.innerHTML = '';

            // Loop deze functie numx voor de rijen
            for(var i = 0;i<num;i++) {

                var row = document.createElement("tr");

                // Loop deze functie ook numx voor de kolommen
                for(var x = 0;x<num;x++) {

                    // Maak lege cellen
                    var col = document.createElement("td");

                    var text = document.createTextNode(" ");
                    col.appendChild(text);

                    // Voeg de cellen toe aan de rij
                    row.appendChild(col);
                }

                // Voeg de rij toe aan de tabel
                table.appendChild(row);

            }

	    // Voeg EventListeners toe
            getAllChildren(id);
        }

        function getAllChildren(table) {
            var table = document.getElementById(table);

            // Haal alle rijen in de tabel op
            const childern = table.childNodes;

            // Bekijk de rijen 1 voor 1
            childern.forEach(row => {
                // Haal cellen op
                const subchildern = row.childNodes;

                // Bekijk cellen 1 voor 1
                subchildern.forEach(cell => {

		    // Voeg een EventListener toe voor als de muis over
		    // de cel beweegt
                    cell.addEventListener("mouseover", () => {onHover(cell, 1000)});
                });
            });
        }

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="script.js"></script>
	<link rel="stylesheet" href="style.css">

	<title>tablegeneratorsnake</title>

	<!-- Om de tabel zichtbaar te maken -->
	<style>
	html,body {
	height: 90%;
	font-family: sans-serif;
	}
	table {
	float: right;
	width: 700px;
	height: 700px;
	border-collapse: collapse;
	}
	td {
	border: 1px solid black;
	background-color: gold;
	margin: 0;
	}
	#error {
	color: red;
	font-weight: bolder;
	}
	</style>

	</head>
	<body onload="generateTable(5, 'table')">

	<table id="table" class="tabel">
	</table>

	<div class="tabelmaken">
	<p style="display:none" id="error">Please use a valid interger above 0 and below 100</p>

	<input id="number" type="number"></input>
	<br>

	<!-- Als er op de knop geklikt wordt call ik een Javascript functie met als input de value van de number input -->
	<button onclick="generateTable(document.getElementById('number').value, 'table')">Generate tabel</button>
	</div>

	<script>

	// Kleuren voor de cellen. Kan worden veranderd, behalve de
	// laatste, want dit moet de originele kleur zijn
	var colors = ["red","blue","green", "gold"]

	// Als de muis over een cel gaat wordt de achtergrond kleur veranderd. x seconden // later weer, en weer en weer totdat de originele kleur terug is
	function onHover(cell, duration) {
	cell.style.background = colors[0]; // begint altijd bij 0, i dunno why either
	setTimeout(() => {cell.style.background = colors[1]}, duration);
	setTimeout(() => {cell.style.background = colors[2]}, duration * 2);
	setTimeout(() => {cell.style.background = colors[3]}, duration * 3);
	}

	// Functie om een tabel te genereren
	function generateTable(num, id) {

	// Als het getal onder 1 is of boven 100 is, geef een error melding
	if(num > 100 \|\| num < 1) {
	document.getElementById("error").style.display = "block";
	return;
	}

	var table = document.getElementById(id);

	// Verberg de errormelding (voor als de vorige keer een error had)
	document.getElementById("error").style.display = "none";

	// Maak de tabel leeg
	table.innerHTML = '';

	// Loop deze functie numx voor de rijen
	for(var i = 0;i<num;i++) {

	var row = document.createElement("tr");

	// Loop deze functie ook numx voor de kolommen
	for(var x = 0;x<num;x++) {

	// Maak lege cellen
	var col = document.createElement("td");

	var text = document.createTextNode(" ");
	col.appendChild(text);

	// Voeg de cellen toe aan de rij
	row.appendChild(col);
	}

	// Voeg de rij toe aan de tabel
	table.appendChild(row);

	}

	// Voeg EventListeners toe
	getAllChildren(id);
	}

	function getAllChildren(table) {
	var table = document.getElementById(table);

	// Haal alle rijen in de tabel op
	const childern = table.childNodes;

	// Bekijk de rijen 1 voor 1
	childern.forEach(row => {
	// Haal cellen op
	const subchildern = row.childNodes;

	// Bekijk cellen 1 voor 1
	subchildern.forEach(cell => {

	// Voeg een EventListener toe voor als de muis over
	// de cel beweegt
	cell.addEventListener("mouseover", () => {onHover(cell, 1000)});
	});
	});
	}

	</script>

	</body>
	</html>