Light Mode

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
  • projects/weight-converter
    • index.html
    • index.js
    • style.css

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
>
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 Convertertitle>
9-
head>
10-
<body>
8+
<link rel="stylesheet" href="style.css">
9+
head>
10+
<body>
1111
<div class="container">
12-
<h1 class="heading">Weight Converterh1>
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 Converterh1>
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)