initial commit

akchaturvedi · Sep 11, 2023 · 9238973 · 9238973
commit 9238973
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 0 deletions.
diff --git a/tem_conv.html b/tem_conv.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="temp_conv.css">
+    <title>temp-converter</title>
+</head>
+<body>
+
+
+    <form id="tempCalc" onsubmit="calculateTemp(); return false ">
+        <label for="temp"> please enter the temperature you'd like to convert.</label>
+        <br/><input type="number" name="temp" id="temp">
+
+        <select name="temp_diff" id="temp_diff">
+            <option value="cel">°Celsius</option>
+            <option value="fah">°Fahrenheit</option>
+        </select>  <br/>
+        <input type="submit" name="temp" class="smt"> <br/>
+        <span id="resultContainer"></span>
+    </form>
+   <script src="temp_conv.js"></script> 
+</body>
+</html>
diff --git a/temp_conv.css b/temp_conv.css
@@ -0,0 +1,45 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "mulish",sans-serif;
+}
+
+body{
+    width: 100vw;
+    height: 100vh;
+    background-color: #f8e7af;
+    display: grid;
+    place-items: center;
+}
+
+
+#tempCalc{
+    height: 250px;
+    width: 550px;
+    background-color:darkslategray;
+    color:  white;
+    font-size: 1.5rem;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+#temp{
+    height:35px;
+    margin-top: 20px;
+
+
+}
+#temp_diff{
+    height:35px;
+    background-color:rgba(34, 0, 128, 0.144);
+}
+
+.smt{
+    height: 27px;
+    width: 60px;
+    margin-top: 40px;
+
+}
+
+
diff --git a/temp_conv.js b/temp_conv.js
@@ -0,0 +1,33 @@
+const calculateTemp =()=>{
+
+    const numberTemp=document.getElementById('temp').value;
+
+
+
+
+const tempSelected= document.getElementById ('temp_diff');
+const valueTemp = temp_diff.options[tempSelected.selectedIndex].value;
+
+const celToFah=(cel) =>{
+    let Fahrenhiet =Math.round((cel*9/5) + 32);
+    return Fahrenhiet;
+}
+
+const fahTocel=(fah) =>{
+    let Celsius =Math.round((fah -32)*5/9);
+    return Celsius;
+}
+
+let result;
+
+if(valueTemp=='cel'){
+    result =celToFah(numberTemp);
+    document.getElementById('resultContainer').innerHTML=`= ${result} °Fahrenhiet`;
+
+}
+else{
+    result =fahTocel(numberTemp);
+    document.getElementById('resultContainer').innerHTML=`=${result} °Celsius`;
+}
+
+}