QR Code Generator | Create Your Free QR Codes scratch the usage of html and css ?

Qr-code-generator Code Download,qr code generator
Qr-code-generator Code Download

Hello Developer's  In this post, we will create a qr code generator from scratch the using of html, css, and javascript. so i will count on you've got fundamental expertise of html, css, and javascript, that is, you ought to understand the primary html tags and the way to link the css and javascript files to html files.

Using HTML to create qr Code generator from scratch let's write HTML Code use this method

HTML CODE HERE


<!DOCTYPE html>
<html lang="en" >
<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="main-qu">
  <div class="owner"><h1>Insidecode.org</h1></div>
  <div class="qr-code-generator">
<input type="text" class="qr-url" placeholder="URL or Text">
<input type="number" class="qr-size" value="128" min="20" max="500">
<button class="generate-qr-code">Generate</button>
</div>
</div>

<br>
<div id="qrcode"></div>


<!-- JavaScript -->
<script  src="./script.js"></script>

</body>
</html>

CSS CODE HERE




.main-qu{
    display: flex;
    flex-direction: column;
    margin-block: 5%;
    background-image: linear-gradient( 180deg,  rgba(155,254,23,1) 45.5%, rgba(36,243,8,1) 97.9% );
    padding: 30px;
    box-shadow: 2px 2px 10px 5px rgb(128, 124, 124);
    border: 1px solid rgb(162, 0, 255);
    border-radius: 10px 0 10px 0;
}

.main-qu .owner h1{
    display: flex;
    position: relative;
    text-align: center;
    flex-direction: column;
    margin: auto;
    padding-bottom: 10px;
    font-size: 18px;
    font-family: sans-serif;
}

.qr-code-generator {
width: 500px;
margin: 0 auto;
}

.qr-code-generator * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#qrcode {
width: 128px;
height: 128px;
margin: 0 auto;
text-align: center;
}

#qrcode a {
font-size: 0.8em;
}

.qr-url, .qr-size {
padding: 0.5em;
border: 1px solid rgb(24, 24, 24);
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.qr-url {
width: 79%;
}

.qr-size {
width: 20%;
}

.generate-qr-code {
display: block;
width: 100%;
margin: 10px 0 0;
padding: 0.25em;
font-size: 1.2em;
border: none;
cursor: pointer;
background-image: radial-gradient( circle 972.6px at 10% 20%,  rgba(243,0,75,1) 0%, rgba(255,93,75,1) 90% );
color: #fff;
}

JAVASCRIPT CODE HERE


$('.generate-qr-code').on('click', function(){

// Clear Previous QR Code
$('#qrcode').empty();

// Set Size to Match User Input
$('#qrcode').css({
'width' : $('.qr-size').val(),
'height' : $('.qr-size').val()
})

// Generate and Output QR Code
$('#qrcode').qrcode({width: $('.qr-size').val(),height: $('.qr-size').val(),text: $('.qr-url').val()});

});

Notes:
To get the password to download the code on Telegram join

JOIN OUR GROUP

BihariGraphic:
Join our Telegram Channel and Discussion Group to get Daily Update's and Idea's

Comments

Post a Comment

Popular posts from this blog

Download ATTACK MODE Shwetabh Gangwar Course For Free

Image
  By Shwetabh Gangwar https://app.gangstaphilosophy.com/services/attackmode/ notion links https://www.notion.so/NEW-ME-92606473115e4c2687a0f479117c7a73?pvs=4 https://www.notion.so/Script-When-you-mess-up-57c58e1532cc4397b2c7edc8d4a61024?pvs=4 https://www.notion.so/Today-b91bbdbc19784217b3868622aadc344a?pvs=4 https://www.notion.so/Problem-Solving-9f76d83307d9445795603126c51299cd?pvs=4 Download Course
Read more

What is SEO | Learn about SEO (Search Engine Optimization 2023

Image
SEO, or search engine optimization, is the practice of optimizing a website so that it appears higher in search engine results pages (SERPs) for relevant queries. This can lead to increased visibility, traffic, and ultimately, revenue for businesses. One important aspect of SEO is using the right tools to help identify and fix issues with a website's structure, content, and technical setup. In this article, we will explore a comprehensive list of PHP script tools for SEO that covers a wide range of functionalities from analyzing on-page SEO to technical site audits. A) Ahrefs PHP API Ahrefs is a popular SEO tool that provides data on backlinks, keywords, and competitor analysis. The Ahrefs PHP API can be used to automate many of the processes involved in SEO, including tracking backlinks and keyword rankings. B) BotMan BotMan is a PHP framework that allows developers to build chatbots for various messaging platforms. Chatbots can be used to automate SEO tasks like lead generation, ...
Read more

What is Valentine's Day? | Why Valentine's day we are celebrating

Image
Valentine's Day is an annual holiday celebrated on February 14th, a day dedicated to expressing love, affection and appreciation. The origins of the holiday date back to the 3rd century and are rooted in the story of Saint Valentine, a Catholic priest who lived in Rome. Saint Valentine was known for his kind acts and is said to have performed secret marriages for Christian couples who were forbidden to marry due to Roman Emperor Claudius II's ban on marriage. This was done as he believed single men made better soldiers than those with wives and families. It is said that Saint Valentine was arrested and sentenced to death for his defiance of the emperor's orders. Legend has it that he fell in love with the jailer's daughter and before his execution, he wrote her a letter signed "from your Valentine". This is how the tradition of sending love letters and cards began. In the High Middle Ages, the tradition of courtly love flourished, and this was the time when th...
Read more