Simple Vertical Navigation Menu Using HTML & CSS

CSS Vertical Navigation Bar

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.

CSS Vertical Navigation Bar

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.

How to Create a Vertical Menu in HTML CSS

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.

Step 1: Basic structure of Vertical Menu

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.

<div class=”card”>
  <div class=”menu”>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ‘Open Sans’, sans-serif;
}
html,
body {
  height: 100vh;
  background-color: #666666;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  position: relative;
}
.menu {
  width: 67px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: 0.5s;
}
Basic structure of Vertical Menu

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.

.menu.active {
  width: 225px;
}

Step 2: Create a button to activate the menu bar (more…)

Continue ReadingSimple Vertical Navigation Menu Using HTML & CSS

Registration Form with JavaScript Validation (Free Code)

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
word-wrap: break-word;

line-height: 2em;}

h3{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;
color:#333131;
font-weight: 520;

-webkit-font-smoothing: antialiased;
}

h2{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;

font-weight: 620;
-webkit-font-smoothing: antialiased;
}

.class {
background:#edf0f2;
font-family: Consolas,Monaco,Lucida Console,monospace;
line-height: 1.65;
word-wrap: break-word;
border-radius: 5px;
color:#001d8f;
font-size:17.1px;
padding-left:10px;
white-space: pre-wrap;}

button.last-btn{
padding:14px 29px;
font-size:17px;
background-color:#0e87f0;
border-radius:6px;
color:white;
font-family: Open Sans,Arial,sans-serif;
border:none;
margin-left:35%;

}

@media only screen and (max-width: 400px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 300px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 600px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 800px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}

@media only screen and (max-width: 400px) {
.copyButton {
width: 45%;
}

Registration Form with JavaScript Validation

Currently, almost all registration forms use JavaScript validation. So in this tutorial, I have shown you how to create JavaScript Registration Form Validation.

Earlier I shared tutorials on creating different types of registration forms and login forms. All those designs were made by HTML and CSS only. But here I have used some JavaScript to make this registration form fully functional. For more quality information follow my blog site ObservePoint.

Basically, some conditions have been added here for your input. According to those conditions, you have to input in the information input box.

Here an error message has been added to each input box. If you input something incorrectly then enter this registration form. Then this error message can be seen.

Registration Form with Validation

Here I have shared a complete step-by-step tutorial and provided complete source code for your work. You can create this JavaScript form validation by copying the code directly if you want.

What I am saying is if you have difficulty understanding then you can follow the demo section below.

 

As you can see, this is a simple registration form with five input boxes and one button. First I created a box on the web page.

See the Pen
Untitled
by Shantanu Jana (@shantanu-jana)
on CodePen.

A shadow has been used around this box and the background color has been white. First of all, there is a heading which is basically for beauty. Then there are the five input boxes.

Since this is a registration form many types of input have been used here. Although you can create many more types of input boxes here if you want.

How to Create Registration Form with Validation

If you just want to create a registration form then you can see my other tutorials. Let’s see how Registration Form with JavaScript Validation can be created.

First I gave a step-by-step tutorial for beginners. Then I gave the button to download the source code.

Step 1: Basic structure of registration form

(more…)

Continue ReadingRegistration Form with JavaScript Validation (Free Code)

Image to PDF Converter using JavaScript & CSS

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
word-wrap: break-word;

line-height: 2em;}

h3{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;
color:#333131;
font-weight: 520;

-webkit-font-smoothing: antialiased;
}

h2{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;

font-weight: 620;
-webkit-font-smoothing: antialiased;
}

.class {
background:#edf0f2;
font-family: Consolas,Monaco,Lucida Console,monospace;
line-height: 1.65;
word-wrap: break-word;
border-radius: 5px;
color:#001d8f;
font-size:17.1px;
padding-left:10px;
white-space: pre-wrap;}

button.last-btn{
padding:14px 29px;
font-size:17px;
background-color:#0e87f0;
border-radius:6px;
color:white;
font-family: Open Sans,Arial,sans-serif;
border:none;
margin-left:35%;

}

@media only screen and (max-width: 400px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 300px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 600px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 800px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}

