Custom Range Slider using HTML CSS & JavaScript

Custom Range Slider using HTML CSS & JavaScript

Custom Range Slider using HTML CSS & JavaScript

You will learn how to build a Custom Range Slider using HTML CSS and JavaScript. Custom Range Slider We see it in different types of e-commerce websites or different types of business websites. This type of HTML range slider is used to select a specific value in the slider. 

This is a kind of input function of HTML. HTML has many types of inputs like text, password, file, slider, etc. This type of Custom Range Slider has a minimum and maximum value. The user can select any one of those values.

This type of range slider with min and max values is very important for an eCommerce site. I have used animation in this Custom Range Slider. The button that changes the value is designed with CSS. Emojis are used instead of buttons.

How to Create Custom Range Slider with HTML CSS

The emoji in the slider can rotate 360 degrees. The emoji will be at 0 degrees at the slider minimum value. It will rotate when you change the position of the emoji. If you are a beginner then this project (Custom Range Slider using HTML CSS) is very important for you.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

First, we created the basic structure of the slider using HTML. Then JavaScript has been used to activate this Custom Range Slider. 

This slider can be used in addition to JavaScript. However, JavaScript is important for activating the display. The value of the display will change when you change the position of the button on the slider.

To make this custom range slider HTML CSS you need to have a basic idea about HTML CSS. I have given a demo that will help you to know more about this custom range slider.

Step 1: Basic structure of Custom Range Slider (more…)

Continue ReadingCustom Range Slider using HTML CSS & JavaScript
Show and Hide Password Using jQuery and CSS

Show and Hide Password Using jQuery and CSS

Show and Hide Password Using jQuery and CSS

Show and Hide Password A JavaScript project helps to see and hide passwords in the input field. This article will help you to know how to show and hide passwords using jQuery. When we input a password into an input box, it appears as a bullet. As a result, those passwords can be easily protected from hackers. 

The “Show and Hide Password” option is very important in case the user wants to see the password. This will allow the user to easily see the password in the input field.

 When we use type = “password” in an input field, the characters input in that input box will appear as bullets. When type = “text” of input is used then the passwords will be converted to text and we will see.

There is a small button in the input box that can be clicked to see the password. In general, input type = “password”. Type = “text” of the input will be converted when that button is clicked.

How to Show and Hide Password Using jQuery

This article will help you to know how to create password Show and Hide using JQuery. Very little JQuery has been used here. JQuery is an external JavaScript library. I took the help of HTML CSS JavaScript to create this project. 

First, we created and designed the input field using HTML and CSS. Then he implemented it with the help of Jquery. First, we created a box on the webpage on which we created an area for input. There is a small button in the input box that will help to show and hide the password.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

Hope the above demo has helped you to know how to create this JavaScript Show and Hide Password project. As I said before, I took the help of Jquery to make this project. So you must include the JQuery CDN link in your HTML file.

Step 1: Basic structure of Show and Hide Password

The basic design of this password input box is created using the following HTML and CSS codes. Here I first made a box on the webpage using the background color green. 

I used white as the background color of the box and width: 320px. Along with this, a shadow has been used around the box which enhances the beauty.

<div class=”input__item”>
</div>
body {
  background: rgb(41, 140, 140);
}
* {
  box-sizing: border-box;
}
.input__item {
  background: #fff;
  box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.3);
  margin: 140px auto;
  padding: 1rem;
  width: 320px;
}
Basic structure of Show and Hide Password

Step 2: Create a place to input the password (more…)

Continue ReadingShow and Hide Password Using jQuery and CSS
3D Cube Image Slider using HTML & CSS

3D Cube Image Slider using HTML & CSS (2023 Update)

3D Cube Image Slider using HTML & CSS

Image Slider You may have seen a lot but this 3D Cube Image Slider will attract you a lot more. This CSS 3D Cube Image Slider is in the shape of a cube around which the image can be seen.

 It continues to rotate at a 360-degree angle along the Axis. As a result, every now and then we see each image. Four images have been used on each side of the cube. This slider will take 16 seconds to rotate 360 ​​along the x-axis.

CSS 3D Image Slider

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

We can see each side of the cube for four seconds. Earlier I shared with you the design of many more types of 3D Cube Image Slider. Some of these are image slider manuals and some are automatic.

Step 1: Image slider’s background 

I have created the background of this 3D image slider with the help of HTML and CSS code below. Since it is cute, both width and height are equal. Here width and height 240px is used and background blue is used.

