babel.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Babel Demo</title>
    <style media="screen">
        .errorBox {
          border: 1px solid red;
          background-color: #eebbbb;
          margin: 1em;
          padding: 2em;
        }
        .errorBox--hidden {
          display:  none;
        }
    </style>
  </head>
  <body>
    <main>
      <label> Name: <input id="name" type="text" /></label>
      <button id="submit_info">Click me!</button>
      <div id="content"></div>
      <div id="error" class="errorBox--hidden">
        Error message goes here.
      </div>
    </main>
    <script src="https://unpkg.com/babel-standalone">
    </script>
    <script type="text/babel" data-presets="latest">
      const getMessage = (name) => `Welcome to Javascript, ${name}`;
      const button = document.getElementById('submit_info');

      const contentArea = document.getElementById('content');
      const messageArea = document.getElementById('error');


      button.addEventListener('click', (evt) => {
        messageArea.className = "errorBox--hidden";
        contentArea.textContent = "";

        let name = document.getElementById("name").value;
        if (name.length < 2){
          messageArea.testContent= "You need to enter a name !";
          messageArea.className = "errorBox";
        }
        else{
          contentArea.textContent = getMessage(name);
        }

      });

    </script>

  </body>
</html>