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 (more…)

Continue ReadingSimple Weight Converter using JavaScript (Code + Demo)