initial working done

joshi-kaushal · joshi-kaushal · commit a0bf81b3fb3f · 2021-07-17T02:27:08.000+05:30
diff --git a/Temperature Convertor/README.md b/Temperature Convertor/README.md
diff --git a/Temperature Convertor/index.html b/Temperature Convertor/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Hello Bulma!</title>
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+    <link rel="stylesheet" href="./style.css"
+  </head>
+  <body>
+  <section class="section">
+      <nav class="navbar">
+          <div class="navbar-brand">
+              <a href="#">Temperature Convertor</a>
+          </div>
+      </nav>
+    <div class="container">
+      <div id='input-container'>
+          <input type="number" class="input is-medium input-childs" id='input' name='input' placeholder="Enter Temperature">
+          <select name='from' class="input is-medium input-childs" id='from' form="conversion">
+              <option value="celsius">Celsius</option>
+              <option value="fahrenheit">Fahrenheit</option>
+              <option value="kelvin">Kelvin</option>
+          </select>
+          <button class="button is-medium input-childs" disabled>
+              <ion-icon name="play-forward-outline"></ion-icon>
+          </button>
+          <select name='to' class="input is-medium input-childs" id='to' form="conversion">
+              <option value=""></option>
+              <option value="fahrenheit">Fahrenheit</option>
+              <option value="kelvin">Kelvin</option>
+              <option value="celsius">Celsius</option>
+          </select>
+      </div>
+        <div id='converted-value'>
+            
+        </div>
+    </div>
+  </section>
+      <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/Temperature Convertor/script.js b/Temperature Convertor/script.js
@@ -0,0 +1,62 @@
+let done = document.getElementById('converted-value')
+
+to.onchange = () => {
+    done.innerHTML = ""
+    let from = document.getElementById('from')
+    let to = document.getElementById('to')
+
+    let fromValue = from.value
+    let toValue = to.value
+
+    if(fromValue === toValue) {
+        done.innerHTML = "Units should be different"
+    }
+
+    if(fromValue === 'celsius' && toValue === 'kelvin') {
+        celsiusToKelvin(fromValue, toValue) 
+    }
+
+    if(fromValue === 'celsius' && toValue === 'fahrenheit') {
+        celsiusToFahrenheit(fromValue, toValue) 
+    }
+    
+    if(fromValue === 'fahrenheit' && toValue === 'kelvin') {
+        fahrenheitToKelvin(fromValue, toValue) 
+    }
+
+    if(fromValue === 'fahrenheit' && toValue === 'celsius') {
+        fahrenheitToCelsius(fromValue, toValue) 
+    }
+    
+    if(fromValue === 'kelvin' && toValue === 'fahrenheit') {
+        KelvinToFahrenheit(fromValue, toValue) 
+    }
+
+    if(fromValue === 'kelvin' && toValue === 'celsius') {
+        KelvinToCelsius(fromValue, toValue) 
+    }
+}
+
+const celsiusToKelvin = (fromValue, toValue) => {
+    alert(`${fromValue}, ${toValue}`)
+}
+
+const celsiusToFahrenheit = (fromValue, toValue) => {
+    alert(`${fromValue}, ${toValue}`)
+}
+
+const fahrenheitToKelvin = (fromValue, toValue) => {
+    alert(`${fromValue}, ${toValue}`)
+}
+
+const fahrenheitToCelsius = (fromValue, toValue) => {
+    alert(`${fromValue}, ${toValue}`)
+}
+
+const KelvinToFahrenheit = (fromValue, toValue) => {
+    alert(`${fromValue}, ${toValue}`)
+}
+
+const KelvinToCelsius = (fromValue, toValue) => {
+    alert(`${fromValue}, ${toValue}`)
+}
diff --git a/Temperature Convertor/style.css b/Temperature Convertor/style.css
@@ -0,0 +1,7 @@
+#input-container {
+    display: flex;
+}
+
+.input-childs {
+    margin: 10px;
+}
