Code Editor

<html>
<head>
  <title>Greeting based on time</title>
  <style>
    .morning {
      color: green;
    }
    .afternoon {
      color: blue;
    }
    .evening {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Greeting based on time</h1>
  <button onclick="showGreeting()">Click me</button>
  <p id="greeting"></p>

if (hour >= 0  && hour < 12) {
        greeting = 'Good morning!';
        document.getElementById('greeting').className = 'morning';
      } else if (hour >= 12 && hour < 18) {
        greeting = 'Good afternoon!';
        document.getElementById('greeting').className = 'afternoon';
      } else {
        greeting = 'Good evening!';
        document.getElementById('greeting').className = 'evening';
      }

document.getElementById('greeting').textContent = greeting;
    }
    
  </script>
</body>
</html>

Output

Console