In This Instructional exercise, Let’s dive into making something cool – a unit transformation! It’s fun and makes a difference when you learn JavaScript, HTML, and CSS. In this web journal, we’re planning to walk through a basic however magnificent length change instrument with JavaScript.
JS Structure
The Conversion Factors
Starting by setting up the transformation variables connected to meters.
const conversionFactors = {
meter: 1,
yard: 1.09361,
foot: 3.28084,
inch: 39.3701,
mile: 0.000621371
};
The Conversion Logic
Following, we make a work called ‘convertLength’. This work takes esteem and a unit, changes it into meters to begin with, and after that changes over it to all other units. The coming about values are assembled by unit names for clarity.
function convertLength(value, unit) {
let result = {};
let meters = value / conversionFactors[unit];
for (let key in conversionFactors) {
if (unit != conversionFactors[key])
result[key] = meters * conversionFactors[key];
}
return result;
}
User Interface Integration
We at that point make a work ‘convert’ to coordinate the transformation rationale with our HTML interface. This work will be called when a client inputs an esteem and chooses a unit to change over from.
function convert(unit) {
let value = document.getElementById(unit).value;
let result = convertLength(value, unit);
for (let key in conversionFactors) {
if (key != unit) {
let rounded = result[key];
rounded = (key != "mile") ? result[key].toFixed(4) : rounded;
rounded = (rounded == Math.round(rounded)) ? Math.round(rounded) : rounded;
document.getElementById(key).value = rounded;
}
}
}
Reset Functionality
Not the ‘reset’ work that clears everything when required and keeps things clean and smooth.
function reset() {
for (let key in conversionFactors) {
document.getElementById(key).value = "";
}
}
Preventing Negative Input
To create it even way better for clients, no negative values are permitted within the input areas.
const numberInputs = document.querySelectorAll('input[type=number]');
numberInputs.forEach(function(input) {
input.addEventListener('keydown', function(e) {
if (e.key === '-') {
e.preventDefault();
}
});
});
HTML Structure
Here’s an example of the HTML structure to use with the above JavaScript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Length Conversion Tool</title>
<script src="conversion.js" defer></script>
</head>
<body>
<h1>Length Conversion Tool</h1>
<div>
<label for="meter">Meters:</label>
<input type="number" id="meter" oninput="convert('meter')">
</div>
<div>
<label for="yard">Yards:</label>
<input type="number" id="yard" oninput="convert('yard')">
</div>
<div>
<label for="foot">Feet:</label>
<input type="number" id="foot" oninput="convert('foot')">
</div>
<div>
<label for="inch">Inches:</label>
<input type="number" id="inch" oninput="convert('inch')">
</div>
<div>
<label for="mile">Miles:</label>
<input type="number" id="mile" oninput="convert('mile')">
</div>
<button onclick="reset()">Reset</button>
</body>
</html>
CSS Structure
Here’s an example of the CSS structure to use with the above JavaScript code:
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin:0;
padding:0;
display: flex;
min-height: 100vh;
font-weight: bold;
}
.input-container {
border:1px solid #3a5eed;
border-radius: 10px;
padding: 20px;
text-align: center;
margin:0 auto;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-image: linear-gradient(to bottom right, #062339,#111);
}
.input-container h2 {
display: flex;
align-items: center;
justify-content: center;
margin-top: -20px;
height: 50px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
padding:10px;
margin-left: -20px;
margin-right: -20px;
background-image: linear-gradient(to right, #040405,#1f0bf4);
}
label {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
color: whitesmoke;
text-align: left;
background-color: #e72e59;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 4px;
}
input[type="number"] {
width:280px;
height:50px;
border:none;
text-align: center;
font-weight: bold;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
input[type="number"]:focus {
outline: none;
}
.input-container div {
display: flex;
margin-bottom: 15px;
}
#reset{
width:100px;
height: 40px;
font-size: large;
font-weight: bold;
border-radius: 5px;
}
Conclusion
By taking after the steps shared in this post, building your claim-length transformation device can be both instructive and energizing. You’ll continuously improve it indeed more by including unused highlights or diverse estimation units.