HomeJavascriptWeight Converter Javascript | HTML, CSS & Javascript

Weight Converter Javascript | HTML, CSS & Javascript

Hi everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Weight Converter. To build this project, we need HTML, CSS and Javascript.
 
This is a beginner-friendly javascript project. If you are looking for more advanced projects you should check out this playlist from my youtube channel. This playlist consists of 80+ javascript projects. The difficulty level of these projects varies from simple to quite complex ones. I would suggest you complete these projects to improve your javascript skills.
 
Let us take a look at this project. This project consists of three number input fields. These fields are for the user to input values in kilograms, ounces and pounds.
On input in any one of the fields, the other two fields are updated with corresponding converted values.
 

Video Tutorial:

If you prefer to learn by watching and coding along to a video tutorial rather than reading this post, you can check out the video down below. For more such tutorials check out my youtube channel where I post new tutorials, tips and tricks regularly. So subscribe to my channel do stay updated with the latest resources.

Project Folder Structure:

We begin by creating the project folder structure. We create a project folder called – ‘Weight Converter’. Inside this folder, we have three files- index.html, style.css and script.js.

HTML:

We start with the HTML code. First, copy the code below and paste it into your HTML document.

<!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>

CSS:

Next, we style the elements created with HTML using CSS. To do this, copy the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: linear-gradient(#25ff5f, #0cd943 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;
  }
}

Javascript:

Finally, we add functionality to this project. To add functionality, we use Javascript. Once again, copy the code below and paste it into your script file.

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

That’s it for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys so feel free to post your queries and suggestions below.
Happy Coding!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

19 − sixteen =

Most Popular