├── LICENSE
├── README.md
├── Script.js
├── Style.css
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Dawood M.Shoaib
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | To run the file, you have to install notepad++ or you can run in visual studio.
 2 | 
 3 | The output looks like this:
 4 | 
 5 | ![capture](https://github.com/dawoodkhatri1/OIB_TASK_01/assets/136968266/ca5bdc52-80f8-48aa-9bef-dd04358833b3)
 6 | 
 7 | 
 8 | The conversion from celsius to fahrenheit is like this:
 9 | 
10 | ![Capture 2](https://github.com/dawoodkhatri1/OIB_TASK_01/assets/136968266/58a1f062-c0e4-4cc5-977b-91433e283cf7)
11 | 
12 | 
13 | The conversion from celsius to kelvin is like this:
14 | 
15 | ![Capture 3](https://github.com/dawoodkhatri1/OIB_TASK_01/assets/136968266/fe974491-288c-4441-89b4-04d3a808e893)
16 | 
17 | If you want to check out my project live, here is the link below:
18 | 
19 | > https://dawoodkhatri1.github.io/Temperature_Convertor__Website/
20 | 
21 | ## License
22 | 
23 | [MIT License](LICENSE)
24 | 


--------------------------------------------------------------------------------
/Script.js:
--------------------------------------------------------------------------------
 1 | function convertTemperature() {
 2 |     let inputValue = parseFloat(document.getElementById('inputValue').value);
 3 |     let inputUnit = document.getElementById('inputUnit').value;
 4 |     let outputUnit = document.getElementById('outputUnit').value;
 5 |     let outputValue;
 6 | 
 7 |     if (isNaN(inputValue)) {
 8 |         document.getElementById('outputValue').innerText = "Please enter a valid number";
 9 |         return;
10 |     }
11 | 
12 |     // Convert input value to Celsius first
13 |     if (inputUnit === "Celsius") {
14 |         outputValue = inputValue;
15 |     } else if (inputUnit === "Fahrenheit") {
16 |         outputValue = (inputValue - 32) * 5 / 9;
17 |     } else if (inputUnit === "Kelvin") {
18 |         outputValue = inputValue - 273.15;
19 |     }
20 | 
21 |     // Convert from Celsius to the desired output unit
22 |     if (outputUnit === "Celsius") {
23 |         outputValue = outputValue;
24 |     } else if (outputUnit === "Fahrenheit") {
25 |         outputValue = (outputValue * 9 / 5) + 32;
26 |     } else if (outputUnit === "Kelvin") {
27 |         outputValue = outputValue + 273.15;
28 |     }
29 | 
30 |     document.getElementById('outputValue').innerText = `Result: ${outputValue.toFixed(2)} ${outputUnit}`;
31 | }
32 | 
33 | function reset() {
34 |     location.reload();
35 | }


--------------------------------------------------------------------------------
/Style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 |     background-color: rgb(0 0 0);
 9 | }
10 | 
11 | .container {
12 |     background-color: #808080;
13 |     padding: 30px;
14 |     border-radius: 19px;
15 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16 |     text-align: center;
17 | }
18 | 
19 | h1 {
20 |     margin-bottom: 20px;
21 | }
22 | 
23 | .converter {
24 |     display: flex;
25 |     flex-direction: column;
26 |     gap: 10px;
27 | }
28 | 
29 | input, select, button {
30 |     padding: 10px;
31 |     font-size: 16px;
32 |     border-radius: 4px;
33 |     border: 1px solid #00FFFF;
34 | }
35 | 
36 | button {
37 |     background-color: #000000;
38 |     color: #ffffff;
39 |     border: none;
40 |     cursor: pointer;
41 | }
42 | 
43 |     button:hover {
44 |         background-color: #0056b3;
45 |     }
46 | 
47 | p {
48 |     font-size: 18px;
49 |     margin-top: 10px;
50 | }
51 | 
52 |     


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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 |     <title>Temperature Converter Website</title>
 7 |     <link rel="stylesheet" href="Style.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <h1>Temperature Converter</h1>
12 |         <div class="converter">
13 |             <input type="number" id="inputValue" placeholder="Enter value">
14 |             <select id="inputUnit">
15 |                 <option value="Celsius">Celsius</option>
16 |                 <option value="Fahrenheit">Fahrenheit</option>
17 |                 <option value="Kelvin">Kelvin</option>
18 |             </select>
19 |             <button onclick="convertTemperature()">Convert</button>
20 |             <select id="outputUnit">
21 |                 <option value="Celsius">Celsius</option>
22 |                 <option value="Fahrenheit">Fahrenheit</option>
23 |                 <option value="Kelvin">Kelvin</option>
24 |             </select>
25 |             <p id="outputValue"></p>
26 |         </div>
27 |         <button onclick="reset()">RESET</button>
28 |     </div>
29 |     <script src="Script.js"></script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------