Skip to content

Commit 8017149

Browse files
sahandghavidelsahandghavidel
committed
update weight converter project
1 parent 255472a commit 8017149

File tree

3 files changed

+84
-58
lines changed

3 files changed

+84
-58
lines changed

‎projects/weight-converter/index.html

+23-17
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<link rel="stylesheet" href="style.css">
8-
<title>Weight Conversion</title>
9-
</head>
10-
<body>
11-
<div>
12-
<form>
13-
<h1>Weight Converter (pounds to kg)</h1>
14-
<p>Enter weight value in pounds:</p>
15-
<label>Pounds</label>
16-
<input type="number" step=".1">
17-
<p>Your weight in Kilograms is: <span id="result"></span></p>
18-
</form>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Weight Converter</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1 class="heading">Weight Converter</h1>
13+
<div class="input-container">
14+
<label>Pounds:</label>
15+
<input
16+
placeholder="Enter number"
17+
class="input"
18+
type="number"
19+
step=".1"
20+
id="input"
21+
/>
22+
</div>
23+
<p>Your weight in kg is: <span id="result"></span></p>
24+
<span id="error" class="error"></span>
1925
</div>
2026
<script src="index.js"></script>
21-
</body>
27+
</body>
2228
</html>

‎projects/weight-converter/index.js

+24-30
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
1-
const form = document.querySelector('form');
2-
1+
const inputEl = document.getElementById("input");
2+
const errorEl = document.getElementById("error");
3+
const resultsEl = document.getElementById("result");
34

45
//add an event listener to the form
6+
let time;
7+
let errorTime;
8+
9+
function updateResults() {
10+
if (inputEl.value <= 0 || isNaN(inputEl.value)) {
11+
clearTimeout(errorTime);
12+
errorEl.innerText = "Please enter a valid number!";
13+
errorTime = setTimeout(function () {
14+
errorEl.innerText = "";
15+
}, 2000);
16+
inputEl.value = "";
17+
} else {
18+
clearTimeout(time);
519

6-
form.addEventListener('submit', function(e){
7-
e.preventDefault();
8-
const input = document.querySelector('input');
9-
let results = document.querySelector('span');
10-
let poundsToKG;
20+
resultsEl.innerText = (+inputEl.value / 2.2).toFixed(2);
21+
time = setTimeout(function () {
22+
resultsEl.innerText = "";
23+
inputEl.value = "";
24+
}, 10000);
25+
}
26+
}
1127

12-
if ((input.value <= 0) || (isNaN(input.value))){
13-
results.classList.add('error');
14-
results.innerHTML = "<p>Please enter a value number!</p>"
15-
setTimeout(function(){
16-
results.innerHTML = '';
17-
18-
results.classList.remove('error');
19-
}, 2000)
20-
input.value = '';
21-
} else {
22-
poundsToKG = Number(input.value) / 2.2;
23-
results.classList.add('no-error');
24-
results.innerHTML = `${poundsToKG.toFixed(2)}`;
25-
setTimeout(function(){
26-
results.innerHTML = '';
27-
input.value = '';
28-
results.classList.remove('no-error');
29-
}, 10000)
30-
31-
}
32-
33-
34-
})
28+
inputEl.addEventListener("input", updateResults);

‎projects/weight-converter/style.css

+37-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,42 @@
1-
form {
2-
background-color: rgb(241, 9, 144);
3-
color: white;
4-
width: 500px;
5-
height: 300px;
6-
margin: 100px auto 100px;
7-
padding: 25px;
1+
body {
2+
background: linear-gradient(to left top, yellow, lightblue, yellow);
3+
min-height: 100vh;
4+
margin: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: "Courier New", Courier, monospace;
9+
color: darkcyan;
810
}
911

10-
.error{
11-
color: red;
12+
.container {
13+
background: rgba(255, 255, 255, 0.3);
14+
padding: 20px;
15+
width: 85%;
16+
max-width: 450px;
17+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
18+
border-radius: 10px;
1219
}
1320

14-
.no-error{
15-
color: rgb(6, 48, 2);
21+
.input-container {
22+
display: flex;
23+
justify-content: space-between;
24+
align-items: center;
25+
font-size: 18px;
26+
font-weight: 700;
27+
}
28+
29+
.input {
30+
padding: 10px;
31+
width: 70%;
32+
background: rgba(255, 255, 255, 0.3);
33+
border-color: rgba(255, 255, 255, 0.5);
34+
font-size: 18px;
35+
border-radius: 10px;
36+
color: darkgreen;
37+
outline: none;
38+
}
39+
40+
.error {
41+
color: red;
1642
}

0 commit comments

Comments
 (0)