UI as Tree Example Plain JS

see https://react.dev/learn/understanding-your-ui-as-a-tree

by phollome

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Get inspired - Plain JS</title>
  </head>

  <body>
    <h1 class='fancy title'>Get inspired - Plain JS</h1>
    <p>Your inspirational quote is:</p>
    <h3 id="quote" class="fancy cursive"></h3>
    <button id="next-button">
      Inspire me again
    </button>
    <p id="copyright" class="small"></p>
    <script>
      const quotes = [
        "Don’t let yesterday take up too much of today.” — Will Rogers",
        "Ambition is putting a ladder against the sky.",
        "A joy that's shared is a joy made double.",
      ];

      const year = 2004;
      document.getElementById("copyright").innerHTML = `©️ ${year}`;

      let index = 0;
      document.getElementById("quote").innerHTML = quotes[index];

      const button = document.getElementById("next-button");
      button.onclick = function() {
        if (index >= quotes.length - 1) {
          index = 0;
        }

        index = index + 1;

        document.getElementById("quote").innerHTML = quotes[index];
      }

    </script>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 20px;
  padding: 0;
}

h1 {
  margin-top: 0;
  font-size: 22px;
}

h2 {
  margin-top: 0;
  font-size: 20px;
}

h3 {
  margin-top: 0;
  font-size: 18px;
}

h4 {
  margin-top: 0;
  font-size: 16px;
}

h5 {
  margin-top: 0;
  font-size: 14px;
}

h6 {
  margin-top: 0;
  font-size: 12px;
}

code {
  font-size: 1.2em;
}

ul {
  padding-inline-start: 20px;
}

.fancy {
  font-family: 'Georgia';
}
.title {
  color: #007AA3;
  text-decoration: underline;
}
.cursive {
  font-style: italic;
}
.small {
  font-size: 10px;
}