Create A Simple JavaScript App to Generate QR Codes

💻 Github Repo

🧑‍💻 Live Demo

⭐ Special $9.99 Promo For My Tailwind CSS Course:

⭐All Courses

💖 Show Support

👇 Follow Traversy Media On Social Media:

Timestamps:
0:00 - Intro
1:09 - Side Project Motivation
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.

[patric_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 ❤️❤️❤️

[siddharthpatel]

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.

[edwinschutjes]

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.

[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.

[acedigibits]

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

[uzairmehran]

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.

[emmanuelmunachi]

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

[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.

[lancemarchetti]

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

[fahadm]

Great project and well presented, I really appreciate what you have done to help the people on YouTube. 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 :),

[TheArtofWill]

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

[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.

[thedinosaurspecialist]

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

[DavidAinsworth]

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.

[sailee]

Thanks Brad! Nice little side project.

[canerdemircigm]

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

[HazemFanoush]

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

[crust]

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