Merge branch 'main' of https://github.com/vedanshipathak/CalcDiverse

Rakesh9100 · Jun 9, 2024 · e4047e0 · e4047e0
2 parents b846273 + f95a563
commit e4047e0
Show file tree

Hide file tree

Showing 232 changed files with 10,154 additions and 351 deletions.
diff --git a/.github/workflows/pr-merge-comment.yml b/.github/workflows/pr-merge-comment.yml
@@ -0,0 +1,21 @@
+name: Auto Comment on PR Merge
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  comment:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Add Comment to Merged PR
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        curl -X POST \
+          -H "Authorization: token $GITHUB_TOKEN" \
+          -H "Accept: application/vnd.github.v3+json" \
+          -d '{"body":"🎉 Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep Contributing!! 🚀"}' \
+          "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments"
diff --git a/Calculators/2D-Distance-Calculator/index.html b/Calculators/2D-Distance-Calculator/index.html
@@ -22,10 +22,11 @@ <h1>2D Distance Calculator</h1>
         <button onclick="calculateDistance()">Calculate Distance</button>
 
         <div id="result"></div>
+        <button type="button" id="resetButton">Reset</button>
     </div>
 
     <script src="script.js"></script>
 
 </body>
 
-</html>
+</html>
diff --git a/Calculators/2D-Distance-Calculator/script.js b/Calculators/2D-Distance-Calculator/script.js
@@ -1,3 +1,4 @@
+// Function to calculate the distance
 function calculateDistance() {
     // Get input values
     var x1 = parseFloat(document.getElementById('x1').value);
@@ -17,3 +18,15 @@ function calculateDistance() {
     // Display the result
     document.getElementById('result').innerHTML = 'Distance: ' + distance.toFixed(2);
 }
+
+// Function to reset the form
+function resetForm() {
+    document.getElementById('x1').value = '';
+    document.getElementById('y1').value = '';
+    document.getElementById('x2').value = '';
+    document.getElementById('y2').value = '';
+    document.getElementById('result').innerHTML = '';
+}
+
+// Add event listener to reset button
+document.getElementById('resetButton').addEventListener('click', resetForm);
diff --git a/Calculators/ASCII-Value-Calculator/README.md b/Calculators/ASCII-Value-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">ASCII Value Calculator</p>
+
+## Description :-
+
+Calculates the ASCII value of any character.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/3347fb83-254b-4838-9b0f-662dbc6b9f54)
diff --git a/Calculators/ASCII-Value-Calculator/index.html b/Calculators/ASCII-Value-Calculator/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>ASCII Value Calculator</title>
+</head>
+<body>
+    <header>
+        <h1>ASCII Value Calculator</h1>
+    </header>
+    <main>
+        <div class="container">
+            <form name="myform">
+                <label for="charInput">Enter a Character (Length should be 1):</label>
+                <input type="text" name="charInput" id="charInput" maxlength="1" />
+                <button type="button" onclick="displayAsciiValue()">
+                Get ASCII Value
+                </button>
+            </form>
+            <div id="asciiValue"></div>
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/ASCII-Value-Calculator/script.js b/Calculators/ASCII-Value-Calculator/script.js
@@ -0,0 +1,11 @@
+function displayAsciiValue() {
+    const charInput = document.forms["myform"]["charInput"].value;
+    const asciiValueDiv = document.getElementById("asciiValue");
+
+    if (charInput.length === 1) {
+        const asciiValue = charInput.charCodeAt(0);
+        asciiValueDiv.textContent = `The ASCII value of '${charInput}' is ${asciiValue}.`;
+    } else {
+        asciiValueDiv.textContent = "Please enter exactly one character.";
+    }
+}
diff --git a/Calculators/ASCII-Value-Calculator/style.css b/Calculators/ASCII-Value-Calculator/style.css
@@ -0,0 +1,88 @@
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(to bottom right, #e6e9f0, #eef1f5);
+    color: #333;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+header {
+    background-color: #2d3748;
+    color: white;
+    padding: 10px 0;
+    width: 100%;
+    text-align: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+}
+
+h1 {
+    margin: 0;
+}
+
+main {
+    margin-top: 70px;
+    /* Add space to ensure main content is below the fixed header */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+.container {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    width: 300px;
+    text-align: center;
+    color: #333;
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+
+input[type="text"] {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+button {
+    background-color: #4299e1;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 4px;
+    width: 100%;
+}
+
+button:hover {
+    background-color: #2b6cb0;
+}
+
+#asciiValue {
+    margin-top: 20px;
+    font-size: 18px;
+    color: #333;
+}
diff --git a/Calculators/Abundant-Number-Calculator/README.md b/Calculators/Abundant-Number-Calculator/README.md
@@ -0,0 +1,28 @@
+# <p align="center">Abundant Number Calculator</p>
+
+## Description :-
+
+This is a simple web application that allows users to check if a given number is an abundant number. 
+An abundant number is a positive integer greater than the sum of its proper divisors, excluding itself. 
+
+For example, the number 12 is abundant because its proper divisors are 1, 2, and 3,4,6, and 1+2+3+4+6=16, which is greater to the number itself.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Users can input a number.
+- Upon clicking the "Check for Abundant" button, the application checks whether the entered number is a abundant number.
+- The result is displayed below the input field, indicating whether the number is abundant or not.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/1b0be184-5dad-428f-9161-1edce3ac488e)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/cec71ba2-acc2-4c23-86cc-6b921eeaf811)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/08192d2c-8d57-49c0-9dc9-382d88677bcd)
diff --git a/Calculators/Abundant-Number-Calculator/index.html b/Calculators/Abundant-Number-Calculator/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Abundant Number Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h2 class="head">ABUNDANT NUMBER CHECK CALCULATOR</h2>
+        <input type="number" placeholder="Enter number" class="number" required>
+        <button onclick="checkAbundant()">Check for Abundant</button>
+        <h3 class="showHow"></h3>
+        <h2 class="text"></h2>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Abundant-Number-Calculator/script.js b/Calculators/Abundant-Number-Calculator/script.js
@@ -0,0 +1,30 @@
+const checkAbundant = () => {
+    let num = document.querySelector(".number").value;
+    if (!isNaN(num) && num.trim() !== "") {
+        num = parseInt(num);
+
+        let sum = 0;
+        let txt = document.querySelector(".text");
+        let s = document.querySelector(".showHow");
+        let divisors = [];
+        for (let i = 1; i < num; i++) {
+            if (num % i == 0) {
+                sum = sum + i;
+                divisors.push(i);
+
+            }
+        }
+
+        s.textContent = divisors.join('+') + `=${sum}`;
+        if (sum > num) {
+            s.textContent += ` >  ${num}`
+            txt.textContent = "It is an Abundant Number!";
+        } else {
+            s.textContent += ` <=  ${num}`
+            txt.textContent = "Not an Abundant Number!";
+        }
+    } else {
+        alert("Please enter a Number!");
+    }
+
+}
diff --git a/Calculators/Abundant-Number-Calculator/style.css b/Calculators/Abundant-Number-Calculator/style.css
@@ -0,0 +1,105 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(to right, #fc5c7d, #6a82fb);
+    font-family: 'Roboto', sans-serif;
+    color: #fff;
+}
+
+.head {
+    font-weight: 700;
+    margin-bottom: 20px;
+    margin-top: 10px;
+    font-size: 2em;
+    color: #333;
+}
+
+.container {
+    text-align: center;
+    background: linear-gradient(145deg, #ffffff, #e6e6e6);
+    padding: 60px 40px;
+    border-radius: 20px;
+    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
+    width: 90%;
+    max-width: 600px;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.container:hover {
+    transform: scale(1.05);
+    box-shadow: 20px 20px 60px #b3b3b3, -20px -20px 60px #ffffff;
+}
+
+.number {
+    display: block;
+    height: 40px;
+    margin: 20px auto;
+    width: calc(100% - 22px); /* Adjust width to be responsive */
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 1em;
+    box-shadow: inset 2px 2px 5px #aaaaaa, inset -5px -5px 10px #ffffff;
+}
+
+button {
+    background-color: #6a82fb;
+    color: #fff;
+    border: none;
+    font-size: 1em;
+    font-weight: bold;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+button:hover {
+    background-color: #fc5c7d;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.text {
+    margin-top: 20px;
+    font-size: 1.2em;
+    font-weight: 700;
+    color: #333;
+    transition: color 0.3s;
+}
+
+.text:hover {
+    color: #6a82fb;
+}
+
+.showHow {
+    font-size: 1em;
+    color: #666;
+    margin-top: 10px;
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 40px 20px;
+    }
+
+    .head {
+        font-size: 1.5em;
+    }
+
+    .number, button {
+        font-size: 0.9em;
+    }
+
+    .text {
+        font-size: 1em;
+    }
+
+    .showHow {
+        font-size: 0.9em;
+    }
+}