feat(temperature) : add the logic for calculation

Author: gbasset

Temperature-convertor/index.html

@@ -13,19 +13,18 @@ <h1>Temperature convertor</h1>
     <form action="" method="post" id="form">
         <h2 >Type of conversion</h2>
         <div class="btn-section">
-            <button type="button" onclick="getSentenceResult();">Celsius</button>
-            <button type="button" onclick="getSentenceResult();">Fahrenheit </button>
-
+            <button type="button" onclick="getTypeTemperatureInput('Celsius');">Celsius</button>
+            <button type="button" onclick="getTypeTemperatureInput('Fahrenheit');">Fahrenheit </button>
         </div>
         <div class="input-section">
             <label for="response">Temperature</label>
             <input type="text" name="response" id="response"  placeholder="12">
         </div>
         <button type="button" onclick="getSentenceResult();">Submit</button>
+        <section id="element_result" style="font-size: larger;">
+    
+        </section>
     </form>
-    <section id="element_result" style="font-size: larger;">
-
-    </section>
 </body>
 <script src="./main.js"></script>
 </html>

Temperature-convertor/main.js

@@ -5,9 +5,16 @@ const form = document.getElementById('form');
 
 const element_result = document.getElementById('element_result');
 let sentence = '';
+let temperatureInput = '';
+function getTypeTemperatureInput(ipt){
+   return temperatureInput = ipt;
+}
 function transformCelsiusToFahrenheit(degCel){
     return (degCel * (9/5) + 32);
 }
+function transformFahrenheitToCelsius(degCel){
+    return (degCel - 32 * 5/9);
+} 
 form.onkeydown = function(e){
     if(e.keyCode == 13){
         e.preventDefault();
@@ -16,10 +23,14 @@ form.onkeydown = function(e){
  };
 function getSentenceResult(){
     const value = +res.value;
- 
+    if(temperatureInput === ''){
+        return element_result.innerHTML = 'Please enter valid conversion';
+    }
     if(isNaN(value)){
         return element_result.innerHTML = 'Input data not correct.';
     }
-       const val = transformCelsiusToFahrenheit(value);
-       return  element_result.innerHTML =  value + ' degrés Celsius donne ' + parseInt(val) + ' Fahrenheit ';
+       const val = temperatureInput === 'Celsius' ? transformCelsiusToFahrenheit(value) : transformFahrenheitToCelsius(value);
+       const labelTemperature = (temperatureInput === 'Celsius') ? ' Fahrenheit' : ' Celsius' ;
+       return element_result.innerHTML = `<p>${value} ${temperatureInput} give ${parseInt(val)} ${labelTemperature}</p>`;
+
 }

Temperature-convertor/style.css

@@ -29,7 +29,10 @@ input{
 :focus{
     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;
 }
-
+h1,h2{
+    color: #86b0ff;
+    text-align: center;
+}
 button{
     display: inline-block;
     outline: none;