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

Commitf7ab3df

Browse files
update 2 projects
1 parent772b540 commitf7ab3df

File tree

8 files changed

+109
-201
lines changed

8 files changed

+109
-201
lines changed

‎projects/temp-converter/icon.png

-8.69 KB
Binary file not shown.

‎projects/temp-converter/index.html

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,47 @@
44
<metacharset="UTF-8"/>
55
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
66
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7-
<linkrel="shortcut icon"href="icon.png"type="image/png"/>
87
<title>Temperature Convertor</title>
98
<linkrel="stylesheet"href="style.css"/>
109
</head>
1110
<body>
12-
<section>
13-
<divclass="main">
14-
<divclass="heading">Temperature Convertor</div>
15-
<divclass="container">
16-
<divclass="box">
17-
<labelfor="celsius">Celsius</label>
18-
<input
19-
type="number"
20-
name="celsius"
21-
id="celsius"
22-
placeholder="Enter Temperature"
23-
class="input_box"
24-
/>
25-
</div>
26-
<divclass="box">
27-
<labelfor="fahrenheit">Fahrenheit</label>
28-
<input
29-
type="number"
30-
name="fahrenheit"
31-
id="fahrenheit"
32-
placeholder="Enter Temperature"
33-
class="input_box"
34-
/>
35-
</div>
36-
<divclass="box">
37-
<labelfor="kelvin">Kelvin</label>
38-
<input
39-
type="number"
40-
name="kelvin"
41-
id="kelvin"
42-
placeholder="Enter Temperature"
43-
class="input_box"
44-
/>
45-
</div>
46-
</div>
11+
<divclass="container">
12+
<divclass="heading">Temperature Convertor</div>
13+
<divclass="box">
14+
<labelfor="celsius">Celsius:</label>
15+
<input
16+
type="number"
17+
name="celsius"
18+
id="celsius"
19+
placeholder="Enter Temperature"
20+
class="input_box"
21+
onchange="computeTemp(event)"
22+
/>
4723
</div>
48-
</section>
24+
<divclass="box">
25+
<labelfor="fahrenheit">Fahrenheit:</label>
26+
<input
27+
type="number"
28+
name="fahrenheit"
29+
id="fahrenheit"
30+
placeholder="Enter Temperature"
31+
class="input_box"
32+
onchange="computeTemp(event)"
33+
/>
34+
</div>
35+
<divclass="box">
36+
<labelfor="kelvin">Kelvin:</label>
37+
<input
38+
type="number"
39+
name="kelvin"
40+
id="kelvin"
41+
placeholder="Enter Temperature"
42+
class="input_box"
43+
onchange="computeTemp(event)"
44+
/>
45+
</div>
46+
</div>
4947

50-
<scriptsrc="script.js"></script>
48+
<scriptsrc="index.js"></script>
5149
</body>
5250
</html>

‎projects/temp-converter/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
constcelsiusEl=document.getElementById("celsius");
2+
constfahrenheitEl=document.getElementById("fahrenheit");
3+
constkelvinEl=document.getElementById("kelvin");
4+
5+
functioncomputeTemp(e){
6+
constvalue=+e.target.value;
7+
switch(e.target.name){
8+
case"celsius":
9+
kelvinEl.value=(value+273.32).toFixed(2);
10+
fahrenheitEl.value=(value*1.8+32).toFixed(2);
11+
break;
12+
case"fahrenheit":
13+
celsiusEl.value=((value-32)/1.8).toFixed(2);
14+
result=kelvinEl.value=((value-32)/1.8+273.15).toFixed(2);
15+
break;
16+
case"kelvin":
17+
celsiusEl.value=(value-273.15).toFixed(2);
18+
fahrenheitEl.value=((value-273.15)*1.8+32).toFixed(2);
19+
break;
20+
}
21+
}

‎projects/temp-converter/script.js

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

‎projects/temp-converter/style.css

