<div class="container">
  <input type="text" placeholder="..." value="https://darija.dev"></input>
<div id="qrcode"></div>
</div>

.container{
  display:grid;
  grid-gap:2rem;
  justify-content:center;
  padding: 3rem;
}


input{
  width:100%;
  padding: 1rem;
  font-size:20px;
  font-weight:bold;
  border: 2px solid gray;
  outline: none;
}

#qrcode > *{
  width: 110%;
}

const qrcode = document.getElementById("qrcode");
const textInput = document.querySelector("input");

const qr = new QRCode(qrcode);
qr.makeCode(textInput.value.trim());

textInput.oninput = (e) => {
    qr.makeCode(e.target.value.trim());
};