<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The MOON</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center;">
<select id="qualityselector" name="quality" style="width:60%;">
<option value="144">144p</option>
<option value="240">240p</option>
<option value="360">260p</option>
<option value="480">480p</option>
<option value="720">720p</option>
<option value="1080">1080p</option>
</select>
<br>
<img id="moon-image" src="144p.png" alt="Moon"/>
<script>
function handlechange(){
let image = document.getElementById("moon-image");
let quality = document.getElementById("qualityselector").value;
if (quality == "144")
image.src = "144p.png";
if (quality == "240")
image.src = "240p.png";
if (quality == "360")
image.src = "360p.png";
if (quality == "480")
image.src = "480p.png";
if (quality == "720")
image.src = "720p.png";
if (quality == "1080"){
image.src = "1080p.png";
let newoption = document.createElement("option");
newoption.text = "Realastic";
newoption.value = "realastic";
document.getElementById("qualityselector").add(newoption);
}
if (quality == "realastic"){
setTimeout(function(){
image.src= "you3.png";
}, 1000);
setTimeout(function(){
image.src= "you2.png";
}, 2000);
setTimeout(function(){
image.src= "you1.png";
}, 3000);
setTimeout(function(){
image.src= "you.png";
}, 4000);
}
}
document.getElementById("qualityselector").onchange = handlechange;
</script>
</body>
</html>