How To Make QR Code Generator Website Using HTML CSS And JavaScript

Поділитися
Вставка
  • Опубліковано 28 сер 2024
  • Learn How To Make QR Code Generator Website Using HTML CSS And JavaScript | Make QR Code Generator Using JavaScript
    #JavaScript #QRCode #WebDevelopment
    👉 Download 30 JavaScript projects Source Code (Including QR Code Generator):
    greatstack.dev...
    ❤️ SUBSCRIBE: goo.gl/tTFmPb
    Here in this video we will make QR Code Generator with Fee QR Code Generator API link given below. This QR Code Generator can make QR Code of any Text or Link. You will get the QR Code in Image format. We will make it using HTML CSS and JavaScript.
    QR Code API: goqr.me/api/
    -----------------------------------------
    Suggested Course:
    ❤️ Complete website Using HTML and CSS
    ✔️ 8 Complete website step by step
    ✔️ Source Code Download
    ✔️ 76 Lectures, 12 Hours Video
    ✔️ Course Completion certificate
    👉 easytutorialsp...
    -------------------------------------
    Recommended Videos:
    Learn Complete HTML and CSS from basics:
    ► • HTML And CSS Tutorial ...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make fitness website design using HTML CSS:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make a Job Portal website design with HTML & CSS:
    ► • How To Make Website Us...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    Affordable web hosting (coupon- EASYTUTORIALS)
    👉 easytutorialsp...
    My recommended tools and tutorials
    👉 easytutorialsp...
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------------------------
    Like - Follow & Subscribe us:
    ◼️ UA-cam: goo.gl/tTFmPb
    ◼️ Facebook: goo.gl/qv7tEQ
    ◼️ Twitter: / itsavinashkr
    ◼️ Instagram: / iamavinashkr

