Let's grow a colorful greeting! Here's a simple page that changes its greeting color.

<!doctype html>
<html>
  <body>
    <h1 id="greeting">Hello, friend!</h1>
    <button onclick="changeColor()">Change color</button>
    <script>
      const colors = ["red", "blue", "green", "orange", "purple"];
      let i = 0;
      function changeColor() {
        i = (i + 1) % colors.length;
        document.getElementById("greeting").style.color = colors[i];
      }
    </script>
  </body>
</html>

What it does

• Shows a friendly greeting.
• Every time you click the button, the greeting changes color.
• It cycles through five cheerful colors.

I opened the full page in the artifact panel so you can try it!

Great idea! To change color faster, you can make the button change the color every time you click it, which it already does. If you want it to change on its own, you can add a small timer.

setInterval(changeColor, 1000);

This makes the greeting change color once every second. Try it and watch the colors dance!