YT YouTube2Text

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

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

by GreatStack · 2,373 words · 359 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00hi guys welcome back to another video
0:02today in this video we will learn how to
0:04create a QR code generator using HTML
0:06CSS and very simple JavaScript here on
0:09my computer screen you can see one input
0:12box and one button if we write something
0:15in this input box we can add any text or
0:18we can add any URL and when we'll click
0:21on this button it will create the QR
0:23code of that link or text let me write
0:25something here
0:27if I write my channel name easy
0:29tutorials and click on this button it
0:33will create this QR code next I will add
0:36my name here and click here on this
0:39button you can see changes in this QR
0:42code it means it is creating a new QR
0:44code let me add one link here I will add
0:48google.com
0:50and click on this button
0:52and you will see the QR code for the
0:55google.com URL
0:57you can scan this QR code from your
0:59mobile and it will open that link and if
1:01it is for the text it will display that
1:04text it is very simple to create this
1:06type of QR code generator using HTML CSS
1:08and JavaScript so keep watching this
1:10video till the end and create your own
1:12QR code generator here I have this
1:15folder and in this one you can see one
1:16HTML file one CSS file let me open these
1:19files with my code editor which is
1:20Visual Studio code you can use any code
1:22editor so this is the HTML file where I
1:25have added the basic HTML structure and
1:27this one is the CSS file in this HTML
1:30file I have added this link tag that
1:31will connect the HTML and CSS file now
1:34we will come back to the CSS file and
1:36here we will add one CSS properties for
1:38the body so let's add body and in this
1:41body we will add the background
1:43here we will add one color code
1:46after that let's come back to the folder
1:48and open this HTML file with any web
1:50browser so you can see this dark color
1:52on the complete web page let me close
1:54this browser and I will open this
1:56browser with the visual studio code
1:58extension called live server so that it
2:00will refresh the webpage automatically
2:02whenever you will add any changes in the
2:04code file now you can see the same
2:06webpage again now let's come back to the
2:07HTML file here we will create one div
2:10with the class name container
2:12next we will add the CSS for this
2:13container so write this class name here
2:15in this CSS file and for this container
2:18we will add the CSS properties like
2:27width and some padding to add some space
2:30inside the box and position absolute top
2:3350 left 50 transform translate minus 50
2:37and minus 50 it will move this div in
2:40the center of the webpage and here we
2:42have the white background and Border
2:44radius let's come back to the website
2:46and you can see this box in the center
2:48of this web page in this one we will add
2:50one text one input field and one button
2:52so let's come back to the HTML file and
2:55within this container let's add one text
2:57in V tag
3:01enter your text or URL then we will add
3:04one input field
3:05input type will be text and then we will
3:07add the placeholder that will be the
3:09text displaying inside the input field
3:13next we will add one button
3:18and button text is generate QR code
3:22after adding this let's come back to the
3:25website and you can see this text this
3:27input box and this button next we will
3:30design it using CSS so let's come back
3:31and come to the CSS file here we will
3:34add dot container and P for the
3:38text
3:40in this one we will add the font weight
3:43it will be 600
3:45then we will add the font size
3:49and margin at the bottom to add space at
3:53the bottom
3:55then we will add the CSS for the
3:58input field so write container and input
4:10for this input field I have added
4:13width and height then border of 1 pixel
4:16and outline is 0 then padding of 10
4:19pixel that is the space inside the input
4:21field and we have added margin 10 pixel
4:23from top and 20 pixel from the bottom
4:26and left right zero and Border radius is
4:285 pixel now you can see the font weight
4:30is increased for this text and this
4:33input field is also looking good next we
4:36will Design this button so let's come
4:38back and here we will add dot container
4:40and button
4:55in this button I have added width and
4:57height then background and color this is
5:00for the text color of the button then
5:02border outline zero border radius of 5
5:05pixel and then I have added the Box
5:07Shadow for this button cursor pointer
5:09and margin it will be the space from top
5:11and bottom of 20 pixel and we have
5:14increased the font weight after that
5:16this button looks good
5:18next we need one API that will create
5:21the QR code for that just Google for QR
5:24code API
5:26we will use this website go QR dot me
5:30you can see the URL go Qi dot me slash
5:33API I will get this link in the video
5:35description so you can directly come to
5:37this URL and here you can see this link
5:41if we copy this one
5:43and paste it in the URL
5:47you can see it will display a QR code
5:49the text in this
5:52URL it is example if I replace this one
5:55I'll write hello
5:57it will give the another QR code so we
6:00will add the input here at the end of
6:02this URL and we will get the different
6:04QR code for the particular text or URL
6:07so let me remove the last word
6:10we will use this link in our JavaScript
6:13so let's come back to the code file and
6:16here just above this closing body tag we
6:19will add script
6:21open and closing tag and in this one we
6:25have to create one function so let's
6:27create one function
6:29and
6:31write the name
6:33generate QR
6:38and before writing code in this function
6:40we will come back here just above this
6:43button we will add one div where we will
6:45display the QR code on the browser here
6:48we will add one tip with the ID IMG box
6:52and in this tip there will be one image
6:54so write the IMG tag and the source will
6:57be empty because currently we don't have
7:00the QR code so the SRC will be empty and
7:03we will add one ID here so ID is
7:07QR IMG
7:10or let's say image keyword image
7:14like this
7:15and we will add the variables here in
7:19this script we will add
7:21let
7:23IMG box equal to
7:27document Dot
7:29get element by ID
7:32and IMG box
7:35let's duplicate it and in this IMG box
7:38we will add this
7:39QR image
7:43and after that we need the input field
7:47here so in this input field we will add
7:49the ID
7:52QR text where we will add the texture so
7:56copy this one and duplicate this
7:58variable and here we will add QR text
8:00and QR text so it will give us the value
8:03written in the input field and this is
8:07the image and we have to add the image
8:09Link in this IMG tag and we will get the
8:12link from here
8:13so just come back and here we will add
8:16QR image
8:18dot SRC
8:20because the SRC is not available so we
8:23will add this link and at the end of
8:26this link we need the text written in
8:29this input field so to get the text
8:32written in this input field we will add
8:34this
8:35QR text
8:37dot value so it will give us the value
8:42like this
8:45next we have to call this function
8:46that's it so just copy this one and add
8:49it here in this button we will add on
8:51click
8:52equal to
8:54generate QR it will run this function
8:56and it will
8:58get the value written in the input field
9:01and it will create this URL and that URL
9:04will be
9:05displayed in this IMG tag so let's come
9:08back to the website and test this one if
9:11I write something here
9:14hello and click on this button you can
9:17see it will display this QR code now we
9:20have to align this one and we will add
9:21some animation using CSS so just come
9:24back and here we have added the
9:28image box
9:30write this ID here
9:33for this one we will add the width it
9:35will be 200
9:38and
9:40border radius it will be 5 pixel
9:44and let's add the max height
9:48it will be zero so in a series it will
9:51be hidden then we will add overflow
9:53hidden
9:56and
9:58in this IMG box we have the IMG tag so
10:02write the IMG then width it will be 100
10:05percent
10:06and let's add the padding of 10 pixel
10:11we have added the max height 0 so the
10:13image will be hidden and when we will
10:15add the text and generate the QR code
10:17then it will be displayed so we have to
10:19increase the max height so let's add the
10:22ID first it is IMG box
10:26then write Dot so IMG
10:34this class will be applied whenever the
10:36QR code is displaying and when this
10:39class will be applied here we will
10:41increase the max height
10:43let's add the max height of 300 pixel
10:46then we will add the margin
10:48margin will be 10 pixel and Auto
10:51then we will add the Border
10:54border will be one pixel solid
10:57and this color after adding this
11:01we have to apply this class name
11:03so let's come back to the HTML file and
11:06after this link here we will add
11:09IMG box
11:11Dot
11:13classlist dot add
11:16so it will add this class name
11:20now just come back to the CSS file here
11:22we are adding the maxite 300 and
11:25initially it was zero so here we will
11:27add the transition also so it will be
11:28smooth animation let's add transition
11:33Max height one second
11:37after that if I write some text here
11:41and click on this
11:43generate button
11:45you can see it is increasing the height
11:48let's refresh the website and try again
11:54you can see smoothly it is increasing
11:57the height and displaying this QR code
11:59here if I click on this button without
12:02writing anything here let's see
12:04it is displaying this type of error so
12:07to fix this one let's come back and here
12:10we will include all these things in if
12:13condition we will add if
12:16and in this if we will check
12:18this QR text Dot value
12:22dot length
12:27greater than zero
12:30and
12:32add it here
12:36so this code will be executed when the
12:41keyword text value length is greater
12:43than 0 it means this input field has
12:46some value now let's come back to the
12:48website if I click on this button
12:51nothing will happen because the input
12:53field is blank and if we write anything
12:55here
12:57and click on this button it will
13:00generate the QR code next we will add
13:02one more thing we will click on this
13:04button without writing anything in this
13:06input field then it should display some
13:08animation
13:09so we will add the shake animation in
13:12this input field when this input field
13:14is blank to add that animation let's
13:17come back to the CSS file and here we
13:18will add one class name error
13:21and let's add one animation here
13:24animation
13:26check
13:280.1 seconds
13:30linear and it will be for 10 times
13:34and then we will add the keyframes
13:40here we will add zero percent and at
13:42zero percent it will be
13:44transform
13:46translate X
13:480 so there will be no movement let's
13:51duplicate it
13:53and here we will add minus 2 pixel it
13:56will go left then it will come back to
13:58the 0 then it will go right by 2 pixel
14:02and again 0 it will be
14:0525 percent
14:08this will be 50 this is 75 percent and
14:11this is 100 percent
14:14like this and now we have to apply this
14:17error class name when there is an error
14:20so let's come back and here we are
14:22adding if condition so we will add the
14:24else
14:26and in this else we have to add that
14:28class name so write
14:30QR
14:33text Dot class list
14:36dot add
14:38it will add this class name
14:40error now we are adding this class name
14:43but this class name should be removed
14:46after few seconds so here it will add
14:49set timeout
14:53it will be for
14:561000 milliseconds that is once again
14:58and in this one
15:00let's add this one
15:02and write remove so it will remove the
15:05class name after one second
15:08so if it is greater than 0 it means if
15:12the input field has some value it will
15:14run this code and if the input field has
15:17no value then it will add this error
15:20class name and this error class name
15:21will add this animation that will move
15:24left by 2 pixel and right by 2 pixel for
15:2610 times now let's see this animation if
15:30I click on this button you can see this
15:33input field is checking let's click
15:35again you can see it is working and if
15:38we write any URL here we will write
15:41google.com
15:43and click on this generate QR code it
15:46will display this QR code now you just
15:49scan this QR code from your mobile and
15:51let me know in the comment section does
15:53it work or not so I hope this video will
15:55be helpful for you if you have any
15:56question you can ask me in the comment
15:58section please like and share this video
16:00and also subscribe my channel AJ
16:01tutorials to watch more videos like this
16:03one thank you so much for watching this
16:05video

About this transcript

This page contains the full transcript of How To Make QR Code Generator Website Using HTML CSS And JavaScript by GreatStack, generated from the public captions YouTube serves with the video. The transcript has 2,373 words across 359 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.