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

Commit255472a

Browse files
update temperature convertor project
1 parentf7ab3df commit255472a

File tree

4 files changed

+52
-54
lines changed

4 files changed

+52
-54
lines changed

‎projects/temp-converter/index.js

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎projects/temp-converter/index.htmlrenamed to‎projects/temperature-convertor/index.html

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,42 +9,41 @@
99
</head>
1010
<body>
1111
<divclass="container">
12-
<divclass="heading">Temperature Convertor</div>
13-
<divclass="box">
12+
<h1class="heading">Temperature Convertor</h1>
13+
<divclass="temp-container">
1414
<labelfor="celsius">Celsius:</label>
1515
<input
16+
onchange="computeTemp(event)"
1617
type="number"
1718
name="celsius"
1819
id="celsius"
1920
placeholder="Enter Temperature"
20-
class="input_box"
21-
onchange="computeTemp(event)"
21+
class="input"
2222
/>
2323
</div>
24-
<divclass="box">
24+
<divclass="temp-container">
2525
<labelfor="fahrenheit">Fahrenheit:</label>
2626
<input
27+
onchange="computeTemp(event)"
2728
type="number"
2829
name="fahrenheit"
2930
id="fahrenheit"
3031
placeholder="Enter Temperature"
31-
class="input_box"
32-
onchange="computeTemp(event)"
32+
class="input"
3333
/>
3434
</div>
35-
<divclass="box">
35+
<divclass="temp-container">
3636
<labelfor="kelvin">Kelvin:</label>
3737
<input
38+
onchange="computeTemp(event)"
3839
type="number"
3940
name="kelvin"
4041
id="kelvin"
4142
placeholder="Enter Temperature"
42-
class="input_box"
43-
onchange="computeTemp(event)"
43+
class="input"
4444
/>
4545
</div>
4646
</div>
47-
4847
<scriptsrc="index.js"></script>
4948
</body>
5049
</html>
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
constcelsiusEl=document.getElementById("celsius");
2+
constfahrenheitEl=document.getElementById("fahrenheit");
3+
constkelvinEl=document.getElementById("kelvin");
4+
5+
functioncomputeTemp(event){
6+
constcurrentValue=+event.target.value;
7+
8+
switch(event.target.name){
9+
case"celsius":
10+
kelvinEl.value=(currentValue+273.32).toFixed(2);
11+
fahrenheitEl.value=(currentValue*1.8+32).toFixed(2);
12+
break;
13+
case"fahrenheit":
14+
celsiusEl.value=((currentValue-32)/1.8).toFixed(2);
15+
kelvinEl.value=((currentValue-32)/1.8+273.32).toFixed(2);
16+
break;
17+
case"kelvin":
18+
celsiusEl.value=(currentValue-273.32).toFixed(2);
19+
fahrenheitEl.value=((currentValue-273.32)*1.8+32).toFixed(2);
20+
break;
21+
default:
22+
break;
23+
}
24+
}

‎projects/temp-converter/style.cssrenamed to‎projects/temperature-convertor/style.css

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,50 +6,46 @@ body {
66
justify-content: center;
77
align-items: center;
88
font-family: monospace;
9-
font-size:1.25rem;
109
color: darkcyan;
1110
}
1211

13-
.heading {
14-
height:58px;
15-
line-height:58px;
16-
width:100%;
17-
font-size:2rem;
18-
font-weight: bolder;
19-
text-align: center;
20-
border-radius:10px;
21-
padding:015px;
22-
margin-bottom:28px;
23-
}
2412
.container {
13+
background:rgba(255,255,255,0.3);
14+
padding:20px;
15+
box-shadow:04px10pxrgba(0,0,0,0.3);
16+
border-radius:10px;
2517
width:85%;
2618
max-width:450px;
2719
min-width:350px;
28-
padding:20px;
2920
display: flex;
3021
flex-direction: column;
3122
align-items: center;
32-
border-radius:10px;
33-
background:rgba(255,255,255,0.3);
34-
box-shadow:04px10pxrgba(0,0,0,0.3);
3523
}
36-
.box {
24+
25+
.heading {
26+
font-size:32px;
27+
}
28+
29+
.temp-container {
3730
width:100%;
3831
padding:15px;
3932
font-weight: bold;
33+
font-size:18px;
4034
}
41-
.input_box {
42-
width:14rem;
35+
36+
.input {
37+
width:220px;
4338
font-family: monospace;
4439
padding:5px;
4540
float: right;
4641
outline: none;
4742
background:rgba(255,255,255,0.3);
4843
border-color:rgba(255,255,255,0.5);
4944
color: darkgreen;
50-
font-size:1.25rem;
45+
font-size:18px;
5146
}
5247

53-
.input_box::placeholder {
54-
color: darkgray;
48+
49+
.input::placeholder{
50+
color: darkgray;
5551
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp