Skip to main content

Creating QRCode Generator Using JavaScript ft. QRCode.js

 

 Creating QRCode Generator Using JavaScript ft. QRCode.js


Add the QRCode Generator widget to your Blogger...

  
<div style="text-align: center;"><iframe src="https://qrcodejs.sh20raj.repl.co/index.svg"></iframe></div>




Copy the JavaSCript CDN :-
  
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script>



Here is A Sample Code :-
  
<div id="qrcode"></div>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://jindo.dev.naver.com/collie",
	width: 128,
	height: 128,
	colorDark : "#000",
	colorLight : "#fff",
	correctLevel : QRCode.CorrectLevel.H
});
</script>


Sample CodepenQrCode.JS GitHub Documentaion


- Now Making Input For User and Make it more Advanced.

See Demo on Repl.it :- https://replit.com/@SH20RAJ/qrcodejs#index.html

Blogger Demo :- https://qrgeneratoropen.blogspot.com/

Single Page Code For Blogger :-


Comments

∅ ÜÑKÑØWN said…
Chats During Video Making...


Creating QRCode Generator Using JavaScript ft. QRCode.js

If you want to add a qrgenerator widjet to blogger then you can just copy paste the code...

So your viewers can scan text or url from mobile devices from pc...



Now, Let's create a Qrcode Scanner Using Pure JavaScript...

See a simple/sample code here...
Get more documentation from GitHub...


See All the basic Doc...

So this is Working...
So let's start from begginhg...

You can See this Parameters...
This will Create a QRCode Class (oop)
Input the id where you want to get the qr code...

Here put your Code

You can also customize your qr code...
Your qr will be updated automatically...


Let's make it Use Friendly ...
Use will input any url or text and will get the qr code...


Like this...

Let's make it fun...

Let's Check this QR.

This is working...

Let's add some Css...

So Here we made our qr code generator...


Using JavaScript and Css...

Let's Implement it on Blogger...

I wil firstly embed the code for you...

Thatyou will be able to copy directly from Article

You can Also Use GitcodeEmbedder to embed your github files or other url files js/css/html/php codes for embbeding


So that's how to create a qr code generator using javascript (Full Detailed Video for begginers also...)

So....

Thanks For watching till Last...
/

//
/
/

/





Unknown said…
Hello sir
Can you please explain how to make quiz for blogger

Popular posts from this blog

Top Free APIs Every Developer Should Know About

Top Free APIs Every Developer Should Know About In the world of software development, APIs (Application Programming Interfaces) are essential for integrating various functionalities into applications. Here’s a curated list of top free APIs categorized by their functionality: 1. Weather APIs OpenWeatherMap API : Provides current weather data, forecasts, and historical weather data for any location. Weatherstack API : Offers real-time weather information, including forecasts and historical data. 2. Maps and Geolocation APIs Google Maps API : Enables integration of interactive maps, geocoding, and route optimization. Mapbox API : Provides customizable maps, navigation, and location search capabilities. 3. Finance and Stock Market APIs Alpha Vantage API : Offers real-time and historical equity and cryptocurrency data. Yahoo Finance API : Provides access to financial news, stock market data, and por...

Git Conflict Guide 🚀

What is a Git Conflict? A Git conflict occurs when two branches have changed the same part of a file, and Git cannot automatically merge the changes. When you attempt to merge or rebase branches, Git will pause the process and mark the conflicted files. Steps to Resolve a Git Conflict 1. Identify Conflicted Files When you encounter a conflict, Git will mark the conflicted files. You can see these files by running: git status Enter fullscreen mode Exit fullscreen mode 2. Open the Conflicted File Open the conflicted file(s) in your code editor. You'll see Git's conflict markers: <<<<<<< HEAD Your changes ======= Incoming changes >>>>>>> branch-name Enter fullscreen mode Exit fullscreen mode <<<<<<< HEAD marks the beginning of your changes. ======= separates your changes...

Random Posts