Skip to content

Commit 4895056

Browse files
gbassetgbasset
committed
feat(temperature) : create folder and first files
1 parent ac5907e commit 4895056

4 files changed

Lines changed: 146 additions & 0 deletions

File tree

‎Temperature-convertor/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Convertor temperator
2+
**A temperature convertor built using HTML, CSS, and JavaScript**
3+
This project allows users to make conversion temperature
4+
5+
### Functionalities
6+
- **Basic Operations**: Supports addition, subtraction, multiplication, and division.
7+
- **Clear Functionality**: Allows users to clear the display.
8+
- **Error Handling**: Displays an error message for invalid operations.
9+
10+
## Description
11+
This JavaScript Desktop Calculator is a simple and user-friendly web application. It features a straightforward interface where users can input numbers and operators using buttons. The calculator evaluates the expression when the user clicks the "=" button and displays the result. If the input is invalid, it shows an error message. The design is clean, ensuring a pleasant user experience.
12+
13+
## Prerequisites
14+
- `HTML`: Used for structuring the convertor interface.
15+
- `CSS`: Used for styling the convertor interface and making it visually appealing.
16+
- `JavaScript`: Handles user operations and show result.
17+
18+
## Installing Instructions
19+
Explain how to set up and run your package/script on the user's local machine. Include steps like:
20+
1. Clone the repository:
21+
```bash
22+
git clone https://github.com/king04aman/All-In-One-Javascript-Projects.git
23+
```
24+
2. Navigate to the project directory:
25+
```bash
26+
cd All-In-One-Javascript-Projects/Temperature-convertor
27+
```
28+
3. Open `index.html` in a web browser.
29+
30+
## Author
31+
- Aman Kumar (@[gbasset](https://github.com/gbasset))

‎Temperature-convertor/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
<label for="response">Temperature</label>
15+
<input type="text" name="response" id="response">
16+
<button type="button" onclick="getSentenceResult();">Submit</button>
17+
</form>
18+
<section id="element_result" style="font-size: larger;">
19+
20+
</section>
21+
</body>
22+
<script src="./main.js"></script>
23+
</html>

‎Temperature-convertor/main.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
3+
const res = document.getElementById('response');
4+
const form = document.getElementById('form');
5+
6+
const element_result = document.getElementById('element_result');
7+
let sentence = '';
8+
function transformCelsiusToFahrenheit(degCel){
9+
return (degCel * (9/5) + 32);
10+
}
11+
form.onkeydown = function(e){
12+
if(e.keyCode == 13){
13+
e.preventDefault();
14+
getSentenceResult()
15+
}
16+
};
17+
function getSentenceResult(){
18+
const value = +res.value;
19+
20+
if(isNaN(value)){
21+
return element_result.innerHTML = 'Input data not correct.';
22+
}
23+
const val = transformCelsiusToFahrenheit(value);
24+
return element_result.innerHTML = value + ' degrés Celsius donne ' + parseInt(val) + ' Fahrenheit ';
25+
}

‎Temperature-convertor/style.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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+
33+
button{
34+
display: inline-block;
35+
outline: none;
36+
cursor: pointer;
37+
font-size: 16px;
38+
line-height: 20px;
39+
font-weight: 600;
40+
border-radius: 8px;
41+
padding: 13px 23px;
42+
border: 1px solid #222222;
43+
transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
44+
background: #fff;
45+
color: #222222;
46+
}
47+
:hover {
48+
border-color: #000000;
49+
background: #f7f7f7;
50+
}
51+
#form{
52+
53+
max-width: 300px;
54+
min-height: 200px;
55+
display: flex;
56+
flex-direction: column;
57+
justify-content: space-between;
58+
59+
max-width: 500px;
60+
height: 300px;
61+
padding: 35px;
62+
63+
border: 1px solid rgba(255, 255, 255, .25);
64+
border-radius: 20px;
65+
background-color: rgba(255, 255, 255, 0.45);
66+
box-shadow: 0px 4px 6px 0px rgba(50,50,93,0.11) , 0px 1px 3px 0px rgba(0,0,0,0.08);
67+
}

0 commit comments

Comments
 (0)