Add files via upload

nileshsn · Jul 24, 2023 · 45df12a · 45df12a
1 parent 5d3eee2
commit 45df12a
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Temp Converter</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <center>
+            <h1>TEMPERATURE CONVERTER 🌡❄</h1>
+            <input type="text" id="fahrenheit" placeholder="Fahrenheit" name="f" value=""/>
+            <input type="text" id="celsius" placeholder="Celsius" name="c" value=""/>
+            <button id="convert">Convert</button>
+            <button id="clear">Reset</button>
+            <script src="scprit.js"></script>
+        </center>
+    </body>
+</html>
diff --git a/scprit.js b/scprit.js
@@ -0,0 +1,22 @@
+document.getElementById('convert').onclick=tempConvert;
+document.getElementById('clear').onclick=clearForm;
+
+function tempConvert(){
+    var fahrenheit=document.getElementById("fahrenheit").value;
+    var celsius=document.getElementById("celsius").value;
+
+    if(fahrenheit !=''){
+        celsius=(parseFloat(fahrenheit)-32)/1.8;
+    }
+    else{
+        fahrenheit=(parseFloat(celsius)*1.8)+32;
+    }
+
+    document.getElementById('fahrenheit').value=parseFloat(fahrenheit).toFixed(1);
+    document.getElementById('celsius').value=parseFloat(celsius).toFixed(1);
+}
+
+function clearForm(){
+    document.getElementById('fahrenheit').value='';
+    document.getElementById('celsius').value='';
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,60 @@
+body{
+    background-color: #18122b ;
+    color: #635985;
+    font-family: 'DM Mono', monospace;
+}
+input{
+    background-color: #cecece;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+}
+input:focus{
+    background-color: #6402a1;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+}
+textarea{
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+}
+textarea:focus{
+    background-color: #6402a1;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+}
+button{
+    background-color: #635985;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+}
+button:hover{
+    background-color: #6402a1;
+    border-radius: 5px;
+    -webkit-border-radius: 5PX;
+    -moz-border-radius: 5PX;
+    -ms-border-radius: 5PX;
+    -o-border-radius: 5PX;
+}
+button:focus{
+    background-color: #01b11b;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+}