Alrigh after a bit of a break I’m back at coding!
Still working on the basics.
Today I built a measuring unit converter with HTML, CSS, and JS. It’s a nice little exercise to practice all the three of them.
I can actually build the HTML well and the JS works as well, but I find it difficult to make the CSS look really good. I guess design is really something that one needs to learn about almost as a separate discipline
My Code
Anyways, with that said here is my converter!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<style>
body {
display: flex;
justify-content: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
margin: 0;
padding: 20px;
}
h2 {
margin: 0;
padding: 10px;
}
p {
margin: 0;
padding: 3px;
}
.convertion-div {
background-color: white;
width: 450px;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
#body-container {
background-color: rgb(181, 236, 252);
width: 600px;
border-radius: 10px;
margin: 20px;
padding: 50px;
box-sizing: border-box;
}
#convertion-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#input-container {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="body-container">
<div id="input-container">
<h1>Metric/Imperial Unit Conversion</h1>
<input type="number" id="c-number">
<button id="c-button">Convert</button>
</div>
<div id="convertion-container">
<div id="length-div" class="convertion-div">
<h2>Length (Meters/US Feet)</h2>
<p id="m-to-f">1 meter = 3.281 feet</p>
<p id="f-to-m">1 feet = 0.305 meter</p>
</div>
<div id="volume-div" class="convertion-div">
<h2>Volume (Liters/US Gallons)</h2>
<p id="l-to-g">1 liter = 0.264 gallon</p>
<p id="g-to-l">1 gallon = 3.788 liter</p>
</div>
<div id="mass-div" class="convertion-div">
<h2>Mass (Kilograms/US Pounds)</h2>
<p id="k-to-p">1 kilogram = 2.204 pound</p>
<p id="p-to-k">1 pound = 0.454 kilogram</p>
</div>
</div>
</div>
<script>
const convertButton = document.getElementById("c-button");
let factor = 1
convertButton.addEventListener("click", function () {
let convertNumber = document.getElementById("c-number").value;
console.log(convertNumber);
factor = Number(convertNumber)
document.getElementById("c-number").value = "";
document.getElementById("m-to-f").textContent = `${factor} meter = ${(factor * 3.281).toFixed(3)} feet`;
document.getElementById("f-to-m").textContent = `${factor} feet = ${(factor * 0.305).toFixed(3)} meter`;
document.getElementById("l-to-g").textContent = `${factor} liter = ${(factor * 0.264).toFixed(3)} gallon`;
document.getElementById("g-to-l").textContent = `${factor} gallon = ${(factor * 3.788).toFixed(3)} liter`;
document.getElementById("k-to-p").textContent = `${factor} kilogram = ${(factor * 2.204).toFixed(3)} pound`;
document.getElementById("p-to-k").textContent = `${factor} pound = ${(factor * 0.454).toFixed(3)} kilogram`;
});
</script>
</body>
</html>
Top comments (0)