0:00
Hi guys, this is Avinash and you're welcome to another video of Easy Tutorials
0:04
YouTube channel. Today in this video we will talk about the 10 based and simple JavaScript projects that
0:11
you must try to build yourself and you can add these projects in your work portfolio
0:17
So let's check out the first project. In this website you can see here I have added the dark mode and light mode switching
0:26
option on this website. When we are on the light mode, you can see a moon icon over here
0:32
If we click here, on this moon icon, it will turn the website in dark mode
0:37
Now you can see a sun icon. If we will click on this sun icon, it will again turn the website in the light mode
0:47
So this light mode and dark mode switching option is made using JavaScript
0:52
I have already created the detailed video tutorial of each projects that I am displaying in this
0:58
video so you will find all these tutorials playlist link in the video description
1:04
so just go to the description and check out that playlist next check out the
1:08
second project in the second one you can see if I refresh the website
1:13
there is a preloader like this let's refresh the website again you can see a
1:20
preloader first this preloader will display until the website is loading completely after loading the website It will display the actual website In this JavaScript project you will learn to make a preloader for the website
1:36
Let's check the third project in this one we have created a
1:41
Product Gallery as you can see if I click on this image it will display the first one
1:46
Let's click on the second image it will display the second image as a
1:50
large image let's click on the third one Now you can see the third image over here
1:55
Now let's click on the fourth one. It is displaying the fourth image and it is the fifth image
2:01
You can see this type of image gallery on e-commerce website. So this is also made using JavaScript
2:08
You will find its step-by-step tutorial video link in the description. Now let's check the next project
2:16
In this one, I have created this toggle option. You can see if I click on register
2:21
It is opening the registration form, let's click on the login and it will open the login
2:26
form and these forms are sliding. So this sliding and toggle button is made using JavaScript that you can learn in the detailed
2:36
step-by-step video. Link is given in the description. Now let's check the next project
2:42
In this web page you can see if I move cursor from the left side to the right side, the
2:46
background of this image is changing and this transition effect is made using using JavaScript Let check out the next one Here I have created an image gallery and there is an hover effect on each image But if I click on anyone you can see the same image in the center as a pop
3:07
And here is the close button. Let's click here. It will close that pop-up
3:12
Let's click on another image. You can see the another image in the center
3:21
So this is how this image gallery is working and this effect is made using JavaScript
3:29
Let's check out the next project. In this one you can see one drone image and if we move cursor this drone image will move
3:38
This drone image is moving with the mouse movement and it is built using JavaScript
3:44
Let's check out the next project. Here you can see a circular progress ward
3:52
If I refresh the website, you can see it will start from zero and it will go up to the fixed point
4:00
Here I have added 65%. You can add anything else. Let's refresh the website again
4:09
In this circular progress war, we have added the beautiful color, gradient color and some shadow
4:14
that makes this design more attractive. Now let check the next project In this one we have created a slider with the click option and it is a review slider You can see if I click here it will display the another customer review or testimonial
4:35
We can slide it up or down. So this slider is built using the JavaScript and you will find the detailed step-by-step
4:49
video link in the description. Now let's check the next project. Here is the drop-down select box
4:57
Let's click here and it will open the options. If we click on the Facebook, it will select the Facebook here
5:04
Let's click on the next one. It is selecting the YouTube. And you can see there is an icon
5:09
It is also animated. If we click, it will rotate like this
5:15
Let's click again and now it will rotate up. So this select box is also built using JavaScript and you can learn in the detailed video
5:27
where I have explained how to make it step by step. So must check out the playlist link given in the video description and try out all these projects
5:37
So I hope you will enjoy making all these projects by yourself. If you will get any issue, you can ask me in the comment section and you can also contact me on my social media
5:47
All the links are given in the description. Thank you so much for watching this video
