Merge pull request #30 from KrishGaur1354/main

Added a Meter to Feet convertor
DarkFalc0n · Dec 27, 2022 · 7ecef25 · 7ecef25 · vercel · Dec 27, 2022
2 parents ac09493 + 6d226f1
commit 7ecef25
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -31,7 +31,7 @@
             <div class="calculators">
                 <button><a href="calc.html">Arithmetic Calculator</a></button>
                 <button><a href="cm_inch.html">Centimeter to Inch Converter</a></button>
-                <button><a href="">Type 3</a></button>
+                <button><a href="meter_to_foot.html">Metres to Foot Converter</a></button>
                 <button><a href="">Type 4</a></button>
                 <button><a href="">Type 5</a></button>
                 <button><a href="">Type 6</a></button>

diff --git a/meter_to_foot.css b/meter_to_foot.css
@@ -0,0 +1,56 @@
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+#contentHead {
+    font-size: 1.75rem;
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+}
+#inputMet{
+    font-size: 1.7rem;
+    position: absolute;
+    left:25%;
+    top:25%;
+    font-family: 'Courier New', Courier, monospace;
+}
+#inputMetInp{
+    background: transparent;
+    position: absolute;
+    left:55%;
+    top:25%;
+    font-size: 1.7rem;
+    border:none;
+    border-bottom: 2px solid black;
+}
+#outputFoot{
+    font-size: 1.7rem;
+    position: absolute;
+    left:25%;
+    top:40%;
+    font-family: 'Courier New', Courier, monospace;
+}
+#outputInText{
+    background: transparent;
+    position: absolute;
+    left:55%;
+    top:40%;
+    font-size: 1.7rem;
+    border:none;
+    outline:none;
+    resize:none;
+}
+#copy{
+    position:absolute;
+    top:60%;
+    width:10%;
+    left:55%;
+}
+#goBack{
+    position:absolute;
+    top:60%;
+    width:10%;
+    left:35%;
+}
diff --git a/meter_to_foot.html b/meter_to_foot.html
@@ -0,0 +1,58 @@
+<!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>CALCU.TE</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="meter_to_foot.css">
+    <script src="theme-switch.js" defer></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+</head>
+<body>
+  <nav class="navbar">
+    <p id="logo">CALCU.TE</p>
+    <div id="project-repo">
+        <a href="https://github.com/KrishGaur1354/calcu.te" target="_blank" title="Project's GitHub repo">
+            <i class="fa fa-github" style="font-size: 40px; color: black"></i>
+        </a>
+        <i class="bi bi-brightness-high-fill" id="switchTheme" style="font-size: 35px" title="Switch theme"></i>
+    </div>
+  </nav>
+  <main class="mains">
+    <div class="content">
+      <div id="contentHead">
+        Metres to Feet Convertor
+      </div>
+      <div id="calculations">
+        <div id="input">
+          <label id="inputMet">Enter the value in Metres</label>
+          <input type="number" id="inputMetInp" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)">
+        </div>
+        <div id="output">
+          <label id="outputFoot">Output value in Feet</label>
+          <textarea id="outputInText" rows="1" cols="30">0</textarea>
+        </div>
+      </div>
+      <div id="buttons">
+        <button id="copy" onClick="copyText()">Copy Result</button>
+        <button id="goBack"><a href="index.html"> Go Back </a></button>
+      </div>
+    </div>
+  </main>
+  <script>
+    function LengthConverter(valNum){
+      document.getElementById("outputInText").innerHTML = valNum*3.28084;
+    }
+    function copyText(){
+      var copy = document.getElementById("outputInText");
+      copy.select();
+      navigator.clipboard.writeText(copy.innerHTML);
+      alert("Result copied to clipboard");
+
+    }
+  </script>
+</body>
+</html>