Feat(temperature_convertor) add kelvin logic conversion

Author: 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>`;
 
 }