Merge pull request #14 from gbasset/Temperature-convertor-update

Temperature convertor update

Author: 0xsarwagya

Temperature-convertor/README.md

@@ -1,15 +1,15 @@
 # Temperature Converter
 
 **A simple temperature converter built using HTML, CSS, and JavaScript**  
-This project allows users to convert temperatures between different units (Celsius, Fahrenheit).
+This project allows users to convert temperatures between different units: Celsius, Fahrenheit, and Kelvin.
 
 ### Features
-- **Temperature Conversion**: Users can choose between different temperature units (Celsius, Fahrenheit, Kelvin).
+- **Temperature Conversion**: Allows conversion between Celsius, Fahrenheit, and Kelvin.
 - **Dynamic Calculation**: Users can enter a temperature value, select the conversion type, and the result will be displayed instantly.
 - **Error Handling**: Displays an error message for invalid inputs (e.g., non-numeric values).
 
 ## Description
-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.
+This temperature converter allows users to easily switch between different units of temperature. The user can input a value and choose the desired conversion operation. The result is displayed dynamically on the screen.
 
 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.
 
@@ -22,15 +22,15 @@ Before running this project, you need to have a basic understanding of the follo
 ## How to Use
 1. Open the HTML file in your web browser.
 2. Enter the temperature value you want to convert.
-3. Select the type of conversion (Celsius to Fahrenheit, Fahrenheit to Celsius, etc.).
+3. Select the type of conversion (Celsius to Fahrenheit, Fahrenheit to Celsius,Celsius to Kelvin etc.).
 4. The converted value will be displayed automatically.
 
 ## Installation
 To run this project locally:
 1. Clone the repository or download the files.
 2. Open `index.html` in any web browser.
 
