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

Lines changed: 16 additions & 22 deletions
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

Lines changed: 9 additions & 13 deletions
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

Lines changed: 34 additions & 34 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy