kkgthb/yesno_live.html

## yesno_live.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Enjoy your API</title>
        <script>
            const api_base_yesno = `https://yesno.wtf/api`
        </script>
        <script>
            // Helper:  returns first element selected - $('input[name="food"]') // Credit: https://twitter.com/wesbos/status/608341616173182977
            const $ = document.querySelector.bind(document);
            // Helper:  return array of selected elements - $$('img.dog') // Credit: https://twitter.com/wesbos/status/608341616173182977
            const $$ = document.querySelectorAll.bind(document);
        </script>
        <script>
            const updateImageUrl = async (force_value) => {
                const response   = await fetch(`${api_base_yesno}?force=${force_value}`, {method: 'GET'});
                const json       = await response.json();
                $('img#the_image').src = json.image;
            }
            //updateImageUrl();
        </script>
        <script>
            if (document.readyState === "complete") {
                // Document already fully loaded
                ready();
            } else {
                // Add event listener for DOMContentLoaded (fires when document is fully loaded)
                document.addEventListener("DOMContentLoaded", ready);
            }

            function ready() {
                updateImageUrl($$('input:checked[name="forced_answer"]').value);
                $$('input[name="forced_answer"]')
                    .forEach(
                        opt => {
                            opt.addEventListener(
                                'click', function handleClick(event) {
                                    updateImageUrl(opt.value);
                                }
                            );
                        }
                    );
                // Handler here
            }
        </script>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>

        <h1 class="mx-auto my-4 max-w-7xl sm:my-8 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">Enjoy your API</h1>

        <fieldset class="mx-auto max-w-7xl text-2xl">
            <legend>Click a radio button and wait a second for the image below to update:</legend>
            <input type="radio" id="answer_yes" name="forced_answer" value="yes" class="h-6 w-6">
            <label for="answer_yes">Yes</label><br>
            <input type="radio" id="answer_no" name="forced_answer" value="no" checked class="h-6 w-6">
            <label for="answer_no">No</label><br>
            <input type="radio" id="answer_maybe" name="forced_answer" value="maybe" class="h-6 w-6">
            <label for="answer_maybe">Maybe</label>
        </fieldset>

        <div class="mx-auto max-w-7xl">
            <img id="the_image" src="#" alt="An image from YesNo.wtf (sorry, they don't provide captions in their API)">
        </div>

    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Enjoy your API</title>
	<script>
	const api_base_yesno = `https://yesno.wtf/api`
	</script>
	<script>
	// Helper: returns first element selected - $('input[name="food"]') // Credit: https://twitter.com/wesbos/status/608341616173182977
	const $ = document.querySelector.bind(document);
	// Helper: return array of selected elements - $$('img.dog') // Credit: https://twitter.com/wesbos/status/608341616173182977
	const $$ = document.querySelectorAll.bind(document);
	</script>
	<script>
	const updateImageUrl = async (force_value) => {
	const response = await fetch(`${api_base_yesno}?force=${force_value}`, {method: 'GET'});
	const json = await response.json();
	$('img#the_image').src = json.image;
	}
	//updateImageUrl();
	</script>
	<script>
	if (document.readyState === "complete") {
	// Document already fully loaded
	ready();
	} else {
	// Add event listener for DOMContentLoaded (fires when document is fully loaded)
	document.addEventListener("DOMContentLoaded", ready);
	}

	function ready() {
	updateImageUrl($$('input:checked[name="forced_answer"]').value);
	$$('input[name="forced_answer"]')
	.forEach(
	opt => {
	opt.addEventListener(
	'click', function handleClick(event) {
	updateImageUrl(opt.value);
	}
	);
	}
	);
	// Handler here
	}
	</script>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>

	<body>

	<h1 class="mx-auto my-4 max-w-7xl sm:my-8 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">Enjoy your API</h1>

	<fieldset class="mx-auto max-w-7xl text-2xl">
	<legend>Click a radio button and wait a second for the image below to update:</legend>
	<input type="radio" id="answer_yes" name="forced_answer" value="yes" class="h-6 w-6">
	<label for="answer_yes">Yes</label><br>
	<input type="radio" id="answer_no" name="forced_answer" value="no" checked class="h-6 w-6">
	<label for="answer_no">No</label><br>
	<input type="radio" id="answer_maybe" name="forced_answer" value="maybe" class="h-6 w-6">
	<label for="answer_maybe">Maybe</label>
	</fieldset>

	<div class="mx-auto max-w-7xl">
	<img id="the_image" src="#" alt="An image from YesNo.wtf (sorry, they don't provide captions in their API)">
	</div>

	</body>
	</html>