Générateur de QRCode

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 September 2024

Interface utilisateur de l'éditeur de photos

HTML

<!DOCTYPE html>
<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="stylesheet" href="style.css">
    <title>QR Code Generator | Code Traversal</title>
</head>
<body>
    <div class="box">
        <div class="qr-header">
            <h1>Generate QR Code</h1>
            <input type="text" placeholder="Type your text or URL" id="qr-text">
            <div>
            <label for="sizes">Select Size:</label>
            <select id="sizes">
                <option value="100">100x100</option>
                <option value="200">200x200</option>
                <option value="300">300x300</option>
                <option value="400">400x400</option>
                <option value="500">500x500</option>
                <option value="600">600x600</option>
                <option value="700">700x700</option>
                <option value="800">800x800</option>
                <option value="900">900x900</option>
                <option value="1000">1000x1000</option>
            </select>
        </div>
        </div>
        <div class="qr-body"></div>
        <div class="qr-footer">
            <a href="" id="generateBtn">Generate</a>
            <a href="" id="downloadBtn" download="QR_Code.png">Download</a>
        </div>
    </div>

CSS

:root{
    --bcg-color: #1a1a1a;
    --primary-color: #00b894;
    --border-radius: 12px;
    --secondary-color: #ffffff;
    --border-color: #2ecc71;
    --animation-duration: 0.5s;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bcg-color);
}

.box{
    background-color: var(--primary-color);
    padding: 30px;
    width: 400px;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qr-header h1{
    font-size: 26px;
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.qr-header input, select{
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
    font-size: 18px;
    outline: none;
    border: 2px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.qr-header input:focus, select:focus{
    border-color: var(--primary-color);
}

.qr-header label{
    color: var(--secondary-color);
    font-size: 20px;
}

.qr-header div{
    display: flex;
    justify-content: space-between;
}

.qr-footer{
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.qr-footer a{
    background-color: var(--secondary-color);
    text-decoration: none;
    font-size: 20px;
    padding: 14px 36px;
    margin-inline: 2px;
    color: var(--primary-color);
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.qr-footer a:hover{
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.qr-body{
    display: grid;
    place-items: center;
    padding:20px;
}

.qr-body img{
    max-width: 100%;
    max-height: 100%;
    margin-block: 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color 0.3s ease;
}

.qr-body img:hover{
    border-color: var(--primary-color);
}

@media screen and (max-width:520px){
    .box{
        width: 80%;
    }
    .qr-footer a{
        padding: 12px;
        font-size: 16px;
    }
}

JS

const qrText = document.getElementById('qr-text');
const sizes = document.getElementById('sizes');
const generateBtn = document.getElementById('generateBtn');
const downloadBtn = document.getElementById('downloadBtn');
const qrContainer = document.querySelector('.qr-body');

let size = sizes.value;
generateBtn.addEventListener('click',(e)=>{
    e.preventDefault();
    isEmptyInput();
});

sizes.addEventListener('change',(e)=>{
    size = e.target.value;
    isEmptyInput();
});

downloadBtn.addEventListener('click', ()=>{
    let img = document.querySelector('.qr-body img');

if(img !== null){
        let imgAtrr = img.getAttribute('src');
        downloadBtn.setAttribute("href", imgAtrr);
    }
    else{
        downloadBtn.setAttribute("href", `${document.querySelector('canvas').toDataURL()}`);
    }
});

Générateur de QRCode

Recommandé

Générateur de mot de passe

Un code par lebdev

Interface utilisateur de l'éditeur de photos

HTML

CSS

JS

Recommandé

Générateur de mot de passe

Un code par lebdev

Interface utilisateur de l'éditeur de photos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS