public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1>Welcome.</h1>
        <div id="nameInput" class="input-group-lg center-block helloInput">
            <p class="lead">What is your name?</p>
            <input id="user_name" type="text" class="form-control" placeholder="name" aria-describedby="sizing-addon1" value="" />
        </div>
        <p id="response" class="lead text-center"></p>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        $('#user_name').keydown(function(e) {
            if (e.which == 13) { //catch Enter key
                $.get("/sayHello?user_name=" + $('#user_name').val())
                    .done(function(data) {
                        $('#response').html(data);
                        $('#nameInput').hide();
                    });
            }
        });
    </script>
</body>

</html>