Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8461294

Browse files
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+
letresultTime;
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:04px10pxrgba(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:04px10pxrgba(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)

AltStyle によって変換されたページ (->オリジナル) /