Weight Converter With Html JavaScript | Weight Converter Javascript
Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Weight Converter. We use HTML, Css, and javascript for this Weight Converter Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Weight Converter Javascript.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Weight Converter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin-top: 70px;
background: #2F4F4F;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="display-4 text-center mb-3">Weight Converter</h1>
<form>
<div class="form-group">
<input id="kgsInput" type="number" class="form-control form-control-lg" placeholder="Enter Kilograms...">
</div>
</form>
<div id="output">
<div class="card card-primary mb-2">
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
<div class="card card-success mb-2">
<div class="card-block">
<h4>Pounds:</h4>
<div id="lbsOutput"></div>
</div>
</div>
<div class="card card-danger mb-2">
<div class="card-block">
<h4>Ounces:</h4>
<div id="ozOutput"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
There is all the HTML code for the Weight Converter Javascript. Now, you can see an output with Weight Converter Javascript then we write javascript for Weight Converter Javascript.
output
Javascript code
document.getElementById('output').style.visibility = 'hidden';
document.getElementById('kgsInput').addEventListener('input', function(e) {
document.getElementById('output').style.visibility = 'visible';
let kgs = e.target.value;
document.getElementById('gramsOutput').innerHTML = (kgs * 1000).toFixed(2);
document.getElementById('lbsOutput').innerHTML = (kgs * 2.2046).toFixed(2);
document.getElementById('ozOutput').innerHTML = (kgs * 35.274).toFixed(2);
});
Final output
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Weight Converter Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create Weight converter Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
