<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div id="song"></div> <div id="inputControls" style="visibility:hidden;"><input id="toastInput"> <input type="submit" value="Submit" onClick="checkInput()"></div> <script type="text/javascript"> var lyrics = []; lyrics = getSong(); var timer = setInterval(function () {singLyric()}, 1000); function getSong(){ return ['Eggs, bacon and toast!<br\>', 'Eggs, bacon and toast!<br\>', 'Why don\'t you start your day<br\>', 'the Gergich way...<br\>', 'with eggs, bacon, and...<br\><br\>']; } function singLyric() { if(lyrics.length > 0){ appendLine(lyrics.splice(0,1)); }else{ var inputControls = document.querySelector("#inputControls"); inputControls.style.visibility = "visible"; } } function appendLine(line){ var div = document.getElementById('song'); div.innerHTML = div.innerHTML + line; } function checkInput(){ var inputField = document.getElementById("toastInput") var input = inputField.value; if(input.toUpperCase() == "TOAST"){ lyrics = getSong(); inputControls.style.visibility = "hidden"; } inputField.value = ""; } </script></body> </html>

You may have to be a Parks and Recreation fan to appreciate this one. Eggs, bacon, and toast uses basic HTML, CSS, and JavaScript to sing the Gergich family's special breakfast song, with a little help from the user.