— 22nd July, 2023

Create a weight convertor using html, Css & JavaScript

In this tutorial, we will walk you through the process of building a weight converter that allows users to convert weights from one unit to another. Whether you're a beginner or an experienced developer, this tutorial will provide you with step-by-step instructions, making it easy to follow along and create your own weight converter.

So let's dive in and create a weight converter that will not only help you develop your skills but also provide a valuable tool for those looking to track their weight and achieve their fitness goals.

Project Live Preview
We will use HTML to create basic structure of our web page.

Html Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weight Converter</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h2>Weight Converter</h2>
      <div class="input-wrapper">
        <label for="kg">Kilogram:</label>
        <input type="number" id="kg" value="10" />
      </div>
      <div class="input-wrapper">
        <label for="lb">Pounds:</label>
        <input type="number" id="lb" />
      </div>
      <div class="input-wrapper">
        <label for="oz">Ounces:</label>
        <input type="number" id="oz" />
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

This code is an HTML document that represents a weight converter web page. Here's a breakdown of the code:

<!DOCTYPE html>: This is a declaration that tells the browser that this document is an HTML document.

<html lang="en">: This is the opening tag for the HTML document. The lang attribute specifies the language of the document.

<head>: This is the start of the head section of the document, which contains information about the document that is not displayed on the page itself.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />: This is a meta tag that sets the viewport width to the width of the device and sets the initial zoom level to 1.0.

<title>Weight Converter</title>: This sets the title of the web page, which appears in the browser tab.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />: This is a link to a Google font that is used in the web page.

<link rel="stylesheet" href="style.css" />: This links to an external stylesheet that contains the styles for the web page.

</head>: This closes the head section of the document.

<body>: This is the start of the body section of the document, which contains the content that is displayed on the page.

<div class="container">: This is a container that wraps all of the content in the body section of the document.

<h2>Weight Converter</h2>: This is a heading that appears at the top of the web page.

<div class="input-wrapper">: This is a container for an input element and its label.

<label for="kg">Kilogram:</label>: This is a label for an input element with the ID "kg". The "for" attribute specifies which input element the label is associated with.

<input type="number" id="kg" value="10" />: This is an input element with the ID "kg" and a default value of 10. The "type" attribute specifies that this is a number input.

<div class="input-wrapper">: This is another container for an input element and its label.

<label for="lb">Pounds:</label>: This is a label for an input element with the ID "lb".

<input type="number" id="lb" />: This is an input element with the ID "lb".

<div class="input-wrapper">: This is another container for an input element and its label.

<label for="oz">Ounces:</label>: This is a label for an input element with the ID "oz".

<input type="number" id="oz" />: This is an input element with the ID "oz".

</div>: This closes the container for the ounces input.

</div>: This closes the container for the pounds input.

</div>: This closes the container for the kilogram input.

<script src="script.js"></script>: This links to an external JavaScript file that contains the code for the weight converter.

Then we will use CSS to style our application.

CSS Code:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: linear-gradient(#25baff, #0c3cd9 50%, #ffffff 50%);
}
.container {
  background-color: #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;
}
h2 {
  font-size: 2em;
  text-align: center;
  margin-bottom: 1.5em;
}
.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;
}
@media screen and (max-width: 28em) {
  .container {
    font-size: 14px;
  }
}
  1. The first CSS block applies universal styles to all elements on the page, including setting the padding and margin to 0, using border-box sizing, and specifying a default font family.
  2. The second block styles the body element, setting its height to 100% of the viewport and applying a linear gradient background.
  3. The .container class styles a container element, setting its background color, width, font size, maximum width, padding, position, box shadow, and border radius.
  4. The h2 selector styles all level 2 headings, setting the font size, text alignment, and margin bottom.
  5. The .input-wrapper input selector styles all input elements within the input-wrapper class, setting the display, width, font size, padding, border, and border radius.
  6. The .input-wrapper label selector styles all label elements within the input-wrapper class, setting the display, font size, font weight, and margin bottom.
  7. The .input-wrapper:not(:last-child) selector styles all input-wrapper elements except for the last one, setting a margin bottom.
  8. Finally, the media query targets screens with a maximum width of 28em and adjusts the font size of the .container class accordingly.

JavaScript Code:

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.
  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);
};

kgRef.addEventListener("input", convertFromKg);
lbRef.addEventListener("input", convertFromLb);
ozRef.addEventListener("input", convertFromOz);
window.addEventListener("load", convertFromKg);

This JavaScript code defines three variables, kgRef, lbRef, and ozRef, which are assigned the reference to three different HTML input elements with the id attributes "kg", "lb", and "oz", respectively. These input elements are presumably used to take user input for weight in kilograms, pounds, and ounces, respectively.

The code then defines three functions: convertFromKg(), convertFromLb(), and convertFromOz(). These functions are responsible for converting the input value of one weight unit to the other two units.

convertFromKg() converts from kilograms to pounds and ounces. It gets the input value of the kgRef element and assigns it to the variable kg. It then calculates the equivalent weight in pounds and ounces using the conversion formulas and assigns these values to the value attribute of the lbRef and ozRef input elements, respectively. The toFixed(2) method is used to limit the decimal places to two.

convertFromLb() converts from pounds to kilograms and ounces. It gets the input value of the lbRef element and assigns it to the variable lb. It then calculates the equivalent weight in kilograms and ounces using the conversion formulas and assigns these values to the value attribute of the kgRef and ozRef input elements, respectively. The toFixed(2) method is used to limit the decimal places to two.

convertFromOz() converts from ounces to kilograms and pounds. It gets the input value of the ozRef element and assigns it to the variable oz. It then calculates the equivalent weight in kilograms and pounds using the conversion formulas and assigns these values to the value attribute of the kgRef and lbRef input elements, respectively. The toFixed(2) method is used to limit the decimal places to two.

The code then adds event listeners to the kgRef, lbRef, and ozRef elements, which trigger the appropriate conversion function when the user inputs a value in any of the three input fields. The window object also has an event listener that triggers the convertFromKg() function when the page loads. This ensures that the initial conversion is performed correctly if the user inputs a value in the kg field before any of the other fields.

Download Souce Code