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

Lines changed: 23 additions & 17 deletions
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

Lines changed: 24 additions & 30 deletions
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

Lines changed: 37 additions & 11 deletions
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)
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