timedesc.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>Time description</title>
</head>
<body>
    <select form="emote" id="emote-form">
        <option value="Good">:)</option>
        <option value="Mild">:/</option>
        <option value="Sad">:(</option>
        <option value="Funky">B)</option>
    </select>
    <button onclick="timeGreet()">Press me</button>

    <p id="emote"></p>
    <p id="demo"></p>

    <script>

    function timeGreet() {

        const emot = document.getElementById("emote-form").value;
        document.getElementById("emote").innerHTML = emot;

        var set = new Date()
        var time = set.getHours();
        if (time < 24) {   document.getElementById("demo").innerHTML = "Approching midnight"; }
        if (time < 23) {   document.getElementById("demo").innerHTML = "Late evening"; }
        if (time < 21) {   document.getElementById("demo").innerHTML = "Evening"; }
        if (time < 17) {   document.getElementById("demo").innerHTML = "Late afternoon"; }
        if (time < 15) {   document.getElementById("demo").innerHTML = "Afternoon"; }
        if (time < 13) {   document.getElementById("demo").innerHTML = "Midday"; }
        if (time < 12) {   document.getElementById("demo").innerHTML = "Approching midday"; }
        if (time < 11) {   document.getElementById("demo").innerHTML = "Morning"; }
        if (time < 7) {   document.getElementById("demo").innerHTML = "Early morning"; }
        if (time < 5) {   document.getElementById("demo").innerHTML = "Late night"; }
        if (time < 2) {   document.getElementById("demo").innerHTML = "Night time"; }


    }

    </script>


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