Create A Simple JavaScript App to Generate QR Codes

Let's create a simple QR Code generator app with JavaScript, QRcode.js and Tailwind CSS.
💻 Github Repo
github.com/bradtraversy/qr-co...
🧑‍💻 Live Demo
qrcodes.tech
💻 QRCode.js Library:
github.com/davidshimjs/qrcodejs
⭐ Special $9.99 Promo For My Tailwind CSS Course:
www.udemy.com/course/tailwind...
⭐All Courses
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
1:09 - Side Project Motivation
2:31 - QRCode.js Library Intro
3:16 - Dependency Setup
6:39 - Tailwind CSS Layout
20:42 - Start JavaScript & Get Form Inputs
23:03 - Show & Hide Spinner Functions
25:05 - Generate QR Code
27:28 - Clear UI Function
28:40 - Create Save Button
32:48 - Get QR Code Image Source
34:50 - Clear Button From UI

[@TraversyMedia]

Hope you guys enjoy the project. I have been working on revamping my "Modern JS From The Beginning" course, so that is the reason for all the vanilla JS lately. I will be doing more projects using React and other frameworks as well as backend stuff soon.

[@abdellahdamri656]

Hi Brad! Great stuff! I was wondering if there will be any courses coming. something BIG (authentication, authorization, permissions, multiple roles) like MERN/MEAN or even MEVN stack! That would be AWESOME!

[@TraversyMedia]

@@abdellahdamri656 I usually do that stuff in my courses rather than KZbin, because they take A LOT of time and effort. The latest "Learn The MERN Stack" series was a good sized project with authentication.

[@abdellahdamri656]

@@TraversyMedia Yeah That was REALLY good! I watched the playlist several times! I didn't mean on KZbin! I meant on any online course provider (Udemy, Coursera, edX) or Even if you get to publish on your own platform That would be great!

[@jsdope437]

pls, brad, make one and we are ready to buy it. MERN Best Practices (authorization, authentication, roles and permissions)

[@jaimevtv]

Happy to hear this brad, sounds exciting 😍😍😍

[@terrencemcmanus]

I love doing code as a hobby...and your videos are my go to resource. I appreciate you going thru the code and logic...I have learned quite a bit. Thank you.

[@emmanuelmunachi1801]

Simple and brilliant..... Your diligence never dissappoints Brad , 🙌 even with notifications turned on I always check daily if you have dropped something.

[@1900s_forreal]

Seriously.... I was bored and hearbroken in front of my computer the whole day trying to create an android app... I ended up know where due small computer processing power... Hence my pc couldn't run android studio, And just that very moment YT notified me on your new video.... On QR CODE app, I Quickly jumped into the small, I am done creating it... But I just want to add that custom Alert box to be done with the project am so glad that I just exploited my programming passion with you Brad.... Thank You So Much For Helping Me Out ❤️❤️❤️

[@siddharthpatel2193]

I created QR generator app few days back with Flask. I even added many features like customizable QRs like image background QR or color QR etc. It was so fun project.

[@DavidAinsworth37]

Hi Brad, thank you for building this functionality, it is super useful. As always really easy to follow your instructions and learnt a number of lessons along the way.

[@edwinschutjes8878]

Great video as always! I love these small side projects because it's a great oppertunity to actually finish something. Instead of working on massive applications at my job that are basically never finished. Also love the use of vanilla JS. Getting kinda tired of everybody over-engineering simple applications with frameworks.

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@tonymorin6308]

Thanks Brad, so many uses in my head already, brilliant!

[@abhis3kh]

Thank you veryyyyyyyyyyyyyyyyyyyy much Brad. really appreciate it. Learned the many things. Keep making this kind videos more often :)

[@lonewolf.8635]

Thanks Boss and God bless!

[@JamesQQuick]

Nicely done! Love this.

[@uzairmehran8542]

Hi Brad i am from Pakistan 🇵🇰. I really like your videos and your are inspiration to me. I learned a lot from you. I am working in a smaal company but i want to start my own work in end of December. Keep it up bro. May God bless you.

[@sailee5208]

Thanks Brad! Nice little side project.

[@thedinosaurspecialist8053]

Thanks dude this project is very beginner-friendly for me thanks

[@jacobbeck8260]

nice tutorial just what i was looking for

