Skip to content

Commit bbed9f6

Browse files
panaitescu-paulpanaitescu-paul
authored
Add files via upload
1 parent aaa7eec commit bbed9f6

File tree

3 files changed

+146
-0
lines changed

3 files changed

+146
-0
lines changed

‎Temperature Converter - JavaScript/css/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
3+
}
4+
5+
.content {
6+
border: 2px solid rgb(32, 33, 41);
7+
width: 230px;
8+
padding: 10px 20px;
9+
margin: auto;
10+
margin-top: 50px;
11+
margin-bottom: 50px;
12+
}
13+
14+
.content h1 {
15+
font-size: 28px;
16+
background-color: midnightblue;
17+
color: #fff;
18+
padding: 10px 10px;
19+
width: 90%;
20+
text-align: center;
21+
}
22+
23+
input#temperature {
24+
width: 90%;
25+
text-align: right;
26+
padding: 5px;
27+
margin: 3px 0;
28+
}
29+
30+
.from {
31+
float: left;
32+
margin-right: 10px;
33+
}
34+
35+
select {
36+
width: 105px;
37+
margin: 3px 0px;
38+
}
39+
40+
#calculateBtn {
41+
width: 100px;
42+
padding: 5px;
43+
margin: 3px 0;
44+
text-align: center;
45+
}
46+
47+
#summary {
48+
background-color: #ccc;
49+
width: 95%;
50+
padding: 2px;
51+
margin: 5px 0;
52+
}
53+
54+
#summary p {
55+
padding: 1px;
56+
margin: 5px 5px;
57+
}
58+
59+
#result-to {
60+
font-weight: bold;
61+
}

‎Temperature Converter - JavaScript/home.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Temperature Converter</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="css/style.css">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
8+
</head>
9+
<body>
10+
<div class="content">
11+
<h1>Temperature Converter</h1>
12+
<form action="" method="GET" id="myForm">
13+
<label for="monetary">Convert</label>
14+
<br>
15+
<input type="number" id="temperature" value="0.00" placeholder="0.00" step="0.01" required>
16+
<br>
17+
<div class="from">
18+
<label for="listFrom">From</label>
19+
<br>
20+
<select name="listFrom" size="3" id="list-from">
21+
<option value="C" selected>Celsius</option>
22+
<option value="F">Fahrenheit</option>
23+
<option value="K">Kelvin</option>
24+
</select>
25+
</div>
26+
<div class="to">
27+
<label for="listTo">To</label>
28+
<br>
29+
<select name="listTo" size="3" id="list-to">
30+
<option value="C">Celsius</option>
31+
<option value="F" selected>Fahrenheit</option>
32+
<option value="K">Kelvin</option>
33+
</select>
34+
</div>
35+
<input type="submit" value="Calculate" id="calculateBtn">
36+
</form>
37+
<div id="summary">
38+
<p>Result:
39+
<span id="result-from"></span>
40+
<span id="result-to"></span>
41+
</p>
42+
</div>
43+
</div>
44+
</body>
45+
<script src="js/script.js"></script>
46+
</html>

‎Temperature Converter - JavaScript/js/script.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
document.getElementById("myForm").addEventListener("submit", function(e) {
2+
e.preventDefault();
3+
4+
let temperature = parseFloat(document.getElementById("temperature").value);
5+
let from = document.getElementById("list-from").value;
6+
let to = document.getElementById("list-to").value;
7+
let result = "";
8+
9+
console.log("temperature: " + temperature);
10+
console.log("from: " + from + " || to: " + to);
11+
12+
if(from === "C" && to === "C") {
13+
result = temperature;
14+
} else if(from === "C" && to === "F") {
15+
result = (temperature * 1.8) + 32;
16+
} else if (from === "C" && to === "K") {
17+
result = temperature + 273.15;
18+
} else if (from === "F" && to === "C") {
19+
result = (temperature - 32) / 1.8;
20+
} else if (from === "F" && to === "F") {
21+
result = temperature;
22+
} else if (from === "F" && to === "K") {
23+
result = (temperature + 459.67) * (5 / 9);
24+
} else if (from === "K" && to === "C") {
25+
result = temperature - 273.15;
26+
} else if (from === "K" && to === "F") {
27+
result = (temperature * (5 / 9)) - 459.67;
28+
} else if (from === "K" && to === "K") {
29+
result = temperature;
30+
}
31+
32+
if(result === "") {
33+
document.getElementById("result-from").innerHTML = temperature + "°" + from + "=";
34+
document.getElementById("result-to").innerHTML = temperature + "°" + to;
35+
} else {
36+
document.getElementById("result-from").innerHTML = temperature + "°" + from + "=";
37+
document.getElementById("result-to").innerHTML = result.toFixed(2) + "°" + to;
38+
}
39+
});

0 commit comments

Comments
 (0)