Skip to content

Commit e44d9df

Browse files
LCSOGthbLCSOGthb
authored
Added Converter tool
1 parent 58a3380 commit e44d9df

4 files changed

Lines changed: 121 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ <h1>All-in-One Tools</h1>
1313
</header>
1414

1515
<main class="tool-grid">
16-
<!-- First tool will appear here soon -->
16+
<div class="tool-card">
17+
<h2>Unit Converter</h2>
18+
<p>Convert between common units (length, weight, temperature).</p>
19+
<a href="tools/converter.html" class="btn">Open</a>
20+
</div>
1721
<div class="tool-card">
1822
<h2>Calculator</h2>
1923
<p>Perform quick calculations.</p>

‎tools/converter.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.converter-container {
2+
max-width: 400px;
3+
margin: 2rem auto;
4+
background: white;
5+
padding: 1.5rem;
6+
border-radius: 12px;
7+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
8+
}
9+
10+
.converter-box {
11+
margin-bottom: 1.2rem;
12+
}
13+
14+
.converter-box label {
15+
display: block;
16+
margin-bottom: 0.5rem;
17+
font-weight: bold;
18+
}
19+
20+
.converter-box input,
21+
.converter-box select {
22+
width: 100%;
23+
padding: 0.6rem;
24+
border: 1px solid #ccc;
25+
border-radius: 8px;
26+
font-size: 1rem;
27+
}
28+
29+
.converter-box h2 {
30+
text-align: center;
31+
color: #4f46e5;
32+
}

‎tools/converter.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Unit Converter</title>
7+
<link rel="stylesheet" href="../css/style.css">
8+
<link rel="stylesheet" href="converter.css">
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Unit Converter</h1>
13+
<a href="../index.html" class="btn">← Back</a>
14+
</header>
15+
16+
<main class="converter-container">
17+
<div class="converter-box">
18+
<label for="type">Conversion Type:</label>
19+
<select id="type">
20+
<option value="length">Length (m ↔ km)</option>
21+
<option value="weight">Weight (kg ↔ g)</option>
22+
<option value="temperature">Temperature (°C ↔ °F)</option>
23+
</select>
24+
</div>
25+
26+
<div class="converter-box">
27+
<label for="inputValue">Input Value:</label>
28+
<input type="number" id="inputValue" placeholder="Enter value">
29+
</div>
30+
31+
<div class="converter-box">
32+
<button id="convertBtn" class="btn">Convert</button>
33+
</div>
34+
35+
<div class="converter-box">
36+
<h2>Result: <span id="result">-</span></h2>
37+
</div>
38+
</main>
39+
40+
<script src="converter.js"></script>
41+
</body>
42+
</html>

‎tools/converter.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const typeSelect = document.getElementById("type");
2+
const inputValue = document.getElementById("inputValue");
3+
const resultSpan = document.getElementById("result");
4+
const convertBtn = document.getElementById("convertBtn");
5+
6+
convertBtn.addEventListener("click", () => {
7+
const type = typeSelect.value;
8+
const value = parseFloat(inputValue.value);
9+
10+
if (isNaN(value)) {
11+
resultSpan.textContent = "Invalid input";
12+
return;
13+
}
14+
15+
let result;
16+
17+
switch (type) {
18+
case "length":
19+
// meters <-> kilometers
20+
result = value >= 1000
21+
? `${(value / 1000).toFixed(2)} km`
22+
: `${(value * 1000).toFixed(2)} m`;
23+
break;
24+
25+
case "weight":
26+
// kilograms <-> grams
27+
result = value >= 1
28+
? `${(value * 1000).toFixed(2)} g`
29+
: `${(value / 1000).toFixed(2)} kg`;
30+
break;
31+
32+
case "temperature":
33+
// Celsius <-> Fahrenheit
34+
result = `${value} °C = ${(value * 9/5 + 32).toFixed(2)} °F`;
35+
break;
36+
37+
default:
38+
result = "Unsupported conversion";
39+
}
40+
41+
resultSpan.textContent = result;
42+
});

0 commit comments

Comments
 (0)