Hi, guys I am back with another fantastic project in this project I created a Length Converter Using HTML, CSS & JavaScript.
I provide my readers and followers with the complete source code for this project without any cost or subscription requirements. The code files are available for free download and use.
Length Converter Using JavaScript
A length converter is a tool or application that allows users to convert measurements from one unit of length to another. It is commonly used in various contexts, including websites, mobile apps, or standalone software, where users may need to convert measurements between different units such as Meters, Centimeters, Inches, Feet, Miles, and more.
The purpose of a length converter is to make it easy for users to perform quick and accurate conversions without having to manually calculate the equivalent values. Users typically input a value along with the unit of measurement they are starting with, and then select the desired unit for conversion.
The converter then calculates the equivalent length in the chosen unit and displays the result.
Length converters are practical tools for individuals working with measurements in different systems or unit standards, and they are commonly found in areas such as education, engineering, construction, and online shopping where users may need to switch between various length units.
About This Project
The Code Hunter team developed this project to assist students in learning coding and programming. If you’re interested in joining our team, please follow us on Instagram.
| Created by | Ahmed Developer |
| Languages | HTML, CSS & JS |
| Source Code | Available Below |
| Preview | Take Preview |
| GitHub Link | Code Link |
How to Create a Length Converter Using HTML, CSS, and JS
There are some steps to create this type of Lenght Converter Using HTML, CSS, and JavaScript which are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three (3) files for HTML, CSS, and JavaScript.
- Make sure the HTML file extension is (.html), and the CSS file extension is (.css).
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Video Tutorial
If you want to learn more about this project please watch this video and also subscribe to this YouTube channel for more content like this. This video is provided by insideTheDiv.
Length Converter Using HTML, CSS, and JavaScript – Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">Length Converter</h1>
<div class="converter">
<div class="input-group">
<label for="amount">Length</label>
<input type="number" id="amount" placeholder="Enter length" min="0" step="0.01" required>
</div>
<div class="input-group">
<label for="baseLength">Base len.</label>
<select id="baseLength">
<option value="km">km</option>
<option value="m">m</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
</select>
</div>
<div class="input-group">
<label for="targetLength">Target len.</label>
<select id="targetLength">
<option value="km">km</option>
<option value="m">m</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
</select>
</div>
<button id="convertBtn">Convert</button>
</div>
<div class="result">
<p id="conversionResult"></p>
</div>
</div>
<div class="attribute">
Create by
<a href="https://www.linkedin.com/in/ahmed-raza-developer/">
Ahmed Developer
</a >
</div>
<script src="script.js"></script>
</body>
</html>
CSS FILE
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
:root{
--clr-primary: rgba(0,213,255,1);
--clr-secondary: #0A2647;
--clr-container-bg: #cecece;
--clr-btn-bg: #fd1afd;
--clr-btn-hover-bg: #d319d3;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-secondary);
font-family: 'poppins';
position: relative;
}
.container{
height: 400px;
width: 350px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--clr-container-bg);
border: 10px solid var(--clr-primary);
border-radius: 10px;
}
.title {
font-size: 1.75rem;
margin-bottom: 2rem;
}
.converter {
display: grid;
grid-template-columns: repeat(2,1fr);
margin-bottom: 1rem;
width: 80%;
}
.input-group {
margin-bottom: 1rem;
}
.input-group:nth-child(1),
#convertBtn{
grid-column-start: 1;
grid-column-end: 3;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input,
select {
font-size: 1rem;
padding: 0.5rem;
border: none;
border-radius: 4px;
}
button {
font-size: 1rem;
padding: 0.5rem 1rem;
background-color: var(--clr-btn-bg);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: var(--clr-btn-hover-bg);
}
.result {
font-size: 1.2rem;
}
.attribute{
position: absolute;
bottom: 10px;
color: #fff;
}
.attribute a{
color: var(--clr-primary);
}
JavaScript FILE
const convertBtn = document.getElementById('convertBtn');
const amountInput = document.getElementById('amount');
const baseLengthSelect = document.getElementById('baseLength');
const targetLengthSelect = document.getElementById('targetLength');
const conversionResult = document.getElementById('conversionResult');
convertBtn.addEventListener('click', () => {
const amount = parseFloat(amountInput.value);
const baseLength = baseLengthSelect.value;
const targetlength = targetLengthSelect.value;
if (isNaN(amount) || amount <= 0) {
alert('Invalid amount. Please enter a positive number.');
conversionResult.style.color = 'red';
conversionResult.textContent = 'Invalid amount. Please enter a positive number.'
return;
}
conversionResult.style.color = 'inherit';
const conversionRate = getConversionRate(baseLength, targetlength);
const convertedAmount = amount * conversionRate;
conversionResult.textContent = `${amount} ${baseLength} = ${convertedAmount} ${targetlength}`;
});
function getConversionRate(baseLength, targetLenth) {
const exchangeRates = {
km: {
m: 1000,
cm: 100000,
mm: 1000000
},
m: {
km: 0.001,
cm: 100,
mm: 1000
},
cm: {
km: 0.00001,
m: 0.01,
mm: 10
},
mm: {
km: 0.0000001,
m: 0.001,
cm: 0.1
}
};
return exchangeRates[baseLength][targetLenth];
}
You Might Like This:
- How to Create a Beautiful Product Card Using HTML and CSS Only
- How to Create Animated Social Icon With Hover Effect using HTML and CSS
- How To Create a Profile Card Using HTML and CSS – Complete Source Code
Final Words
This blog has introduced a JavaScript Length Converter, offering a valuable resource for beginners eager to enhance their coding skills. By providing a complete source code, learners can gain practical insights into creating functional and interactive web tools.
This project not only facilitates the understanding of JavaScript but also empowers enthusiasts to apply this knowledge in real-world scenarios.
Emphasizing simplicity, accessibility, and hands-on learning, the JavaScript Length Converter serves as an excellent stepping stone for those venturing into the exciting realm of web development. Happy coding!