update temperature convertor project

sahandghavidel · sahandghavidel · commit 255472a73ec5 · 2022-12-21T18:13:46.000+07:00
diff --git a/projects/temp-converter/index.js b/projects/temp-converter/index.js
diff --git a/projects/temperature-convertor/index.html b/projects/temperature-convertor/index.html
@@ -9,42 +9,41 @@
   </head>
   <body>
     <div class="container">
-      <div class="heading">Temperature Convertor</div>
-      <div class="box">
+      <h1 class="heading">Temperature Convertor</h1>
+      <div class="temp-container">
         <label for="celsius">Celsius:</label>
         <input
+          onchange="computeTemp(event)"
           type="number"
           name="celsius"
           id="celsius"
           placeholder="Enter Temperature"
-          class="input_box"
-          onchange="computeTemp(event)"
+          class="input"
         />
       </div>
-      <div class="box">
+      <div class="temp-container">
         <label for="fahrenheit">Fahrenheit:</label>
         <input
+          onchange="computeTemp(event)"
           type="number"
           name="fahrenheit"
           id="fahrenheit"
           placeholder="Enter Temperature"
-          class="input_box"
-          onchange="computeTemp(event)"
+          class="input"
         />
       </div>
-      <div class="box">
+      <div class="temp-container">
         <label for="kelvin">Kelvin:</label>
         <input
+          onchange="computeTemp(event)"
           type="number"
           name="kelvin"
           id="kelvin"
           placeholder="Enter Temperature"
-          class="input_box"
-          onchange="computeTemp(event)"
+          class="input"
         />
       </div>
     </div>
-
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/projects/temperature-convertor/index.js b/projects/temperature-convertor/index.js
@@ -0,0 +1,24 @@
+const celsiusEl = document.getElementById("celsius");
+const fahrenheitEl = document.getElementById("fahrenheit");
+const kelvinEl = document.getElementById("kelvin");
+
+function computeTemp(event) {
+  const currentValue = +event.target.value;
+
+  switch (event.target.name) {
+    case "celsius":
+      kelvinEl.value = (currentValue + 273.32).toFixed(2);
+      fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2);
+      break;
+    case "fahrenheit":
+      celsiusEl.value = ((currentValue - 32) / 1.8).toFixed(2);
+      kelvinEl.value = ((currentValue - 32) / 1.8 + 273.32).toFixed(2);
+      break;
+    case "kelvin":
+      celsiusEl.value = (currentValue - 273.32).toFixed(2);
+      fahrenheitEl.value = ((currentValue - 273.32) * 1.8 + 32).toFixed(2);
+      break;
+    default:
+      break;
+  }
+}
diff --git a/projects/temperature-convertor/style.css b/projects/temperature-convertor/style.css
@@ -6,50 +6,46 @@ body {
   justify-content: center;
   align-items: center;
   font-family: monospace;
-  font-size: 1.25rem;
   color: darkcyan;
 }
 
-.heading {
-  height: 58px;
-  line-height: 58px;
-  width: 100%;
-  font-size: 2rem;
-  font-weight: bolder;
-  text-align: center;
-  border-radius: 10px;
-  padding: 0 15px;
-  margin-bottom: 28px;
-}
 .container {
+  background: rgba(255, 255, 255, 0.3);
+  padding: 20px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
   width: 85%;
   max-width: 450px;
   min-width: 350px;
-  padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.3);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
-.box {
+
+.heading {
+  font-size: 32px;
+}
+
+.temp-container {
   width: 100%;
   padding: 15px;
   font-weight: bold;
+  font-size: 18px;
 }
-.input_box {
-  width: 14rem;
+
+.input {
+  width: 220px;
   font-family: monospace;
   padding: 5px;
   float: right;
   outline: none;
   background: rgba(255, 255, 255, 0.3);
   border-color: rgba(255, 255, 255, 0.5);
   color: darkgreen;
-  font-size: 1.25rem;
+  font-size: 18px;
 }
 
-.input_box::placeholder {
-  color: darkgray;
+
+.input::placeholder{
+    color: darkgray;
 }