<div id = “cube-container”>
</div>
#cube-container {
    width: 240px;
    height: 240px;
    margin: 80px auto;
    perspective: 800px;
    background: blue;
}
Image slider's background

Step 2: Add images to the 3D slider (more…)

Continue Reading3D Cube Image Slider using HTML & CSS (2023 Update)
simple responsive footer design

Responsive Footer Design using HTML & CSS

Responsive Footer Design using HTML & CSS

In this article, you will learn how to create a Responsive Footer Design using HTML and CSS. Earlier I shared many more types of HTML footer tutorials with you. Footer is one of the most important parts of any website. The beauty of a website depends a lot on the footer design.

There are many types of Responsive Footer. Some websites use a simple footer that contains some basic information and some links. Some websites use modern footer designs which include many types of information, links, social icons, subscribe forms, etc.

It is made fully responsive so that it can be easily used on any device. CSS’s Flexbox has been used to make it responsive. With the help of Flexbox, no separate CSS code had to be added to make it responsive.

Responsive Footer using HTML and CSS

To create this project (simple responsive footer HTML CSS) you need to have a basic idea about HTML and CSS. Below I have shared step-by-step tutorials and provided the necessary source code.

 If you only want the source code, you can use the download button at the bottom of the article.

Step 1: The basic structure of footer design

The basic structure of this footer design has been created using the following HTML and CSS codes. This structure will contain all the information such as text, social icons, links, newsletters, etc.

<footer>
  <div class=”row primary”>
 
  </div>
</footer>

Background-color light black is used here. Here width: 100% and min-height: 100px are used. Its height will depend on the amount of content. 

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
}
footer {
  background-color: #121315;
  color: #a7a7a7;
  font-size: 16px;
min-height:100px;
width:100%;
}
footer * {
  font-family: “Poppins”, sans-serif;
  box-sizing: border-box;
  border: none;
  outline: none;
}

This footer area is divided into 4 columns using the following CSS codes. We call this column sharing method Flexbox.

.row {
  padding: 1em 1em;
}
.row.primary {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  align-items: stretch;
}
The basic structure of footer design

Step 2: Add information to Responsive Footer Design (more…)

Continue ReadingResponsive Footer Design using HTML & CSS
javascript height convater app

Height Converter App using JavaScript – Free Source Code

Height Converter App using JavaScript

In this article, you will learn how to create a Height Converter App using JavaScript. JavaScript Height Converter will help to convert the number of feet and inches to cm.

Here, if you input your height in feet and inches, you can see how many cm it will be. This is a simple JavaScript project that will help you learn the basics of JavaScript. I have created many more types of JavaScript projects before. Like the others, I hope you enjoy this project.

There are two inputs here. The first can be input in feet and the second in inches. It also has a display in which all the calculations can be seen. I took the help of HTML CSS and JavaScript to make this Height Converter App. HTML has designed the basics of CSS and JavaScript has made it work.

JavaScript Height Converter App

Below is a step-by-step tutorial on how I created this Height Converter project. First I made a box in which I put all the information. I have given a heading on the top of the box which will basically help to enhance the beauty. Then there is a display in which the calculated results can be seen.

 Below are two input spaces. There is a button at the end of all the clicks on which the calculation can be seen in the display.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

First, you create an HTML and CSS file then follow the tutorials below. Above I have given a demo which will help you to know how it works.

Step 1: Basic structure of Height Converter

We have created the basic structure of this height converter application using the following HTML and CSS code. This structure is basically a box containing all the information.

The background color of the web page is blue and the background color of the box is white. Box width: 450px and height: 530px.

<form action=”” id=”calculator”>
</form>
body{
    background: #076fde;
    font-family: sans-serif;
}
form{
    margin: 50px auto;
    width: 450px;
    height: 530px;
    background-color: white;
}
Basic structure of Height Converter

Step 2: Add a heading

Now a heading has been used in this box. This will basically help to enhance the beauty. The background color of the heading is blue and the text color is white. Font-size: 28px helped to increase the size a bit.

<h1>Height Converter</h1>
h1{
    text-align: center;
    color: white;
    background: #033d67;
    font-size: 28px;
    padding: 5px;
}
Add a heading

Step 3: Create a display

Now we have created a display in which calculations can be seen. All the calculations can be seen in this display when you add the information in the input box. Display width: 80%, height: 100px and box-shadow are used to understand the size.

<div id=”results”></div>
#results{
    color: #064999;
    text-align: center;
    width: 80%;
    height: 100px;
    margin: 10% auto;
    box-shadow: 0 0 20px rgba(0,139,253,0.3);
    font-size: 2.5em;
}
Create a display

Step 4: Create a box to input the height (more…)

Continue ReadingHeight Converter App using JavaScript – Free Source Code
Simple Weather App using JavaScript

Simple Weather App using JavaScript – Free Source Code

JavaScript Weather App

In this article, you will learn how to create a Simple Weather App using HTML CSS, and JavaScript. JavaScript Weather App is a great project that helps to find out the weather of any location.

In this project made here, you will be able to know the temperature, wind speed, sky condition, etc. First I created a box that contains an input box. If you input the name of any city in the input box, you will get all the information.

You will see all the information in another box. With the help of this simple weather application, you can easily know the weather of any city in the world. This design can be easily made with the help of Jquery. However, if you want, you can easily create this application using pure JavaScript.

No doubt you need to have a basic idea about JavaScript. If you know Basic JS then you can make it very easy. Because for beginners I have given a complete step-by-step explanation of why I used that code line.

JavaScript Weather App

 Below is a live demo that will help you learn how this project (JavaScript Weather App) works. Here, after you input the name of any city, click on the submit button below, all the information can be seen in the box below. I have shown in the following tutorial how you can increase the amount of information if you want.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

Hopefully, the demo above has helped you to know how it works (how to make a weather app in HTML). You will find the source code required to create it in the demo box above. There is also a download button at the bottom of the article.

How to Build a Weather App JavaScript

Below is a step-by-step tutorial on how to build this application in this weather. First of all, I created a box using some amount of HTML. Then I created a box to input using the input function of HTML. 

In this input box, you can input the name of any city. Then I have created the submit button which can be clicked to see all the information. All the information shown here will be collected with the help of the API link.

The information will be collected first with the help of the JavaScript fetch method. Then with the help of innerHTML all those information has been arranged to be displayed on the web page. First I arranged to show a small heading in the information box. Where you can find the name of the city you searched for. 

Then all the other information in the box like sky condition, temperature, wind speed, etc. can be seen. First, you create an HTML CSS file. Then follow the step-by-step tutorial below. I have shared a video for your needs which will help you to know better.

Step 1: Basic structure of the Weather App

The basic structure of this Weather App has been created using the following HTML and CSS code. This structure will contain all the information. The width of this area: 410px and margin: 50px auto has been used to keep it in the middle.

<div class=”container-fluid”>
  <section class=”main”>
  </section>
</div>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #448aff;
}
.container-fluid{
 width: 410px;
 margin: 50px auto;
 padding: 10px;
}

Step 2: Create a place to input the city name (more…)

Continue ReadingSimple Weather App using JavaScript – Free Source Code
How to Create Stopwatch using HTML CSS JavaScript

How to Create Stopwatch using HTML CSS JavaScript

JavaScript Stopwatch

Here, You will learn how to create a Stopwatch using JavaScript. JavaScript Stopwatch is a great project that will help beginners to learn more about JavaScript.

Earlier I shared with you how to make a simple stopwatch. We use a stopwatch for various purposes. Which helps us to run the countdown for a certain period of time. But there is a difference between a countdown timer and a stopwatch. 

The countdown timer cannot be turned off when you wish. However, you can turn this stopwatch on and off whenever you want. 

JavaScript Stopwatch

Here’s the basic structure I made a box and made three small displays in it. Counted time can be seen in this display. There are also two buttons that will help turn the stopwatch on and off.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

Hopefully, the demo above has helped you to get a live preview of the javascript time stopwatch. You will find the source code required for making this simple javascript stopwatch at the bottom of the article. However, there are many beginners who do not understand the code. I have shared step-by-step tutorials for them.

However, there is a problem with this design, you can not restart here. Because I made it so easy. You can see this design if you want to add a restart button.

How to Create a Stopwatch in JavaScript

Below I have shared a step-by-step tutorial on how to create this JavaScript Stopwatch. For this, you need to have a basic idea about HTML CSS, and JavaScript. First of all, HTML CSS has helped to create its basic structure.

Step 1: Basic structure of stopwatch

I have created a box using the following HTML and CSS code. I will add all the information to this box. The width of this box: 300px and height: 90px have been used. 

Here the background color I used is white and it helped margin: 100px auto to place it in the middle of the webpage.

<div id=”stopwatch”>
</div>
body {
  font-family: arial;
  background: #0776de;
}
#stopwatch {
  width: 300px;
  height: 90px;
  margin: 100px auto;
  background: white;
  color: #333;
  border-radius: 10px;
  padding: 60px 50px 100px;
  text-align: center;
  font-size: 30px;
}
Basic structure of stopwatch

