Weight Converter using JavaScript

Simple Weight Converter using JavaScript (Code + Demo)

Weight Converter using JavaScript

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;
}
HTML code of Weight Converter

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;
}
Basic Design of Weight Converter

Step 3: Design input boxes and buttons

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

input {
font-family: “Poppins”, sans-serif;
padding: 10px;
margin-bottom: 10px;
}
#enter-btn{
  background: #0472ad;
  border: none;
  padding: 12px;
  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;
}
Design input boxes and buttons

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”);
      form.addEventListener(‘submit’, function(e) {
//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.classList.add(“error”);
              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.classList.add(“successfull”);
              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”);
      enterInput.addEventListener(“keyup”, function(event) {
          if (event.keyCode === 13) {
              event.preventDefault();
              document.getElementById(“enter-btn”).click();
          }
});
Simple Weight Converter using JavaScript

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.