Skip to content

Commit 9f01b07

Browse files
king04amanking04aman
authored
Merge pull request #4 from gbasset/converter-temperature
Converter temperature
2 parents ab1346e + 6d5faed commit 9f01b07

4 files changed

Lines changed: 233 additions & 0 deletions

File tree

‎Temperature-convertor/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Temperature Converter
2+
3+
**A simple temperature converter built using HTML, CSS, and JavaScript**
4+
This project allows users to convert temperatures between different units (Celsius, Fahrenheit).
5+
6+
### Features
7+
- **Temperature Conversion**: Users can choose between different temperature units (Celsius, Fahrenheit, Kelvin).
8+
- **Dynamic Calculation**: Users can enter a temperature value, select the conversion type, and the result will be displayed instantly.
9+
- **Error Handling**: Displays an error message for invalid inputs (e.g., non-numeric values).
10+
11+
## Description
12+
This temperature converter allows users to easily switch between Celsius, Fahrenheit. The user can input a value and choose the desired conversion operation. The result is displayed dynamically on the screen.
13+
14+
The project uses simple HTML for structuring the page, CSS for styling and enhancing the user experience, and JavaScript to handle all the logic and perform the conversions in real-time.
15+
16+
## Prerequisites
17+
Before running this project, you need to have a basic understanding of the following technologies:
18+
- **HTML**: Used for structuring the user interface of the temperature converter.
19+
- **CSS**: Used to style the interface and make it visually appealing.
20+
- **JavaScript**: Handles the logic of temperature conversion and displays results based on user inputs.
21+
22+
## How to Use
23+
1. Open the HTML file in your web browser.
24+
2. Enter the temperature value you want to convert.
25+
3. Select the type of conversion (Celsius to Fahrenheit, Fahrenheit to Celsius, etc.).
26+
4. The converted value will be displayed automatically.
27+
28+
## Installation
29+
To run this project locally:
30+
1. Clone the repository or download the files.
31+
2. Open `index.html` in any web browser.
32+
33+
## Installing Instructions
34+
Explain how to set up and run your package/script on the user's local machine. Include steps like:
35+
1. Clone the repository:
36+
```bash
37+
git clone https://github.com/king04aman/All-In-One-Javascript-Projects.git
38+
```
39+
2. Navigate to the project directory:
40+
```bash
41+
cd All-In-One-Javascript-Projects/Temperature-convertor
42+
```
43+
3. Open `index.html` in a web browser.
44+
45+
## Author
46+
- Basset Gaëtan (@[gbasset](https://github.com/gbasset))

‎Temperature-convertor/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>Temperature convertor</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<h1>Temperature convertor</h1>
12+
13+
<form action="" method="post" id="form">
14+
<h2 >Type of conversion</h2>
15+
<div class="btn-section">
16+
<button type="button"
17+
class="Celsius"
18+
onclick="getTypeTemperatureInput('Celsius');">Celsius</button>
19+
<button
20+
class="Fahrenheit"
21+
type="button" onclick="getTypeTemperatureInput('Fahrenheit');">Fahrenheit </button>
22+
</div>
23+
<div class="input-section">
24+
<label for="response">Temperature</label>
25+
<input type="text" name="response" id="response" placeholder="12">
26+
</div>
27+
<button id="btn-submit" type="button" onclick="getSentenceResult();">Submit</button>
28+
<section id="element_result" style="font-size: larger;">
29+
30+
</section>
31+
</form>
32+
</body>
33+
<script src="./main.js"></script>
34+
</html>

‎Temperature-convertor/main.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
3+
const res = document.getElementById('response');
4+
const form = document.getElementById('form');
5+
const celsiusBtn = document.querySelector('.Celsius');
6+
const fahrenheitBtn = document.querySelector('.Fahrenheit');
7+
const element_result = document.getElementById('element_result');
8+
let sentence = '';
9+
let temperatureInput = '';
10+
11+
function getTypeTemperatureInput(ipt){
12+
if(ipt === 'Celsius'){
13+
fahrenheitBtn.classList.remove('selected')
14+
celsiusBtn.classList.add('selected');
15+
}else{
16+
fahrenheitBtn.classList.add('selected');
17+
celsiusBtn.classList.remove('selected')
18+
}
19+
return temperatureInput = ipt;
20+
}
21+
function transformCelsiusToFahrenheit(degCel){
22+
return (degCel * (9/5) + 32);
23+
}
24+
function transformFahrenheitToCelsius(degCel){
25+
return (degCel - 32 * 5/9);
26+
}
27+
form.onkeydown = function(e){
28+
if(e.keyCode == 13){
29+
e.preventDefault();
30+
getSentenceResult()
31+
}
32+
};
33+
function getSentenceResult(){
34+
const value = +res.value;
35+
if(temperatureInput === ''){
36+
return element_result.innerHTML = 'Please enter valid conversion';
37+
}
38+
if(isNaN(value)){
39+
return element_result.innerHTML = 'Input data not correct.';
40+
}
41+
const val = temperatureInput === 'Celsius' ? transformCelsiusToFahrenheit(value) : transformFahrenheitToCelsius(value);
42+
const labelTemperature = (temperatureInput === 'Celsius') ? ' Fahrenheit' : ' Celsius' ;
43+
return element_result.innerHTML = `<p class='response'>${value} ${temperatureInput} give ${parseInt(val)} ${labelTemperature}</p>`;
44+
45+
}

‎Temperature-convertor/style.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
body {
2+
margin: 0;
3+
background-color: #fcfcfc;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100vh;
9+
}
10+
input{
11+
border: 0;
12+
outline: 0;
13+
color: rgb(60, 66, 87);
14+
background-color: rgb(255, 255, 255);
15+
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px;
16+
border-radius: 4px;
17+
font-size: 14px;
18+
line-height: 20px;
19+
font-weight: 400;
20+
padding: 4px 8px;
21+
min-height: 28px;
22+
vertical-align: middle;
23+
transition: background-color .24s,box-shadow .24s;
24+
transition-property: background-color, box-shadow;
25+
transition-duration: 0.24s, 0.24s;
26+
transition-timing-function: ease, ease;
27+
transition-delay: 0s, 0s;
28+
}
29+
:focus{
30+
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(58 151 212 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px;
31+
}
32+
h1,h2{
33+
color: #86b0ff;
34+
text-align: center;
35+
}
36+
button{
37+
display: inline-block;
38+
outline: none;
39+
cursor: pointer;
40+
font-size: 16px;
41+
line-height: 20px;
42+
font-weight: 600;
43+
border-radius: 8px;
44+
padding: 13px 23px;
45+
border: 1px solid #222222;
46+
transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
47+
background: #fff;
48+
color: #222222;
49+
}:hover {
50+
border-color: #000000;
51+
background: #f7f7f7;
52+
}
53+
.btn-section {
54+
display: flex;
55+
justify-content: space-around;
56+
}
57+
.btn-section button{
58+
width: 150px;
59+
color: #f7f7f7;
60+
background-color: #86b0ff;
61+
text-align: center;
62+
63+
}:hover {
64+
border-color: #000000;
65+
}
66+
#form{
67+
max-width: 500px;
68+
min-width: 450px;
69+
min-height: 200px;
70+
display: flex;
71+
flex-direction: column;
72+
justify-content: space-around;
73+
height: 400px;
74+
padding: 35px;
75+
border: 1px solid rgba(255, 255, 255, .25);
76+
border-radius: 20px;
77+
background-color: rgba(255, 255, 255, 0.45);
78+
box-shadow: 0px 4px 6px 0px rgba(50,50,93,0.11) , 0px 1px 3px 0px rgba(0,0,0,0.08);
79+
}
80+
.input-section{
81+
display: flex;
82+
flex-direction: column;
83+
margin: 10px 3px;
84+
}
85+
.input-section label{
86+
font-weight: bold;
87+
margin-bottom: 5px;
88+
}
89+
#btn-submit{
90+
width: 120px;
91+
text-align: center;
92+
margin: 10px auto;
93+
}
94+
.response{
95+
color: red;
96+
font-size: x-large;
97+
font-weight: 900;
98+
text-align: center;
99+
background-color: #dddddd;
100+
display: block;
101+
text-align: center;
102+
height: 50px;
103+
line-height: 50px;
104+
}
105+
button.selected {
106+
color: #3300ff;
107+
border-color: #3300ff;
108+
}

0 commit comments

Comments
 (0)