-## Installing Instructions
+## Installation Instructions
 Explain how to set up and run your package/script on the user's local machine. Include steps like:
 1. Clone the repository:
     ```bash
@@ -43,4 +43,4 @@ Explain how to set up and run your package/script on the user's local machine. I
 3. Open `index.html` in a web browser.
 
 ## Author
-- Basset Gaëtan (@[gbasset](https://github.com/gbasset))
+- Basset Gaëtan (@[gbasset](https://github.com/gbasset))

Temperature-convertor/index.html

@@ -19,11 +19,25 @@ <h2 >Type of conversion</h2>
             <button 
             class="Fahrenheit"
             type="button" onclick="getTypeTemperatureInput('Fahrenheit');">Fahrenheit </button>
+            <button
+            class="Kelvin"
+            type="button" onclick="getTypeTemperatureInput('Kelvin');">Kelvin  </button>
         </div>
         <div class="input-section">
             <label for="response">Temperature</label>
             <input type="text" name="response" id="response"  placeholder="12">
         </div>
+        <div class="btn-section">
+            <button type="button"
+                    class="Celsius_output"
+                    onclick="getTypeTemperatureOutput('Celsius');">Celsius</button>
+            <button
+                    class="Fahrenheit_output"
+                    type="button" onclick="getTypeTemperatureOutput('Fahrenheit');">Fahrenheit </button>
+            <button
+                    class="Kelvin_output"
+                    type="button" onclick="getTypeTemperatureOutput('Kelvin');">Kelvin  </button>
+        </div>
         <button id="btn-submit" type="button" onclick="getSentenceResult();">Submit</button>
         <section id="element_result" style="font-size: larger;">
 

Temperature-convertor/main.js

@@ -4,26 +4,109 @@ const res = document.getElementById('response');
 const form = document.getElementById('form');
 const celsiusBtn = document.querySelector('.Celsius');
 const fahrenheitBtn = document.querySelector('.Fahrenheit');
+const KelvinBtn = document.querySelector('.Kelvin');
 const element_result = document.getElementById('element_result');
+const Celsius_output =  document.querySelector('.Celsius_output');
+const Fahrenheit_output =  document.querySelector('.Fahrenheit_output');
+const Kelvin_output =  document.querySelector('.Kelvin_output');
 let sentence = '';
 let temperatureInput = '';
+let temperatureOutput = '';
 
 function getTypeTemperatureInput(ipt){
-    if(ipt === 'Celsius'){
-        fahrenheitBtn.classList.remove('selected')
-        celsiusBtn.classList.add('selected');
-    }else{
-        fahrenheitBtn.classList.add('selected');
-        celsiusBtn.classList.remove('selected')
+    switch (ipt) {
+        case 'Celsius': {
+            fahrenheitBtn.classList.remove('selected');
+            KelvinBtn.classList.remove('selected');
+            celsiusBtn.classList.add('selected');
+            return temperatureInput = ipt;
+        }
+        case 'Fahrenheit': {
+            celsiusBtn.classList.remove('selected');
+            KelvinBtn.classList.remove('selected');
+            fahrenheitBtn.classList.add('selected');
+            return temperatureInput = ipt;
+        }
+        case 'Kelvin': {
+            fahrenheitBtn.classList.remove('selected')
+            celsiusBtn.classList.remove('selected');
+            KelvinBtn.classList.add('selected');
+            return temperatureInput = ipt;
+        }
     }
-   return temperatureInput = ipt;
 }
+function getTypeTemperatureOutput(ipt){
+    switch (ipt) {
+        case 'Celsius': {
+            Fahrenheit_output.classList.remove('selected');
+            Kelvin_output.classList.remove('selected');
+            Celsius_output.classList.add('selected');
+            return temperatureOutput = ipt;
+        }
+        case 'Fahrenheit': {
+            Celsius_output.classList.remove('selected');
+            Kelvin_output.classList.remove('selected');
+            Fahrenheit_output.classList.add('selected');
+            return temperatureOutput = ipt;
+        }
+        case 'Kelvin': {
+            Fahrenheit_output.classList.remove('selected')
+            Celsius_output.classList.remove('selected');
+            Kelvin_output.classList.add('selected');
+            return temperatureOutput = ipt;
+        }
+    }
+}
+
 function transformCelsiusToFahrenheit(degCel){
     return (degCel * (9/5) + 32);
 }
+function transformCelsiusToKelvin(celsius) {
+    return celsius + 273.15;
+}
 function transformFahrenheitToCelsius(degCel){
     return (degCel - 32 * 5/9);
-} 
+}
+function transformFahrenheitToKelvin(fahrenheit) {
+    return (fahrenheit - 32) * 5/9 + 273.15;
+}
+function transformKelvinToCelsius(kelvin) {
+    return kelvin - 273.15;
+}
+function transformKelvinToFahrenheit(kelvin) {
+    return (kelvin - 273.15) * 9/5 + 32;
+}
+
+function getTransformFunction(input, output,value){
+   if( input === 'Celsius'){
+      switch (output) {
+          case 'Fahrenheit' : {
+              return transformCelsiusToFahrenheit(value);
+          }
+          case 'Kelvin' : {
+              return transformCelsiusToKelvin(value);
+          }
+      }
+   }   if( input === 'Fahrenheit'){
+      switch (output) {
+          case 'Celsius' : {
+              return transformFahrenheitToCelsius(value);
+          }
+          case 'Kelvin' : {
+              return transformFahrenheitToKelvin(value);
+          }
+      }
+   }   if( input === 'Kelvin'){
+      switch (output) {
+          case 'Fahrenheit' : {
+              return transformKelvinToFahrenheit(value);
+          }
+          case 'Celsius' : {
+              return transformKelvinToCelsius(value);
+          }
+      }
+   }
+}
 form.onkeydown = function(e){
     if(e.keyCode == 13){
         e.preventDefault();
@@ -32,14 +115,16 @@ form.onkeydown = function(e){
  };
 function getSentenceResult(){
     const value = +res.value;
+    if(isNaN(value)){
+        return element_result.innerHTML = 'Input data not correct.';
+    }
     if(temperatureInput === ''){
         return element_result.innerHTML = 'Please enter valid conversion';
     }
-    if(isNaN(value)){
-        return element_result.innerHTML = 'Input data not correct.';
+    else if(temperatureOutput === temperatureInput){
+        return element_result.innerHTML = 'Please enter valid conversion';
     }
-       const val = temperatureInput === 'Celsius' ? transformCelsiusToFahrenheit(value) : transformFahrenheitToCelsius(value);
-       const labelTemperature = (temperatureInput === 'Celsius') ? ' Fahrenheit' : ' Celsius' ;
-       return element_result.innerHTML = `<p class='response'>${value} ${temperatureInput} give ${parseInt(val)} ${labelTemperature}</p>`;
+       const val = getTransformFunction(temperatureInput, temperatureOutput, value)
+       return element_result.innerHTML = `<p class='response'>${value} ${temperatureInput} give ${parseInt(val)} ${temperatureOutput}</p>`;
 
 }

Temperature-convertor/style.css

@@ -36,7 +36,9 @@ h1, h2 {
     color: #86b0ff;
     text-align: center;
 }
-
+label {
+    font-size: 17px;
+}
 button {
     display: inline-block;
     outline: none;
@@ -59,7 +61,9 @@ button {
 
 .btn-section {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
+    margin-top: 15px;
+    margin-bottom: 15px;
 }
 
 .btn-section button {
@@ -75,13 +79,13 @@ button {
 }
 
 #form {
-    max-width: 500px;
+    max-width: 600px;
     min-width: 450px;
     min-height: 200px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    height: 400px;
+    height: 500px;
     padding: 35px;
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: 20px;