Convert from Kilometers to Yards Using Javascript code with HTML

Hello Friends Today, through this tutorial, I will tell you Convert from Kilometers to Yards Using Javascript script code with html.

Here’s the HTML and JavaScript code for a Kilometers to Yards converter:


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kilometers to Yards Converter</title>
<h1>Kilometers to Yards Converter</h1>
<label for="km-input">Enter kilometers:</label>
<input type="number" id="km-input" placeholder="0">
<button onclick="convertKmToYards()">Convert</button>
<p id="result"></p>
<script src="script.js"></script>

JavaScript (script.js):

function convertKmToYards() {
const kilometers = document.getElementById("km-input").value;
const yards = kilometers * 1093.61; // Conversion factor: 1 kilometer = 1093.61 yards
const resultElement = document.getElementById("result");
if (isNaN(kilometers)) {
resultElement.textContent = "Please enter a valid number.";
} else {
resultElement.textContent = `${kilometers} kilometers is equal to ${yards.toFixed(2)} yards.`;


1. HTML:
* The HTML code defines the basic structure of the web page, including a heading, labels, input fields, a button, and a paragraph element to display the result.
* It also includes a script tag that references an external JavaScript file named `script.js`.

2. JavaScript:
* The `convertKmToYards` function is triggered when the “Convert” button is clicked.
* It retrieves the value entered in the “km-input” field using `document.getElementById`.
* It performs the conversion by multiplying the kilometers by the conversion factor (1093.61).
* It retrieves the “result” element using `document.getElementById`.
* It checks if the entered value is a valid number using `isNaN`.
* If it is not a number, an error message is displayed.
* If it is a number, the converted value is formatted to two decimal places using `toFixed(2)` and displayed along with the original value and units.

How to use:

1. Save the HTML code as `index.html` and the JavaScript code as `script.js` in the same directory.
2. Open `index.html` in your web browser.
3. Enter a value in kilometers in the input field.
4. Click the “Convert” button.
5. The result, showing the equivalent value in yards, will be displayed in the paragraph below the button.