[@fahadm365]

Great project and well presented, I really appreciate what you have done to help the people on KZbin. I really did all the steps you mentioned in the video everything worked perfectly but I had a problem when opening the website on mobile device ( android only ios works fine) when I click the download button below the QR code it save the link of the index.html as a webpage. tried it also on your website the same issue happened, I hope you read this and provide a solution. Regards :) ,

[@WiLDeveD]

Cool Tutorial. Thanks bro...

[@hamzahmd_]

Stay awesome Brad! Thanks

[@lancemarchetti8673]

Nice! I tested hiding some web account logins in a single Qr . When scanned, it spits out a page in Hex. After converting to Ascii, a page filled with Base64 appears. After a simple decode in Notepad ++, ..voila! QRcode is handy...and looks cool as well.😎

[@deejaydev]

Haha, I wanted to build a JavaScript QR generator on my channel, but instead we built an IP address generator, great minds think alike, thanks Brad, for being you... Blessing

[@oleksandrsmyrnov9275]

Great video! thanks for your work

[@crust5532]

Learning so much stiff from you . I really appreciate your hard work to teach us so many things in web development plus with other stuffs . Also Which VS code theme is this ??? So clear to see

[@ondrejmarek9752]

I belive it is called GitHub Theme. First impression is quite good, but I think it is not practical that much.

[@coding7909]

thanks alot for this amazing tutorial!

[@ashutoshtomar364]

Is the QR generated is temporary or permanent or it will expired after the days.

[@MACH_SDQ]

Very intersting and will watch it complete later

[@LadeShootH]

hey, I really like your video, thx m8! Do you know if there is a way to create more customized qr codes like the qr code generator by bitly does? (e.g. a logo in the middle)

[@sasaeedkhan9753]

Really good video for us Thank you ❤️

[@changeyourbodystuffyourwallet]

I hope you will leave the url at that location. I'm not too tech savvy and this is very helpful to me. Thank you for making a difference in the world. It's generous.

[@acedigibits9079]

one small suggestion, you can add download 'a' in html itself and simply change the href everytime qr code is generated. This way you dont have to worry about multiple download buttons also

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@jonhardlarsen8562]

Hi Brad, love your tutorials, always very explanatory. But in this case I have a minor problem. I have copied your code from Github Repo, and it works almost fine, the only thing is the button for saving the the QR-code image does not get created. What am I missing?

[@jonhardlarsen8562]

Problem solved. The problem was the Show scanner function ;) I deleted it, and then it worked fine.

[@redMaple_QC]

Little comment. Hold a small pause before enter when entering Emmet or Tailwind, so we can can see the code instead of going back and forth. I noticed that in a lot of tutorials, not just yours.

[@afolabioluwatomisinmaveric7235]

Thank you so much Brad for your lessons. I noticed that the download button downloads the image on desktop but download the HTML page on mobile. What could be the reason and how to fix that bug? Thanks In Advance

[@clintonwambugu]

I have a question why dont we use FormData() to get the values of the form inputs?

[@canerdemircigm]

Thank you Brad. I would like to know what you think about .Net Blazor.

[@hassaneoutouaya]

Thank you so much !

[@JohnWeland]

Neat man! I am looking to redo the URL shorter to add a QRCode generator so when you shorten a URL is till generate a QR for the short URL.

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️....

[@TheArtofWill082]

Joe from Codingphase brought me to your channel. Too bad you two weren’t able to collaborate as scheduled.

[@EntyFu]

awesome, thank you!

[@alikisang827]

Brad is my hero and mentor. Hi Boss🤗🤗☺☺

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️ I also have an investment platform for you

[@braveitor]

Interesting but I think that "dummy" spinner adds nothing to the website. I suppose this fetch part can be easely done with a "promise-then" functionality, so the spinner would really indicate that the site is processing the info, though the image is probably to quickly generated so the spinner never shows. But displayingit there for a second for cosmetic reasons, I don't know....

[@DesarrolloDimpulsox]

Hi, do u know how to make a qr code but from a form in the html? because I have a pdf converter, but I would like to add a qr, that instead of passing a pdf on the form, I could simply show the qr to be scanned

[@patricionally]

How can the same project be done, or that it should be added to generate dynamic QR codes, to be able to link them to Google analytics and be able to follow up. Thank you.