Step 2: 3 countdown viewing boxes (more…)

Continue ReadingHow to Create Stopwatch using HTML CSS JavaScript
JavaScript Gradient Color Generator

Gradient Color Generator using JavaScript (Free Code)

Gradient Color Generator using JavaScript

In this article, you will learn how to create a Gradient Color Generator using JavaScript. JavaScript Gradient Color Generator is a great project for beginners. If you know basic JavaScript, you can easily create such a project. 

We use linear-gradient colors for various purposes. However, it is not always possible to create the perfect color. So this type of project will help you to create beautiful gradients by easily combining different colors with different angles.

With it, you will get all the color codes that you can add directly to the CSS file. Earlier I showed how to make different types of random color generators. But here you can add the color of your choice.

JavaScript Gradient Color Generator

First I made a box at the top of the web page then I made a display. Colors can be seen in its display. Whenever you create a gradient using two colors, that color can be seen in the display. Then I made a box in which the color code can be found.

 Then I created two color input spaces. For this, I have used the input function of HTML. If you know basic HTML then you must know that there are different types of inputs. Color is a kind of input function like password, email, text, file, etc. I have created a space to input two colors here. I have made a select box next to it where there are many angles. 

Below I have shared a step-by-step tutorial on how to create this linear gradient Color Generator. For this, you need to have an idea about basic HTML CSS and JavaScript. HTML CSS has helped to create its basic structure. JavaScript has helped to make it fully functional.

 When you input the color of your choice between the two-color input spaces. Then the colors can be seen in the display by connecting them with each other. You can select the angle of your choice using this select box. According to which angle the two colors will be connected to each other to make Gradient Color.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

You can see the color code in the box. You can copy that code and add it directly to your CSS file.
Hopefully, the demo above has helped you get a live preview of this gradient generator javascript.

How to Make a Color Gradient in Javascript 

We’ve shared a video with the live demo that will help you understand the whole step-by-step.  First, you create an HTML and CSS file.

 Below the article, I have given the source code which you can download directly. But if you are a beginner, you must follow the step-by-step tutorial below.

Step 1: Basic structure of Gradient Generator

We have created the basic structure for creating Gradient generators using this code. The basic structure is a box that contains all the information such as color input, display, and color code.

<div class=”random-color”>
</div>
html {
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat:no-repeat;
}
body {
  color: #035aab;
  text-align: center;
}

Box width: 350px and height: 400px have been used. I have added box-shadow to enhance its beauty.

.random-color{
  width: 350px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
  margin: 50px auto;
  padding: 20px; 
  height: 400px;
}
Make a box as its basic structure

Step 2: Display for Gradient Color viewing (more…)

Continue ReadingGradient Color Generator using JavaScript (Free Code)
Day and Night Mode Toggle using JavaScript

Day and Night Mode Toggle using JavaScript

Day and Night Mode Toggle using JavaScript

In this article, I have shown you how to create Day and Night Mode Toggle using HTML CSS and JavaScript. Earlier I shared with you the design of many more types of CSS Toggle Switch. This is the first time we have created a Day and Night Mode design using toggle design.

Now, different types of websites use dark and light themes. This kind of feature undoubtedly enhances the quality and user satisfaction of the website. Various websites like YouTube, Facebook have introduced such dark mode features. If you want, you can easily create such designs with the help of HTML CSS, and JavaScript.

Day and Night Mode Toggle JavaScript

In the following tutorial, I have shown how to create a dark mode toggle. There is no reason to worry if you are a beginner. Here is a complete step-by-step tutorial for you. Here is an explanation of each code used.

Here JavaScript is just two lines and the rest is a little bit HTML and CSS. If you have an idea about basic HTML CSS and JavaScript then you can easily create a project (Day and Night Mode JavaScript) by following this tutorial.

Below is a demo that will help you learn how it works. Here you will find the required source code.

See the Pen
Day Night Toggle Switch to Changes Background Color by Raj Template (@RajTemplate)
on CodePen.

On the first, I have defined an area that will contain the contents. Then I created the toggle button which will change the dark and light mode. Then I added all the tests using the paragraph below.

Step 1: Basic area of content

I have created an area for this project using the code below. This area cannot be seen because the background color was not used. However, it will contain all the information. The width of this area  500px.

<div class=”all”>
 
</div>
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.all{
  width: 500px;
  margin: 40px auto;
}

Step 2: Create a day-night toggle button (more…)

Continue ReadingDay and Night Mode Toggle using JavaScript