Added Automorphic Number Calculator (#1227)

Rakesh9100 · Jun 11, 2024 · cf844fa · cf844fa
1 parent c3f939a
commit cf844fa
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 0 deletions.
diff --git a/Calculators/Automorphic-Number-Calculator/README.md b/Calculators/Automorphic-Number-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Automorphic Number Calculator</p>
+
+## Description :-
+
+The Automorphic Number Calculator is a user-friendly tool designed to determine if a given number is an automorphic number. An automorphic number is one whose square ends with the number itself. This calculator takes a number input, computes its square, and checks if the square ends with the original number. It then displays the result, indicating whether the number is automorphic or not, along with the relevant calculation details. The calculator also features a reset button to clear the input and results, enabling users to easily check multiple numbers without refreshing the page. Designed with a modern and responsive interface, it ensures a seamless user experience across various devices and screen sizes.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/d477cad8-bf08-4cab-979e-b6076d77ce6b)
diff --git a/Calculators/Automorphic-Number-Calculator/index.html b/Calculators/Automorphic-Number-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">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>Automorphic Number Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Automorphic Number Calculator</h1>
+        <form id="automorphic-form">
+            <label for="number">Enter a number:</label>
+            <input type="number" id="number" name="number" required>
+            <div class="button-group">
+                <button type="submit">Check</button>
+                <button type="button" id="reset-button">Reset</button>
+                <button type="button" id="reload-button">Reload</button>
+                <button type="button" id="clear-button">Clear</button>
+            </div>
+        </form>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Automorphic-Number-Calculator/script.js b/Calculators/Automorphic-Number-Calculator/script.js
@@ -0,0 +1,34 @@
+document.getElementById('automorphic-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    const number = parseInt(document.getElementById('number').value);
+    const resultDiv = document.getElementById('result');
+    resultDiv.innerHTML = '';
+
+    if (isNaN(number)) {
+        resultDiv.innerHTML = '<p>Please enter a valid number.</p>';
+        return;
+    }
+
+    const square = number * number;
+    const numberStr = number.toString();
+    const squareStr = square.toString();
+
+    if (squareStr.endsWith(numberStr)) {
+        resultDiv.innerHTML = `<p>${number} is an Automorphic number because ${number}^2 = ${square}.</p>`;
+    } else {
+        resultDiv.innerHTML = `<p>${number} is not an Automorphic number because ${number}^2 = ${square}.</p>`;
+    }
+});
+
+document.getElementById('reset-button').addEventListener('click', function() {
+    document.getElementById('number').value = '';
+    document.getElementById('result').innerHTML = '';
+});
+
+document.getElementById('reload-button').addEventListener('click', function() {
+    location.reload();
+});
+
+document.getElementById('clear-button').addEventListener('click', function() {
+    document.getElementById('result').innerHTML = '';
+});
diff --git a/Calculators/Automorphic-Number-Calculator/style.css b/Calculators/Automorphic-Number-Calculator/style.css
@@ -0,0 +1,115 @@
+/* Reset some default browser styling */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #fff;
+}
+
+.container {
+    background: #1e272e;
+    padding: 40px;
+    border-radius: 12px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    max-width: 500px;
+    width: 100%;
+    text-align: center;
+}
+
+h1 {
+    margin-bottom: 20px;
+    font-size: 28px;
+    font-weight: 700;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+label {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+input[type="number"] {
+    padding: 12px 20px;
+    border: 2px solid #3498db;
+    border-radius: 6px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s ease;
+    background: #34495e;
+    color: #fff;
+}
+
+input[type="number"]:focus {
+    border-color: #2980b9;
+}
+
+.button-group {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+button {
+    padding: 12px 20px;
+    border: none;
+    border-radius: 6px;
+    background-color: #3498db;
+    color: white;
+    font-size: 18px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    flex: 1 1 45%;
+    margin: 5px;
+}
+
+button:hover {
+    background-color: #2980b9;
+}
+
+button#reset-button {
+    background-color: #e74c3c;
+}
+
+button#reset-button:hover {
+    background-color: #c0392b;
+}
+
+button#reload-button {
+    background-color: #f39c12;
+}
+
+button#reload-button:hover {
+    background-color: #e67e22;
+}
+
+button#clear-button {
+    background-color: #2ecc71;
+}
+
+button#clear-button:hover {
+    background-color: #27ae60;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 18px;
+    background: #34495e;
+    padding: 10px;
+    border-radius: 6px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
diff --git a/index.html b/index.html
@@ -330,6 +330,20 @@ <h3>Calculates the age on different planets as selected by the user.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Automorphic Number Calculator</h2>
+                <h3>Checks if a number is an automorphic number or not.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Automorphic-Number-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Automorphic-Number-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>Averages Calculator</h2>