mrdarrengriffin/index.html

## index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adorable Avatar Configurator</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        #controls-left,
        #controls-right,
        #avatar {
            display: inline-block;
            float: left;
        }

        .control {
            display: block;
            margin: 20px;
        }

        .control:first-child {
            margin-top: 0px;
        }

        .control-label {
            margin-left: 20px;
        }

        #avatar img {
            width: 150px;
            height: 150px;
        }
        #mainCard{
            width:30rem;
        }
        #customizer{
            width:400px;
            margin:0 auto;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="card mt-4 text-center" id="mainCard">
            <div class="card-body">
                <h5 class="card-title">Adorable Avatar Generator</h5>
                <p class="card-text"></p>
                <div id="customizer" class="text-center">
                    <div id="controls-left">
                        <div class="control">
                            <button type="button" class="btn btn-light" disabled onclick="prevEyes()">&lt;</button>
                        </div>
                        <div class="control">
                            <button type="button" class="btn btn-light" disabled onclick="prevNose()">&lt;</button>
                        </div>
                        <div class="control">
                            <button type="button" class="btn btn-light" disabled onclick="prevMouth()">&lt;</button>
                        </div>
                    </div>
                    <div id="avatar">
                        <img src="">
                    </div>
                    <div id="controls-right">
                        <div class="control">
                            <button type="button" class="btn btn-light" disabled onclick="nextEyes()">&gt;</button>
                            <code class="control-label" id="eyesLabel"></code>
                        </div>
                        <div class="control">
                            <button type="button" class="btn btn-light" disabled onclick="nextNose()">&gt;</button>
                            <code class="control-label" id="noseLabel"></code>
                        </div>
                        <div class="control">
                            <button type="button" class="btn btn-light" disabled onclick="nextMouth()">&gt;</button>
                            <code class="control-label" id="mouthLabel"></code>
                        </div>
                    </div>

                </div>
                <div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="url">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
        var parts = {
            eyes: ["eyes1", "eyes10", "eyes2", "eyes3", "eyes4", "eyes5", "eyes6", "eyes7", "eyes9"],
            nose: ["nose2", "nose3", "nose4", "nose5", "nose6", "nose7", "nose8", "nose9"],
            mouth: ["mouth1", "mouth10", "mouth11", "mouth3", "mouth5", "mouth6", "mouth7", "mouth9"]
        }

        var avatarConfig = {
            eyes: 0,
            nose: 0,
            mouth: 0,
            color: "8e8895",
            loading: true
        }

        var url = "https://adorable-avatars.broken.services/face/eyes1/nose2/mouth1/8e8895"
        updateAvatar();
        function nextEyes() {
            changePart("eyes", 1)
        }
        function prevEyes() {
            changePart("eyes", -1)
        }
        function nextNose() {
            changePart("nose", 1)
        }
        function prevNose() {
            changePart("nose", -1)
        }
        function nextMouth() {
            changePart("mouth", 1)
        }
        function prevMouth() {
            changePart("mouth", -1)
        }

        function changePart(part, amount) {
            if(avatarConfig.loading){return}
            avatarConfig[part] = avatarConfig[part] + amount

            if (avatarConfig[part] > parts[part].length) {
                avatarConfig[part] = 0;
            }
            if (avatarConfig[part] < 0) {
                avatarConfig[part] = parts[part].length;
            }
            updateAvatar();
        }

        function updateAvatar() {
            avatarFinishedLoading(false)
            url = "https://adorable-avatars.broken.services/face/"
            url += parts.eyes[avatarConfig.eyes] + "/"
            url += parts.nose[avatarConfig.nose] + "/"
            url += parts.mouth[avatarConfig.mouth] + "/"
            url += avatarConfig.color
            $("#avatar img").prop('src', url)
            $("#url").val(url)
            $("#eyesLabel").text(parts.eyes[avatarConfig.eyes])
            $("#noseLabel").text(parts.nose[avatarConfig.nose])
            $("#mouthLabel").text(parts.mouth[avatarConfig.mouth])
        }

        $("#avatar img").on('load', () => {
            avatarFinishedLoading(true)
        })

        function avatarFinishedLoading(bool) {
            avatarConfig.loading = !bool
            console.log(bool)
            $(".control .btn").prop('disabled', bool ? '' : 'disabled')
        }


    </script>
</body>

</html>

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Adorable Avatar Configurator</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<style>
	#controls-left,
	#controls-right,
	#avatar {
	display: inline-block;
	float: left;
	}

	.control {
	display: block;
	margin: 20px;
	}

	.control:first-child {
	margin-top: 0px;
	}

	.control-label {
	margin-left: 20px;
	}

	#avatar img {
	width: 150px;
	height: 150px;
	}
	#mainCard{
	width:30rem;
	}
	#customizer{
	width:400px;
	margin:0 auto;
	}

	</style>
	</head>

	<body>
	<div class="container">
	<div class="card mt-4 text-center" id="mainCard">
	<div class="card-body">
	<h5 class="card-title">Adorable Avatar Generator</h5>
	<p class="card-text"></p>
	<div id="customizer" class="text-center">
	<div id="controls-left">
	<div class="control">
	<button type="button" class="btn btn-light" disabled onclick="prevEyes()"><</button>
	</div>
	<div class="control">
	<button type="button" class="btn btn-light" disabled onclick="prevNose()"><</button>
	</div>
	<div class="control">
	<button type="button" class="btn btn-light" disabled onclick="prevMouth()"><</button>
	</div>
	</div>
	<div id="avatar">
	<img src="">
	</div>
	<div id="controls-right">
	<div class="control">
	<button type="button" class="btn btn-light" disabled onclick="nextEyes()">></button>
	<code class="control-label" id="eyesLabel"></code>
	</div>
	<div class="control">
	<button type="button" class="btn btn-light" disabled onclick="nextNose()">></button>
	<code class="control-label" id="noseLabel"></code>
	</div>
	<div class="control">
	<button type="button" class="btn btn-light" disabled onclick="nextMouth()">></button>
	<code class="control-label" id="mouthLabel"></code>
	</div>
	</div>

	</div>
	<div>
	<div class="form-group">
	<input type="text" class="form-control" id="url">
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	<script>
	var parts = {
	eyes: ["eyes1", "eyes10", "eyes2", "eyes3", "eyes4", "eyes5", "eyes6", "eyes7", "eyes9"],
	nose: ["nose2", "nose3", "nose4", "nose5", "nose6", "nose7", "nose8", "nose9"],
	mouth: ["mouth1", "mouth10", "mouth11", "mouth3", "mouth5", "mouth6", "mouth7", "mouth9"]
	}

	var avatarConfig = {
	eyes: 0,
	nose: 0,
	mouth: 0,
	color: "8e8895",
	loading: true
	}

	var url = "https://adorable-avatars.broken.services/face/eyes1/nose2/mouth1/8e8895"
	updateAvatar();
	function nextEyes() {
	changePart("eyes", 1)
	}
	function prevEyes() {
	changePart("eyes", -1)
	}
	function nextNose() {
	changePart("nose", 1)
	}
	function prevNose() {
	changePart("nose", -1)
	}
	function nextMouth() {
	changePart("mouth", 1)
	}
	function prevMouth() {
	changePart("mouth", -1)
	}

	function changePart(part, amount) {
	if(avatarConfig.loading){return}
	avatarConfig[part] = avatarConfig[part] + amount

	if (avatarConfig[part] > parts[part].length) {
	avatarConfig[part] = 0;
	}
	if (avatarConfig[part] < 0) {
	avatarConfig[part] = parts[part].length;
	}
	updateAvatar();
	}

	function updateAvatar() {
	avatarFinishedLoading(false)
	url = "https://adorable-avatars.broken.services/face/"
	url += parts.eyes[avatarConfig.eyes] + "/"
	url += parts.nose[avatarConfig.nose] + "/"
	url += parts.mouth[avatarConfig.mouth] + "/"
	url += avatarConfig.color
	$("#avatar img").prop('src', url)
	$("#url").val(url)
	$("#eyesLabel").text(parts.eyes[avatarConfig.eyes])
	$("#noseLabel").text(parts.nose[avatarConfig.nose])
	$("#mouthLabel").text(parts.mouth[avatarConfig.mouth])
	}

	$("#avatar img").on('load', () => {
	avatarFinishedLoading(true)
	})

	function avatarFinishedLoading(bool) {
	avatarConfig.loading = !bool
	console.log(bool)
	$(".control .btn").prop('disabled', bool ? '' : 'disabled')
	}



	</script>
	</body>

	</html>