How to Make a Responsive Image Slider in HTML CSS

How to Make a Responsive Image Slider in HTML CSS

How to Make a Responsive Image Slider in HTML CSS

If you want to create a Responsive Image Slider then this tutorial will help you completely. Here I have shared a tutorial on creating a Simple Responsive Image Slider HTML CSS and provided the necessary source code.

Earlier I created different types of image sliders. However, this slider has been made fully responsive. This allows you to use it directly for any purpose.

Image slider is used to organize a large number of images on different websites. There are different types of image sliders. In some sliders, the image is changed automatically, in some cases the image has to be changed manually.

There are two buttons for manually changing the image. Although I have previously shared various types of automatic and 3D image sliders in this tutorial.

Responsive Image Slider

Below I have given a preview that will help you to know how it works. Here you will find the complete source code. Although I have been given many more options to get the source code. 

Below the article, you will find a box to copy the source code. There is also a button to download the code.

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

As you can see above, a box has been created on a web page. In it, I have added all the necessary images. Here I have added 4 images. If you want you can increase the number of images of your choice. 

There are two buttons for manually changing the image. Here a border is used around the image and shadows are used to enhance the beauty. Importantly, highlights or indicators have been used here. That is, there are a few small points that will indicate how many numbered images have been opened. 

How to Create Responsive Image Slider 

This design is made with HTML CSS and JavaScript. First added various information and images using HTML. Then I designed it using CSS and made it Responsive. Finally, it is implemented using JavaScript.

I have used four images here so I have used four indicators. The first indicator will be highlighted when the first image is open. And when the second image opens, the second point will be highlighted.

If you want to create this Responsive Image Slider, you need to have a basic idea about HTML CSS, and JavaScript.

Step 1: Basic structure of image slider

The basic structure of Responsive Image Slider has been created first using the following HTML and CSS codes. All images in this area can be seen. 

Slider width: 80% and max-width: 600px used. It also has a 10-pixel white border and box-shadow to enhance its beauty.

<div id=”slider”>
</div>
body{
 background:#e6e6e6;
}
#slider{
 width:80%;
 margin:0px auto;
 margin-top: 100px;
 max-width: 600px;
 position:relative;
 overflow:hidden;
 border: 10px solid white;
 box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
}
Basic structure of image slider

Step 2: Add image to the slider (more…)

Continue ReadingHow to Make a Responsive Image Slider in HTML CSS
How to Create JavaScript Password Generator

How to Create JavaScript Password Generator (Free Code)

How to Create JavaScript Password Generator

If you are a beginner and want to create a JavaScript Password Generator then this tutorial is for you. Here I have shown step-by-step and shared complete information on how to create a password generator using JavaScript. 

JavaScript Password Generator will help you create the password of your choice. Earlier I showed you how to create JavaScript Random Password Generator. However, this design will give you the option to create a password manually.

This simple password generator will help you create the password you want. There are different options and controls. This will allow you to create the password you need.

JavaScript Password Generator

You need JavaScript enabled to view it to make it. Here I have used HTML CSS and some amount of JavaScript.

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

First, a box was created on the webpage. In that box, I first created a display where the generated passwords can be seen. 

Then an input box is created where you can control the width of the password. This means that the number of characters you want to create the password can be controlled by this slider.

Then there are the four smaller boxes. This select box created by the checkbox will help you to further customize your password. There is a button at the end of which clicks on which the password is generated and can be seen in the display.

How to create Password Generator using JavaScript

If you want to create this Password Generator JavaScript then you must have a basic idea about HTML, CSS, and javascript. 

But if you just want the source code then follow the part below the article. But if you are a beginner then follow the tutorial below.

This JavaScript Password Generator has a copy button. When you click on the Generate button, the password will be copied automatically.

1. Make a box on the webpage

I first created an area using the following HTML and CSS codes. In this area, you can see all the information of Password Generator with JavaScript.

<div id=”password-generator”>
</div>

The webpage has been designed using the following code. Here the background color of the webpage is blue.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  text-align: center;
  height: 100vh;
  background: #0976d5;
}
webpage has been designed

I have used the background color of this box as white and width: 500px. Box shadows have been used to enhance beauty.

#password-generator {
  padding: 2rem;
  margin: 0 auto;
  width: 500px;
  border-radius: 3px;
  box-shadow: 0 0 2px #1f1f1f;
  border: 3px solid #d5d4ff;
  position: relative;
  background: white;
  white-space: nowrap;
}
Make a box on the webpage

2. Create a password viewing display (more…)

Continue ReadingHow to Create JavaScript Password Generator (Free Code)
Number Guessing Game Using JavaScript

Number Guessing Game Using JavaScript (Free Code)

Number Guessing Game Using JavaScript

JavaScript Number Guessing Game is a simple JavaScript game for beginners. I have shared many more types of JavaScript game tutorials with you before. However, this design is quite simple. 

This Number Guessing Game JavaScript will basically help you to know how to create JavaScript games. The number guessing game project will help you understand how accurate your input number is. That means there is a number limit here. 

You have to guess any one of those numbers. If your guess number is equal to the number guessed by the game then you will win.

The javascript guessing game is a simple project that will help you to learn more about javascript. If you want to make a JavaScript game for the first time then you can try to make this Number Guessing Game in JavaScript.

Number Guessing Game JavaScript

Below is a demo that will help you get a preview of this number guessing game HTML. Here I have shared step-by-step tutorials and source code. Use the button below the article if you want to download the source code.

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

Has created a box on a web page as you can see above. In which a heading is used first then an input space. You will input the number you guessed in that input space.

Then there is a button that will submit the number you guessed. Then there is a display where you can see the results of this game. Below all is a heading that will help you to know if your input number is correct.

I did not use very complex JavaScript to create this Number Guessing Game JavaScript. If you know something about javascript then you can easily create this number guessing game HTML.

How To Make Number Guessing Game JavaScript

Hopefully watching the demo above has aroused your interest in making this project. To build it you must have a basic idea of ​​HTML CSS JavaScript. 

But if you are a beginner, there is no reason to worry. Here I have shared step-by-step tutorials and shown possible results with pictures after each step.

Step 1: Basic structure of Guessing Game

A basic structure of this project has been created using the following HTML and CSS codes. Basically, I made a box on the web page. 

Here we have used blue as the background color of the webpage and white as the background color of the box. Box min-width: 350px, max-width: 400px used.

<div class=”container”>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: rgb(23, 99, 196);
}
.container{
  position: absolute;
  width: 50%;
  min-width: 350px;
  max-width: 400px;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  padding: 50px 10px;
  border-radius: 5px;
  display: grid;
  justify-items: center;
  font-family: ‘Poppins’,sans-serif;
}
Basic structure of Guessing Game

Step 2: Add a heading in the box (more…)

Continue ReadingNumber Guessing Game Using JavaScript (Free Code)
Create Copy to Clipboard using JavaScript

Create Copy to Clipboard using JavaScript (Just 2 Lines)

Create Copy to Clipboard using JavaScript

In this tutorial, you will learn how to create a javascript copy to clipboard. Here I have given step by step tutorial and source code for beginners on how to create copy to clipboard javascript.

Earlier I shared with you many more types of javascript click to copy to clipboard tutorials. But it is much easier than others.

Javascript to copy to clipboard is one of the most important elements for a website. It helps to copy the information in a box. Here I have used textarea to create the box. Although you can use input. In this Textarea, you can copy everything you input with the help of a copy button.

JavaScript Copy to Clipboard

There are two ways to input text in this text area. You can add text to textarea by default. You can also type here and copy that text.

If you want to know how I made this javascript copy to clipboard then keep following this tutorial. Below I have given a demo that will help you to know how I created copy to clipboard javascript. Here you will find the required source code and live preview.

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

