Join Our Telegram Channel Contact Us Join Now!
Ad

Generate Link


QR Code Generator using HTML, CSS and js

QR Code Generator using HTML, CSS and js

QR Code Generator using HTML, CSS and js

QR Code Generator using HTML, CSS and js

 

# To create a QR Code Generator using HTML, CSS and js Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a QR Code Generator using HTML, CSS and js Select Menu and apply a tilt effect to it. Here's an example:


1. First, create a container element in HTML for theinput QR Code Generator:


<div class="qrcode-fram">
    <p>QRCode Generator</p>
    <div class="qrcodeimg-frem">
        <div class="qrcode-img">
            <div id="qrcode"></div>
        </div>
    </div>
    <h2>Enter The Text</h2>
    <div class="input-text">
        <input type="text" name="qrcode" id="text" value="Subscribe Now">
    </div>
</div>

            

2. Next, add some Link to create a input QR Code Generator


<script src="./qrcode.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

            

3. Next, add some CSS to create a input QR Code Generator and position the container in the center:

                
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans%3A300%2C400%2C500%2C600%2C700&subset=latin%2Clatin-ext");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: "Josefin Sans", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}
.qrcode-fram{
    width: 25rem;
    height: 32rem;
    border-radius: 23px;
    background: #eee;
    box-shadow: 0px 0px 20px #0000002e;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.qrcode-fram p{
    position: absolute;
    top: 37px;
    font-size: larger;
    font-weight: 600;
    letter-spacing: 2px;
    color: #000000bd;
    text-shadow: 14px 5px 10px #00000029;
}
.qrcode-fram .qrcodeimg-frem{
    position: absolute;
    top: 5.4rem;
    width: 17rem;
    height: 17rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #ff003b, #a851fe);
    border-radius: 9px;
    box-shadow: 5px 7px 20px #de4ea38c;
}
.qrcode-fram .qrcodeimg-frem .qrcode-img{
    width: 16rem;
    height: 16rem;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    padding: 12px;
}
.qrcode-fram .qrcodeimg-frem .qrcode-img img{
    width: 100%;
    height: 100%;
}
.qrcode-fram h2{
    position: absolute;
    bottom: 5.4rem;
    color: #1c1c1c;
    text-shadow: 14px 5px 10px #00000052;
}
.qrcode-fram .input-text{
    position: absolute;
    bottom: 2.3rem;
    width: 20.4rem;
    height: 2.3rem;
    background: linear-gradient(45deg, #ff003b, #a851fe);
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 7px 20px #de4ea38c;
}
.qrcode-fram .input-text input{
    width: 20rem;
    height: 1.9rem;
    border-radius: 9px;
    border: none;
    outline: none;
    background: white;
    padding-left: 12px;
    font-size: larger;
    color: #1c1c1c;
}
            

4. Use JavaScript to create a input QR Code Generator element inside the container:

                
var elem = document.getElementById("qrcode");
var qrcode = new QRCode(elem, {
    width: 250,
    height: 250
});

function makeCode() {
    var elText = document.getElementById("text");
    qrcode.makeCode(elText.value);
}
makeCode();

document.getElementById("text").onkeyup = function (e) {
    makeCode();
} 
            

#input QR Code Generator in HTML and CSS For Full Code 👇

 

 

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create input QR Code Generator html css |input QR Code Generator in css` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.

Rate this article

Loading...

Post a Comment


Continue


© code web 4u. All rights reserved.

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.