[@triggermindscape2031]

Thanks Brad, as you mentioned, what should be done get a profit of this project after I deploy it? May be this can be a good topic for your next video.

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️

[@ernestradner156]

📌I don’t know who but someone actually needs to hear this.You’ve got to stop saving all your money. Venture into investing some, if you really want financial stability.

[@enricopulieri1459]

Lately I’ve been thinking of buying cryptocurrency for retirement, I’ve set asides $350k to invest but along the line,I usually get cold feet, maybe because I have no idea what I’m doing, please I could really use some guidelines.

[@claireenriquez6126]

@@enricopulieri1459 In situations like this,I always recommend to people on getting guidance at least from someone that understands price action and all that while you strive on improving yourself by watching videos and learning fundamental analysis.

[@stevenwalker2117]

Investment guidance sounds like a great idea,thought about it before but never knew how to go about it.

[@joachimmilberg2313]

@@stevenwalker2117 I started investing in cryptocurrency a little while ago and I’ve come to realize nothing beats first hand experience..Investing with Juan Antonio Landa has been the best experience ever.

[@veronicafarmiga5577]

Wow…..Juan Antonio Landa?

[@muhammadfarhan5414]

hey, how can i make similar app (qr code generator) not only refer to a web link but also for making vCard (personal contact)?

[@codehal]

Very good sir

[@reviews2vlog630]

Love from Pakistan Sir

[@tothebone4613]

so the generated qr code would be static right ? even got refreshed ?

[@HazemFanoush]

I was thinking that you going to create the whole library not using an existing library, but there is no problem.

[@NeedyCatMedia]

This was great. I am not a coder by no means, so I like to play around and learn new things. I created a new HTML and Script file using what was within the repo. Everything looks like it did in the video. However, I cannot seem to get the generator to work. I am familiar with svg files, but I was able to download them and place them within my IMG folder. Any thoughts on what I am doing wrong. Thanks in advance

[@NeedyCatMedia]

So I moved it to a sperate directory and it worked fine. Thanks

[@marsxollective]

I followed along with the tutorial, but I keep getting Uncaught TypeError: Cannot read properties of null (reading 'value') in the javascript

[@darkglamramos]

How can I get the downloaded file to be named like the url? Thanks in advance.

[@harry4088]

Hey Brad sir which font u r using in vs code ?? please reply

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@JTinphoenix]

will this work for sms qr codes?

[@MatthaisUK]

Is there a reason you don't use a FormData object for form handling inside your submit event listener? I find it makes it much less manual

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@yogeshkumarshah5191]

19:26 | I can't get access to the spinner div. Can somebody assist me to the solution??

[@patrickudoh7732]

after following the entire tutorial. didn't work. realize my mistake was having the defer in quotes in the js script tag. i felt hopeless for a while there. crazy. I'm good now

[@mohsinfarooq1840]

Anyone having issues with the Application on mobile device? I personally tried to use it on my device and turns out when you try to save the generated QR image, it actually saves the offline file of the web page and not the QR image itself. If anyone has found any solution to it, let me know !

[@reanhazelpascual7102]

Hi, I just wanna ask where can I find the code for the Spinner? I do hope anyone can answer me.

[@reanhazelpascual7102]

I don't know where that code came from, please help me

[@mohsinghazi3574]

Make a tutorial on pdf generate from backend in mern app

[@adyarabiat9394]

Hi Brad, I think it is time for 2022 Home Office Tour

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@PrashantNirgun]

Great tutorial one request some QR Code has image in center plz check whatsapp QR code for reference. If you could explain how to achieve this

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️

[@KingKongHitDaBong]

for some reason my qr code wont load (the image is there but it shows the tiny blue window to show it didnt load fully) ive tried everything no idea what went wrong

[@KingKongHitDaBong]

if anyone has any idea what went wrong I'd really appreciate it

[@namanjain2894]

I am also facing the same problem

[@KingKongHitDaBong]

@@namanjain2894 this is the frustrating thing about being a self taught coder. I'll give it a few more hours and if I still can't find out what went wrong I will head to brads repo

[@EntyFu]

@@KingKongHitDaBong what browser are you using? do you have any browser add-ons might hinder it being displayed? if you clone brad's repo and it won't show either, its definitely an issue with your browser

[@KingKongHitDaBong]

