feat(calculator): adding classes css

Author: gbasset

Temperature-convertor/index.html

@@ -13,14 +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="getTypeTemperatureInput('Celsius');">Celsius</button>
-            <button type="button" onclick="getTypeTemperatureInput('Fahrenheit');">Fahrenheit </button>
+            <button type="button" 
+            class="Celsius"
+            onclick="getTypeTemperatureInput('Celsius');">Celsius</button>
+            <button 
+            class="Fahrenheit"
+            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>
+        <button id="btn-submit" type="button" onclick="getSentenceResult();">Submit</button>
         <section id="element_result" style="font-size: larger;">
 
         </section>

Temperature-convertor/main.js

@@ -2,11 +2,20 @@
 
 const res = document.getElementById('response');
 const form = document.getElementById('form');
-
+const celsiusBtn = document.querySelector('.Celsius');
+const fahrenheitBtn = document.querySelector('.Fahrenheit');
 const element_result = document.getElementById('element_result');
 let sentence = '';
 let temperatureInput = '';
+
 function getTypeTemperatureInput(ipt){
+    if(ipt === 'Celsius'){
+        fahrenheitBtn.classList.remove('selected')
+        celsiusBtn.classList.add('selected');
+    }else{
+        fahrenheitBtn.classList.add('selected');
+        celsiusBtn.classList.remove('selected')
+    }
    return temperatureInput = ipt;
 }
 function transformCelsiusToFahrenheit(degCel){
@@ -31,6 +40,6 @@ function getSentenceResult(){
     }
        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>`;
+       return element_result.innerHTML = `<p class='response'>${value} ${temperatureInput} give ${parseInt(val)} ${labelTemperature}</p>`;
 
 }

Temperature-convertor/style.css

@@ -69,10 +69,9 @@ button{
     min-height: 200px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    height: 300px;
+    justify-content: space-around;
+    height: 400px;
     padding: 35px;
-  
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: 20px;
     background-color: rgba(255, 255, 255, 0.45);
@@ -81,8 +80,29 @@ button{
 .input-section{
     display: flex;
     flex-direction: column;
+    margin: 10px 3px;
 }
 .input-section label{
    font-weight: bold;
    margin-bottom: 5px;
+}
+#btn-submit{
+    width: 120px;
+    text-align: center;
+    margin: 10px auto;
+}
+.response{
+    color: red;
+    font-size: x-large;
+    font-weight: 900;
+    text-align: center;
+    background-color: #dddddd;
+    display: block;
+    text-align: center;
+    height: 50px; /* Exemple de hauteur fixe */
+    line-height: 50px; /* La même que la hauteur */
+}
+button.selected {
+    color: #3300ff;
+    border-color: #3300ff; 
 }