Merge pull request #173 from Baron105/beta

Length Converter
shrey141102 · Dec 24, 2023 · e993a5f · e993a5f
2 parents 4c75eef + 9a1a476
commit e993a5f
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 0 deletions.
diff --git a/Length-Converter/index.html b/Length-Converter/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Length Converter</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h2>Length Converter</h2>
+
+    <div class="converter">
+      <div class="conversion">
+        <h3>Feet to Meters:</h3>
+        <label for="inputFeet">Feet</label>
+        <input id="inputFeet" type="number" placeholder="Feet">
+        <p>Meters: <span id="outputMeters"></span></p>
+      </div>
+
+      <div class="conversion">
+        <h3>Meters to Feet:</h3>
+        <label for="inputMetres">Meters</label>
+        <input id="inputMetres" type="number" placeholder="Meters">
+        <p>Feet: <span id="outputFeet"></span></p>
+      </div>
+
+      <div class="conversion">
+        <h3>Centimeters to Inches:</h3>
+        <label for="inputcm">cm</label>
+        <input id="inputcm" type="number" placeholder="cm">
+        <p>Inches: <span id="outputInches"></span></p>
+      </div>
+
+      <div class="conversion">
+        <h3>Inches to Centimeters:</h3>
+        <label for="inputInches">Inches</label>
+        <input id="inputInches" type="number" placeholder="Inches">
+        <p>cm: <span id="outputcm"></span></p>
+      </div>
+
+      <div class="conversion">
+        <h3>Miles to Kilometers:</h3>
+        <label for="inputMiles">Miles</label>
+        <input id="inputMiles" type="number" placeholder="Miles">
+        <p>Kilometers: <span id="outputKm"></span></p>
+      </div>
+
+      <div class="conversion">
+        <h3>Kilometers to Miles:</h3>
+        <label for="inputKm">Kilometers</label>
+        <input id="inputKm" type="number" placeholder="Kilometers">
+        <p>Miles: <span id="outputMiles"></span></p>
+      </div>
+
+      <div class="conversion">
+        <h3>Meters to Yards:</h3>
+        <label for="inputMetersYard">Meters</label>
+        <input id="inputMetersYard" type="number" placeholder="Meters">
+        <p>Yards: <span id="outputYards"></span></p>
+      </div>
+
+      <div class="conversion">
+        <h3>Yards to Meters:</h3>
+        <label for="inputYards">Yards</label>
+        <input id="inputYards" type="number" placeholder="Yards">
+        <p>Meters: <span id="outputMetersYard"></span></p>
+      </div>
+    </div>
+
+    <h3>Formulae Used</h3>
+    <p>m = ft / 3.2808</p>
+    <p>ft = m * 3.2808</p>
+    <p>in = cm * 0.39370</p>
+    <p>cm = in / 0.39370</p>
+    <p>km = miles * 1.60934</p>
+    <p>miles = km / 1.60934</p>
+    <p>yards = meters * 1.09361</p>
+    <p>meters = yards / 1.09361</p>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Length-Converter/readme.md b/Length-Converter/readme.md
@@ -0,0 +1,16 @@
+# Length Converter
+
+## Description
+
+This is a simple length converter that supports conversion between the units Kilometers, Meters, Centimeters, Miles, Yards, Feet and Inches and vice versa. It is built using HTML, CSS and JavaScript.
+
+## How to use
+
+Enter the length in the suitable input field and the conversion will be done automatically without the need to click any button. The conversion will be done in real time as you type.
+
+The formula used for the conversion is also displayed below the input fields. Also please note that while negative values are allowed, the conversion only makes sense for positive values.
+
+## Images for reference
+
+![Screenshot](https://github.com/Baron105/JS-projects/assets/76466796/31d6b6de-7e25-4493-b2ad-fb5b47f2c695)
+![Screenshot](https://github.com/Baron105/JS-projects/assets/76466796/ff1de9f3-44c9-4a04-8b36-d1c02d1ee69a)
diff --git a/Length-Converter/script.js b/Length-Converter/script.js
@@ -0,0 +1,64 @@
+function MtF(valNum) {
+    document.getElementById("outputFeet").innerHTML = valNum * 3.2808;
+  }
+
+  function FtM(valNum) {
+    document.getElementById("outputMeters").innerHTML = valNum / 3.2808;
+  }
+
+  function CtI(valNum) {
+    document.getElementById("outputInches").innerHTML = valNum * 0.39370;
+  }
+
+  function ItC(valNum) {
+    document.getElementById("outputcm").innerHTML = valNum / 0.39370;
+  }
+
+  function MilesToKm(valNum) {
+    document.getElementById("outputKm").innerHTML = valNum * 1.60934;
+  }
+
+  function KmToMiles(valNum) {
+    document.getElementById("outputMiles").innerHTML = valNum / 1.60934;
+  }
+
+  function MetersToYards(valNum) {
+    document.getElementById("outputYards").innerHTML = valNum * 1.09361;
+  }
+
+  function YardsToMeters(valNum) {
+    document.getElementById("outputMetersYard").innerHTML = valNum / 1.09361;
+  }
+
+  document.getElementById("inputFeet").addEventListener("input", function() {
+    FtM(this.value);
+  });
+
+  document.getElementById("inputMetres").addEventListener("input", function() {
+    MtF(this.value);
+  });
+
+  document.getElementById("inputcm").addEventListener("input", function() {
+    CtI(this.value);
+  });
+
+  document.getElementById("inputInches").addEventListener("input", function() {
+    ItC(this.value);
+  });
+
+  document.getElementById("inputMiles").addEventListener("input", function() {
+    MilesToKm(this.value);
+  });
+
+  document.getElementById("inputKm").addEventListener("input", function() {
+    KmToMiles(this.value);
+  });
+
+  document.getElementById("inputMetersYard").addEventListener("input", function() {
+    MetersToYards(this.value);
+  });
+
+  document.getElementById("inputYards").addEventListener("input", function() {
+    YardsToMeters(this.value);
+  });
+
diff --git a/Length-Converter/styles.css b/Length-Converter/styles.css
@@ -0,0 +1,46 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: black;
+    color: white;
+    margin: 0;
+    padding: 20px;
+  }
+
+  h2 {
+    text-align: center;
+  }
+
+  h3 {
+    text-align: left;
+  }
+
+  .converter {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+
+  .conversion {
+    width: 45%;
+    margin-bottom: 20px;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  input[type="number"] {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+  }
+
+  p {
+    margin: 5px 0;
+  }
+
+  h3 {
+    margin-top: 20px;
+  }
+
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@
 - Happy Birthday Wisher
 - Image Background Remover
 - Javascript Projects Main Website
+- Length Converter
 - Memory Game of Tiles
 - Micro Code Editor in the Browser
 - Music Player

diff --git a/script.js b/script.js
@@ -61,6 +61,14 @@ const projects = [
     image:
       'https://media.istockphoto.com/id/1366275800/vector/stopwatch-timer-speed-being-held-by-a-persons-hand.jpg?b=1&s=612x612&w=0&k=20&c=-4d6m0i6z9iACH0kDAyC2p2Z-ykIJH5zHjp2303gj2Q=',
   },
+  {
+    title: "Length Converter",
+    discription:
+      "This is a simple length converter that supports conversion between the units Feet and Meters, Inches and Centimeters, Kilometers and Miles and vice versa. Automatic conversion is done as you type.",
+    link: "./Length-Converter/index.html",
+    image:
+      "https://github.com/Baron105/JS-projects/assets/76466796/34343ff9-41ff-4a70-b306-1ffd2da2d8d5",
+  },
   {
     title: 'Weight Converter',
     discription: