Search code examples
javascripthtmlqr-code

QR Code generator only generate the QR code for the first input

I am new to stackoverflow and i wanted to create a QR code generator that translate the 2 inputs into a QR code, however the code only translate the first input into a QR code and does not include the information for the second input. I also try using querySelectorAll but it doesnt change anything I hope good sirs would be so kind to teach me where I'm wrong at.

here is the code for HTML

  <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>PracticeQRProgram</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>QR CODE GENERATOR</h1>
        </header>
          <div class="form">
              <input class="form" type="text" spellcheck="false" placeholder="Enter Full Name">
              <input class="form" type="text" spellcheck="false" placeholder="Enter ID no.">
            <button>Submit</button>
          </div>
          
        <div class="qr-code">
          <img src="" alt="qr-code">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

here is the code for javascript

var wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input");
generateBtn = wrapper.querySelector(".form button");
qrImg = wrapper.querySelector(".qr-code img");
let preValue;
generateBtn.addEventListener("click", () => {
    let qrValue = qrInput.value.trim();
    if(!qrValue || preValue === qrValue) return;
    preValue = qrValue;
    generateBtn.innerText = "Submitting...";
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        wrapper.classList.add("active");
        generateBtn.innerText = "QR Code";
    });
});
qrInput.addEventListener("keyup", () => {
    if(!qrInput.value.trim()) {
        wrapper.classList.remove("active");
        preValue = "";
    }
});

and here is for the style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  background-image: url("ICpEP.jpg");
  background-color: #cccccc;
  justify-content: center;
}
.wrapper{
  height: 650px;
  max-width: 410px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
  height: 650px;
}
header h1{
  font-size: 21px;
  font-weight: 500;
}
header p{
  margin-top: 5px;
  color: #575757;
  font-size: 16px;
}
.wrapper .form{
  margin: 20px 0 25px;
}
.form :where(input, button){
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
}
.form input{
  font-size: 18px;
  padding: 0 17px;
  border: 1px solid #999;
}
.form input :focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
  color: #999;
}
 .form button{
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  font-size: 17px;
  background: #3498DB;
}
.qr-code{
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  border: 1px solid #ccc;
}
.wrapper.active .qr-code{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
  width: 170px;
}
@media (max-width: 430px){
  .wrapper{
    height: 650px;
    padding: 16px 20px;
  }
  .wrapper.active{
    height: 650px;
  }
  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 52px;
  }
  .qr-code img{
    width: 160px;
  }

}

Solution

  • In this line:

    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;

    You are only sending the qrValue to the api. You will have to read and send both the id and name info to the api if you want both encoded.

    That being said I would adjust the code a bit to make it easier to reason about.

    Firstly I would add unique id's to each of the input elements eg:

    <input id="name-input" class="form" type="text" spellcheck="false" placeholder="Enter Full Name">
<input id="id-input" class="form" type="text" spellcheck="false" placeholder="Enter ID no.">

    Next I would select these elements directly using:

    var qrNameInput = document.getElementById("name-input");
var qrIdInput = document.getElementById("id-input");

    Then in your event listener I would read these values:

    var name = qrNameInput.value.trim();
var id = qrIdInput.value.trim();

    And finally send both of these information on to the api:

    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data="name:${name},id:${id}"`;