mykeels · jideblarke1 · Mar 12, 2021
diff --git a/TemperatureConverter/app.js b/TemperatureConverter/app.js
@@ -0,0 +1,44 @@
+const celciusInput = document.getElementById("celcius");
+const farenheitInput = document.getElementById("farenheit");
+const kelvinInput = document.getElementById("kelvin");
+
+const inputs = document.getElementsByClassName("input");
+
+for( i = 0; i < inputs.length; i++ ){
+    let input = inputs[i];
+
+    input.addEventListener("input", function (e){
+        let value = e.target.value;
+
+        switch (e.target.name) {
+            case "celcius":
+
+                farenheitInput.value = (value * 1.8)+ 32 ;
+                kelvinInput.value = value + 273.15 ;
+
+                break;
+
+            case "farenheit":
+                celciusInput.value = (value - 32) / 1.8 ;
+                kelvinInput.value = ((value - 32) / 1.8) + 273.15 ;
+
+                break;
+
+            case "kelvin":
+                celciusInput.value = value - 273.15;
+                farenheitInput.value = ((value - 273.15) * 1.8) + 32 ;
+
+                break;
+
+
+
+
+            default:
+                break;
+        }
+    })
+
+
+}
+
+
diff --git a/TemperatureConverter/index.html b/TemperatureConverter/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Temp Converter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <main>
+        <header>
+            <div>
+                <h1>Temp Converter By Jide</h1>
+            </div>
+        </header>
+        <section class="inputs">
+            <input class="input" type="number" name="celcius" Id="celcius" placeholder="Celcius"></input>
+            <input class="input" type="number" name="farenheit" Id="farenheit" placeholder="Farenheit"></input>
+            <input class="input" type="number" name="kelvin" Id="kelvin" placeholder="Kelvin"></input>
+
+        </section>
+    </main>
+
+
+
+
+
+
+</body>
+
+<script src="app.js"></script> 
+
+
+
+
+
+
+
+
+
+
+</html>
diff --git a/TemperatureConverter/style.css b/TemperatureConverter/style.css
@@ -0,0 +1,54 @@
+*   {
+    margin: 0;
+    padding: 0;
+    font-family: sanserif;
+}
+
+main {
+    background: greenyellow;
+    width: 100%;
+    height: 100vh;
+    background-image: linear-gradient(to bottom #7fff00 #228b22);
+
+}
+
+header {
+    display: flex;
+    justify-content: center;
+    padding-top: 70px;
+}
+
+h1 {
+    text-transform: uppercase;
+    font-size: 40px;
+    margin-bottom: 50px;
+
+}
+
+.input{
+    flex: 1 1 30%;
+    margin: 15px;
+    appearance: none;
+    background: none;
+    background-color: #fff;
+    border-radius: 8px;
+    outline: none;
+    padding: 15px;
+    transition: 0.4s;
+    border:none;
+
+}
+
+.input: focus {
+    box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.2);
+}
+
+.inputs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0 auto;
+    align-items: center;
+    width: 768px;
+
+}