Hello people, I woke up great. And among so many things I am working on, I just feel like creating a simple javascript app. Then QR code generator pinged my mind, and I decided to create one with Html, CSS and Javascript using the qrcode cdn.
Without further ado, let's play.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>QR code Generator</title>
</head>
<body>
<div class="body_wrapper">
<input type="text" name="" id="inputData" placeholder="Enter a Link or text">
<div class="options">
<select class="selOption">
<option value="100" selected>100 x 100</option>
<option value="200">200 x 200</option>
<option value="300">300 x 300</option>
</select>
<input type="color" class="sel_color" name="" id="Bgcolor">
<input type="color" class="sel_color" name="" id="Qcolor">
</div>
<div class="boxx">
<button id="submit" disabled>Generate</button>
</div>
<div class="container"> </div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "poppins";
}
body {
height: 100vh;
background: linear-gradient(#f3f3fb 50%, #2ba387 50%);
}
.body_wrapper {
background-color: #f3f3fb;
padding: 5em 4em;
position: absolute;
width: 31.25em;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
box-shadow: 0 1.5em 3em rgba(3, 21, 55, 0.3);
}
#inputData {
width: 100%;
border: none;
border-bottom: 2px solid #000;
padding: 0.5em 1em;
font-size: 1em;
outline: none;
}
.options {
display: flex;
margin-top: 1em;
align-items: center;
justify-content: space-around;
}
select {
appearance: none;
width: 8em;
padding: 0.45em 0.9em;
font-size: 1.25em;
letter-spacing: 0.2em;
cursor: pointer;
background-color: #2ba387;
border: none;
color: #000;
background-image: url();
background-repeat: no-repeat;
background-size: 1.1em;
background-position: 6em;
outline: none;
}
select::-ms-expand {
display: none;
}
select option {
background-color: #f3f3fb;
color: #2ba387;
letter-spacing: 0.01em;
font-weight: 300;
font-size: 1.0em;
}
.selected {
display: none;
}
.sel_color {
background-color: transparent;
width: 3.1em;
height: 3.4em;
outline: none;
border: none;
}
.sel_color::-webkit-color-swatch {
border-radius: 0.3em;
border: 0.18em solid #191f3f;
}
.sel_color::-moz-color-swatch {
border-radius: 0.3em;
border: 0.18em solid #191f3f;
}
.boxx {
display: flex;
align-items: center;
justify-content: space-around;
}
.boxx button {
font-size: 1em;
padding: 0.8em 2em;
border-radius: 0.5em;
margin-top: 2em;
background-color: transparent;
color: #2ba387;
border: 0.18em solid #2ba387;
}
.boxx button:disabled {
background-color: transparent;
color: #f3f3fb;
border: 0.18em solid #c6c0c0;
}
.container {
display: flex;
justify-content: center;
margin-top: 0.18em;
}
.keep {
display: none;
}
JAVASCRIPT
let container = document.querySelector(".container");
const inputData = document.querySelector("#inputData");
const submitButton = document.querySelector("#submit");
const selectOpt = document.querySelector(".selOption");
const bgColor = document.querySelector("#Bgcolor");
const qColor = document.querySelector("#Qcolor");
let QR_Code;
let qrSize, bgColorChoice, qColorChoice;
// Set size
selectOpt.addEventListener("change", () => {
qrSize = selectOpt.value;
});
// Set BG color
bgColor.addEventListener("input", () =>{
bgColorChoice = bgColor.value;
});
//Set QR color
qColor.addEventListener("input", () =>{
qColorChoice = qColor.value;
});
// Format input
const inputFormat = (value)=> {
value = value.replace(/[^a-z0-9A-Z]+/g,"");
return value;
};
submitButton.addEventListener("click", async () => {
container.innerHTML = " ";
//QR Generator
QR_Code = await new QRCode(container, {
text: inputData.value,
width: qrSize,
height: qrSize,
colorDark: qColorChoice,
colorLight: bgColorChoice,
});
});
inputData.addEventListener("input", () => {
if (inputData.value.trim().length < 1) {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
});
window.onload = () => {
container.innerHTML = " ";
qrSize = 100;
selectOpt.value = 100;
inputData.value = " ";
bgColor.value = bgColorChoice = "#ffffff";
qColor.value = qColorChoice = "#377dff";
submitButton.disabled = true;
}
You can copy, play with the code and test on your device.
THE RESULT
I am @tykee, I do dev things and write
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.