Skip to content

Commit 8461294

Browse files
sahandghavidelsahandghavidel
committed
update weight converter project
1 parent 45ef139 commit 8461294

File tree

3 files changed

+59
-69
lines changed

3 files changed

+59
-69
lines changed

‎projects/weight-converter/index.html

+16-22
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
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" />
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
87
<title>Weight Converter</title>
9-
</head>
10-
<body>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
1111
<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>
12+
<h1 class="heading">Weight Converter</h1>
13+
<div class="input-container">
14+
<label for="pounds">Pounds:</label>
15+
<input type="number" id="input" class="input" step=".1" placeholder="Enter number">
16+
</div>
17+
<p>Your weight in kg is: <span id="result"></span></p>
18+
<p class="error" id="error"></p>
2519
</div>
2620
<script src="index.js"></script>
27-
</body>
28-
</html>
21+
</body>
22+
</html>

‎projects/weight-converter/index.js

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
const inputEl = document.getElementById("input");
22
const errorEl = document.getElementById("error");
3-
const resultsEl = document.getElementById("result");
4-
5-
//add an event listener to the form
6-
let time;
3+
const resultEl = document.getElementById("result");
74
let errorTime;
8-
5+
let resultTime;
96
function updateResults() {
107
if (inputEl.value <= 0 || isNaN(inputEl.value)) {
11-
clearTimeout(errorTime);
128
errorEl.innerText = "Please enter a valid number!";
13-
errorTime = setTimeout(function () {
9+
clearTimeout(errorTime);
10+
errorTime = setTimeout(() => {
1411
errorEl.innerText = "";
12+
inputEl.value = "";
1513
}, 2000);
16-
inputEl.value = "";
1714
} else {
18-
clearTimeout(time);
19-
20-
resultsEl.innerText = (+inputEl.value / 2.2).toFixed(2);
21-
time = setTimeout(function () {
22-
resultsEl.innerText = "";
15+
resultEl.innerText = (+inputEl.value / 2.2).toFixed(2);
16+
clearTimeout(resultTime);
17+
resultTime = setTimeout(() => {
18+
resultEl.innerText = "";
2319
inputEl.value = "";
2420
}, 10000);
2521
}

‎projects/weight-converter/style.css

+34-34
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
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;
1+
body{
2+
margin: 0;
3+
background: linear-gradient(to left top, yellow, lightblue, yellow);
4+
min-height: 100vh;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: 'Courier New', Courier, monospace;
9+
color: darkcyan;
1010
}
1111

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;
12+
.container{
13+
background: rgba(255,255,255,0.3);
14+
padding: 20px;
15+
box-shadow: 0 4px 10px rgba(0,0,0,.3);
16+
border-radius: 10px;
17+
width: 85%;
18+
max-width: 450px;
1919
}
2020

21-
.input-container {
22-
display: flex;
23-
justify-content: space-between;
24-
align-items: center;
25-
font-size: 18px;
26-
font-weight: 700;
21+
.input-container{
22+
display: flex;
23+
justify-content: space-between;
24+
align-items: center;
25+
font-size: 18px;
26+
font-weight: 700;
2727
}
2828

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;
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;
3838
}
3939

40-
.error {
41-
color: red;
42-
}
40+
.error{
41+
color: red;
42+
}

0 commit comments

Comments
 (0)