From 021cf1f857f4bfc653b1d122bf6a89023fdc1bd2 Mon Sep 17 00:00:00 2001 From: Avdhesh <114330097+Avdhesh-Varshney@users.noreply.github.com> Date: Fri, 23 Feb 2024 13:58:12 +0530 Subject: [PATCH] Added Yarn Density Calculator (#606) --- Calculators/Yarn-Density-Calculator/README.md | 16 ++++++ .../Yarn-Density-Calculator/index.html | 50 +++++++++++++++++++ Calculators/Yarn-Density-Calculator/script.js | 45 +++++++++++++++++ Calculators/Yarn-Density-Calculator/style.css | 40 +++++++++++++++ index.html | 14 ++++++ 5 files changed, 165 insertions(+) create mode 100644 Calculators/Yarn-Density-Calculator/README.md create mode 100644 Calculators/Yarn-Density-Calculator/index.html create mode 100644 Calculators/Yarn-Density-Calculator/script.js create mode 100644 Calculators/Yarn-Density-Calculator/style.css diff --git a/Calculators/Yarn-Density-Calculator/README.md b/Calculators/Yarn-Density-Calculator/README.md new file mode 100644 index 000000000..3d2e2d32a --- /dev/null +++ b/Calculators/Yarn-Density-Calculator/README.md @@ -0,0 +1,16 @@ +#

Yarn Density Calculator

+ +## 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 new file mode 100644 index 000000000..3916e7f01 --- /dev/null +++ b/Calculators/Yarn-Density-Calculator/index.html @@ -0,0 +1,50 @@ + + + + + + + Yarn Density Calculator + + + + + +
+

Yarn Density Calculator

+ + +
+ From + +
+ + +
+ To + +
+ + +
+ + + + + + diff --git a/Calculators/Yarn-Density-Calculator/script.js b/Calculators/Yarn-Density-Calculator/script.js new file mode 100644 index 000000000..7f3cc988f --- /dev/null +++ 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 new file mode 100644 index 000000000..136b14877 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html index 3059b24b8..49e1877c7 100644 --- a/index.html +++ b/index.html @@ -1836,6 +1836,20 @@

Checks if a number is circular prime and finds circular prime numbers in a r +
+
+

Yarn Density Calculator

+

Calculates the linear density of the yarn from unit system to another.

+
+ + + + + Source Code + +
+
+