Temperature Convertor Project Added · anshumanlite/30DaysOfJavaScript@dcfebf6 · GitHub
Skip to content

Commit dcfebf6

Browse files
priyanshi1282priyanshi1282
committed
Temperature Convertor Project Added
1 parent 2d3e385 commit dcfebf6

6 files changed

Lines changed: 213 additions & 0 deletions

File tree

‎30DaysOfJavaScript/assets/49.png‎

48 KB
Loading

‎49 - Temperature Convertor/icon.png‎

8.69 KB
Loading

‎49 - Temperature Convertor/index.html‎

Lines changed: 40 additions & 0 deletions

‎49 - Temperature Convertor/script.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// taking input element
2+
const celsius =document.getElementById('celsius');
3+
const fahrenheit =document.getElementById('fahrenheit');
4+
const kelvin =document.getElementById('kelvin');
5+
6+
const input_box = document.getElementsByClassName('input_box');
7+
8+
for(let i=0; i<input_box.length; i++){
9+
let input= input_box[i];
10+
11+
input.addEventListener("input", function (e){
12+
let value = parseFloat(e.target.value);
13+
// console.log(e.target.name + " : " + value);
14+
let result;
15+
switch(e.target.name){
16+
case "celsius":
17+
result = value + 273.32;
18+
kelvin.value = parseFloat(result.toFixed(3));
19+
result = (value *1.8) + 32;
20+
fahrenheit.value = parseFloat(result.toFixed(3));
21+
// console.log("celsius");
22+
break;
23+
case "fahrenheit":
24+
result = (value - 32)/1.8;
25+
celsius.value = parseFloat(result.toFixed(3));
26+
result = ((value - 32)/1.8) + 273.15;
27+
kelvin.value = parseFloat(result.toFixed(3));
28+
// console.log("fahrenheit");
29+
break;
30+
case "kelvin":
31+
result = value - 273.15;
32+
celsius.value = parseFloat(result.toFixed(3));
33+
result = ((value - 273.15)*1.8) + 32;
34+
fahrenheit.value = parseFloat(result.toFixed(3));
35+
// console.log("kelvin");
36+
break;
37+
}
38+
});
39+
}

‎49 - Temperature Convertor/style.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
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);
90+
}
91+
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+
}
116+
}
117+
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+
}
127+
}

‎index.html‎

Lines changed: 7 additions & 0 deletions

0 commit comments

Comments
 (0)