КОМЕНТАРІ • 198

  • @AkshitModhiya
    @AkshitModhiya Рік тому +10

    Whatever lectures you teach, you teach very well and in a very easy way & this is best sir... Please make a full course of JavaScript 🫰

  • @unclemuhsinmathclass
    @unclemuhsinmathclass Рік тому +13

    This is my tertiary institution. God bless you Sir.

  • @chargeff06
    @chargeff06 20 днів тому +3

    guys, just add .trim() so that extra spaces will also be trimmed
    if(qrText.value.trim().length > 0)

  • @Ri_Mohammed
    @Ri_Mohammed Рік тому +3

    Today I completed all your video that u upload from past... It's my patience and hard work doing from last 3 month
    .. also your content support

    • @GreatStackDev
      @GreatStackDev  Рік тому +2

      Thank you so much 😀

    • @AduleLucky
      @AduleLucky 3 місяці тому

      I really enjoy following your tutorials 👍👍👍 you really explain the contents very well

  • @anshikachaudhary9178
    @anshikachaudhary9178 Рік тому +3

    really helpful for basic level developers as well as advance developers, keep going 😃😃😃

  • @WillyRahmannanoff
    @WillyRahmannanoff Рік тому +7

    Excellent tutorial. Easy to follow, useful, and practical.

  • @ojileemmanuel6817
    @ojileemmanuel6817 Рік тому +3

    This was really helpful in my DOM manipulation understanding 😌 Keep Up The Good Work👏

  • @ArtByGerrett
    @ArtByGerrett 10 місяців тому +1

    thank you for the tutorial! It was fun working on this. I even adding a background-color to the qrText box. If an error occurred not only did it shake but it would turn red as well.

  • @FaraidunHussain
    @FaraidunHussain Рік тому +3

    All the way,you’re a great Teacher.

  • @isamsvideoediting4572
    @isamsvideoediting4572 Рік тому +3

    Thanks Avinash for your wonderful tutorials. Your channel is a goldmine. I get a lot of benefits from your tutorials.

  • @ToycarsaddictDaily
    @ToycarsaddictDaily Рік тому +1

    Very cool :D What about a download button then to download the generated QR Code as a JPG image? I'm currently stuggeling with that! Thank you :D

  • @sameeransari4898
    @sameeransari4898 Рік тому +1

    I watched to may video but this tutorial was very easy thanks.💟💟💟💟💟

  • @keshavkekane6508
    @keshavkekane6508 Рік тому +4

    Thanks for this video. I regularly follow up your tutorials and they are all very useful for learning. This one about QR code is good to use as well. Can we have similar tutorial for barcode generator? I tried barcode API to replace your given QR code API, but it seems, it needs some more settings.

    • @GreatStackDev
      @GreatStackDev  Рік тому +1

      replace with this line of code
      qrImage.src = "barcodeapi.org/api/auto/" + qrText.value;

    • @keshavkekane6508
      @keshavkekane6508 Рік тому

      @@GreatStackDev Thanks for the quick help. I changed accordingly, and it now can generate a barcode. But the scanner does not scan it on PC monitor. Probably, does it need to be printed on paper and then scan?

    • @vishalmishra9885
      @vishalmishra9885 Рік тому

      QR IMG sir not load it

  • @stutichoudhury5310
    @stutichoudhury5310 Рік тому +2

    This video is so helpful..thank you so much for providing it 😊. Can you please make a video on QR Code Scanner using HTML, CSS and JavaScript ? Please !!

  • @Soulcode-k
    @Soulcode-k 10 днів тому

    I actually modified the code a little and because of that it was enjoyable. I did it in my first try❤❤❤❤

  • @TheFkedOnes
    @TheFkedOnes 7 місяців тому +22

    Everytime I try to follow your tutorials, they just won't work. I have no idea what I am doing wrong, and it is getting really annoying.

    • @Evertus_
      @Evertus_ 6 місяців тому

      What is wrong with your file? Should be no issue

    • @nnaemekasolomon3534
      @nnaemekasolomon3534 6 місяців тому +2

      I also faced the same challenge with this video.
      The QR Code wasn't working, I checked and checked to see if there was any error or bug in my code, but there was none. I didn't really know what went wrong. 😢
      But in all, the video was great, good one sir 👍

    • @alexkosgei4469
      @alexkosgei4469 4 місяці тому

      I have the same problem 😕

    • @neon_panda_2604
      @neon_panda_2604 3 місяці тому

      Brother Same I have Tried To check it again and again but no error was there.... Can Somebody Please Help me

    • @ManasRanjanSahu
      @ManasRanjanSahu 2 місяці тому +1

      I have the same problem also 😢

  • @quantyquanty3724
    @quantyquanty3724 Рік тому +5

    Very useful tool you have shared here. Can you make an updated version with logo and other files input? Thanks in advance.

    • @EVGAMING5512
      @EVGAMING5512 8 місяців тому

      Bhai tujhe taare kyu mile hai 😅😅

    • @chargeff06
      @chargeff06 20 днів тому

      @@EVGAMING5512 vo member hain

  • @ReenaYadav-ni2ow
    @ReenaYadav-ni2ow 2 місяці тому +1

    yes its working , very helpfull tutorial.. thanks

    • @GreatStackDev
      @GreatStackDev  2 місяці тому

      Glad you liked it. Thanks for your comment. 😊

  • @SurajSalve-kn4sn
    @SurajSalve-kn4sn Рік тому +1

    You have make wonderful with best guides, but sir i am geeting issue in ^script^ my qr code is not able to seen sir plz suggest

  • @sherwintayo1286
    @sherwintayo1286 Рік тому

    Your videos is very helpful to explre and learn, and I wish you will always explain the code in every video that you upload😊😊

  • @priyapajjuri3517
    @priyapajjuri3517 26 днів тому

    Excellent teaching sir

  • @obisistus472
    @obisistus472 Рік тому +2

    Awesome. Please is there a way you can make the QR code download able?

  • @HCxSVQ
    @HCxSVQ 6 місяців тому

    I liked it, I miss the possibility to generate the QR with an image in the middle, as many businesses do. I tried to do it myself but the image covers part of the QR so it is impossible to be scanned :(

  • @movieshub-y2q
    @movieshub-y2q Рік тому

    I am watching your almost all your video sir really helpful😊😊

  • @KITYASAMUEL
    @KITYASAMUEL 9 місяців тому

    It works
    thank you for working tirelessly to teach us how to code

  • @gurvirsinghkhalsa614
    @gurvirsinghkhalsa614 Рік тому

    Really Amazing Tutorial ... I will definately try This one :) ... Give some tutorial on QR code scanner or reader

  • @shibin2188
    @shibin2188 Рік тому

    It was a really helpful video.
    I wanted to make a dynamic qr code generator website. Hope you will make a video on that topic

  • @donkris2062
    @donkris2062 Рік тому +1

    very good video, I am very big fun of your work mate!

  • @ravindrasarode6752
    @ravindrasarode6752 Рік тому

    Thanks a Lot man, its really useful and practical, excellent work man 😍

  • @Deephika.
    @Deephika. 11 місяців тому

    It's working man.. really awesome.. thank you so much

  • @muhammadmunsif260
    @muhammadmunsif260 3 місяці тому

    great my dear sir the way you teach us amazing and outstanding and its work

  • @mitoskatsa1091
    @mitoskatsa1091 8 місяців тому

    very good video mi friend good job thank you i have watched two of them so far and they are both excellent

  • @rahulrj5884
    @rahulrj5884 Місяць тому +1

    Sometimes API's doesn't work,there are multiple third party free API's present ,if this API is not working then just try with another API link,it will work.

  • @seshadridutta4128
    @seshadridutta4128 Місяць тому

    Thank You for the awesome tutorial! Its really working:)

  • @super-TechCctv
    @super-TechCctv 8 місяців тому

    thank you for making this helpful video for US Thanks brother!❤

  • @samircolpasgonzalez5638
    @samircolpasgonzalez5638 Рік тому +1

    very helpful tutorial, thank you for your content!

  • @konstantinreut2577
    @konstantinreut2577 9 місяців тому

    Wonderful lesson! Thank you!

  • @dadi_vlogs3254
    @dadi_vlogs3254 9 місяців тому

    Hello Avinashi bro I wish I write your name correctly,
    lots of thank about your videos.
    but I have a question : - If we want to generate QR Code of number 0, what should we do in code to make it works well.

  • @Applecitylightkiwi
    @Applecitylightkiwi 10 місяців тому

    thanks. i extended this tut by using another barcode api, and looping through the values and select them, then join in the link
    let selectedOptions = [];

    options.forEach(function(option) {

    if (option.selected > 0) {
    selectedOptions.push(option.value);
    }
    });

    if (inputText.value && selectedOptions.length > 0) {
    BC.src = "apiurl :D" + selectedOptions.join("/") + "/" + inputText.value;
    } else {
    alert("Either barcode or text is invalid");
    }

  • @daniaroundtheworld1357
    @daniaroundtheworld1357 7 місяців тому

    It works great! Thank you!

  • @reddy-kumar12
    @reddy-kumar12 5 місяців тому

    very helpful tutorial, thank you for this video

  • @alissontomazelli
    @alissontomazelli 5 місяців тому

    Amazing man, thanks for your help.

  • @avtandilbagration6327
    @avtandilbagration6327 5 місяців тому

    Thank you for the video your are the best !!!

  • @ravikantsbiradarravikantsb5807

    Broo make a video how to start web development journey....plz

    • @GreatStackDev
      @GreatStackDev  Рік тому

      start with this tutorial: ua-cam.com/video/GAZVvpjxYQY/v-deo.html

  • @User--died1234
    @User--died1234 24 дні тому

    great work but it would be better if we could have downloaded the QR code in jpg format

  • @specialcharactersarentallo9855

    Hello, this was a very great help. But i have 4 inputs in my code how do i add more qrText.value in my qr code so all my input will show when i scan the qr or is it even possible.

  • @tebiksingh
    @tebiksingh 8 місяців тому

    Thank you so much master, this is awesome

  • @pervinnahid1667
    @pervinnahid1667 5 місяців тому

    Thanks a lot for this helpful video.......

  • @prodsmavs
    @prodsmavs 11 місяців тому +1

    Hey there, how did you change the default colors of the code editor. I noticed your CSS has different font colors in VScode

  • @saisekhar5168
    @saisekhar5168 Місяць тому

    its helpfull broo!!!

  • @nkmcreationzz5999
    @nkmcreationzz5999 Рік тому

    hi Sir ,Thanks much for the wonderful tutorials.I have watched "e-commerce website design using html and css" videos and Iam able to create one now 😊 .But confused with database ,like how do we get user's selection when they do purchase and all.Could you pls add a video for this.Thank you

    • @GreatStackDev
      @GreatStackDev  Рік тому +1

      sorry i just make front end tutorials on my channel

    • @uidairasra
      @uidairasra Рік тому

      @@GreatStackDev bhai kisi bhej document ka format kaise banate hai adhar card aur aay jaati niwas ka dob ka kaise banate hai please is bare me bataye for education purpuce

  • @maxlearningtech3423
    @maxlearningtech3423 Рік тому +2

    The best

  • @ash_king3740
    @ash_king3740 25 днів тому

    i loved that shaking part of the vedio

  • @pain5772
    @pain5772 10 місяців тому +1

    Sir plzz help qr-code is not showing
    The problem is in when i use id the animation is working but qr-code is not showing. But when i use class instead of id it shows qr-code but not the animation. Please help sir

  • @Dr.smileclinic
    @Dr.smileclinic Рік тому

    You make anything easy bro..thanks

  • @muhamadwisnumubarok5955
    @muhamadwisnumubarok5955 Рік тому

    thank u sir, from indonesia

  • @MclubTH
    @MclubTH Місяць тому

    Hello teacher, do you want us to be able to download the QR cod it?

  • @Onepiece_legends
    @Onepiece_legends Рік тому

    nice tuto , are u selling code source of this code ? because i want to download it but i didn't find it

  • @OladipupoAyokunmi-kv3eb
    @OladipupoAyokunmi-kv3eb Рік тому

    thanks so much
    Nice job bro

  • @Kodjomessie
    @Kodjomessie 4 місяці тому

    This is Great!
    I love it

  • @souravnaskar9880
    @souravnaskar9880 Рік тому

    How to get started with the basics of JavaScript.
    How to learn javascript step by step for beginner.
    Please 🙏🏻🙏🏻

  • @tamil_pasanga8225
    @tamil_pasanga8225 5 місяців тому

    Thanks brother, it's working ❤

  • @shubhamrathod9249
    @shubhamrathod9249 3 місяці тому +1

    Thank you

  • @aishwaryakamati8071
    @aishwaryakamati8071 9 місяців тому

    Sir i want become like u sir in coding how it become so r u plz comment what step i have to follow sir

  • @sidtech10
    @sidtech10 Рік тому

    so helpfull and easy

  • @aorippedbandaid3711
    @aorippedbandaid3711 11 місяців тому

    if the input box has a bunch of spaces then the .text.length would be >0. How to account for empty spaces exclusively?

  • @user-vn3qd9cw8d
    @user-vn3qd9cw8d 15 днів тому

    Sir I don't have option open with live server can you guide me how I run this code please

  • @souravnaskar9880
    @souravnaskar9880 Рік тому

    Make a full basic video of JavaScript.
    please
    I want to know JavaScript
    Upload videos via playlists.
    Please sir🙏🏻🙏🏻🙏🏻 .

  • @sunnymeghrajani8776
    @sunnymeghrajani8776 4 місяці тому

    Can we make a music player in which we can search a particular song and using api it will show and play using javascript?

  • @sarasarsora5385
    @sarasarsora5385 Рік тому

    Thank you very much

  • @Sandy-WebFlow
    @Sandy-WebFlow 3 місяці тому

    Thanku sir it's work

  • @greentube2024
    @greentube2024 Рік тому

    Thank you very much❤. Bro could you please explain how to download this qr code as png file format. I would be grateful to you if you provide the information. Thank you❤.

  • @RACHIDZE
    @RACHIDZE Рік тому

    Hi
    I have an application works as a website as technical support, not work due can't open a xml files
    Can you help me?

  • @davinalfredo484
    @davinalfredo484 7 місяців тому

    How to change the color of the qr code and maybe add some logo or either frame on it?

  • @rahulshendre7089
    @rahulshendre7089 Місяць тому

    thanks a lot

  • @zalagautamsinh9711
    @zalagautamsinh9711 11 місяців тому

    Hy bro kya qr code me image dal sakte he kya❤

  • @Storos
    @Storos Рік тому +1

    Awesome!!!

  • @biologyfacts2760
    @biologyfacts2760 11 місяців тому

    yes it is working thanks

  • @goodlaugh1094
    @goodlaugh1094 Рік тому

    Please help me with the QR link. I can not get it to work.

  • @SarojAgnihotri_Vlog
    @SarojAgnihotri_Vlog Рік тому

    Thank you sir

  • @uidairasra
    @uidairasra Рік тому

    bhai kisi bhej document ka format kaise banate hai adhar card aur aay jaati niwas ka dob ka kaise banate hai please is bare me bataye for education purpuce

  • @user-fu7ku6qp8x
    @user-fu7ku6qp8x 9 місяців тому

    Please sir I have typed the codes exactly but the qr code is not displaying please help me on what to do

  • @celticspyd5887
    @celticspyd5887 5 місяців тому

    CAN YOU MAKE ON REACT JS THE SAME FOR EX AFTER SCANNING IT SHOULD SHOW MY WEBSITE

  • @aimanshaikh4368
    @aimanshaikh4368 6 місяців тому

    All your js projects are not responsive for all devices..how to make it responsive..kindly guide

  • @ozodbek_developer
    @ozodbek_developer 3 місяці тому +1

    great

  • @vidyazade7625
    @vidyazade7625 10 місяців тому

    thankyou @GreatStack for your wonderfull tutorials, it helps a lot

  • @tonsantos21
    @tonsantos21 9 місяців тому

    Yeah but what if I want to generate a qr with sensitive data?

  • @jayaramahospet
    @jayaramahospet Місяць тому

    working on thankyou

  • @user-xx2jl2tl9g
    @user-xx2jl2tl9g Рік тому

    Sir its Working but it don't go directly to web site , its shows the website link , what ever I typed in input field

  • @pcprajapat007
    @pcprajapat007 Рік тому

    Thanks for your help. God bless you😋😋😋

  • @zia___7866
    @zia___7866 Рік тому

    Very Good

  • @vigneshvicks6805
    @vigneshvicks6805 Рік тому

    Hello Sir
    How to integrate this QR code into the CK editor?

  • @yashwairagade3677
    @yashwairagade3677 4 місяці тому

    tell me how can we do for payment urls

  • @yashwanthreddy1048
    @yashwanthreddy1048 11 місяців тому

    you should have provided an link to download source code in Description

  • @yashwanthreddy1048
    @yashwanthreddy1048 11 місяців тому

    i executed the code .but didn;t get proper output like after asssigning some text in the text box ,QR code is not generated.

    • @pain5772
      @pain5772 10 місяців тому +1

      Yeah me too. If you get the solution plzz tell me

  • @sanjeev1574
    @sanjeev1574 8 місяців тому

    thank you ❤

  • @charlzz014
    @charlzz014 2 місяці тому

    why the image of my qr code not showing?

  • @mayankcharan1688
    @mayankcharan1688 7 місяців тому

    Great project

  • @chamith_z1298
    @chamith_z1298 Рік тому

    thankx sir

  • @pujarveeresh988
    @pujarveeresh988 7 місяців тому

    whenever I scan the QR code from my mobile, it shows undefined