How to Create Weight Converter With Simple Javascript
How to Create Weight Converter Using HTML, CSS & JAVASCRIPT
The Code is written below. Copy this code and paste in your code-editor to run Weight Converter Page.
Created by Niks.
Follow me on Instagram - @niks_banna_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weight Converter</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid text-center text-light mb-4 bg-success p-3">
<h2>Weight Converter</h2>
<p>Type a value in any of the fields to convert between weight measurements:</p>
</div>
<div class="row m-auto">
<div class="col-sm-6 mt-1">
<label>Pound:</label>
<input type="number" class="ml-3" placeholder="Pounds" id="inputPounds"
oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
<div class="col-sm-6 mt-1">
<label>Kilograms:</label>
<input type="number" placeholder="Kilograms" id="inputKilograms"
oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
</div>
<div class="row m-auto">
<div class="col-sm-6 mt-1">
<label>Grams:</label>
<input type="number" class="ml-3" placeholder="Grams" id="inputGrams"
oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
<div class="col-sm-6 mt-1">
<label>Stones:</label>
<input type="number" class="ml-4" placeholder="Stones" id="inputStones"
oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
</div>
<div class="row m-auto">
<div class="col-sm-6 mt-1">
<label>Ounces:</label>
<input type="number" class="ml-2" placeholder="Ounces" id="inputOunces"
oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
</div>
</div>
<script>
function weightConverter(source, valNum) {
valNum = parseFloat(valNum);
var inputPounds = document.getElementById("inputPounds");
var inputKilograms = document.getElementById("inputKilograms");
var inputOunces = document.getElementById("inputOunces");
var inputGrams = document.getElementById("inputGrams");
var inputStones = document.getElementById("inputStones");
if (source == "inputPounds") {
inputKilograms.value = (valNum / 2.2046).toFixed(2);
inputOunces.value = (valNum * 16).toFixed(2);
inputGrams.value = (valNum / 0.0022046).toFixed();
inputStones.value = (valNum * 0.071429).toFixed(3);
}
if (source == "inputKilograms") {
inputPounds.value = (valNum * 2.2046).toFixed(2);
inputOunces.value = (valNum * 35.274).toFixed(2);
inputGrams.value = (valNum * 1000).toFixed();
inputStones.value = (valNum * 0.1574).toFixed(3);
}
if (source == "inputOunces") {
inputPounds.value = (valNum * 0.062500).toFixed(4);
inputKilograms.value = (valNum / 35.274).toFixed(4);
inputGrams.value = (valNum / 0.035274).toFixed(1);
inputStones.value = (valNum * 0.0044643).toFixed(4);
}
if (source == "inputGrams") {
inputPounds.value = (valNum * 0.0022046).toFixed(4);
inputKilograms.value = (valNum / 1000).toFixed(4);
inputOunces.value = (valNum * 0.035274).toFixed(3);
inputStones.value = (valNum * 0.00015747).toFixed(5);
}
if (source == "inputStones") {
inputPounds.value = (valNum * 14).toFixed(1);
inputKilograms.value = (valNum / 0.15747).toFixed(1);
inputOunces.value = (valNum * 224).toFixed();
inputGrams.value = (valNum / 0.00015747).toFixed();
}
}
</script>
</body>
</html>
Comments
Post a Comment