Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Greeting based on time and day</title>
  <style>
    .morning {
      color: green;
    }
    .afternoon {
      color: blue;
    }
    .evening {
      color: red;
    }
  </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();
      var planetInfo = getPlanetInfo(day);

displayPlanet(planetInfo.imageSource, planetInfo.explanation);

var explanation = "Today is " + getDayOfWeek(day) + ", which is associated with the planet " + planetInfo.planet + ".";
      document.getElementById('planet').textContent = explanation;
    }

return planetMap.get(day) || { planet: 'Unknown', imageSource: '', explanation: 'The association with an unknown planet.' };
}
function displayPlanet(imageSource, planetExplanation) {
  document.getElementById('planetImage').src = imageSource;
  document.getElementById('planetImage').alt = "Planet Image";
  document.getElementById('planet').textContent = planetExplanation;
}

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