Temperature Converter Web-App (#64)

* TempConverter App * Update README.md
sid-am-ahd935 · Oct 20, 2022 · 102185c · 102185c
1 parent 024b464
commit 102185c
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 0 deletions.
diff --git a/JavaScript/TempConverter/README.md b/JavaScript/TempConverter/README.md
@@ -0,0 +1,9 @@
+#My Simple Temperature Converter Using HTML, CSS and JavaScript 
+#You can convert the value between all the three units- Celcius, Fahrenheit and Kelvin 
+
+<p align="center">
+  <img src="/JavaScript/TempConverter/imgs/ExapmleDefault.png" width="350" title="hover text">
+  <img src="/JavaScript/TempConverter/imgs/ExampleOne.png" width="350" title="hover text">
+  <img src="/JavaScript/TempConverter/imgs/ExapmleTwo.png" width="350" title="hover text">
+  <img src="/JavaScript/TempConverter/imgs/ExapmleThree.png" width="350" title="hover text">
+</p>
diff --git a/JavaScript/TempConverter/imgs/ExampleOne.png b/JavaScript/TempConverter/imgs/ExampleOne.png
diff --git a/JavaScript/TempConverter/imgs/ExapmleDefault.png b/JavaScript/TempConverter/imgs/ExapmleDefault.png
diff --git a/JavaScript/TempConverter/imgs/ExapmleThree.png b/JavaScript/TempConverter/imgs/ExapmleThree.png
diff --git a/JavaScript/TempConverter/imgs/ExapmleTwo.png b/JavaScript/TempConverter/imgs/ExapmleTwo.png
diff --git a/JavaScript/TempConverter/imgs/arrow.svg b/JavaScript/TempConverter/imgs/arrow.svg
diff --git a/JavaScript/TempConverter/imgs/bg.jfif b/JavaScript/TempConverter/imgs/bg.jfif
diff --git a/JavaScript/TempConverter/index.html b/JavaScript/TempConverter/index.html
@@ -0,0 +1,49 @@
+<!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>Hackto-TempConverter</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="/imgs/arrow.svg" type="image/x-icon">
+</head>
+<body>
+    <header class="flex">
+        <h3>Simple Temperature Converter</h3>
+        <h3 style="color: #ebd136;"> -by @AsifStar135</h3>
+    </header>
+
+    <div class="container">
+        <h3>...Put value in any unit...</h3>
+        <div class="main-card flex">
+            <br>
+            <div class="left">
+                <div class="left-form">
+                    <h3>Celcius</h3>
+                    <input type="number" placeholder="0.00°C" name="left-value" id="cel" oninput="celInput()">
+                </div>
+            </div>
+
+            <img src="/imgs/arrow.svg" alt="Convert" style="width: 13%;">
+
+            <div class="mid">
+                <div class="left-form">
+                    <h3>Fahrenheit</h3>
+                    <input type="number" placeholder="0.00°F" name="left-value" id="fer" oninput="ferInput()">
+                </div>
+            </div>
+
+            <img src="/imgs/arrow.svg" alt="Convert" style="width: 13%;">
+
+            <div class="right">
+                <div class="right-form">
+                    <h3>Kelvin</h3>
+                    <input type="number" placeholder="0.00K" name="left-value" id="kel" oninput="kelInput()">
+                </form>
+            </div>
+        </div>
+    </div>
+    <script src="/script.js"></script>
+</body>
+</html>
diff --git a/JavaScript/TempConverter/script.js b/JavaScript/TempConverter/script.js
@@ -0,0 +1,30 @@
+
+let celcius = document.getElementById("cel")
+let Fahrenheit = document.getElementById("fer")
+let kelvin = document.getElementById("kel")
+
+function celInput(){
+    let celValue = parseFloat(celcius.value);
+    let ferOutput = (celValue * 9)/5 + 32;
+    let kelOutput = celValue + 273;
+
+    Fahrenheit.value = parseFloat(ferOutput.toFixed(2));
+    kelvin.value = parseFloat(kelOutput.toFixed(2));
+}
+
+function ferInput(){
+    let ferValue = parseFloat(Fahrenheit.value);
+    let celOutput = (ferValue-32)*5/9;
+    let kelOutput = celOutput + 273;
+
+    celcius.value = parseFloat(celOutput.toFixed(2));
+    kelvin.value = parseFloat(kelOutput.toFixed(2));
+}
+function kelInput(){
+    let kelValue = parseFloat(kelvin.value);
+    let celOutput = kelValue - 273;
+    let ferOutput = (celOutput * 9)/5 + 32;
+
+    celcius.value = parseFloat(celOutput.toFixed(2));
+    Fahrenheit.value = parseFloat(ferOutput.toFixed(2));
+}
diff --git a/JavaScript/TempConverter/style.css b/JavaScript/TempConverter/style.css
@@ -0,0 +1,59 @@
+body{
+    background-image: url(/imgs//bg.jfif);
+    background-size: cover;
+    padding: 0;
+    margin: 0;
+    font-family: monospace;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.flex{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+header{
+    color: black;
+    margin: 3vh 3vw;
+    font-size: 28px;
+    justify-content: space-between !important;
+}
+
+.container{
+    background-color: #f4b542;
+    width: 48%;
+    margin: 25vh 0 0 4vw;
+    padding: 2vw;
+    text-align: center;
+    border-radius: 10px;
+
+}
+
+.container h3{
+    font-size: 26px;
+    margin: 0rem;
+}
+
+.left-form, .right-form{
+    padding: 1.2rem;
+}
+
+input{
+    height: 26px;
+    border: 1px solid black;
+    border-radius: 7px;
+    color: #ff7f00;
+    padding: 4px 7px;
+    width: 63%;
+    font-size: 18px;
+    text-align: center;
+    font-family: inherit;
+}
+
+.mid h3, .left h3, .right h3{
+    margin: 1rem auto !important;
+}