humphd/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dogs!</title>
    </head>
    <body>
        <form>
            <label for="dog-list">Dog Breeds</label>
            <select id="dog-list">
            </select>
        </form>

        <div id="dog-gallery">
        </div>

        <script src="index.js"></script>
    </body>
</html>

## index.js

function createImgElement(url) {
    var img = new Image();
    img.src = url;
    return img;
}

function displayBreedImages(urls) {
    var dogsDiv = document.querySelector('#dog-gallery');
    dogsDiv.innerHTML = '';

     urls.forEach(function(url) {
        var elem = createImgElement(url);
        dogsDiv.appendChild(elem);
     });
}

function loadBreedImageUrls(breed) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
        var data = this.responseText;
        data = JSON.parse(data);

        if(data.message === "Breed not found") {
            data = [];
        }

        displayBreedImages(data.message);
    };

    // breed:     https://dog.ceo/api/breed/hound/images
    // sub-breed: https://dog.ceo/api/breed/hound/afghan/images
    xhr.open("GET", `https://dog.ceo/api/breed/${breed}/images`);

    xhr.send();
}

function addBreedChangeHandler() {
    var dogList = document.querySelector('#dog-list');
    dogList.addEventListener('change', function(e) {
        loadBreedImageUrls(dogList.value);
    });
}

function createOptionElement(breed) {
    // <option value="...">...</option>
    var elem = document.createElement('option');
    elem.value = breed.value;
    elem.innerHTML = breed.display;

    return elem;
}

function displayBreeds(breeds) {
    var dogList = document.querySelector('#dog-list');

    breeds.forEach(function(breed) {
        var elem = createOptionElement(breed);
        dogList.appendChild(elem);
    });

    addBreedChangeHandler();
}

function createBreedInfo(breed, subBreed) {
    if(subBreed) {
        // {value: 'hound/xyz', display: 'hound - xyz'}
        return {
            value: `${breed}/${subBreed}`,
            display: `${breed} - ${subBreed}`
        };
    } else {
        // {value: 'hound', display: 'hound'}
        return {
            value: breed,
            display: breed
        };
    }
}

function processBreeds(breeds) {
    var breedsArray = Object.keys(breeds);
    var allBreedNames = [];

    breedsArray.forEach(function(breedName) {
        // Get the array of sub-breed names for this breed
        var subBreeds = breeds[breedName];
        if(subBreeds.length > 0) {
            subBreeds.forEach(function(subBreedName) {
                // Bulldog - French
                allBreedNames.push(createBreedInfo(breedName, subBreedName));
            });
        } else {
            // Hound
            allBreedNames.push(createBreedInfo(breedName));
        }
    });

    displayBreeds(allBreedNames);
}

function start() {
    // 1. Create an XHR to do the network request
    var xhr = new XMLHttpRequest();

    // 2. Define an event handler for the `load` event, which happens when data arrives
    xhr.onload = function() {
        // 3. Get the data from the `xhr` object's `responseText` property
        var data = this.responseText;
        // Parse the JSON string into an Object
        var breedInfo = JSON.parse(data);

        if(breedInfo.status !== 'success') {
            // error, display a message to the user in the DOM
        } else {
            processBreeds(breedInfo.message);
        }
    };

    // 4. Create an HTTP GET request to the given URL
    xhr.open("GET", "https://dog.ceo/api/breeds/list/all");

    // 5. Send the HTTP request to the server, and wait asynchronously for the reply
    xhr.send();
}

window.onload = start;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dogs!</title>
	</head>
	<body>
	<form>
	<label for="dog-list">Dog Breeds</label>
	<select id="dog-list">
	</select>
	</form>

	<div id="dog-gallery">
	</div>

	<script src="index.js"></script>
	</body>
	</html>

	function createImgElement(url) {
	var img = new Image();
	img.src = url;
	return img;
	}

	function displayBreedImages(urls) {
	var dogsDiv = document.querySelector('#dog-gallery');
	dogsDiv.innerHTML = '';

	urls.forEach(function(url) {
	var elem = createImgElement(url);
	dogsDiv.appendChild(elem);
	});
	}

	function loadBreedImageUrls(breed) {
	var xhr = new XMLHttpRequest();

	xhr.onload = function() {
	var data = this.responseText;
	data = JSON.parse(data);

	if(data.message === "Breed not found") {
	data = [];
	}

	displayBreedImages(data.message);
	};

	// breed: https://dog.ceo/api/breed/hound/images
	// sub-breed: https://dog.ceo/api/breed/hound/afghan/images
	xhr.open("GET", `https://dog.ceo/api/breed/${breed}/images`);

	xhr.send();
	}

	function addBreedChangeHandler() {
	var dogList = document.querySelector('#dog-list');
	dogList.addEventListener('change', function(e) {
	loadBreedImageUrls(dogList.value);
	});
	}

	function createOptionElement(breed) {
	// <option value="...">...</option>
	var elem = document.createElement('option');
	elem.value = breed.value;
	elem.innerHTML = breed.display;

	return elem;
	}

	function displayBreeds(breeds) {
	var dogList = document.querySelector('#dog-list');

	breeds.forEach(function(breed) {
	var elem = createOptionElement(breed);
	dogList.appendChild(elem);
	});

	addBreedChangeHandler();
	}

	function createBreedInfo(breed, subBreed) {
	if(subBreed) {
	// {value: 'hound/xyz', display: 'hound - xyz'}
	return {
	value: `${breed}/${subBreed}`,
	display: `${breed} - ${subBreed}`
	};
	} else {
	// {value: 'hound', display: 'hound'}
	return {
	value: breed,
	display: breed
	};
	}
	}

	function processBreeds(breeds) {
	var breedsArray = Object.keys(breeds);
	var allBreedNames = [];

	breedsArray.forEach(function(breedName) {
	// Get the array of sub-breed names for this breed
	var subBreeds = breeds[breedName];
	if(subBreeds.length > 0) {
	subBreeds.forEach(function(subBreedName) {
	// Bulldog - French
	allBreedNames.push(createBreedInfo(breedName, subBreedName));
	});
	} else {
	// Hound
	allBreedNames.push(createBreedInfo(breedName));
	}
	});

	displayBreeds(allBreedNames);
	}

	function start() {
	// 1. Create an XHR to do the network request
	var xhr = new XMLHttpRequest();

	// 2. Define an event handler for the `load` event, which happens when data arrives
	xhr.onload = function() {
	// 3. Get the data from the `xhr` object's `responseText` property
	var data = this.responseText;
	// Parse the JSON string into an Object
	var breedInfo = JSON.parse(data);

	if(breedInfo.status !== 'success') {
	// error, display a message to the user in the DOM
	} else {
	processBreeds(breedInfo.message);
	}
	};

	// 4. Create an HTTP GET request to the given URL
	xhr.open("GET", "https://dog.ceo/api/breeds/list/all");

	// 5. Send the HTTP request to the server, and wait asynchronously for the reply
	xhr.send();
	}

	window.onload = start;