@@EntyFu thx for helping but I finally found out what was wrong, my names in the input fields weren't accurate. @Naman Jain see if this was also what's causing your issue

[@naveenbelandur7269]

Can you make a video on how to become a better Developer what are the things need to keep upgrading as a developer please

[@jamesmanjada9553]

He already posted. Please watch kzbin.info/www/bejne/e6LdhpaDr8uJZ9k

[@TraversyMedia]

Yeah I can add it to the list as a dedicated video, but if you look in the "Discussion & Career Advice" playlist, there is all kinds of videos around that stuff.

[@naveenbelandur7269]

@@TraversyMedia sure thanks you

[@user-ru9jy4hq6d]

Plese make advance lesson on React + RubyOnRails back

[@mohsinfarooq1840]

I added the "Save Image " button but when I click it the image gets downloaded and throws an error "Failed - no file". What is the matter ? Can anyone help ?

[@envercanoudehergelink963]

Hi Mohsin, I'm getting the same error. Were you able to solve the problem? I am thinking maybe the reason is we are trying to download the image from our local server. thanks in advance

[@mohsinfarooq1840]

@@envercanoudehergelink963 No, I wasn't able to resolve the issue. And about the local server, wasn't Brad doing the same while he coded the save image button, infact he even was able to download. I don't know what's the issue. Let me know if you can figure it out.

[@envercanoudehergelink963]

​@@mohsinfarooq1840 Found it! Check the js file line 70 on the projects Github repo and compare it to yours. My mistake was wrapping saveUrl in quotation marks " ". Hope it helps.

[@mohsinfarooq1840]

@@envercanoudehergelink963 yes, thank you! It really solved the issue.

[@ztcanada_1]

@@mohsinfarooq1840 Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️

[@beinyourguard]

Interesting, I didn't know that creating a QRCode was that simple in JS

[@abbaskareem5281]

Hi sir, can you please make crash course on 'React Query' state managment ... Thank you

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️....

[@AmericanDragon134]

What u can think about MERN stack in 22/23

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@mohamedyoussef8835]

Awesome video ++++++++++++ 😃

[@issahabeeb546]

Can someone created a scanner that will scan the qrcodes automatically 🤔

[@rockbelleh6237]

Camera is always use to scan

[@santhoshsandy4419]

❤️

[@dinorossi6611]

A simple?

[@YasinNabi]

Luck is 0.0001% Hard work is 100% .... instead of waiting to get lucky, start working hard and get lucky.... Hard work and investing in yourself is the best investment ever. a fellow creator....

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️.

[@jamols09]

I thought this is going to be from the scratch QR code :(

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️......

[@metamodern7648]

Well, I've raised on your videos, so can't complain, however I'd better leave a note: as an idea for a project for web -- the project is great, but the title is awfully misleading. I hoped for actual js code being written to generate QR code, not for a library usage. Very "clickbait'y", sorry not sorry.

[@ronilbiswas]

Why use libraries?? What's there to learn. This video is basically about TailwindCSS and basic JS. Nothing else or nothing interesting.

[@ztcanada_1]

@@shalimkhan2023 Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@zackOverflow]

This is going to be very interesting as always. Thumbs Up 👍

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️.....

[@just-being-aryan]

have you used any external APIs or Libraries in creating this ? if yes can u give me some resources to create QR Code Generator without using Any external APIs or Libraries?

[@ZiziKarma]

Thank you very much Brad!! If anybody wants to be able to input a website without , change the input type="text" in the html, and add a simple conditional statement to the setTimeout. ``` const url = document.getElementById("url").value; const size = document.getElementById("size").value; const https = ""; if (!url) { return alert("Please Enter a URL"); } else { showSpinner(); setTimeout(() => { hideSpinner(); if (!url.includes("" || "")) { const newUrl = https.concat(url); generateQRCode(newUrl, size); } else { generateQRCode(url, size); } setTimeout(() => { const saveUrl = qr.querySelector("img").src; createSaveBtn(saveUrl); }, 50); }, 1000); } ```

[@warpmaster7]

Awesome video. One thing I did notice is that you need to enter in order for the link to be recognized. Not sure if that was on purpose

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️....

[@orisaadele5852]

Very professional video explanation, Instagram is looking forward to your reply, thank you!

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️......