Movatterモバイル変換

[0]ホーム
URL:

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

Commit8461294

Browse files
update weight converter project
1 parent45ef139 commit8461294

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
<htmllang="en">
3-
<head>
4-
<metacharset="UTF-8"/>
5-
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6-
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
7-
<linkrel="stylesheet"href="style.css"/>
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
87
<title>Weight Converter</title>
9-
</head>
10-
<body>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
1111
<divclass="container">
12-
<h1class="heading">Weight Converter</h1>
13-
<divclass="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:<spanid="result"></span></p>
24-
<spanid="error"class="error"></span>
12+
<h1class="heading">Weight Converter</h1>
13+
<divclass="input-container">
14+
<labelfor="pounds">Pounds:</label>
15+
<inputtype="number"id="input"class="input"step=".1"placeholder="Enter number">
16+
</div>
17+
<p>Your weight in kg is:<spanid="result"></span></p>
18+
<pclass="error"id="error"></p>
2519
</div>
2620
<scriptsrc="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
constinputEl=document.getElementById("input");
22
consterrorEl=document.getElementById("error");
3-
constresultsEl=document.getElementById("result");
4-
5-
//add an event listener to the form
6-
lettime;
3+
constresultEl=document.getElementById("result");
74
leterrorTime;
8-
5+
letresultTime;
96
functionupdateResults(){
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)
[8]ページ先頭
©2009-2025 Movatter.jp