Hello Friends Today, through this tutorial, I will tell you How to Convert inches to Yards Using JavaScript With HTML.
Here’s the HTML and JavaScript code for an Inches to Yards converter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inches to Yards Converter</title>
</head>
<body>
<h1>Inches to Yards Converter</h1>
<p>Enter a value in inches:</p>
<input type="number" id="inchesInput" placeholder="Inches">
<button onclick="convertInchesToYards()">Convert</button>
<p id="result"></p>
<script>
function convertInchesToYards() {
const inches = document.getElementById("inchesInput").value;
const yards = inches / 36; // Conversion factor
const result = document.getElementById("result");
result.textContent = `${inches} inches is equal to ${yards.toFixed(2)} yards.`;
}
</script>
</body>
</html>
Explanation:
1. Defines the basic structure with a heading, input field, button, and result display area.
2. Links the JavaScript code in a separate file named `script.js`.
3. The `convertInchesToYards` function is defined.
4. It retrieves the value entered in the `inchesInput` field using `document.getElementById`.
5. It converts inches to yards using the conversion factor (1 yard equals 36 inches).
6. It retrieves the `result` element where the converted value will be displayed.
7. It uses template literals and string interpolation to format the output and display the converted value with two decimal places using `toFixed(2)`.
This code provides a simple and functional way to convert inches to yards using HTML and JavaScript.