# 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;
width: 400px;
}

Now I have designed the input box and submit button. Input box size depends on padding: 10px.

input {
font-family: “Poppins”, sans-serif;
margin-bottom: 10px;
}
#enter-btn{
border: none;
color: white;
}

Now I have used two colors for two different situations. These situations have been created by JavaScript.

.error {
color: red;
}
.successfull {
color: green;
}

### Step 4: Activate Weight Converter by JavaScript

Above is the basic design of this weight converter project. But you need to use some amount of JavaScript to activate it.

Below I have given all the JavaScript together. However, I have shared the necessary explanations for each line.

const form = document.querySelector(“form”);
//preventDefault() method cancels the event if it is cancelable
e.preventDefault();
//Constants of the input box
const input = document.querySelector(“input”);
//The ‘span’ element has been created
var convertedWeight = document.querySelector(“span”);
var kgTOpound;
//Some validations have been made here

//If you click on the button without inputting anything in the input box, the following error will appear
if ((isNaN(input.value)) || input.value <= 0) {
convertedWeight.innerHTML = “<p>Please enter a valid number!</p>”;
setTimeout(() => {
convertedWeight.innerHTML = “”;
convertedWeight.classList.remove(“error”);
}, 2500);
input.value = “”;
} else {
//If you input something in the input box then the following code will work

//Here the formula is used to convert kg to pounds
//Then with the help of ‘innerHTML’ the results are displayed in the webpage
kgTOpound = Number(input.value) * 2.20462;
convertedWeight.innerHTML = `\${kgTOpound.toFixed(2)}`;
setTimeout(() => {
convertedWeight.innerHTML = “”;
input.value = “”;
convertedWeight.classList.remove(“successfull”);
}, 20000);
}
})
//submit button has been activated
var enterInput = document.getElementById(“enter-btn”);
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById(“enter-btn”).click();
}
});

## Javascript Weight Converter Source Code

We hope you enjoy the above codes and tutorials. However, there are many beginners who cannot combine the above codes. If you are a beginner, you can create this weight converter project by copying the codes directly from the code box below.

Here I have included all the code in the HTML structure. So you can easily copy this code and add it to your HTML file.

See the Pen
Untitled
by Shantanu Jana (@shantanu-jana)
on CodePen.

Hopefully the above code and tutorial have helped you to know how to create this weight converter javascript. If you have any questions, you can definitely comment.