Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Lua Test</title>
  <style>
    .create-user-button {
      background-color: #C9E947;
      border-color: red;
      color: green;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <input id="username-input" type="text" onkeypress="myFunction()" placaholder="login"/>

  <button class="create-user-button" onclick="createUser()">Create User</button>

  <ul id="list">

  </ul>

  <script>
    function myFunction(evt) {
      // console.log(document.getElementById('username-input').value)
    }

    function createUser() {

      var username = document.getElementById('username-input').value

      var listElement = document.getElementById('list')

      var li = document.createElement("li");

      li.appendChild(document.createTextNode(username));

      listElement.appendChild(li);

      localStorage.setItem("username", username);

      console.log('test: ', localStorage.getItem("username"));

    }
  </script>


</body>
</html>