Code an app that could create custom QR Codes for free - My Christmas Hackathon Project

Featured on Hashnode

Hello there šŸ‘‹, I'm Divya Xavier, a passionate frontend web developer who loves to share his tech ideas, knowledge and expertise with the community.

I was looking for a revolutionary idea to build up and the resources that I used. Finally, I created my project for #christmashackathon Hashnode and I would love to share it with you guys.

The Idea

Today, I'm here with a revolutionary project that is an App that could create custom QR codes for free in seconds . This project has a good future because companies are charging a lot of money from the user to create his QR code and takes a lot of time with a great mess. So, I find the solution to solve this matter. Here is the working demo of what we are going to build šŸ‘‡

qrcode.gif

For whom

  1. The people who can't afford to pay money to create a QR Code
  2. People who need AD-Free sources
  3. People who need very fast
  4. People who care about UI and UX

Tech Stack

  1. HTML
  2. CSS
  3. Javascript
  4. Jquery

Isn't it cool? Let's jump on to the coding right now.

Coding

First of all, let's have a look at the file tree šŸ‘‡ It consists of common Frontend components like index.html, style.css and index.js

root/
ā”œā”€ā”€ index.html
ā”œā”€ā”€ style.css
ā””ā”€ā”€ index.js

For this project, we are gonna use a very nice, powerful, easy to use Javascript library called qrcode.js built by @davidshimjs

scrnli_29_12_2020_16-10-17.png

Click here to view the documentation šŸ‘ˆ

By using this Cloudflare CDN, we could easily add the javascript library to our project šŸ‘‡

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

We also need jquery to make this library work, So another <script> is for jquery. Let's add jquery by using the Cloudflare CDN šŸ‘‡

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

At the very bottom, we have added the script for the index.js šŸ‘‡

<script src="index.js"></script>

So, here goes the complete code for index.html šŸ‘‡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Awesome QR Codes in Seconds.</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Generate Awesome QR Codes in Seconds. šŸ”„</h1>

    <input id="text" type="text" value="https://hashnode.com/" />
    <div class="output">
        <div id="qrcode"></div>
        <h3>Here is the generated QR Code šŸ‘ˆ</h3>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

As you can see here we have <div> with id qrcode. It works as a canvas where our QR Code gets inserted.

Also, He should link our CSS to the project by šŸ‘‡

<link rel="stylesheet" href="style.css">

Ok, then. Let's go start coding our style.css. This is just the place where we go write our CSS styles that work with the UI and UX. So, I have created a clean, good looking code for that. I used the font-family: "Poppins", sans-serif; as my font-family.

For that, I used Google fonts, Import it by šŸ‘‡

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

So, here goes the completed code for style.css The UI here is so simple but it totally depends on you so go make some changes and make it yours.

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  width: 100%;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
h1 {
  font-size: 2em;
}
input {
  height: 50px;
  margin: 10px 0;
  width: 50%;
  background: #fff;
  color: #000;
  padding: 0 10px;
  border: none;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-radius: 5px;
}
.output {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  height: 260px;
}
#qrcode {
  width: 150px;
  height: 150px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  margin: -110px 120px 0 0;
}

Ok you have created the UI for the app, so let's jump onto the last step that is to create the functionality of creating custom QR codes with the help of qrcode.js

For that, follow the steps given below šŸ‘‡

1. Setting our qrcode component. Here, I have used 2 properties that are colorDark and colorLight. More properties are available at the documentation

var qrcode = new QRCode("qrcode", {
  colorDark: "#000",
  colorLight: "#fff",
});

2. Initialise a function called makeCode() This does the main work of our app. It alerts the user if he hasn't wrote anything in the input and also starts the process of creating the code. For creating the code, it uses this line of code qrcode.makeCode(Text.value) It works like qrcode.makeCode(https://hashnode.com/) The value of the input field comes inside the Text.value block. šŸ‘‡

const makeCode = () => {
  var Text = document.getElementById("text");

  if (!Text.value) {
    alert("Input a text");
    Text.focus();
    return;
  }

  qrcode.makeCode(Text.value);
};

makeCode();

3. Now, we have reached the final requirement that is to trigger the function makeCode() on enter press. We are gonna use jquery for creating this. For this to happen, just add the following code šŸ‘‡

$("#text")
  .on("blur", function () {
    makeCode();
  })
  .on("keydown", function (e) {
    if (e.keyCode == 13) {
      makeCode();
    }
  });

That's It, we have just developed our app and it is now time to test it šŸš€šŸ¦„

Go check the live demo

Now, we should check if the QR code given is correct or not for this, I am gonna give the URL as https://hashnode.com/ and I will scan this to check if this is correct.

Yeah, This is perfect. We did it. This is working perfectly

Webp.net-resizeimage.jpg

Wrapping Up

Hope you enjoyed this article. Go add some nice reactions and cool comments below. Share it with your friends let them know about this article. Thank you for your time.

Wishing you a good 2021 šŸ„³šŸŽ‰

Himanshu Singh's photo

Nice idea and presented nicely šŸ˜Ž

Divya Xavier's photo

Glad you liked this, Thank you

Mary Paily's photo

Oh yeah, thanks for this great idea, this is pretty interesting and working very well, Thanks a lot for this cool idea. Wish you a good 2021. šŸŽ‰šŸŽŠ

Divya Xavier's photo

Hey, this is cool. Thank you

Sanvi Merin's photo

Cool project, very useful. Thanks for sharing

Divya Xavier's photo

Thank you Sanvi Merin, I appreciate your words

Justin Philip's photo

That was so cool Divya. Kudos !

Divya Xavier's photo

Glad you liked it, Thanks

Tijani Ayomide's photo

Nice article man... In fact, I created something similar... Mine was to use Qrcode for e-voting capabilities ... If you would like to check it out . Once again really nice idea šŸ‘

Divya Xavier's photo

That's pretty cool, Keep up your good works, Thanks

Benjamin's photo

The rawgit CDN will shutdown someday in the future. :(

Divya Xavier's photo

No problem brother, You could get other CDNs for the same library :)

Thomas March's photo

What a wonderful idea and that too for every platform from a mobile to a PC. Please keep coming up with creative ideas like this.

MyAARPMedicare

Rahul's photo

Amazing this. But don't you think this is so common. There are plenty of projects on GitHub like this. This would have been uncommon when there would have been some amazing customization options.