I just started learning JavaScript in Scrimba and there is a practice part where to make a unit conversion but I already did the static one then I challenge myself to add an user input but I just burnout my self I'm so confused now
Here is my html code:
<!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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div >
<h2 id="heading">Metric/Imperial Unit Converstion</h2>
<!-- <h2 id="numToConvert"> 0 </h2> -->
<input type="number" value="num" id="inputNum" min="0" onchange="unitConvert()">
</div>
</main>
<section>
<div >
<div >
<p>Length (Meter/Feet)
<p id="meterFeet">0 meters = 0.000 feet | 0 feet = 0.000 meters</p>
</div>
<div >
<p>Volumes (Liters/Gallons)
<p id="litersGallons">0 liters = 0.000 gallons | 0 gallons = 0.000 liters</p>
</div>
<div >
<p>Mass (Kilograns/Pounds)
<p id="kiloPounds">0 kilos = 0.000 pounds | 0 pounds = 0.000 kilos</p>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Here is my JavaScript code:
const unit = document.getElementById("inputNum").value;
function unitConvert() {
const meterToFeet = (unit * 3.28084).toFixed(3)
const feetToMeter = (unit * 0.3048).toFixed(3)
const litersToGallons = (unit * 0.264172).toFixed(3)
const GallonsToLiters = (unit * 3.785412).toFixed(3)
const kilogramsToPounds = (unit * 2.2).toFixed(3)
const poundsToKilograms = (unit / 2.2).toFixed(3)
//Meter to Feet/Vice Versa
document.getElementById("meterFeet").textContent = unit " meters = " meterToFeet " feet | " unit " feet = " feetToMeter " meters"
//Liters to Gallons/Vice Versa
document.getElementById("litersGallons").textContent = unit " liters = " litersToGallons " gallons | " unit " gallons = " GallonsToLiters " liters"
//Kilo to Pounds/Vice Versa
document.getElementById("kiloPounds").textContent = unit " kilos = " kilogramsToPounds " pounds | " unit " pounds = " poundsToKilograms " kilos"
}
CodePudding user response：
you can try this code i hope it is what you asked for
function unitConvert() {
const unit = document.getElementById("inputNum").value;
const meterToFeet = (unit * 3.28084).toFixed(3)
const feetToMeter = (unit * 0.3048).toFixed(3)
const litersToGallons = (unit * 0.264172).toFixed(3)
const GallonsToLiters = (unit * 3.785412).toFixed(3)
const kilogramsToPounds = (unit * 2.2).toFixed(3)
const poundsToKilograms = (unit / 2.2).toFixed(3)
//Meter to Feet/Vice Versa
document.getElementById("meterFeet").textContent = unit " meters = " meterToFeet " feet | " unit " feet = " feetToMeter " meters"
//Liters to Gallons/Vice Versa
document.getElementById("litersGallons").textContent = unit " liters = " litersToGallons " gallons | " unit " gallons = " GallonsToLiters " liters"
//Kilo to Pounds/Vice Versa
document.getElementById("kiloPounds").textContent = unit " kilos = " kilogramsToPounds " pounds | " unit " pounds = " poundsToKilograms " kilos"
}
const inputField = document.querySelector('#inputNum');
inputField .addEventListener('input', function () {
unitConvert()
});body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #fcbe24;
background-color: #18222d;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div >
<h2 id="heading">Metric/Imperial Unit Converstion</h2>
<!-- <h2 id="numToConvert"> 0 </h2> -->
<input type="number" value="num" id="inputNum" min="0" onchange="unitConvert()">
</div>
</main>
<section>
<div >
<div >
<p>Length (Meter/Feet)
<p id="meterFeet">0 meters = 0.000 feet | 0 feet = 0.000 meters</p>
</div>
<div >
<p>Volumes (Liters/Gallons)
<p id="litersGallons">0 liters = 0.000 gallons | 0 gallons = 0.000 liters</p>
</div>
<div >
<p>Mass (Kilograns/Pounds)
<p id="kiloPounds">0 kilos = 0.000 pounds | 0 pounds = 0.000 kilos</p>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>