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 QR code generator. So, here we go.
HTML
class="heading">class="title">QRcodesclass="sub-title">Generate QRCode for anything!class="user-input">for="input_text">Type something.type="text"name="input_text"id="input_text"autocomplete="off">class="button"type="submit">Generate QR Codeclass="qr-code"style="display: none;">
src="./js/app.js">
The last element is for the QR code to be displayed as soon as we fetch it from a library through javascript (more on that later). Let’s move on to some javascript.
Now, we are going to create a function known as generate() which will be invoked as soon as the user clicks on the Generate QR code button. This function will take the text input from the user as a parameter.
functiongenerate(user_input)//code>
Inside this function, we are going to use a javascript library qrcode.js to generate QR code. You can use this library via a CDN by including the below tag in the tag of html .
Inside the generate() function, we will create a new object using the given library. It will take two arguments, first is the element in which the QR code has to be displayed and secondly, the content for which the QR code has to be generated and some options to customize the QR code.
Inside this download button we will add a link which allows users to download the QR code with a specified file name and append it into the download button. You can learn more about the download attribute here.
Also, the .qr-code element will be hidden until the user clicks on the Generate QR code button. With this, our generate() function is all set to be invoked.
Now inside our click event function, we will check if there is already a QR code displayed or not. If it is, then we will first clear that QR code and generate a new one. If it’s not present, we can simply generate a new one. Also, all of this happens only if the user enters some text or if the input value is not empty.
A QR Code Generator and Reader! Generate as well as scan QR codes real quick!
Top comments (29)
Working with Web Technologies since ~20 years now and am seeking for a new challenge ever since. 😍 FinTech | Lead Developer @ Debtvision Previously: FE Lead @ Mercedes-Benz.io
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 JavaScript because the term Vanilla JS refers to using pure JavaScript. When I read the title I clicked the article because I thought you were actually showing it with Vanilla JS but instead you are using a library which is not Vanilla 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.
24 likes Like Comment button
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.querySelector to 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 use document.querySelector(‘#id’) at all — the element will already be available as window.id , or just id .
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.
16 likes Like Comment button
Working with Web Technologies since ~20 years now and am seeking for a new challenge ever since. 😍 FinTech | Lead Developer @ Debtvision Previously: FE Lead @ Mercedes-Benz.io
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).
6 likes Like Comment button
In simple code like your example, you can guarantee it
Working with Web Technologies since ~20 years now and am seeking for a new challenge ever since. 😍 FinTech | Lead Developer @ Debtvision Previously: FE Lead @ Mercedes-Benz.io
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
Working with Web Technologies since ~20 years now and am seeking for a new challenge ever since. 😍 FinTech | Lead Developer @ Debtvision Previously: FE Lead @ Mercedes-Benz.io
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. a submitButton which is very likely. Now because they allowed themselves to do so they would be allowed to add id=»submitButton» . So not only now the ID is double-placed but also the window[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 = whatever in the window scope. That happens in enterprise applications extremely often because the 3d-party tracking tool needs access to it. The const analytics now takes precedence over any DOM ID definition. So now the approach of using window[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.
Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.
Параллельно с курсом Вы также будете получать домашние задания, результатом которых станет, в том числе, полноценная серьёзная работа для портфолио.
Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
— Вы получите необходимую базу по Unreal Engine 5
— Вы познакомитесь с множеством инструментов в движке
— Вы научитесь создавать несложные игры
Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!
Чтобы получить Видеокурс, заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
