Added Yarn Density Calculator (#606)

Rakesh9100 · Feb 23, 2024 · 021cf1f · 021cf1f
1 parent 2cc6acd
commit 021cf1f
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 0 deletions.
diff --git a/Calculators/Yarn-Density-Calculator/README.md b/Calculators/Yarn-Density-Calculator/README.md
@@ -0,0 +1,16 @@
+# <p align="center">Yarn Density Calculator</p>
+
+## Description 
+
+The Yarn Density Calculator is a web-based tool designed to assist users in computing conversion of different unit values based on input parameters related to a material's unit required. 
+
+## Tech Stacks 
+
+- HTML
+- CSS
+- Bootstrap
+- JavaScript
+
+## Screenshots 
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/114330097/c8f9dfa8-818d-46a4-9341-84e9c13b28fc)
diff --git a/Calculators/Yarn-Density-Calculator/index.html b/Calculators/Yarn-Density-Calculator/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Yarn Density Calculator</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <div class="container">
+    <h1>Yarn Density Calculator</h1>
+
+    <select class="form-select from" id="unit1" aria-label="Default select example">
+      <option selected>From</option>
+      <option value="1">Tex</option>
+      <option value="2">English Count</option>
+      <option value="3">Woollen Count</option>
+      <option value="4">Worsted Count</option>
+    </select>
+    <div class="input-group mb-3 from">
+      <span class="input-group-text" id="inputGroup-sizing-default">From</span>
+      <input type="number" class="form-control value1" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+    </div>
+
+    <select class="form-select to" id="unit2" aria-label="Default select example">
+      <option selected>To</option>
+      <option value="1">Tex</option>
+      <option value="2">English Count</option>
+      <option value="3">Woollen Count</option>
+      <option value="4">Worsted Count</option>
+    </select>
+    <div class="input-group mb-3 to">
+      <span class="input-group-text" id="inputGroup-sizing-default">To</span>
+      <input type="text" class="form-control value2" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" readonly>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Calculate</button>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Yarn-Density-Calculator/script.js b/Calculators/Yarn-Density-Calculator/script.js
@@ -0,0 +1,45 @@
+const conversionFactors = {
+    '1': {
+        '1': 1,
+        '2': 590.5412,
+        '3': 1550.1708,
+        '4': 885.8119
+    },
+    '2': {
+        '1': 590.5412,
+        '2': 1,
+        '3': 2.6250,
+        '4': 1.5000
+    },
+    '3': {
+        '1': 1550.1708,
+        '2': 0.3810,
+        '3': 1,
+        '4': 0.5714
+    },
+    '4': {
+        '1': 885.8119,
+        '2': 0.6667,
+        '3': 1.7500,
+        '4': 1
+    }
+};
+
+const fromSelect = document.querySelector('#unit1');
+const toSelect = document.querySelector('#unit2');
+const fromInput = document.querySelector('.value1');
+const toInput = document.querySelector('.value2');
+const calculateButton = document.querySelector('button');
+
+calculateButton.addEventListener('click', convertYarnDensity);
+
+function convertYarnDensity() {
+    const fromValue = parseFloat(fromInput.value);
+    const fromUnit = fromSelect.value;
+    const toUnit = toSelect.value;
+
+    const conversionFactor = conversionFactors[fromUnit][toUnit];
+    const toValue = fromValue * conversionFactor;
+
+    toInput.value = isNaN(toValue) ? '' : toValue.toFixed(2);
+}
diff --git a/Calculators/Yarn-Density-Calculator/style.css b/Calculators/Yarn-Density-Calculator/style.css
@@ -0,0 +1,40 @@
+* {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+body {
+  background-color: #3e4451;
+  color: white;
+}
+
+.container {
+  padding: 3rem 0;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  align-items: center;
+  text-align: center;
+  background-color: #3f4e6e;
+  border-radius: 1rem;
+  max-width: 700px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+.from, .to {
+  max-width: 300px;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
diff --git a/index.html b/index.html
@@ -1836,6 +1836,20 @@ <h3>Checks if a number is circular prime and finds circular prime numbers in a r
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Yarn Density Calculator</h2>
+                <h3>Calculates the linear density of the yarn from unit system to another.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Yarn-Density-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Yarn-Density-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Calculator Section Ends Here  -->