Skip to content

Commit e701829

Browse files
harshita2216harshita2216
authored
Merge pull request #232 from joshi-kaushal/temp-convertor
Temperature Convertor added
2 parents 0780a76 + ea538a1 commit e701829

File tree

8 files changed

+201
-1
lines changed

8 files changed

+201
-1
lines changed

‎Index.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,5 @@
8686
| [Restaurant website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Restaurant-website) |A Restuarant website with a simple and user friendly design ad a database linked to it.|
8787
| [Speed-Distance-Time-Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/speed-distance-time-calculator) |It is a multi pager Speed Distnace Time Calculator with simple but userfriendly design.|
8888
| [Simple Calculator (Flask)](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Simple%20Calculator%20(Flask))| A simple calculator with 2 input fields and some options to perform different operations on them.|
89-
| [Photo Editor](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/bulaw/photo%20--%20editor) |It is a photo Editor which allows to rescale,flip and grey scale images.
89+
| [Photo Editor](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/photo%20--%20editor) |It is a photo Editor which allows to rescale,flip and grey scale images.
90+
| [Temperature Convertor](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Temperature%20Convertor) | This webpage converts temperatures from and to Celsius, Fahrenheit and Kelvin.

‎Temperature Convertor/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Temperature Convertor
2+
3+
This webpage converts temperatures from and to Celcius, Fahrenheit and Kelvin.
4+
5+
### Tech Stack:
6+
7+
- HTML5
8+
- Bulma CSS
9+
- Vanilla JS
10+
11+
### Prequisites:
12+
13+
- Git and GitHub installed in the machine in order to clone the repo.
14+
15+
### How to Install:
16+
17+
- Open terminal / CMD to access git commands.
18+
- Enter this command:
19+
`https://github.com/joshi-kaushal/Web-dev-mini-projects.git`
20+
- switch to _temp-convertor_ branch and open the folder named _Temperature Convertor_
21+
- run `index.html` file
22+
23+
### Screenshots:
24+
25+
Home Page -
26+
![Home Page](https://github.com/joshi-kaushal/Web-dev-mini-projects/blob/temp-convertor/Temperature%20Convertor/assets/home.png)
27+
Successful conversion -
28+
![Successful conversion](https://github.com/joshi-kaushal/Web-dev-mini-projects/blob/temp-convertor/Temperature%20Convertor/assets/cel-far.png)
29+
Same Units -
30+
![Same Units](https://github.com/joshi-kaushal/Web-dev-mini-projects/blob/temp-convertor/Temperature%20Convertor/assets/same-units.jpg)

‎Temperature Convertor/assets/cel-far.png

47.5 KB
Loading

‎Temperature Convertor/assets/home.png

38.4 KB
Loading

‎Temperature Convertor/assets/same-units.jpg

89.2 KB
Loading

‎Temperature Convertor/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Temperature Convertor</title>
7+
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
8+
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">3
10+
<link rel="stylesheet" href="./style.css"
11+
</head>
12+
<body>
13+
<section class="section ">
14+
<h1 class="title is-2 level-item has-text-centered">Temperature Convertor using Vanilla JS</h1>
15+
<h4 class="title is-4 level-item has-text-centered">
16+
CELSIUS
17+
<ion-icon name="repeat-outline"></ion-icon>
18+
FAHRENHEIT
19+
<ion-icon name="repeat-outline"></ion-icon>
20+
KELVIN
21+
</h4>
22+
23+
<hr />
24+
25+
<div class="container">
26+
<div id='input-container'>
27+
<input type="number" class="input is-medium input-childs" id='input' name='input' placeholder="Enter Temperature">
28+
<select name='from' class="input is-medium input-childs" id='from' form="conversion">
29+
<option value="celsius">Celsius</option>
30+
<option value="fahrenheit">Fahrenheit</option>
31+
<option value="kelvin">Kelvin</option>
32+
</select>
33+
<div id='convert-to' class="button is-medium input-childs" disabled>
34+
<ion-icon name="play-forward-outline"></ion-icon>
35+
</div>
36+
<select name='to' class="input is-medium input-childs" id='to' form="conversion">
37+
<option value=""></option>
38+
<option value="fahrenheit">Fahrenheit</option>
39+
<option value="kelvin">Kelvin</option>
40+
<option value="celsius">Celsius</option>
41+
</select>
42+
</div>
43+
<div id='converted-value' class="title is-3 level-item has-text-centered"></div>
44+
</div>
45+
</section>
46+
47+
<script src="./script.js"></script>
48+
</body>
49+
</html>

‎Temperature Convertor/script.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
let results = document.getElementById("converted-value");
2+
3+
// On change event for the second SELECT attribute
4+
to.onchange = () => {
5+
results.innerHTML = "";
6+
results.style.color = "black";
7+
8+
let from = document.getElementById("from");
9+
let to = document.getElementById("to");
10+
let input = parseInt(document.getElementById("input").value, 10);
11+
12+
let fromValue = from.value;
13+
let toValue = to.value;
14+
15+
// Checking if both are same
16+
if (fromValue === toValue) {
17+
results.style.color = "red";
18+
results.innerHTML = "CONVERSION UNITS SHOULD BE DIFFERENT!";
19+
}
20+
21+
// Checking the input and passing it to appropriate functions
22+
if (fromValue === "celsius" && toValue === "kelvin") {
23+
celsiusToKelvin(input);
24+
}
25+
26+
if (fromValue === "celsius" && toValue === "fahrenheit") {
27+
celsiusToFahrenheit(input);
28+
}
29+
30+
if (fromValue === "fahrenheit" && toValue === "kelvin") {
31+
fahrenheitToKelvin(input);
32+
}
33+
34+
if (fromValue === "fahrenheit" && toValue === "celsius") {
35+
fahrenheitToCelsius(input);
36+
}
37+
38+
if (fromValue === "kelvin" && toValue === "fahrenheit") {
39+
KelvinToFahrenheit(input);
40+
}
41+
42+
if (fromValue === "kelvin" && toValue === "celsius") {
43+
KelvinToCelsius(input);
44+
}
45+
};
46+
47+
// Conversion of input values
48+
49+
const celsiusToKelvin = (input) => {
50+
results.innerHTML = `The final converted value is ${(input + 273.15).toFixed(
51+
2
52+
)}`;
53+
};
54+
55+
const celsiusToFahrenheit = (input) => {
56+
results.innerHTML = `The final converted value is ${(
57+
input * (9 / 5) +
58+
32
59+
).toFixed(2)}`;
60+
};
61+
const fahrenheitToKelvin = (input) => {
62+
results.innerHTML = `The final converted value is ${(
63+
(input + 459.67) *
64+
(5 / 9)
65+
).toFixed(2)}`;
66+
};
67+
68+
const fahrenheitToCelsius = (input) => {
69+
results.innerHTML = `The final converted value is ${(
70+
(input - 32) *
71+
(5 / 9)
72+
).toFixed(2)}`;
73+
};
74+
75+
const KelvinToFahrenheit = (input) => {
76+
results.innerHTML = `The final converted value is ${(
77+
input * 1.8 -
78+
459.67
79+
).toFixed(2)}`;
80+
};
81+
82+
const KelvinToCelsius = (input) => {
83+
results.innerHTML = `The final converted value is ${(input - 273.15).toFixed(
84+
2
85+
)}`;
86+
};

‎Temperature Convertor/style.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#input-container {
2+
display: flex;
3+
}
4+
5+
.input-childs {
6+
margin: 10px;
7+
}
8+
9+
#convert-to:hover{
10+
cursor: default;
11+
}
12+
13+
#converted-value {
14+
padding-top: 50px;
15+
font-weight: bold;
16+
}
17+
18+
/* Disabling arrows for number input */
19+
20+
/* Chrome, Safari, Edge, Opera */
21+
input::-webkit-outer-spin-button,
22+
input::-webkit-inner-spin-button {
23+
-webkit-appearance: none;
24+
margin: 0;
25+
}
26+
27+
/* Firefox */
28+
input[type=number] {
29+
-moz-appearance: textfield;
30+
}
31+
32+
html {
33+
background-color: peachpuff;
34+
}

0 commit comments

Comments
 (0)