@media only screen and (max-width: 400px) {
.copyButton {
width: 45%;
}

Image to PDF Converter using JavaScript

This is a simple JavaScript project that can convert images to PDF files. Many times we want to convert a file to a PDF. In that case, you can use some kind of JavaScript Image to PDF Converter. 

Image to pdf converter using javascript function that converts the images format to the pdf format for that we will be using the api for converting image to pdf file.

This design is a simple project where you can select any one image and convert it to a PDF file with just one click. However, no file other than email can be converted to PDF here. HTML, CSS, and JavaScript are used here. I have added different elements using HTML and created an input box to select the image. 

We get different types of input from HTML. One of them is the file. File input will help you to select any file from your device. Here I used accept = “. Png, .jpg, .jpeg” to select only the image in the input. As a result, only certain images can be selected here.

Image to PDF Converter JavaScript

If you have difficulty understanding what I am saying, you can watch the demo below. Here you will find a live preview of this project.

See the Pen
Untitled
by Shantanu Jana (@shantanu-jana)
on CodePen.

 

As you can see, a box has been created on a gradient background. First of all this box has a small display. You can see the selected image in that box. This will let you know which image you are converting to PDF. 

However, the problem here is that you cannot select multiple images at once. A PDF file will be created by an image.

How to Convert Image to pdf using JavaScript

This Image to PDF Converter JavaScript project has two buttons. One button to select the image, the other to convert and download to a PDF file. 

When you click on the upload or select button, you can select any image from the device. When you click on the download button, your image will be converted to PDF and downloaded. It is very easy to build with very little HTML, CSS, and JavaScript.

Step 1: Basic structure of PDF Converter

The basic structure of the project has been created using the following HTML and CSS. First, a gradient background color has been added to the webpage. Then the box is created.

<div class=”container”>
 
</div>
*,
*:after,
*:before{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
 
body{
 font-family: arial;
 font-size: 16px;
 margin: 0;
 background: linear-gradient(133deg, #4abeb2, #3c57d2);
 color: #000;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
}
 
.container{
  background: white;
  width: 450px;
  padding: 30px;
  border-radius: 5px;
}
Basic structure of PDF Converter

Step 2: Image preview box

Now an area has been created in which to view the image. This means that the preview of the image that you will select to convert to PDF can be seen here. This box uses max-width: 400px and min-height: 200px.

<img id=”showImg” src=”images/img.png”>
#showImg{
 display: block;
 margin: 0 auto;
 max-width: 400px;
 min-height: 200px;
 background: #174353;
 border-radius: 5px;
}
Image preview box

Step 3: Button of Image to PDF Converter

(more…)

Continue ReadingImage to PDF Converter using JavaScript & CSS

Simple Weight Converter using JavaScript (Code + Demo)

Weight Converter using JavaScript

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.

JavaScript Weight Converter

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.

How to Create a Weight Converter in JavaScript

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.

Step 1: HTML code of Weight Converter

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.

<div class=”container”>
  <form action=””>
     <h1>Weight Convertor</h1>
     <label for=”weight-converter”>KG : </label>
     <input type=”text” step=”5″ placeholder=”Enter your weight in Kg”/>
     <input type=”submit” id=”enter-btn” value=”Enter”>
     <p>Your weight in POUNDS is : <span id=”convertedWeight”></span></p>
  </form>
</div>

Step 2: Basic Design of Weight Converter

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.

* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
text-align: center;
font-family: “Poppins”, sans-serif;
background: #0462a4;
}
HTML code of Weight Converter

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.

.container {
background: #ede574; 
border-radius: 7px;
width: 400px;
padding: 0.5rem 2rem 2rem 2rem;
box-shadow: 0px 0px 10px #bebebe;
}
Basic Design of Weight Converter

Step 3: Design input boxes and buttons (more…)

Continue ReadingSimple Weight Converter using JavaScript (Code + Demo)

Animated Eyes Follow Mouse Cursor in JavaScript

JavaScript Eyes Follow Mouse Effect

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.

JavaScript Eyes Follow Mouse Effect

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.

Animated Eyes Follow Mouse Cursor in JavaScript

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.

Step 1: Basic structure of Eyes Follow

I have created more structures and eyes for this project using the following HTML code.

<div class=”container”>
    <div class=”eyes”></div>
    <div class=”eyes”></div>
</div>

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.

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: “Bebas Neue”, cursive;
background: #0c3b5a;  
 }
Basic structure of Eyes Follow

Step 2: Design the Eyes Follow Cursor (more…)

Continue ReadingAnimated Eyes Follow Mouse Cursor in JavaScript

How to Create a Digital Clock in JavaScript

JavaScript Digital Clock

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.

JavaScript Digital Clock

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.

Create a digital clock using Javascript

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.

1: Basic structure of the clock

First, a box is created using the following HTML CSS. In this box, you can see all the information related to time.

<div class=”container”>
</div>

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.

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
background-color: #08798c;
font-family: sans-serif;
}
.container {
border-radius: 10px;
background: #f7f9f7;
box-shadow: 0px 0px 20px #282d28;
padding: 2rem 3rem 3rem 3rem;
color: #191414;
cursor: default;
}
Basic structure of the clock

2: Create time viewing area (more…)

Continue ReadingHow to Create a Digital Clock in JavaScript