Limit Input Characters using HTML CSS & JavaScript

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Limit Input Characters</title>
  <link rel="stylesheet" href="style.css">
  
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css">
</head>
<body>
  
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.wrapper{
  background: #fff;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper form{
  height: 55px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
form i{
  position: absolute;
  width: 55px;
  text-align: center;
  font-size: 23px;
  color: #c4c4c4;
  pointer-events: none;
}
form input:valid ~ i{
  color: #58cff1;
}
form input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 50px 0 45px;
  font-size: 20px;
  caret-color: #58cff1;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.1s ease;
}
form input::selection{
  color: #fff;
  background: #58cff1;    
}
form input:focus,
form input:valid{
  border-color: #58cff1;
}
form input::placeholder{
  color: #c4c4c4;
}
form .counter{
  position: absolute;
  right: 3px;
  width: 55px;
  font-size: 20px;
  color: #c4c4c4;
  text-align: center;
  border-left: 1px solid #d8d8d8;
  pointer-events: none;
}
form input:valid ~ .counter{
  color: #58cff1;
  border-color: #58cff1;
}
  </style>
  <div class="wrapper">
    <form action="#">
      <input type="text" spellcheck="false" placeholder="username" maxlength="19" required>
      <i class="uis uis-at"></i>
      <span class="counter">19</span>
    </form>
  </div>
  <script>
    const input = document.querySelector("form input"),
    counter = document.querySelector("form .counter"),
    maxLength = input.getAttribute("maxlength");
    input.onkeyup = ()=>{
      counter.innerText = maxLength - input.value.length;
    }
  </script>
</body>
</html>

Kilivecode

Code Editor

Limit Input Characters using HTML CSS & JavaScript