Added Paper Weight Calculator

Rakesh9100 · Aug 8, 2024 · 8da484d · 8da484d
1 parent 32e3480
commit 8da484d
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 0 deletions.
diff --git a/Calculators/Paper-Weight-Calculator/README.md b/Calculators/Paper-Weight-Calculator/README.md
@@ -0,0 +1,18 @@
+# <p align="center">Paper weight Calculator</p>
+
+## 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
diff --git a/Calculators/Paper-Weight-Calculator/index.html b/Calculators/Paper-Weight-Calculator/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paper Weight Calculator</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="section">
+            <h3>Paper weight reference</h3>
+            <div class="options">
+                <h4>
+                    <input type="radio" name="unit" value="grammage" checked> Grammage
+                </h4>
+            </div>
+            <input type="number" placeholder="Paper grammage (gsm)" id="paperGrammage" class="input">
+        </div>
+
+        <div class="section">
+            <h3>Select or input the size of your paper</h3>
+            <select class="input" id="paperSize">
+                <option value="0.0617">Letter (8.5 in x 11.0 in)</option>
+                <option value="0.06237">A4 (210 mm x 297 mm)</option>
+                <!-- You can add more paper sizes with corresponding area values -->
+            </select>
+        </div>
+
+        <div class="section">
+            <h3>Output values</h3>
+            <input type="number" placeholder="Weight per sheet (g)" id="weightPerSheet" class="input" readonly>
+            <input type="number" value="500" id="quantity" class="input">
+            <input type="number" placeholder="Total weight (g)" id="totalWeight" class="input" readonly>
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Paper-Weight-Calculator/script.js 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
@@ -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
@@ -3587,6 +3587,20 @@ <h3>Checks if an entered number or string is Palindrome or not.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Paper Weight Calculator</h2>
+                <h3>A Paper Weight Calculator determines the weight of paper based on its dimensions, type, and quantity.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Paper-Weight-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Paper-Weight-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Partial Derivative Calculator</h2>