Added Special Number Checker

Sulagna-Dutta-Roy · Jul 18, 2024 · c0e3d60 · c0e3d60
1 parent 46dde99
commit c0e3d60
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 0 deletions.
diff --git a/Special number checker/index.html b/Special number checker/index.html
@@ -0,0 +1,33 @@
+<!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>Special Number Calculator</title>
+</head>
+<body>
+    <div class="instructions">
+        <h2>Instructions</h2>
+        <p>
+            A Special Number is calculated as follows:
+        </p>
+        <ul>
+            <li>Start with any integer value greater than 0.</li>
+            <li>Calculate the sum of the digits of the number.</li>
+            <li>Reverse the sum obtained in step 1.</li>
+            <li>Multiply the sum and its reversal.</li>
+            <li>If the product equals the original number, it is a special number.</li>
+        </ul>
+    </div>
+
+    <div class="container">
+        <h1>Special Number Checker</h1>
+        <input type="text" id="numberInput" placeholder="Enter a number">
+        <button onclick="checkSpecialNumber()">Check</button>
+        <p id="result"></p>
+        <p id="details"></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Special number checker/manifest.json b/Special number checker/manifest.json
@@ -0,0 +1,10 @@
+{
+    "manifest_version": 3,
+    "name": "Special Number Checker",
+    "version": "1.0",
+    "description": "Special Number Calculator.",
+    "permissions": [],
+    "action": {
+        "default_popup": "index.html"
+    }
+}
diff --git a/Special number checker/script.js b/Special number checker/script.js
@@ -0,0 +1,42 @@
+function reverseString(str) {
+    return str.split('').reverse().join('');
+}
+
+function sumOfDigits(num) {
+    return num.toString().split('').reduce((sum, digit) => sum + parseInt(digit), 0);
+}
+
+function checkSpecialNumber() {
+    const number = document.getElementById('numberInput').value.trim();
+
+    const resultElement = document.getElementById('result');
+    const detailsElement = document.getElementById('details');
+
+    if (number === '') {
+        resultElement.textContent = 'Please enter a number.';
+        detailsElement.textContent = '';
+        return;
+    }
+
+    if (parseInt(number) < 0) {
+        resultElement.textContent = 'Please enter a positive number.';
+        detailsElement.textContent = '';
+        return;
+    }
+
+    const sumDigits = sumOfDigits(number);
+    const reversedSum = reverseString(sumDigits.toString());
+    const product = sumDigits * parseInt(reversedSum);
+
+    if (product === parseInt(number)) {
+        resultElement.textContent = `${number} is a special number!`;
+    } else {
+        resultElement.textContent = `${number} is not a special number.`;
+    }
+
+    detailsElement.textContent = `Sum of digits: ${sumDigits}\nReversed sum: ${reversedSum}\nProduct: ${sumDigits} × ${reversedSum} = ${product}`;
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    document.querySelector('button').addEventListener('click', checkSpecialNumber);
+});
diff --git a/Special number checker/style.css b/Special number checker/style.css
@@ -0,0 +1,96 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(to bottom right, #5a88ca, #8a4db2); /* Example gradient background */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+.instructions {
+    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
+    padding: 20px;
+    border-radius: 8px;
+    width: 350px; /* Same width as .container */
+    text-align: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
+    margin-bottom: 20px;
+    margin-top: 20px; /* Small gap from top */
+}
+
+.instructions h2 {
+    margin-top: 0;
+    font-size: 18px;
+}
+
+.instructions p {
+    margin: 0;
+    font-size: 14px;
+    color: #333;
+}
+
+.instructions ul {
+    text-align: left; /* Ensure left alignment of list items */
+    margin-top: 10px; /* Adjust top margin for spacing */
+}
+
+.instructions li {
+    font-size: 14px; /* Adjust font size for consistency */
+    margin-bottom: 8px; /* Adjust bottom margin for spacing */
+}
+
+.container {
+    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    width: 350px; /* Adjusted width */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
+    margin-bottom: 20px;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+button {
+    padding: 10px 15px;
+    background-color: #007bff; /* Blue button */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3; /* Darker blue on hover */
+}
+
+.output {
+    margin-top: 20px;
+    font-size: 18px;
+    white-space: pre-wrap; /* Preserve line breaks */
+}
+
+#details {
+    white-space: pre-wrap; /* Preserve whitespace for new lines */
+}