How to Create a Weight Converter using JavaScript

Do you want to create Weight Converter by JavaScript? In this article you will learn how to create Weight Converter using html css and javascript.

Earlier I showed how to create a height converter using JavaScript. This Weight Converter is very simple and easy.

How to Create a Weight Converter using JavaScript

Sometimes such a weight converter is needed to convert a specific weight to other units.

For example, we can easily convert kilograms to grams or milligrams but it is not easy to convert kilograms to pounds or ounces. In all those cases this html weight converter will be very helpful.

Weight Converter JavaScript

Weight Converter is basically a basic JavaScript project. But if you are a beginner then this project(How to Create a Weight Converter) will surely help you.

This project has 3 input boxes. In each input box you can input numbers and the boxes will act as a display. Entering the number in one of the input boxes will automatically change the information in the other box

See the Pen Weight Converter Javascript by Ground Tutorial (@groundtutorial) on CodePen.

Hope the above preview gives you an idea of how this JavaScript Weight Converter works. As you can see first I created a box on the webpage. First used a heading followed by three input boxes.

In the first input box you can input something in kilograms. The second input box is for Pounds and the third input box is for Ounces.

Weight Converter using HTML & JavaScript

Now if you want to make this Weight Converter then follow the below tutorial. Here you will get necessary explanation and step by step tutorial.

To create this simple project(Simple Weight Converter using JavaScript) we first created the basic structure by html. Then css is used to design it. And finally activated the Weight Converter by javascript.

1. Basic Structure of Weight Converter

First I will create a basic structure on the web page using the following HTML and CSS codes.

This box will essentially serve as the basic structure of the wet converter. In which we will add all the information ie headings and inputboxes.

					<div class="container">
					* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
body {
  height: 100vh;
  background: #0e64c5;

I designed the box using my own codes. I used box width: 90vw, background: #ffffff and max-width: 28em.

					.container {
   background: #ffffff;
  width: 90vw;
  font-size: 16px;
  max-width: 28em;
  padding: 3em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  box-shadow: 0 0 3.2em rgba(1, 3, 29, 0.2);
  border-radius: 0.6em;
Basic Structure of Weight Converter

2. Add headings to Weight Converter

Now we have to add a heading in the wet converter for which we have used our own HTML and CS codes. Used h2 tag to create heading.

					<h2>Weight Converter</h2>
					h2 {
  font-size: 2em;
  text-align: center;
  margin-bottom: 1.5em;
Add headings to Weight Converter

3. Create Weight input box

					<div class="input-wrapper">
  <label for="kg">Kilogram:</label>
  <input type="number" id="kg" value="10" />
					.input-wrapper input {
  display: block;
  width: 100%;
  font-size: 1.35em;
  padding: 0.4em;
  border: 1px solid #a0a0a0;
  border-radius: 0.2em;
.input-wrapper label {
  display: block;
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 0.25em;
.input-wrapper:not(:last-child) {
  margin-bottom: 1.2em;
Create Weight input box
					@media screen and (max-width: 28em) {
  .container {
    font-size: 14px;

// Weight Converter's second Weight input box

Now we need to create the second input box using the following html. I have already used the required css to design the input box so no need to use any more css.

					<div class="input-wrapper">
   <label for="lb">Pounds:</label>
   <input type="number" id="lb" />
Weight Converter's second Weight input box

// Weight Converter's third Weight input box

Now who needs to create the third input box which will show information about Ounces. When you input a number in another input box it will be converted to Ounces. That is, they will act as input boxes and displays.

					<div class="input-wrapper">
   <label for="oz">Ounces:</label>
   <input type="number" id="oz" />
Weight Converter's third Weight input box

4. JavaScript code for Weight Converter

Now it’s time to activate this Weight Converter by JavaScript. Here first we set one constant for the ids of each input box.

Then I managed to express the inputted information in different units. If you know basic javascript then you can make this html weight converter very easily.

					//Set the input box's ids to constants
let kgRef = document.getElementById("kg");
let lbRef = document.getElementById("lb");
let ozRef = document.getElementById("oz");

let convertFromKg = () => {
  let kg = kgRef.value;
  //toFixed(2) limits the decimals to 2 digits.
  //toFixed() method converts a number to a string.
  lbRef.value = (kg * 2.205).toFixed(2);
  ozRef.value = (kg * 35.274).toFixed(2);

let convertFromLb = () => {
  let lb = lbRef.value;
  kgRef.value = (lb / 2.205).toFixed(2);
  ozRef.value = (lb * 16).toFixed(2);

let convertFromOz = () => {
  let oz = ozRef.value;
  kgRef.value = (oz / 35.274).toFixed(2);
  lbRef.value = (oz / 16).toFixed(2);
//addEventListener() method makes it easier to control how the event reacts to bubbling
kgRef.addEventListener("input", convertFromKg);
lbRef.addEventListener("input", convertFromLb);
ozRef.addEventListener("input", convertFromOz);
window.addEventListener("load", convertFromKg);
JavaScript code for Weight Converter

Hopefully from this tutorial you have learned how I created this Weight Converter using html css and javascript. Below you will find the source code needed to build this project(Weight Converter in JavaScript).

You will get complete information in this tutorial. If you want to make this type of Weight Converter then you can follow this tutorial.

I have made this design simple enough so that you will not have any difficulty in understanding it. If there is any problem then you can comment.

You can use this project as a unit converter. Here I have used 3 units. You can use much more. Besides, earlier I have shared another tutorial which will help you to create a javascript unit converter better. You can use this link for source code.

I have shared many tutorials using react js but never made Weight Converter. So I request you to follow another design which I like very much. Hope you like that React js Weight Converter too.

Leave a Comment