Price Range Slider Using HTML CSS and JavaScript

#1 Simple and Easy Price Range Slider Using HTML,CSS & JavaScript

Price Range Slider HTML CSS JavaScript

If you want to create JavaScript Price Range Slider then this tutorial will help you. Price Range Slider is used in different places to determine the minimum and maximum value of a price.

You can create this kind of price range slider javascript in many ways. However, the design that I have shared here is absolutely simple. This range slider is made with basic HTML, CSS, and javascript. There are two handles that allow you to set the minimum and maximum values.

Price Range Slider HTML CSS JavaScript

Price range slider HTML Search filters for different types of eCommerce websites. Which will show the result to the user depending on his price value.

I have fully explained the code used to make the Price Range Slider. If you are absolutely Beginner then there is no reason to worry.

Although it is not fully functional, only the basic design has been made here. You can watch the demo below to know how this Price Range Slider HTML CSS works.

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

Hopefully, the preview above has completely helped you to know how it works. Here is the complete source code for enhancing this design. First, a box has been created on the webpage where all the information can be found.

There is a heading, there is a result box in which the price minimum maximum value can be seen, then there is a range slider.

I have taken the help of HTML, CSS, and JavaScript to create this Javascript Price Range Slider. First I have added all the information using HTML. I designed it using CSS. Finally, I have implemented this Price Range Slider using JavaScript.

Price Range Slider HTML Code

The following HTML codes have been used to add all the information in this slider. First the basic structure, then a text, then the value view of the range slider, and a range slider with two handles. Copy the following Html code and add it to your Html file.

<div class="slider">
     
   <p>Price Range</p>
     
   <div class="range-slider">
          <span class="rangeValues"></span>
          <input value="1000" min="1000" max="50000" step="500" type="range">
          <input value="50000" min="1000" max="50000" step="500" type="range">
        
   </div>
</div>

Design Price Range Slide using CSS (more…)

Continue Reading#1 Simple and Easy Price Range Slider Using HTML,CSS & JavaScript
QR Code Generator Using JavaScript & CSS

QR Code Generator Using JavaScript & CSS (Free Code)

In this article, you will learn how to create a QR code generator using JavaScript.
If you know basic JavaScript, you can easily create a simple QR code generator Javascript. You can follow our other site Tech Virtual to create more other types of JavaScript QR Code Generator.

QR code is a type of matrix barcode that is currently used in almost all digital payments and products. In fact, it is a machine-readable optical label that contains some special information about the product.

QR Code Generator Using JavaScript

I have shared many more types of JavaScript projects before. This JavaScript QR code generator is fully operational.

JavaScript QR Code Generator

There are many such QRcode js examples on the internet. But here I have shared the complete tutorial and tried to explain to you step-by-step how to create a QR code generator using JavaScript.

This QR code generator JavaScript has been created in a very simple way. Here you can create a matrix barcode of any text or link.

If you do not understand what I am saying and would like to get a live demo of this project then use the demo below.

See the Pen
JavaScript QR Code Generator by Shantanu Jana (@shantanu-jana)
on CodePen.

Hopefully, the preview above has helped you to understand how this QR code generator JavaScript works.

It is fully functional which means it will work perfectly when you scan it using QR scanner.

Many people think that it is very difficult to create this kind of pure javascript QR code generator. In fact, it is not. You can easily create if you know basic HTML CSS and javascript.

How to make a QR Code generator in JavaScript

First I added all the information using HTML. Then designed a QR Code Generator using JavaScript. JavaScript and qrcode.js CDN are used last.

There is a place input in which you can input any text or link. Then there is a small display in which the QR Code can be seen.

Now if you want to create this QR code generator javascript then follow the tutorial below.

Step 1: Basic structure of QR code Generator (more…)

Continue ReadingQR Code Generator Using JavaScript & CSS (Free Code)
Simple Vertical Navigation Menu Using HTML & CSS

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

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)
Responsive Navigation Menu Bar in HTML and CSS

Responsive Navigation Menu Bar in HTML and CSS

Responsive Navigation Menu CSS

The responsive Navigation Menu Bar plays an important role in any website. When we open a website, we first see the Navigation Bar.

You may have seen many types of navbar designs but the design I have shared here is quite simple.

In this tutorial, I have shared a tutorial on the Simple Responsive Menu Bar. This menu I created with HTML CSS and a small amount of JavaScript.

It is fully responsive so you can use it directly in any project. Here I have basically shared a step-by-step tutorial of this navigation bar with the logo. There is no need to worry if you are a beginner. Here you will find all the source code and live previews for creating this responsive navigation menu CSS.

Responsive Navigation Menu CSS

With each step, I have shown possible results with screenshots. Which will help any beginner to know how to create a CSS menu bar. Use the demo section below for a live preview.

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

This design includes a logo and some menu items. When you open it in the case of a responsive device, the menu item will be hidden and a button will appear.

When you click on that button, you will see all the menus. @Media of CSS has been used to make it responsive. I have used a small amount of jQuery to make the menu button functional.

I used text to create the logo here. You can use the image if you want. One of the menu items in this Responsive Navigation Bar uses a kind of hover effect.

How to Create Navigation Menu bar in HTML

Now if you want to create this Responsive Navigation Bar you can do it in two ways. But if you only want the source code then use the button below the article. And if you are a beginner, then follow the steps below.

Create a menu bar area

The basic structure of this menu bar has been created using the following HTML and CSS. Basic Area in which all the menu items and logos can be seen.

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

The following CSS has been used to add background color to the web page and some basic designs.

*,*:after,*:before{
  box-sizing: border-box;
}
body {
  background: #e4e4e4 url(../images/banner.jpg) center bottom;
  background-size: cover;
  min-height: 100vh;
  font-family:arial;
  font-size: 16px;
  margin: 0;
}
a{
  text-decoration: none;
}

I have designed the background of the menu bar with these codes. The blue color is used in the background here.

width: 100%, max-width: 1100px and height depending on padding: 20px 10px. Left: 0, top: 0 is used to place this menu bar at the top of the webpage.

#header{
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #023957;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.container{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
Create a menu bar area

Add logo to Navigation Bar (more…)

Continue ReadingResponsive Navigation Menu Bar in HTML and CSS