Lines changed: 50 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,55 @@
1-
*{
2-
margin:0;
3-
padding:0;
4-
box-sizing: border-box;
5-
}
6-
body{
7-
background-color:#19172e;
8-
height:100vh;
9-
font-family: monospace;
10-
font-size:1.25rem;
11-
color: white;
12-
}
13-
section{
14-
height:80vh;
15-
display: flex;
16-
justify-content: center;
17-
align-content: center;
18-
}
19-
.main{
20-
display: flex;
21-
flex-direction: column;
22-
justify-content: center;
23-
align-items: center;
24-
width:450px;
25-
}
26-
.heading{
27-
height:58px;
28-
line-height:58px;
29-
width:100%;
30-
font-size:2rem;
31-
font-weight: bolder;
32-
text-align: center;
33-
border-radius:10px;
34-
padding:015px;
35-
background:#f9f8fa75;
36-
backdrop-filter:blur(10px);
37-
box-shadow:08px10pxrgba(197,193,193,0.185);
38-
margin-bottom:28px;
39-
}
40-
.container{
41-
/* border: 2px solid red; */
42-
width:100%;
43-
height: auto;
44-
padding:20px;
45-
display: flex;
46-
flex-direction: column;
47-
justify-content: center;
48-
align-items: center;
49-
background-color:#f9f8fa75;
50-
border-radius:10px;
51-
backdrop-filter:blur(10px);
52-
box-shadow:08px10pxrgba(197,193,193,0.185);
53-
}
54-
.box{
55-
width:90%;
56-
padding:10px0;
57-
font-weight: bold;
58-
}
59-
.input_box{
60-
width:14rem;
61-
font-family: monospace;
62-
padding:5px;
63-
float: right;
64-
outline: none;
65-
border: none;
66-
background-color: transparent;
67-
border-bottom:1px solid white;
68-
color: white;
69-
font-size:1.25rem;
70-
}
71-
footer{
72-
position: absolute;
73-
bottom:0;
74-
background-color:#000002;
75-
text-align: center;
76-
color: white;
77-
font-size:1.25rem;
78-
left:0;
79-
right:0;
80-
bottom:0;
81-
margin-bottom:0;
82-
padding:20px;
83-
line-height:4vh;
84-
}
85-
a{
86-
color:rgba(255,255,255,0.383);
87-
}
88-
::placeholder{
89-
color:rgb(173,169,169);
1+
body {
2+
margin:0;
3+
background:linear-gradient(to left bottom, lightgreen, lightblue);
4+
min-height:100vh;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: monospace;
9+
font-size:1.25rem;
10+
color: darkcyan;
9011
}
9112

92-
93-
94-
@media screenand (max-width:500px) {
95-
.main{
96-
width:87%;
97-
}
98-
.heading{
99-
font-size:1.5rem;
100-
}
101-
.container{
102-
padding-bottom:35px;
103-
}
104-
.box{
105-
display: flex;
106-
flex-direction: column;
107-
width:100%;
108-
margin-top:13px;
109-
}
110-
.input_box{
111-
width:90%;
112-
padding:3px;
113-
font-size:1.25rem;
114-
margin-top:5px;
115-
}
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+
}
24+
.container {
25+
width:85%;
26+
max-width:450px;
27+
min-width:350px;
28+
padding:20px;
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
border-radius:10px;
33+
background:rgba(255,255,255,0.3);
34+
box-shadow:04px10pxrgba(0,0,0,0.3);
35+
}
36+
.box {
37+
width:100%;
38+
padding:15px;
39+
font-weight: bold;
40+
}
41+
.input_box {
42+
width:14rem;
43+
font-family: monospace;
44+
padding:5px;
45+
float: right;
46+
outline: none;
47+
background:rgba(255,255,255,0.3);
48+
border-color:rgba(255,255,255,0.5);
49+
color: darkgreen;
50+
font-size:1.25rem;
11651
}
11752

118-
119-
@media screenand (max-width:380px) {
120-
.main{
121-
width:92%;
122-
}
123-
.heading{
124-
font-size:1.22rem;
125-
padding:010px;
126-
}
53+
.input_box::placeholder {
54+
color: darkgray;
12755
}
-74.7 KB
Binary file not shown.

‎projects/weight-converter/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<metaname="viewport"content="width=device-width, initial-scale=1.0">
66
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
77
<linkrel="stylesheet"href="style.css">
8-
<title>WeightConverstion Tool</title>
8+
<title>WeightConversion</title>
99
</head>
1010
<body>
1111
<div>
@@ -17,6 +17,6 @@ <h1>Weight Converter (pounds to kg)</h1>
1717
<p>Your weight in Kilograms is:<spanid="result"></span></p>
1818
</form>
1919
</div>
20-
<scriptsrc="app.js"></script>
20+
<scriptsrc="index.js"></script>
2121
</body>
2222
</html>
File renamed without changes.

0 commit comments

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