How to Get Mouse Position in JavaScript (Free Code)
In this tutorial, you will learn how to get Mouse Position using JavaScript. This javascript get mouse position project will help you know which position you currently have your mouse…
Days Between Two Dates Using JavaScript & CSS
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%;
}
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;
}
Step 3: Create two date input spaces (more…)
Simple Custom Select Dropdown using HTML and CSS
In this article, you will learn how to create Custom Select Dropdown using HTML and CSS. Earlier I shared with you the tutorials on different types of the dropdown menubar and dropdown custom select box. Here I have created a custom dropdown menu which has been created using HTML CSS and some amount of jQuery.
All information and elements have been added by HTML. Select dropdown is designed by CSS. Custom Select Dropdown has been implemented using some amount of jQuery.
This type of Select dropdown we use in different places. We often see such elements in different types of login forms, registration forms. We use the radio button to select any one of the many options. However, if the amount of options is much more then this type of CSS Custom Select Dropdown is used.
When you click on the custom dropdown menu, you will see all the dropdowns. You can select any one of those options dropdowns or menu of your choice.
Custom Select Dropdown Example
It’s easy to make if you have a basic idea about HTML and CSS. As I said, I used JQuery to make Simple Custom Select Dropdown work. But if you do not know jQuery then there is no problem.
I have given all the necessary explanations. Below I have given a preview that will help you to know how it works.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
As you can see above, I have created a small box on the webpage that will serve as a Select box. There is an option in that box. When you click on that option, all the dropdown options can be seen below. When you click on any of those options, that option can be found in the Select box.
How to Create a Custom Select Box
Here I have used four menu items. You can use your dropdown. As I said before I created it according to the design of Neumorphism. You can use a different color or any other design here if you want.
If you only want the source code, use the download button below the article. If you are a beginner I would recommend following the complete step-by-step tutorials below.
Step 1: Basic structure of Select Box
I have used the following HTML and CSS codes to create the basic structure of the CSS Select Box.
<div class=”container”>
<div class=”box”>
</div>
</div>
I designed the webpage using the following CSS codes. The background color of the webpage is used here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #dde1e7;
color: #333;
}
.container {
height: 25rem;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 15rem;
height: 100%;
position: relative;
user-select: none;
overflow: hidden;
border-radius: 5px;
}
Step 2: Default option of Select Dropdown
The select box has been created using HTML and CSS in the following. Simple Custom Select Dropdown has a default select option added. Here I used an icon and used a text.
<ul class=”by_default”>
<li>
<div class=”sharing”>
<div class=”share-icon”>
<i class=”fab fa-instagram fa-2x”></i>
</div>
<p>Instagram</p>
</div>
</li>
</ul>
Select Dropdown has no height or width, it has its own size based on the amount of content. However, padding has been used to create some space around it.
The background color of the Select box is the same as the background color of the web page. However, to understand the size of the Select box, a shadow has been used around the Select box.
.box .by_default {
background: #dde1e7;
margin: 10px;
box-shadow: -3px -3px 7px #fffdfdcc,
3px 3px 5px rgba(94, 104, 121, 0.342);
border-radius: 5px;
position: relative;
cursor: pointer;
z-index: 2;
}
.box .by_default li {
padding: 1rem;
}
In the image above we can see the icons and the text are located at the bottom. The following CSS has been used to position these side by side.
.box .sharing {
display: flex;
align-items: center;
}
.box .sharing .share-icon {
margin-right: 1.1rem;
margin-left: 0.9rem;
}
Step 3: List of Custom Select Dropdown (more…)
Simple Character Counter using JavaScript & CSS
In this article, you will learn how to create a Character Counter using JavaScript. Earlier I shared with you tutorials on different types of JavaScript word counters, limit character input, etc.
Here you will learn how to make simple character count javascript. The character counter basically helps to count how many characters are in an input box. You can use it to count every character and space in the input box.
The counted numbers can be seen in a small display. If you want you can put a limit in that input box. Earlier I shared a tutorial that has a limit on character input.
Character Count JavaScript
Below I have given a preview that will help you to know how this character count javascript works. If you only want the source code, use the button below the article.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
A box has been created on a web page as you saw above. The background color of this box is white. First of all, a heading has been used in the box which is basically to enhance the beauty.
Then the character input space is created using textarea. Below all is a small box in which the amount of character can be seen. When you input something into the input box, the amount of that input will count.
Create Character Counter using JavaScript
This project (Character Counter using JavaScript) is very easy to create if you have an idea about HTML CSS and JavaScript. Here is a step-by-step tutorial for beginners with pictures of possible results after each step.
Step 1: Basic structure of Character Counter
The basic structure of this character count javascript has been created using the following HTML and CSS codes. All the information can be found in this basic structure.
<div class=”container”>
</div>
I designed the web page using the following codes. Here I have used blue as the background color of the webpage.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #1193bd;
font-family: ‘Roboto’, sans-serif;
}
Character counter width: 500px and height will depend on the amount of content. I used white as the background color and box-shadow to make it more attractive.
.container {
width: 500px;
padding: 40px;
background-color: white;
display: flex;
flex-direction: column;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
Step 2: Add a heading (more…)
Animated Hamburger Menu using HTML CSS (Free Code)
In this article, you will learn how to create Animated Hamburger Menu using HTML and CSS. Hamburger Menu CSS We use it in different places. Earlier I shared a tutorial on making more hamburger icons. However, I have added animation to this design.
In this article, you will learn how to create an Animated Hamburger Menu CSS. Here I have used a small amount (only two lines) of JavaScript. The most common type of hamburger icon is found in different types of site menubars, navigation menu bars.
Animated Hamburger Menu CSS
Here you will find the required source code, tutorials, and previews. Below I have given a preview of this project and you can see how it works.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
As you can see, a small button has been created at the top of a web page. There are three lines on that button. When you click on that hamburger icon, you will see animation in it.
Those three lines will be transformed into a circular circle and a cross mark will be seen in the circle. When you click on that button again, the button will be converted to three lines again. The background of the hamburger menu icon has been made blue and the color of the lines has been made white.
How to make an animated hamburger menu
To make it, you must have a basic idea about HTML CSS. Here I have used only 2 lines of JavaScript. However, it is very easy if you do not know JavaScript can easily understand.
Step 1: Basic structure of the Hamburger Menu
Using your bellow HTML and CSS codes, add the necessary information to this menu. I have only used 2 line HTML code here.
I used blue color in the background of this button and the button is height: 172px, width: 172px.
<div id=”toggle-nav”>
<div class=”hamburger”></div>
</div>
body {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#toggle-nav {
position: relative;
background: rgb(12, 94, 196);
height: 172px;
width: 172px;
border-radius: 30px;
cursor: pointer;
}
Step 2: Add 3 lines to the hamburger menu (more…)
Simple Rain Animation Effects using CSS & JavaScript
In this article, you will learn how to create Rain Animation Effects using CSS and javascript. You will see this kind of CSS Rain Effects animation in different places. Creating this effect is much easier if you know basic CSS and javascript.
This type of Rain Animation effect is used in the background of different projects or elements. The black color of the webpage background has been used to create this CSS animation rain. Then the point of white water is falling from top to bottom. Although JavaScript has been used to make it work.
Pure CSS Rain Animation Effect
Here you can use color instead of white color which is more beautiful and attractive. This design is used in the background of various projects which basically helps to enhance the beauty.
Below I have given a demo that will help you to know how it works. Live Demo 👇👇
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
As you can see above a lot of water droplets are falling from the top to the bottom on a gradient background. This project looks very difficult but it is very easy to make. This beautiful CSS rain animation with Lightning can be created with very little code.
If you only want the source code, you can use the download button below the article. And use the demo section above to get the live demo.
How to Create Rain Animation Effect using CSS
Below I have shown with some steps how I have created Rain Animation Effects using CSS. No HTML code is used here.
These animations can be seen in the background of the webpage. So the body tag of the webpage has been used. So there is no need to use any HTML separately.
Step 1: Design the webpage (more…)
Automatic Image Slider in HTML, CSS & Jquery
If you want to create an automatic image slider using JQuery then this tutorial will help you a lot. I have shared many types of automatic image slider tutorials before. Most of these designs are made by HTML CSS only. Here I have shared the tutorial on making JQuery Automatic Image Slider.
First I added the images by HTML and designed them by CSS. It was then executed by JQuery. In the meantime, I have shown the design of many more Automatic Image Sliders where I have used JavaScript.
If you want to use JavaScript instead of JQuery then you can follow another tutorial made by me. This Jquery automatic image slider is very simple where I have used five images. A border and shadow have been used around the images to enhance the beauty. There is no way to change the image manually.
Automatic Image Slider Jquery
We all know that JQuery is a kind of external JavaScript library. So to make the jQuery effective, add the jQuery CDN link to your file. In the case of the jquery automatic moving image slider that I shared earlier, there was a system to change the image manually.
Below is a preview that will help you learn how it works. Below I have given the link to a codepen.
See the Pen
Automatic Image Slider using Jquery by Foolish Developer (@foolishdevweb)
on CodePen.
Hope you like this design. While not a groundbreaking contribution to the genre, Beginner is important to many. You can use this auto slider jquery directly in your work. The images will change automatically every 2 seconds. Although you can use another time instead of these 2 seconds.
How to create Jquery Automatic Image Slider
As you can see above, I first created a box on the webpage. A border and shadow have been used around it. I have used five images in this jquery Automatic Image Slider.
You can increase the size of the image to your liking. If you want to create an automatic image slider then you must have a basic idea about HTML CSS and JavaScript.
Step 1: Basic structure of Image Slider
The basic structure has been created to create this JQuery automatic image slider using the following HTML and CSS codes.
Here width: 600px and height: 400px are used. In addition, box-shadow has been used to enhance beauty.
<div class=”wrapper”>
<ul id=”slider”>
</div>
</div>
*{
padding:0;
margin:0;
}
#slider{
margin:50px auto;
width:600px;
height:400px;
padding:5px;
box-shadow: 0 0 20px rgba(0,0,0,1);
position:relative;
}
Step 2: Add images to the slider (more…)
How To Make an Animated Search Bar using HTML CSS
If you want to create an Animated Search Bar using HTML and CSS then this tutorial will help you. Here I have shared a tutorial on creating a simple animated search icon.
Search Bar is an important element for different websites. Currently, the search bar is used on all websites. There are different types of search bars, some search bars are completely fixed, some are animated, some are pop-ups, etc.
The design I have shown in this tutorial is an animated search bar. In this case, only one icon can be found, not the entire search bar. The input box appears when you click on that icon. Most websites use this type of Animated Search Bar. Which enhances the quality of the website and saves space.
Animated Search Bar
Below I have given a demo that will help you to know how this Animated Search Bar works. Below you will find the required source code that you can copy directly and use in your work.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
As you can see above, a small area has been created on a web page. He has a search icon. When you click on that icon or button, the icon will move to the right and a space will be created on the left. An input box will be created where you can input the keyword of your choice.
How To Make an Animated Search Bar
In this case, I have used HTML, CSS, and a small amount of jQuery. All information and search icons have been added by HTML. CSS designed it. Only some jQuery has been used to make it work.
This Animated Search Bar is very easy to create. If you have a basic idea about HTML CSS then you can easily create this Animated Search Bar. Earlier I shared with you many more types of CSS search bar tutorials.
Step 1: Basic structure of Search Bar
Created an area of ​​this animated search bar using the following HTML and CSS codes. This is basically the basic structure of the search bar.
<div class=”wrapper”>
<div class=”searchbox”>
</div>
</div>
The webpage has been designed using the following CSS. Here I have used light blue as the background color of the webpage.
*{
margin: 0;
padding: 0;
}
body{
background: #e4eaf0;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.searchbox{
position: relative;
}
Step 2: Place to input in the Search Bar (more…)
Animated Social Media Buttons using HTML & CSS
In this article, you will learn how to create animated social media buttons using HTML and CSS. Earlier I shared with you various social-media-icons tutorials. In this tutorial, you will…
Create A Custom Video Player using JavaScript & HTML
In this article, you will learn how to create a custom video player using HTML CSS, and JavaScript. Many times it is necessary to use a video player on the…
