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!
iam using ChatGPT to creat it lol, easy and fast. Just typing Weight Converter Javascript, HTML, CSS. Anyway thanks for scripts and love your youtube