Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Greeting based on time and day</title>
  <style>
    .morning {
      color: green;
    }
    .afternoon {
      color: blue;
    }
    .evening {
      color: red;
    }
    #planetImage {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Greeting based on time and day</h1>
  <button onclick="showGreeting()">Click me</button>
  <p id="greeting"></p>
  <p id="planet"></p>
  <img id="planetImage" src="" alt="Planet Image">

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;

var day = now.getDay();
      fetchPlanetData(day)
        .then(function(planetInfo) {
          document.getElementById('planet').textContent = "Today is " + getDayOfWeek(day) + ", which is associated with the planet " + planetInfo.planet + ".";
          document.getElementById('planetImage').src = planetInfo.imageSource;
          document.getElementById('planetImage').style.display = 'inline'; // Show the image
        })
        .catch(function(error) {
          console.log('Error:', error);
        });
    }

function getDayOfWeek(day) {
      var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      return daysOfWeek[day];
    }
  </script>
</body>
</html>

</script>
</body>
</html>