phpfiddle/fiddle_096791.php

## fiddle_096791.php
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Colours</title>
        <meta name=viewport content="width=device-width, initial-scale=1">
        <style>
          .colour-div {
            display: inline-block;
            padding: 10px;
            border: 1px solid #666;
            width: 220px;
            font-size: 90%;
          }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>Colour names and their hex equivalents</h1>
            <!-- Empty div that will be filled with divs displaying colours -->
            <div id="display-box"></div>
            <script>
              // Get a handle to the display div
              let displayBox = document.getElementById('display-box');
              // This function makes a connection to the php script
              // and the callback function is run when the connection
              // return data
              function getData(url, callback) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                  if (xhttp.readyState == 4 && xhttp.status == 200) {
                    callback(xhttp);
                  }
                };
                // Use HTTP GET method to retrieve data
                xhttp.open('GET', url, true);
                xhttp.send();
              }

              function run() {
                getData('get-colours.php', loadColours);
              }
              run();

              // Turn the returned data, which is this form: "{"aliceblue":"#f0f8ff", "antiquewhite": "#faebd7",...}"
              // into a JavaScript object literal that is in this form: {"aliceblue":"#f0f8ff", "antiquewhite": "#faebd7",...}
              function loadColours(xhttp) {
                let colours = JSON.parse(xhttp.responseText);
                //console.log(names);
                for (key in colours) {
                    let divEl = document.createElement('div');
                    divEl.setAttribute('class', 'colour-div');
                    divEl.setAttribute('style', 'background-color:' + key);
                    divEl.textContent = key + ", " + colours[key] + "\n";
                    displayBox.appendChild(divEl);

                  }
              }
            </script>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Colours</title>
	<meta name=viewport content="width=device-width, initial-scale=1">
	<style>
	.colour-div {
	display: inline-block;
	padding: 10px;
	border: 1px solid #666;
	width: 220px;
	font-size: 90%;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<h1>Colour names and their hex equivalents</h1>
	<!-- Empty div that will be filled with divs displaying colours -->
	<div id="display-box"></div>
	<script>
	// Get a handle to the display div
	let displayBox = document.getElementById('display-box');
	// This function makes a connection to the php script
	// and the callback function is run when the connection
	// return data
	function getData(url, callback) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (xhttp.readyState == 4 && xhttp.status == 200) {
	callback(xhttp);
	}
	};
	// Use HTTP GET method to retrieve data
	xhttp.open('GET', url, true);
	xhttp.send();
	}

	function run() {
	getData('get-colours.php', loadColours);
	}
	run();

	// Turn the returned data, which is this form: "{"aliceblue":"#f0f8ff", "antiquewhite": "#faebd7",...}"
	// into a JavaScript object literal that is in this form: {"aliceblue":"#f0f8ff", "antiquewhite": "#faebd7",...}
	function loadColours(xhttp) {
	let colours = JSON.parse(xhttp.responseText);
	//console.log(names);
	for (key in colours) {
	let divEl = document.createElement('div');
	divEl.setAttribute('class', 'colour-div');
	divEl.setAttribute('style', 'background-color:' + key);
	divEl.textContent = key + ", " + colours[key] + "\n";
	displayBox.appendChild(divEl);

	}
	}
	</script>
	</div>
	</body>
	</html>