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

+36-38
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

+21
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

-39
This file was deleted.

‎projects/temp-converter/style.css

+50-122
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

+2-2
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 ‎projects/weight-converter/index.js

File renamed without changes.

0 commit comments

Comments
 (0)