QR Code Generator with HTML, CSS, and JavaScript

Rayen

Welcome to the world of web development magic! Today, we'll dive into the creation of a QR code generator using the dynamic trio: HTML, CSS, and JavaScript. QR codes have become an integral part of our digital interaction, and now, you can create your own QR codes with just a few lines of code. Let's break down this enchanting QR code generator step by step.




HTML Markup:

In the HTML structure, we set up the basic framework of our QR code generator. The  <head> section includes meta tags for character set and viewport settings, along with the title of the webpage. The <body> section contains a <div> with a class of "container" that wraps the entire QR generator. Within this container, we have sections for the heading, QR code display area, error message area, and the input area. 
Copy<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>QR Code Generator</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">

        <h1>Generate QR</h1>

        <div class="qr-area">
            <img src="" class="qr-img">
        </div>

        <div class="error">
            You must type somthing...
        </div>

        <div class="input-area">
            <input type="text" class="input-text" placeholder="Type Somthing...">
            <button class="generate-qr">Generate QR</button>
        </div>

    </div>
    
    <script src="main.js"></script>
</body>
</html>

Styling with CSS:

The embedded CSS handles the styling of various elements in our QR generator. We reset styles for all elements using the * selector. The body is styled to center its content and set a background color. The container has a flex layout, rounded corners, and a white background. The error message has animation, and the input area is centered. Styles for the input field, generate button, QR code area, and image are left for you to customize. 
Copy/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #456;
}
.container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-direction: column;

    background: white;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

h1 {
    text-align: center;
    font-size: 2.5rem;
}

.input-area {
    display: flex;
    justify-content: center;
}

.input-text {
    width: 300px;
    padding: 15px 20px;
    border-radius: 15px 0 0 15px;
    outline: none;
    border: 2px solid #d2481e;

    caret-color: #d2481e;
}
.input-text::placeholder {
    color: #d2481e88;
}
.generate-qr {
    width: 150px;
    padding: 15px 20px ;
    border-radius: 0 15px 15px 0;
    outline: none;
    border: 0;
    background: #d2481e;
    color: white;
    font-weight: bold;
    cursor: pointer;
    text-transform: capitalize;
}

.qr-area {
    width: 500px;
    height: 0;
    display: flex;
    justify-content: center;
    transition: height 0.5s;
}
.qr-area img {
    height: 100%;
}



.error {
    color: red;
    width: 100%;
    text-align: center;
    position: absolute;
    animation: anime 0.05s linear 10;

    display: none;
}

@keyframes anime {
    0%{transform: translateX(0px);}
   25%{transform: translateX(-2px);}
    50%{transform: translateX(0px);}
    75%{transform: translateX(2px);}
    100%{transform: translateX(0px);}
}

Adding JavaScript Interaction:

The JavaScript logic handles the QR code generation. We grab various elements by their IDs and set up an event listener for the button click. If the input is empty, an error message is displayed and the QR code area collapses. Otherwise, a QR code is generated using the input text, displayed, and the error message is hidden. 
Copy//-------------------- Java Script --------------------//
let input = document.querySelector(".input-text");
let buttonQR = document.querySelector(".generate-qr");
let areaQR = document.querySelector(".qr-area");
let imgQR = document.querySelector(".qr-img");
let errorText = document.querySelector(".error");

buttonQR.addEventListener("click", ()=>{
    if (input.value === "") {
        errorText.style.display = "block";
        areaQR.style.height = "0";
    }else {
        imgQR.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${input.value}`
        areaQR.style.height = "120px";
        errorText.style.display = "none";

        input.value = "";
    }
})

0 Comments