babel.html

<!DOCTYPE html>
<html>
    <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 messageArea = document.getElementById('error');

        button.addEventListener('click', (evt) => {
            let name = document.getElementById('name').value;
            messageArea.className = "errorBox--hidden";

            if (name.length < 2) {
                messageArea.textContent = 'You need to enter a name!';
                messageArea.className = 'errorBox';
                document.getElementById('content').textContent = null;
            }
            else {
                document.getElementById('content').textContent = getMessage(name);
            }
        });
        
        </script>
    </body>
</html>