Skip to content

Commit f7ab3df

Browse files
sahandghavidelsahandghavidel
committed
update 2 projects
1 parent 772b540 commit f7ab3df

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
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<link rel="shortcut icon" href="icon.png" type="image/png" />
87
<title>Temperature Convertor</title>
98
<link rel="stylesheet" href="style.css" />
109
</head>
1110
<body>
12-
<section>
13-
<div class="main">
14-
<div class="heading">Temperature Convertor</div>
15-
<div class="container">
16-
<div class="box">
17-
<label for="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-
<div class="box">
27-
<label for="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-
<div class="box">
37-
<label for="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+
<div class="container">
12+
<div class="heading">Temperature Convertor</div>
13+
<div class="box">
14+
<label for="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+
<div class="box">
25+
<label for="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+
<div class="box">
36+
<label for="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-
<script src="script.js"></script>
48+
<script src="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+
const celsiusEl = document.getElementById("celsius");
2+
const fahrenheitEl = document.getElementById("fahrenheit");
3+
const kelvinEl = document.getElementById("kelvin");
4+
5+
function computeTemp(e) {
6+
const value = +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: 0 15px;
35-
background: #f9f8fa75;
36-
backdrop-filter: blur(10px);
37-
box-shadow: 0 8px 10px rgba(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: 0 8px 10px rgba(197, 193, 193, 0.185);
53-
}
54-
.box{
55-
width: 90%;
56-
padding: 10px 0;
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 screen and (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: 0 15px;
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: 0 4px 10px rgba(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 screen and (max-width: 380px) {
120-
.main{
121-
width: 92%;
122-
}
123-
.heading{
124-
font-size: 1.22rem;
125-
padding: 0 10px;
126-
}
53+
.input_box::placeholder {
54+
color: darkgray;
12755
}

‎projects/weight-converter/Assets/Assets.png

-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
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<link rel="stylesheet" href="style.css">
8-
<title>Weight Converstion Tool</title>
8+
<title>Weight Conversion</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: <span id="result"></span></p>
1818
</form>
1919
</div>
20-
<script src="app.js"></script>
20+
<script src="index.js"></script>
2121
</body>
2222
</html>

‎projects/weight-converter/app.js renamed to ‎projects/weight-converter/index.js

File renamed without changes.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy