Skip to content

Commit 26ba402

Browse files
joshi-kaushaljoshi-kaushal
committed
project finished
1 parent a0bf81b commit 26ba402

File tree

7 files changed

+99
-35
lines changed

7 files changed

+99
-35
lines changed

‎Temperature Convertor/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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

‎Temperature Convertor/cel-far.png

47.5 KB
Loading

‎Temperature Convertor/home.png

38.4 KB
Loading

‎Temperature Convertor/index.html

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,25 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Hello Bulma!</title>
6+
<title>Temperature Convertor</title>
77
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
88
<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">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">3
1010
<link rel="stylesheet" href="./style.css"
1111
</head>
1212
<body>
13-
<section class="section">
14-
<nav class="navbar">
15-
<div class="navbar-brand">
16-
<a href="#">Temperature Convertor</a>
17-
</div>
18-
</nav>
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+
1925
<div class="container">
2026
<div id='input-container'>
2127
<input type="number" class="input is-medium input-childs" id='input' name='input' placeholder="Enter Temperature">
@@ -24,21 +30,20 @@
2430
<option value="fahrenheit">Fahrenheit</option>
2531
<option value="kelvin">Kelvin</option>
2632
</select>
27-
<button class="button is-medium input-childs" disabled>
33+
<div id='convert-to' class="button is-medium input-childs" disabled>
2834
<ion-icon name="play-forward-outline"></ion-icon>
29-
</button>
35+
</div>
3036
<select name='to' class="input is-medium input-childs" id='to' form="conversion">
3137
<option value=""></option>
3238
<option value="fahrenheit">Fahrenheit</option>
3339
<option value="kelvin">Kelvin</option>
3440
<option value="celsius">Celsius</option>
3541
</select>
3642
</div>
37-
<div id='converted-value'>
38-
39-
</div>
43+
<div id='converted-value' class="title is-3 level-item has-text-centered"></div>
4044
</div>
4145
</section>
46+
4247
<script src="./script.js"></script>
4348
</body>
44-
</html>
49+
</html>

‎Temperature Convertor/same-units.jpg

89.2 KB
Loading

‎Temperature Convertor/script.js

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,71 @@
1-
let done = document.getElementById('converted-value')
1+
let results = document.getElementById('converted-value')
22

3+
// On change event for the second SELECT attribute
34
to.onchange = () => {
4-
done.innerHTML = ""
5+
results.innerHTML = ""
6+
results.style.color = 'black'
7+
58
let from = document.getElementById('from')
69
let to = document.getElementById('to')
10+
let input = document.getElementById('input').value
711

812
let fromValue = from.value
913
let toValue = to.value
1014

15+
// Checking if both are same
1116
if(fromValue === toValue) {
12-
done.innerHTML = "Units should be different"
17+
results.style.color = 'red'
18+
results.innerHTML = "CONVERSION UNITS SHOULD BE DIFFERENT!"
1319
}
1420

21+
// Checking the input and passing it to appropriate functions
1522
if(fromValue === 'celsius' && toValue === 'kelvin') {
16-
celsiusToKelvin(fromValue, toValue)
23+
celsiusToKelvin(input)
1724
}
1825

1926
if(fromValue === 'celsius' && toValue === 'fahrenheit') {
20-
celsiusToFahrenheit(fromValue, toValue)
27+
celsiusToFahrenheit(input)
2128
}
2229

2330
if(fromValue === 'fahrenheit' && toValue === 'kelvin') {
24-
fahrenheitToKelvin(fromValue, toValue)
31+
fahrenheitToKelvin(input)
2532
}
2633

2734
if(fromValue === 'fahrenheit' && toValue === 'celsius') {
28-
fahrenheitToCelsius(fromValue, toValue)
35+
fahrenheitToCelsius(input)
2936
}
3037

3138
if(fromValue === 'kelvin' && toValue === 'fahrenheit') {
32-
KelvinToFahrenheit(fromValue, toValue)
39+
KelvinToFahrenheit(input)
3340
}
3441

3542
if(fromValue === 'kelvin' && toValue === 'celsius') {
36-
KelvinToCelsius(fromValue, toValue)
43+
KelvinToCelsius(input)
3744
}
3845
}
3946

40-
const celsiusToKelvin = (fromValue, toValue) => {
41-
alert(`${fromValue}, ${toValue}`)
47+
48+
// Conversion of input values
49+
const celsiusToKelvin = (input) => {
50+
results.innerHTML = `The final converted value is ${parseInt(input + 273.15, 10).toFixed(2)}`
4251
}
4352

44-
const celsiusToFahrenheit = (fromValue, toValue) => {
45-
alert(`${fromValue}, ${toValue}`)
53+
const celsiusToFahrenheit = (input) => {
54+
results.innerHTML = `The final converted value is ${parseInt(input * (9 / 5) + 32, 10).toFixed(2)}`
4655
}
4756

48-
const fahrenheitToKelvin = (fromValue, toValue) => {
49-
alert(`${fromValue}, ${toValue}`)
57+
const fahrenheitToKelvin = (input) => {
58+
results.innerHTML = `The final converted value is ${parseInt((input + 459.67) * (5 / 9), 10).toFixed(2)}`
5059
}
5160

52-
const fahrenheitToCelsius = (fromValue, toValue) => {
53-
alert(`${fromValue}, ${toValue}`)
61+
const fahrenheitToCelsius = (input) => {
62+
results.innerHTML = `The final converted value is ${parseInt((input - 32) * (5 / 9), 10).toFixed(2)}`
5463
}
5564

56-
const KelvinToFahrenheit = (fromValue, toValue) => {
57-
alert(`${fromValue}, ${toValue}`)
65+
const KelvinToFahrenheit = (input) => {
66+
results.innerHTML = `The final converted value is ${parseInt((input * 1.8) - 459.67, 10).toFixed(2)}`
5867
}
5968

60-
const KelvinToCelsius = (fromValue, toValue) => {
61-
alert(`${fromValue}, ${toValue}`)
69+
const KelvinToCelsius = (input) => {
70+
results.innerHTML = `The final converted value is ${parseInt(input - 273.15, 10).toFixed(2)}`
6271
}

‎Temperature Convertor/style.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,31 @@
44

55
.input-childs {
66
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;
734
}

0 commit comments

Comments
 (0)