How to Detect User Browser Using JavaScript (Free Code)
This is a simple JavaScript project that will detect user browsers. Many projects require the user to know the browser's information. In that case, you can use this kind of…
Simple Weight Converter using JavaScript (Code + Demo)
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;
}
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;
}
Step 3: Design input boxes and buttons (more…)
Animated Eyes Follow Mouse Cursor in JavaScript
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;
}
Step 2: Design the Eyes Follow Cursor (more…)
How to Zoom Image on Scroll using JavaScript
Zoom Image on scroll Effect You can easily create with JavaScript. When you scroll the wheel, the elements will zoom in and out.Zoom image on scroll is javascript effect in…
How to Get Day Name of the Week in JavaScript
I created a Get Day Name of the Week project using the getDay () method. getDay () is a JavaScript method that allows you to collect Day's information from your…
Draggable Div Element using JavaScript (Code + Demo)
In this article, you will learn how to create javascript draggable div. What is Draggable Div Element?
Basically, it is an element that you can drag anywhere on the web page. We see this kind of draggable element in many large websites or applications.
Elements that can be dragged from one place to another are called javascript draggable div. In the meantime, I have shared how to create a right-click menu using JavaScript.
I have added a profile card to the basic structure of this draggable div javascript. However, you can add any of your information by excluding the profile card.
Draggable Div JavaScript
When we see this type of element in an application, it seems to be a lot standard. However, it is not so difficult. If you want, you can create this kind of Drag and Drop element using some basic HTML CSS and JavaScript.
If you have difficulty understanding what I am saying then follow the preview below. Here you will find a live preview of this Draggable Div Element design and the required source code.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
As you can see above, I designed a web page. I made a small box on it. Under normal conditions, this box will be in top: 0 and left: 0 positions.
You can then move it to the angle and position of your choice. I have created a profile card in this element. For the profile, first, we added the profile image, some basic text, and four social media buttons.
How to create draggable div in javascript
Although this profile is not part of the Drag element. I just added the card to add some information. Shared step-by-step tutorials here. For this, you must have some idea about HTML CSS JavaScript.
Step 1: Basic structure of draggable div
First I created the basic structure of the Drag element. Here you can create using a single div if you want. But I have used a div and a header here.
Div is basically the basic structure and the header is the part where you can drag by clicking. Although the length of the header here is equal to the size of the whole box. So you can move Div Element by clicking on any part of the box.
<div id=”dragable”>
<header id=”dragzone”>
</header>
</div>
I have designed the webpage of this project using the following CSS codes. Here a blue color is used in the background of the webpage.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
}
body {
background: #78c7ed;
font-family: sans-serif;
}
Step 2: Basic design of Div Element
Now the basic structure of the element or the box has been created. Box width: 21rem, height: 21rem, and a light border has been used all around. Shadow has been used here to enhance the beauty.
#dragable {
width: 21rem;
height: 21rem;
border: 0.2rem solid #0f2c65;
border-radius: 0.2rem;
position: absolute;
z-index: 9;
box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s;
}
Now we will design the header. This is basically where we can click and move the JavaScript Draggable Div Element. Here I have used 100% of the length and height.
This will allow you to move it by clicking anywhere in the entire box. Cursor: move is used here, so moving the mouse over the box will change the style of the cursor.
#dragable #dragzone {
width: 100%;
height: 100%;
cursor: move;
z-index: 10;
background-color: #0f2c65;
}
When you click on the box or move it, the style changes a bit. Although it will not work without JavaScript.
#dragable.drag {
border-color: white;
box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);
}
Step 3: Activate Draggable Div using JavaScript
Now it’s time to implement this HTML Drag and Drop via JavaScript. It is comparatively much harder. For this, you must have an idea about JavaScript.
Here we have shared the necessary explanations of the code lines. Hopefully, these codes will not be a problem for you to understand.
const dragElement = (element, dragzone) => {
let pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
//MouseUp occurs when the user releases the mouse button
const dragMouseUp = () => {
document.onmouseup = null;
//onmousemove attribute fires when the pointer is moving while it is over an element.
document.onmousemove = null;
element.classList.remove(“drag”);
};
const dragMouseMove = (event) => {
//preventDefault() method cancels the event if it is cancelable
event.preventDefault();
//clientX property returns the horizontal coordinate of the mouse pointer
pos1 = pos3 – event.clientX;
//clientY property returns the vertical coordinate of the mouse pointer
pos2 = pos4 – event.clientY;
pos3 = event.clientX;
pos4 = event.clientY;
//offsetTop property returns the top position relative to the parent
element.style.top = `${element.offsetTop – pos2}px`;
element.style.left = `${element.offsetLeft – pos1}px`;
};
const dragMouseDown = (event) => {
event.preventDefault();
pos3 = event.clientX;
pos4 = event.clientY;
element.classList.add(“drag”);
document.onmouseup = dragMouseUp;
document.onmousemove = dragMouseMove;
};
dragzone.onmousedown = dragMouseDown;
};
const dragable = document.getElementById(“dragable”),
dragzone = document.getElementById(“dragzone”);
dragElement(dragable, dragzone);
To make this div element draggable complete the work above. Now you can move this element anywhere.
You can add any information here. Here I have added a profile card. If you want to add a profile card to that draggable element then follow the steps below. Otherwise, skip the steps.
Step 4: Add content to Draggable Element (more…)
How to Play Sound On Click Using JavaScript
Play sound on click using javascript is a function that create a sound on clicking on the button as the user clicks on the button the click evenlistener triggers the…
How to Create a Palindrome Checker in JavaScript
If you want to make a javascript palindrome checker tool then this article will help you. This type of palindrome checker is very easy to make. If you know basic JavaScript you can easily create it.
You may be wondering what a palindrome is?
A palindrome is a number, phrase, or word that reads the same backward as forward. That is, if a word or number is read from the front, it will look as if it is read from the back. Such as Madam, Racecar, Level, 12321, etc.
Palindrome Checker JavaScript
The project that has been created here can easily identify this palindrome. This is a javascript palindrome checker that will help you understand whether any word or number is a palindrome.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
If you do not understand what I am saying then watch the demo below. This demo will help you to know how this palindrome checker javascript works.
Related Post:
1. Check Password Strength in JavaScript
4. Character Counter using JavaScript
5. Loan Calculator using JavaScript
6. Weather App using JavaScript
Hopefully, you have learned how this palindrome program works from the preview above. This project has been created in a very simple way.
There is an input box here. You can input a word or number in that box. Then there is a button. When you click on the button you can see if it is a palindrome. There is a display in which information can be seen.
Build A Palindrome Checker using JavaScript
If you want to create this Palindrome Checker then you need to know HTML, CSS, and javascript. Its elements are created by HTML and designed by CSS. Then, this Palindrome Checker is activated by JavaScript.
Step 1: Basic structure of Palindrome Checker
A box has been created on the webpage using the following code. Here the box’s min-width is 450px and the background color is white.
<div class=”container”>
</div>
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #1f85e0;
}
.container{
width: 35%;
min-width: 450px;
background-color: #ffffff;
padding: 50px 35px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
text-align: center;
border-radius: 8px;
box-shadow: 0 20px 25px rgba(0,0,0,0.18);
}
Step 2: Create a result viewing display (more…)
How to Check Password Strength in JavaScript
In this article, you will learn how to create a password strength checker using JavaScript. Earlier I shared many more projects like Random Password Generator, Password Show Hide, etc. In this tutorial, you will learn how to create a javascript password strength checker.
This type of design will make your login and registration form more attractive and perfect. This type of password strength checker allows the user to input a strong and unique password.
This type of project is perfect for you if you want to add some conditions for inputting passwords in your login form.
Password Strength Checker JavaScript
In this case, the user will be able to input different types of characters to make his password even stronger. There is a progress bar to understand how strong this password is. Different colors have been added to this progress bar. These colors will indicate the quality of the password.
There are four types of steps in the bar. When you input general characters, red background color appears in 25% of the progress bar. When you input a variety of special characters into the password, the bar’s background color will increase by another 25%.
When different types of special characters, numbers, and capital letters are input into the password, then the progress bar will be hundred percent and its color will be green.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
There is an icon that allows the user to see and hide the password. Hopefully, you understand this kind of strength of password check will make your login form more attractive. It was created using only HTML CSS and JavaScript.
How to Create Password Strength Checker
If you know basic HTML CSS JavaScript you can easily create a javascript password strength checker. Here I have shared a step-by-step tutorial.
First I created a box at the top of the web page. That box contains the first input box. Then I provided an icon. That icon will help you see and hide your password. If you are a beginner then follow the step-by-step tutorial below.
Step 1: Basic structure of Strength Checker
I have created a box on the web page using the following code. Then I designed the webpage a bit using CSS and used the blue color of the background of the webpage.
<div class=”wrapper”>
<div class=”container”>
</div>
</div>
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: rgb(38, 125, 236);
}
I designed this box using the following codes. Box width: 400px, height will depend on the amount of content. I have also used white color in the background and used a shadow all around to enhance the beauty.
.wrapper{
background-color: #ffffff;
width: 400px;
padding: 40px 0;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
border-radius: 3px;
box-shadow: 0 20px 25px rgba(0,0,0,0.2);
}
.container{
width: 300px;
position: relative;
margin: auto;
}
Step 2: Place to input password (more…)
Simple Mouse Cursor Effects using JavaScript (Free Code)
In this tutorial, you will learn how to create Mouse Cursor Effects using JavaScript. Earlier I showed you how to create a custom mouse follow. A type of JavaScript Mouse…
