How to Create a Countdown Timer with JavaScript
JavaScript countdown timers can be built in a variety of ways. However, the design that I have shown in this tutorial is very advanced. This countdown timer is created by HTML…
JavaScript countdown timers can be built in a variety of ways. However, the design that I have shown in this tutorial is very advanced. This countdown timer is created by HTML…
Image Magnifier plays an important role in any website. Image Magnifier JavaScript can be used to zoom an image. Most developers use jquery to create image magnifier glasses. In this…
This is a simple JavaScript tutorial that will teach you how to create a JavaScript Virtual Keyboard. The virtual keyboard is a kind of on-screen input method. If you're using…
Do you want to create a Vertical Navigation Menu using HTML and CSS?
This tutorial will help you to know how to create a vertical navigation bar. Although you will find many tutorials on this topic on the Internet. However, in this article, I have given you some special information.
Here I will discuss with you what can be the problem while creating a CSS Vertical Navigation. With this, I have shown step by step how I have created this CSS Vertical menu. Earlier I shared a tutorial on creating horizontal navigation bar CSS.
This is just a demo so here are just four menu items I added. Although you can add a lot of menu items here according to your needs.
If you don’t understand what I said then follow the demo below. Here you will find out how it works and get all the source code to make it.
See the Pen
Vertical Navigation Menu by Shantanu Jana (@shantanu-jana)
on CodePen.
In the case of websites, we see the menu bar on the top the most. However, the Vertical Menu bar or side menu bar is currently being used extensively. Many websites have a Vertical menu bar along with a top navigation bar.
I make this design in a very simple way so only HTML and CSS are used here. But here I have used only 2 lines of JavaScript.
When you first open this Side Navigation Bar, you can see only a few menu item icons. But no test can be found. The tests will be completely hidden.
Under normal conditions, the width of the Vertical Navigation Menu will be: 67px. When you click on the arrow sign here, the length of the menubar will increase to width: 225px. As a result, the text of the menu item can be seen.
This Responsive Side Navigation Bar is basically for those who are brand new and trying to create a Vertical menu bar for the first time.
The basic structure of this menu bar has been created using the following HTML and CSS code. As I said before, under normal circumstances the width of this menu bar will be: 67px. Here height: 300px is used. Although the height you can change according to your needs.
After activating this Simple Vertical Navigation Menu, the width of the menu bar has been added here. Although I did the work of activating later.
This is a simple JavaScript project that will detect user browsers. Many projects require the user to know the browser's information. In that case, you can use this kind of…
In this article, I have shown you how to create a weight converter using JavaScript. JavaScript Weight Converter will help you to convert your weight to any other unit.
I have already shown you how to make a Height Converter. This project has been created with absolutely simple JavaScript. Here, if you input your weight in kg, it will be converted into pounds. Here I have arranged to convert from kg to pound. But you can convert any unit if you want. I have shown below how to do it.
There is an input box here. You can input weight in that box. There is a button, when you click on the button you will see the weight in pounds.
Although I made this JavaScript Weight Converter here in a pound unit. You can use any other unit here.
Here is a step-by-step tutorial, with the required source code and live preview. As a result, you will not have any difficulty. But yes you need to have some idea about HTML, CSS, and JavaScript.
For your convenience, I have given a preview below. This will help you to know how Weight Converter JavaScript works.
See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.
Hope you found out by looking at the preview above. First created a small box on the webpage. I used yellow as the background and added a white shadow all around.
First, there is a heading, then an input box. In the input box, you will input your weight in kg. Then there is a submit button. At the end of all, there is a display in which the result can be seen.
Now below I have shared a step-by-step tutorial. If you are a beginner, follow these steps. If you want source code, use the download button directly below.
Javascript weight converter information has been added using the following HTML codes. Here’s all the HTML code I’ve put together.
First, a basic structure has been created. Then a heading, two input boxes, and a result viewing area.
Using some of the CSS code below I designed the webpage and added a background color here. The dark blue color is used in the background.
Now the basic structure of this weight converter has been designed. This box is width: 400px, the background color is yellow and a white shadow is used all around.
In this article, you will learn how to create Animated Eyes Follow Mouse. Simple HTML CSS JavaScript is used here. Animation plays an important role in making a webpage attractive. Javascript eyes follow mouse effect has been created here.
Earlier I shared a CSS follow mouse tutorial. But it is a bit different. Two eyes have been made here. Those two eyes will follow your mouse cursor. Here the eye will be in the same place but the eyepoint will change position.
To create this Eyes Follow Mouse Cursor design, some CSS and some JavaScript have been used. But to design it, you must have some idea about JavaScript. This type of animation can be used with any type of web element or logo.
I have given a demo below for your convenience. Here you will see a live preview of this Animated Eyes Follow. From here you can copy all the code directly.
See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.
Two circles have been drawn on the dense blue webpage. That circle is designed in such a way that it looks like an eye.
Small circles have been created in those circles which will act as eyeballs. This eyeball will follow your mouse cursor when you change the position of the mouse cursor.
In this tutorial, I have shared step by step tutorial and source code. If you only want the source code, you can use the download button below the article. But if you are a beginner, you must follow the step-by-step tutorial below.
I have created more structures and eyes for this project using the following HTML code.
Now I have designed the web page using some amount of CSS. Here are some simple designs and use a deep blue background color on the web page.
If you want to create a Simple Digital Clock using JavaScript then this tutorial is for you. There are many types of digital clock tutorials available on the Internet. However, this design is made in the easiest way.
I used only three lines of JavaScript to create this simple digital clock. I have already created many types of JavaScript clocks. If you want to create an advanced and stylish digital clock then you can search this blog.
However, there are many beginners who want a very simple design. This simple JavaScript digital clock tutorial would be perfect for them. Here I have given step by step tutorial and required source code.
If you want to know how Working Digital Clockworks then be sure to follow the demo section below. Here you will find the required preview and source code.
See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.
As you can see, I have created a box on top of a web page. In this box, first, you can see the time, then you can see a text. During this time you will see the time in hours, minutes, and seconds.
It has AM and PM options. I have already created a digital clock with the date. If you need to show the date with your time, you can see that design.
Some HTML, some CSS, and 3-line JavaScript have been used for designing. The current time has been taken from your device using the newDate () method. newDate () is a JavaScript method that will take the current time from your device.
First, a box is created using the following HTML CSS. In this box, you can see all the information related to time.
I designed the webpage with the code below and then designed the box. This box has no specific width height. This will determine the amount of content and the size of the padding.