Edit in JSFiddle

<!DOCTYPE html>
<html>

  <head>
    <title>Before State Management</title>
  </head>

  <body>
    <div id="root"></div>
    <script>
      class App {
        constructor() {
          this.render();
          // we use '$' to indicate that 'this.$userMessage' references an HTML element, not a normal JS value
          this.$userMessage = document.getElementById("user-message");
          this.$authStatus = document.getElementById('auth-status');
          this.$authStatus.addEventListener('change', event => {
            this.checkAuth(event.target.value);
          });
        }
        
        checkAuth(status) {
          if (status === 'auth') {
            this.$userMessage.textContent = "Welcome back!";
          } else if (status === "unauth") {
            this.$userMessage.textContent = "You must sign in!";
            this.$userMessage.style.color = "red";
          }
        }
        
        render() {
          document.getElementById("root").innerHTML = `
                        <select id="auth-status">
             <option value="" selected>Choose your status</option>
                <option value="auth">Signed In!</option>
                  <option value="unauth">Guest</option>
              </select>
              
                    <div>
                     <span id="user-message"></span>
                   </div>
                `;
        }
      }
      new App();
    </script>
  </body>

</html>