diff --git a/Calculators/Paper-Weight-Calculator/README.md b/Calculators/Paper-Weight-Calculator/README.md new file mode 100644 index 000000000..0da45f4ea --- /dev/null +++ b/Calculators/Paper-Weight-Calculator/README.md @@ -0,0 +1,18 @@ +#

Paper weight Calculator

+ +## Description :- + +A Paper Weight Calculator calculates: + +- The weight of paper based on its dimensions, type, and thickness. +- The total weight of multiple sheets or reams for shipping or printing purposes. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](/Calculators/Paper-Weight-Calculator/assets/screenshot.png) diff --git a/Calculators/Paper-Weight-Calculator/assets/screenshot.png b/Calculators/Paper-Weight-Calculator/assets/screenshot.png new file mode 100644 index 000000000..408f8d229 Binary files /dev/null and b/Calculators/Paper-Weight-Calculator/assets/screenshot.png differ diff --git a/Calculators/Paper-Weight-Calculator/index.html b/Calculators/Paper-Weight-Calculator/index.html new file mode 100644 index 000000000..18424e69d --- /dev/null +++ b/Calculators/Paper-Weight-Calculator/index.html @@ -0,0 +1,42 @@ + + + + + + Paper Weight Calculator + + + + +
+
+

Paper weight reference

+
+

+ Grammage +

+
+ +
+ +
+

Select or input the size of your paper

+ +
+ +
+

Output values

+ + + +
+
+ + + + + diff --git a/Calculators/Paper-Weight-Calculator/script.js b/Calculators/Paper-Weight-Calculator/script.js new file mode 100644 index 000000000..b1e2cc1d1 --- /dev/null +++ b/Calculators/Paper-Weight-Calculator/script.js @@ -0,0 +1,34 @@ +// Get elements by ID +const paperGrammageInput = document.getElementById('paperGrammage'); +const paperSizeSelect = document.getElementById('paperSize'); +const weightPerSheetInput = document.getElementById('weightPerSheet'); +const quantityInput = document.getElementById('quantity'); +const totalWeightInput = document.getElementById('totalWeight'); + +// Function to calculate weight per sheet +function calculateWeightPerSheet() { + const grammage = parseFloat(paperGrammageInput.value); + const paperArea = parseFloat(paperSizeSelect.value); + + if (!isNaN(grammage) && !isNaN(paperArea)) { + const weightPerSheet = grammage * paperArea; + weightPerSheetInput.value = weightPerSheet.toFixed(2); + calculateTotalWeight(); + } +} + +// Function to calculate total weight +function calculateTotalWeight() { + const weightPerSheet = parseFloat(weightPerSheetInput.value); + const quantity = parseInt(quantityInput.value); + + if (!isNaN(weightPerSheet) && !isNaN(quantity)) { + const totalWeight = weightPerSheet * quantity; + totalWeightInput.value = totalWeight.toFixed(2); + } +} + +// Add event listeners to inputs +paperGrammageInput.addEventListener('input', calculateWeightPerSheet); +paperSizeSelect.addEventListener('change', calculateWeightPerSheet); +quantityInput.addEventListener('input', calculateTotalWeight); diff --git a/Calculators/Paper-Weight-Calculator/style.css b/Calculators/Paper-Weight-Calculator/style.css new file mode 100644 index 000000000..31438f229 --- /dev/null +++ b/Calculators/Paper-Weight-Calculator/style.css @@ -0,0 +1,86 @@ +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #ffffff; + border-radius: 25px; + box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.2); + width: 450px; + padding: 30px; + animation: fadeIn 1s ease-out, scaleUp 0.5s ease-in-out; + font-size: 16px; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes scaleUp { + from { + transform: scale(0.95); + } + to { + transform: scale(1); + } +} + +.section { + margin-bottom: 25px; +} + +h3 { + font-weight: 600; + font-size: 20px; + color: #3a1c71; + margin-bottom: 15px; +} + +.options { + display: flex; + flex-direction: column; +} + +.options label { + margin-bottom: 10px; + font-weight: 500; + font-size: 15px; + color: #555; +} + +.input { + width: 100%; + padding: 12px; + margin-bottom: 15px; + border-radius: 10px; + border: 1px solid #ddd; + font-size: 15px; + transition: border 0.3s ease, box-shadow 0.3s ease; +} + +.input:focus { + border-color: #3a1c71; + box-shadow: 0 0 8px rgba(58, 28, 113, 0.2); + outline: none; +} + +input[type="radio"], input[type="checkbox"] { + margin-right: 8px; +} + +input[type="radio"]:checked, input[type="checkbox"]:checked { + accent-color: #3a1c71; +} diff --git a/index.html b/index.html index c3cd84eb7..7f7d223ea 100644 --- a/index.html +++ b/index.html @@ -3587,6 +3587,20 @@

Checks if an entered number or string is Palindrome or not.

+
+
+

Paper Weight Calculator

+

A Paper Weight Calculator determines the weight of paper based on its dimensions, type, and quantity.

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

Partial Derivative Calculator