While you can generate QR codes for URLs in browsers such as Chrome, it's always interesting to learn how you can make your own version of a simple...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you for the article. It shows how to generate a QR Code which can be helpful. However I suggest you change the title to
Creating a QR Code with JavaScriptbecause the termVanilla JSrefers to using pure JavaScript. When I read the title I clicked the article because I thought you were actually showing it withVanilla JSbut instead you are using a library which is notVanilla JS. Try to imagine this: I tell someone "How to get a DOM Element with VanillaJS" and then I show how to load jQuery to then query with jQuery the DOM Element.Again: The article in itself is helpful but the title very misleading.
A number of issues here....
You're using a submit button without a form. Adding a form would actually be better too, as you could generate the QR code by also pressing return to submit the form. This is standard, expected behaviour on a form.
You're repeatedly calling
document.querySelectorto get the same things. Would be better just to call it once.If you have an element with an
id- you don't need to usedocument.querySelector('#id')at all - the element will already be available aswindow.id, or justid.Putting all of this together, you can simplify your code considerably.
Also, this isn't really a QR code generator at all - it's an interface to call a 3rd party function that generates a QR code. You should try writing such a generator yourself - it's quite interesting, and you find out how QR codes work.
I agree to everything but the ID approach. Using global definitions is not recommended as there is technically no guarantee it's gonna be the DOM Element (stackoverflow.com/a/18713391/1236627).
In simple code like your example, you can guarantee it
Context-free, yes. But that wasn't my point. The point is that it is generally not recommended besides for e.g. CodePens or Debugging sessions so I recommend to be careful with that advice. (Or in other words: Even in a large-scale enterprise application I could state "but here it is working" - which then only holds true as long as the overall context (switching libraries, new employees adding new code, etc) does not change. Which is not a good idea.)
Yup - agree. It's appropriate to use in the right context. It should never be avoided just because people "don't understand it" or "aren't used to doing it that way" - way too much of that goes on these days
The problem is that this is viewed from a "small context perspective". In production, as stated, it shouldn't be recommended to be used.
It goes the same principle as always e.g. Security through Obfuscation is definitely working in the right context. But it's recommended to be avoided at all costs in programming because it opens up an option to be breached.
And the similiar goes for
window[[id]. If being used in non-prod envs such as showing something or Sandboxes then it can be very helpful (this is where I actually do use it).But for prod it should be avoided as a guideline. Generally in JS we try to modularize more to enable teams to scale and be free from dependencies from other teams.
Now imagine one team has the idea of using
window[id]for their component that they are building. And say both teams are using e.g. asubmitButtonwhich is very likely. Now because they allowed themselves to do so they would be allowed to addid="submitButton". So not only now the ID is double-placed but also thewindow[id]is ambigious. So the teams are suddenly very dependent on each other, communication effort increases, etc.On top of that comes another problem: You are polluting the global context. Libraries are polluting the global context too - because they have to. E.g. analytics libraries might expose
const analytics = whateverin the window scope. That happens in enterprise applications extremely often because the 3d-party tracking tool needs access to it. Theconst analyticsnow takes precedence over any DOM ID definition. So now the approach of usingwindow[domId]wouldn't work anymore.In any prod-bound or team-bound contexts where more than 1 person works or anything is supposed to scale in the future this should definitely not be used.
From the HTML spec:
The only reason this feature hasn't been removed is that (as with many other bizarre features of the early Web) it can't be changed without breaking legacy code. It's the same reason you can write
<body bgcolor="butts">and get a handsome brick-red background for your page.Yup I agree that I used a JS library but this is actually a beginner friendly tutorial to make a QR code generator web app on your own.
🙌 Thanks for sharing this amazing article, Murtuzaali! 🤓
I found the step-by-step instructions on how to create a QR code generator using JavaScript to be super helpful. 🤩
I've been wanting to learn more about QR codes and how they can be used in Salesforce, so your article was timely. 🤑
I also recently read the article on How to Use QR Codes in Salesforce and found it to be a great complement to your article. 🤞
Both pieces of content provided valuable insights on the potential uses and benefits of QR codes in Salesforce. 💪
Keep up the great work!
Thank You!
There's a Barcode Detection API in modern browsers. You'd only need to polyfill it if it is not supported.
Which is helping for Detection, not for creation. But thanks for the hint 👍
It's not available for all browsers. Thanks for suggesting, I didn't knew about this earlier!
Interesting article but the title is misleading. Neither vanilla flavour nor generating anything
This is an article which appeals to beginners!
Does not mean that the title should be misleading!
changed
Open source is essential for application developers. It is unfortunate that Open Base is shutting down. If you are looking for an alternative, check out kandi from Open Weaver. kandi helps developers build applications faster through open source reuse. Through its natural language interface, kandi recommends code snippets, packages, libraries and solutions from 650 Million open source assets. kandi also promotes responsible reuse with proper license attribution across all assets, while guiding the developer on paring code snippets with libraries to build their applications faster.
Try kandi at kandi.openweaver.com. Thank you for your support to the open source community and happy coding!
Hey guys,
Is there any library for react-native ??? I need to design stylish qr code.
this might help openbase.com/categories/js/best-re...
Open source is essential for application developers. It is unfortunate that Open Base is shutting down. If you are looking for an alternative, check out kandi from Open Weaver. kandi helps developers build applications faster through open source reuse. Through its natural language interface, kandi recommends code snippets, packages, libraries and solutions from 650 Million open source assets. kandi also promotes responsible reuse with proper license attribution across all assets, while guiding the developer on paring code snippets with libraries to build their applications faster.
Try kandi at kandi.openweaver.com. Thank you for your support to the open source community and happy coding!
Thanks, I will explore it.
Build Full QR Code Generator Website using JavaScript
QR Code Generator of Link, Text, Phone, Vcard, Message, App Links
Copy QR Code Image to Clipboard
Download QR Code Image
Change QR Code Size and Color
demo tutorial and source code: bit.ly/3OZcxBH
You can't call it vanilla, because you are using an library. I think pure vanilla javascript qr code is not even possible.
changed on demand
Why setTimeout? Why not async/await?
Because we don't return any promises which can be resolved!
Test it here:- murtuzaalisurti.github.io/qr/