Resize Input for Paralot login -protoype

by Julien Etienne

HTML

<input type="text" id="name" placeholder="Name" /> <input placeholder="Private Username" type="password" size="12"><button value="">>></button>

<span id="name-mirror"></span>

CSS

input, button, #name-mirror {
  font-size: 2rem;
}

  #resizableInput {
    width: auto;
    min-width: 6rem;
    padding: 0.4rem;
    font-size: 2rem;
  }

  #mirror {
    visibility: hidden;
    white-space: pre;
    position: absolute;
    top: -9999px;
    font: inherit;
  }
  
  #name-mirror,
  input {
    border: 0;
    background: lightgray;
    padding: 0.5rem;
    outline: 0;
    font-family: sans-serif;
    min-width: 6rem;
    margin: 0;
  }
  
  
  #name-mirror {
    visibility: hidden;
  }
  
  button {
    padding: 0.5rem;
    border: 0;
  }

JavaScript

const name = document.querySelector("#name")
const nameMirror = document.querySelector("#name-mirror")
nameMirror.style.width = name.getBoundingClientRect().width + "px"


const resizeInput = ({ target }) => {
  switch (target.id) {
    case "name":
      nameMirror.textContent = target.value
      name.style.width = nameMirror.getBoundingClientRect().width + "px"
      break
  }
}
document.addEventListener("input", resizeInput)


resizeInput({target: name})
// resize observer is better
window.addEventListener("resize", ({ e }) => {
  nameMirror.width = name.getBoundingClientRect().width + "px"
})