How to create a simple web application that converts & calculator miles to yards using JavaScript, CSS and HTML, you can follow the steps below. This application will include an input field for miles, a button to trigger the conversion, and an area to display the result in yards.
Steps to Create miles to yards Converter:
1. HTML Structure:
-> Create an input field for miles.
-> Add a button to trigger the conversion.
-> Display the result in a designated area.
2. JavaScript Logic:
-> Use the formula: 1 mile = 1760 yards.
-> Retrieve the input value, perform the calculation, and display the result.
3. Styling (Optional):
-> Add basic CSS to make the interface visually appealing.
Code Implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miles to Yards Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.converter {
max-width: 300px;
margin: 0 auto;
text-align: center;
}
input[type="number"] {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="converter">
<h1>Miles to Yards Converter</h1>
<input type="number" id="milesInput" placeholder="Enter miles" step="0.01">
<button onclick="convertMilesToYards()">Convert</button>
<div class="result" id="result"></div>
</div>
<script>
function convertMilesToYards() {
// Get the input value in miles
const miles = parseFloat(document.getElementById("milesInput").value);
// Check if the input is valid
if (isNaN(miles)) {
document.getElementById("result").innerText = "Please enter a valid number.";
return;
}
// Conversion formula: 1 mile = 1760 yards
const yards = miles * 1760;
// Display the result
document.getElementById("result").innerText = `${miles} miles = ${yards.toFixed(2)} yards`;
}
</script>
</body>
</html>
How It Works:
Miles to Yards Converter
1. HTML:
-> An input field (`<input>`) allows the user to enter the number of miles.
-> A button (`<button>`) triggers the conversion when clicked.
-> A `<div>` with the ID `result` displays the converted value.
2. JavaScript:
-> The `convertMilesToYards()` function:
-> Retrieves the input value using `document.getElementById(“milesInput”).value`.
-> Converts the input to a number using `parseFloat()`.
-> Checks if the input is valid (not `NaN`).
-> Performs the conversion: `yards = miles * 1760`.
-> Displays the result in the `result` div.
3. CSS:
-> Basic styling is added to make the interface user-friendly.
Example Output:
-> If the user enters `2.5` miles and clicks “Convert,” the result will display:
2.5 miles = 4400.00 yards
Key Features:
-> Input Validation: Ensures the user enters a valid number.
-> Dynamic Result Update: The result is displayed dynamically without reloading the page.
-> Simple and Clean Design: Easy-to-use interface with minimal styling.
You can copy and paste this code into an HTML file and open it in a browser to see the converter in action!