Convert Between Miles to Inches Using Javascript, CSS & HTML

How to create a simple web application that converts miles to inches using HTML, CSS, and JavaScript, follow the steps below. This application will allow users to input a value in miles and display the equivalent value in inches.

1. HTML Structure

Create the basic structure of the web page with an input field for miles, a button to trigger the conversion, and a display area for the result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miles to Inches Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Miles to Inches Converter</h1>
<label for="miles">Enter Miles:</label>
<input type="number" id="miles" placeholder="Enter miles">
<button onclick="convert()">Convert</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>

2. CSS Styling

Add some basic styling to make the application visually appealing.

/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

h1 {
margin-bottom: 20px;
}

label {
font-size: 18px;
margin-right: 10px;
}

input {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

button:hover {
background-color: #0056b3;
}

#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}

3. JavaScript Logic

Write the JavaScript code to handle the conversion from miles to inches. The conversion formula is:

Inches=Miles×63360

// script.js
function convert() {

// Get the input value in miles
const miles = parseFloat(document.getElementById("miles").value);

// Check if the input is valid
if (isNaN(miles)) {
alert("Please enter a valid number for miles.");
return;
}

// Convert miles to inches
const inches = miles * 63360;

// Display the result
document.getElementById("result").innerText = `${miles} miles = ${inches.toLocaleString()} inches`;
}

4. How It Works

1. User Input:-
-> The user enters a value in miles in the input field.
2. Conversion:-
-> When the “Convert” button is clicked, the `convert()` function is triggered.
-> The function retrieves the input value, converts it to inches using the formula, and displays the result.
3. Output:-
-> The result is displayed below the button in the format: `X miles = Y inches`.

5. Output

When you run this code, you’ll see a simple web page where you can input miles, click “Convert,” and see the result in inches. For example:
-> Input: `1` mile
-> Output: `1 miles = 63,360 inches`

This is a beginner-friendly project that demonstrates the use of HTML, CSS, and JavaScript to create a functional web application.

Miles to Inches Converter

Enter Miles: