Weight Converter With Html JavaScript | Weight Converter Javascript







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,Css & Bootstrap Code

 <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

Weight Converter With Html JavaScript | Weight Converter Javascript

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

Weight Converter With Html JavaScript | Weight Converter Javascript

Weight Converter With Html JavaScript | Weight Converter Javascript

Now that we have completed our javascript section,  Here is our updated output with javascriptHope 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. 

Written by – Code With Random/Anki 

Share on:

Leave a Comment