As you can see above, I used blue as the background color of a web page. Made a box on top of it. The background color of this box is white. 

First of all, we have created an input space in the box. In that Textarea, you can input the information of your choice.

How To Copy to Clipboard using JavaScript

Then created a button. If you click on the copy button, the information in that input box will be copied. I have done many tutorials on javascript copy to clipboard with you before.

Below I have shown the step-by-step tutorial and the possible results of each step with pictures. If you only have source code then you can use the download button at the bottom of the article.

Step 1: The basic structure of the copy box

A box has been created on the web page using the following HTML and CSS codes. Which will serve as the basic structure of the project i.e. will contain all the information. 

The width of this box is 350px and the background color white has been used.

<div class=”container”>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}
body {
background: rgb(6, 118, 185);
text-align: center;
align-items: center;
justify-content: center;
}
.container {
width: 350px;
background: white;
margin: 100px auto;
padding: 15px;
border-radius: 4px;
}
The basic structure of the copy box

Step 2: Create input space using Textarea (more…)

Continue ReadingCreate Copy to Clipboard using JavaScript (Just 2 Lines)
Days Between Two Dates Using JavaScript & CSS

Days Between Two Dates Using JavaScript & CSS

Days Between Two Dates Using JavaScript

In this tutorial, you will learn how to create Days Between Two Dates JavaScript. This type of project helps to calculate the distance between two specific dates. A lot of times we have to find the data between two dates in a list. In that case, this project (get days between two dates javascript) will help you completely.

If you want you can calculate your age using this calculator. Although I have already shared many types of JavaScript age calculator tutorials for calculating age. 

The calculated time here can only be seen in the form of days. That is, the number of days between the two dates can be seen here. You will not see any other type of time (hours, minutes, seconds) here.

Days Between Two Dates JavaScript

Below I have given a preview that will help you to know how this project (calculate days between two dates) works. Below you will find all the source codes. But for beginners, I have shared step-by-step tutorials. 

If you are a beginner then follow the tutorial below to make Days Between Two Dates calculator.

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

As you can see above, the background color of a web page is blue. And a box has been made on it. I first used a heading in this box. The background color of this heading is blue and the text color is white. Then there are the two input boxes. 

Those input boxes are mainly for date input (type = “date”). The difference between the two dates will be calculated. We get many types of input functions in HTML. Notable among them are password (type = “password”), text (type = “text”), file (type = “file”), color (type = “color”), etc. 

A type of input with the same date is available. Which will basically help to select a date. Here you can select the date or manually input the date of your choice here.

How to get data between two dates in javascript

Then there is a button that can be clicked to know the difference between these two dates. At the end of all, there is a display in which the results can be seen. This means that when you click on the submit button, you can see the difference between the two dates in the display or box below.

I used only HTML, CSS, and JavaScript to create this Days Between Two Dates project. No jQuery was used here and I gave the necessary explanations for each line.

Step 1: Basic structure of calculator

I have created the basic structure of this project using the following HTML and CSS. The width of this project: 70vw and light blue color has been used in the background.

<div class=”container”>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Rubik”, sans-serif;
}
body {
height: 100vh;
background: rgb(94, 169, 233);
}
.container {
width: 70vw;
max-width: 37.5em;
background-color: #f6f9fa;
padding: 3em 1em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Basic structure of calculator

Step 2: Title of Days Between Two Dates calculator

Now I have added a heading using the following codes. This heading will only help to enhance the beauty. Using margins I determined the position of the heading. The background color is blue and the text color is white.

<div class=”heading”>Days Between Two Dates</div>
.heading{
background: rgb(18, 128, 207);
color: white;
margin: -48px -16px 50px -16px;
font-size: 23px;
padding: 5px;
text-align: center;
}
Title of Days Between Two Dates calculator

Step 3: Create two date input spaces (more…)

Continue ReadingDays Between Two Dates Using JavaScript & CSS