Scientific Calculator in Java (Step by Step)
In this article you will know how to create Scientific Calculator in Java. You can easily create Scientific Calculator with Java. Earlier I have shared many Scientific Calculator tutorials with…
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…)
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 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…)
Simple Loan Calculator using JavaScript & CSS
In this article, you will learn how to create a Simple Loan Calculator using HTML CSS, and JavaScript. JavaScript Loan Calculator will help you to calculate the loan amount, interest rate, and information of monthly payment.
Before that, I used JavaScript to create many types of calculator projects like Age calculator, Height calculator, weight calculator, etc. Now I am going to show you how to make a simple loan calculator using JavaScript. We basically use the general formula to calculate the interest rate and monthly payment of a loan amount. However, JavaScript will help you to make this task more perfect and easy.
Computer programming makes our tasks much easier. Similarly, this EMI calculator will help you to calculate the monthly payment of your loan. Here I have used HTML CSS and JavaScript. HTML and CSS helped create and design the basic structure of this JavaScript loan calculator. Here JavaScript helps to make it work.
Loan Calculator using JavaScript
First I used a heading that basically helped to enhance the beauty. Then I made 3 input boxes. To input the loan amount in the first input box, interest rate in the second input box, and information input of the third input box month. Below all is a small display where the calculations can be seen.
This loan calculator will help you know how much money you have to pay each month with interest.
For example, if you want to buy a product, the total value of this product is X and there is a Y % interest rate. You want to repay that loan in 6 months. In this case, you can easily find out how much money you have to pay per month from this calculator.
If you want to do it manually, you have to work a little harder.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
How to create a Javascript loan calculator
Hopefully, the above demo has helped you to know how this interest rate calculator javascript works. If you only want to get the source code then you can copy the source code from the demo section above.
But keeping in mind the beginners, I have shared the complete step-by-step tutorial. If you want to know how to build this JavaScript loan calculator then you must follow our tutorials step by step.
Step 1: Basic structure of loan calculator (more…)
How Make a Basic Calculator using HTML & CSS
This tutorial will help you if you want to create a calculator using HTML and CSS. Here I have shared with you how to make a simple web calculator. Earlier…
Aspect Ratio Calculator Using HTML, CSS, and JavaScript
In this article, you will learn how to create an Aspect Ratio Calculator using HTML CSS, and JavaScript. Aspect Ratio is basically the relationship between the width and height of an element.
Any element formed by four angles has a certain aspect ratio. Today in this article I have shown you how to create JavaScript Aspect Ratio Calculator very easily. You can calculate it manually but this will be much easier with programming. I used some basic JavaScript to create this project.
See the Pen
JavaScript Aspect Ratio Calculator by Code Media (@codemediaweb)
on CodePen.
There are two types of input fields. First, there are two input boxes to add the percentage of Aspect Ratio, that is, you have to input the percentage at which you want to calculate this. In place of the following two inputs, you can input width and height.
For example, you want to make a box and you want to make that box on this 18: 9 ratio. In that case, you can easily know the other value by inputting any one of the lengths or heights here.
JavaScript Aspect Ratio Calculator
In this tutorial, we have shown how to create this CSS aspect ratio calculator program. That’s why you need to have an idea about basic JavaScript. First I designed the web page using some CSS code.
Then I created a box using HTML code. I have added all the information to this box. Then I added some text that would serve as headings. Then I made two input boxes to input the ratio. Then there are two more input spaces where width and height can be input.
I did not use any external library or jQuery to create this project. I have made this Aspect Ratio Calculator using Pure JavaScript.
If you are a beginner, follow the step-by-step tutorial below. Below the article, you will find the source code needed to create it.
Step 1: Basic structure of Aspect Ratio calculator
I have created a box on the web page using the following HTML and CSS codes. First I designed the background of the webpage using some amount of CSS code.
Here on that page, I used linear-gradient color at a 135-degree angle. The box here is width: 400px and the height depend on the padding.
<div class=”container”>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}
body {
height: 100vh;
background: linear-gradient(
135deg,
#9cc0e0 50%,
#1b72b2 50%
);
}
.container {
width: 400px;
background-color: #ffffff;
padding: 50px 30px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 30px 45px rgba(18, 8, 39, 0.2);
}
Step 2: Add a heading to the box (more…)
BMI Calculator using Javascript, HTML & CSS
In this article, you will learn how to create BMI Calculator using HTML CSS, and JavaScript. BMI stands for Body Mass Index. It basically helps to determine how much mass is in our body.
According to science, a healthy and normal person should have a BMI between 18.5 and 25. If its value is less than 18 then it is underweight which is unhealthy. If its value is more than 25 then it is called fat or overweight.
There are specific formulas for manually calculating BMI. However, you can do this manual work much easier through programming. That’s why in this article you will know how to make BMI Calculator using Javascript.
For this type of project, there will be two input boxes where weight and height have to be input. Then this project will automatically calculate your BMI. Here you can see a text with the result of the calculation.
BMI Calculator Javascript [Live Demo]
First I created a box at the top of the web page. I first added another title to that box. Then there is a small display. The results can be seen by calculation in that display. I used HTML’s range slider to input. As a result, minimum and maximum values ​​are set here.
The first of the two sliders is for weight and the second is for hiding input. Then it will calculate and show how much BMI you have in that display. It will show a message where your BMI status can be known.
See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.
Hopefully, the demo above has helped you get this project live experience. You can copy the source code needed to create it from above. Also, the download button at the bottom of the article will help.
How to calculate BMI in JavaScript
Below I have shared the complete step-by-step tutorial. If you are a beginner then follow the tutorial below to make it (BMI Calculator with Source Code).
Here is the formula for manually calculating BMI
BMI = (weight) / (height * height)
weight = the weight of your body
height = height of your body
For this, you need to have an idea about HTML and CSS. First, create an HTML and CSS file then follow the steps below.
Step 1: Create the basic structure of the calculator
I have created a box using the following code which is basically its basic structure.
<div class=”container”>
</div>
The following CSS has helped to design that webpage. Here I have used blue as the background color of the web page.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: #046db9;
}
I designed the box with the following codes. The background color of the box uses white and the width: 400px.
.container{
background-color: #ffffff;
padding: 30px 30px;
width: 50%;
min-width: 400px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 5px;
font-family: ‘Poppins’,sans-serif;
box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
}
Step 2: Add a heading using HTML (more…)
Javascript Age Calculator | Calculate Age from Date of Birth
Javascript Age Calculator | Calculate Age from Date of Birth
JavaScript Age Calculator is a remarkable JavaScript application that will help to calculate a user’s age. Earlier I have shown many types of JavaScript projects like JavaScript Clock, Random Password Generator, Calculator, etc.
This is the first time I am going to make such an age calculator. This type of design is used in many cases. Basically, there are different types of registration forms where the user needs to be 18 years of age or whatever.
In that case, the system will calculate the age of the user as soon as the user inputs his date of birth. In this javascript Age Calculator, I have given three places to input age. Where the user can input the day, month, and year of his date of birth.
Javascript Age Calculator
The system will then automatically convert the distance of its date of birth from the current time to year months and days. Here I have designed this system using HTML and CSS code and implemented it using JavaScript.
First I collected the current date from your device using JavaScript code (new Date). Then we subtract that with your input time and convert the subtraction to years, months and days.
As you can see above, I painted the background # 2782e3 of the web page and made a rectangular box in it. I used a title or heading on top of that box. Then I made three boxes to input using HTML’s input (<input>) function.
The first, second, and third boxes are designed to input days, months, and years, respectively. Then there is a submit button below which the user can see his current age by clicking on it. I have arranged to show the result at the bottom of the box.
Here’s how to transform your current age into years, months and days. If you want to know how it works and you want to use it live then use the demo section below. Here you will find the required source code which you can use for your own purposes.
However, I would urge you to follow the tutorial below if you are a beginner and want to know how I made it (Age Calculator using javascript).
See the Pen
Age calculator by Foolish Developer (@fghty)
on CodePen.
Hopefully, the demo above has helped you to know and enjoy its live demo.
Calculate Age from Date of Birth using Javascript
Now is the time to get to know it steps by step. I have shared the possible results after each step so that it is more convenient for you to understand.
At the bottom of the article, I have given a download button with the help of which you can download the source code.
Step 1: Design the webpage and create a box (more…)
Simple JavaScript calculator Tutorial for Beginners
In this article, I am going to show you how to build a calculator using javascript code. I have already designed many more types of calculators using HTML CSS and JavaScript programming code. If you are a beginner and want to know how to build a JavaScript calculator then this tutorial will definitely help you.
Here I have explained in full step by step which programming code I have used to create any element. We all know what a calculator is and why it is used. These are mainly used for mathematical calculations. In the design shown in this article, you can do small mathematical calculations like addition, subtraction, multiplication, division, etc.
HTML helped build its structure and buttons. CSS code designed it. The most significant role here is played by JavaScript code which is used to perform calculations and activate the buttons in the calculator.
➤ In this case, I have used seven operator buttons which basically help to do this calculation such as addition, subtraction, multiplication, division, equal, cancel, backspace, etc.
➤ In this case, I have used eleven number buttons like 0 to 9.
➤ There is a beautiful display where all these calculations can be seen.
Simple JavaScript Calculator [Live Demo]
Follow the demo section below to watch the live demo of this calculator. Here you will find the required source code which you can copy and use in your project.
See the Pen
basic calculator by Foolish Developer (@fghty)
on CodePen.
As you can see in the demo above, this is a nice and simple JavaScript calculator. In which I used eighteen buttons with the number and operator buttons and put a nice display. I used a different color for the background of the operator numbers and added a hover color to it.
Create Calculator using HTML, CSS & JavaScript
If you want to make this design, you should definitely follow the tutorial below. First of all, you create an HTML and a CSS file. In this case, I have used a very small amount of CSS programming code so you can not create a separate CSS file. If you want to create a CSS file, then you must attach that file to the HTML file.
