Rakesh9100 · Rakesh9100 · Jun 11, 2024 · Jun 6, 2024 · Jun 11, 2024 · Jun 11, 2024
diff --git a/Calculators/Automorphic-Number-Calculator/README.md b/Calculators/Automorphic-Number-Calculator/README.md
@@ -0,0 +1,13 @@
+# <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 :-
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">
+    <title>Automorphic Number Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+</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/styles.css b/Calculators/Automorphic-Number-Calculator/styles.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
@@ -2976,6 +2976,20 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Automorphic Number Calculator</h2>
+                <h3>Calculates if a number's square ends with the same digits, featuring a modern interface with validation, result display, and reset/reload/clear buttons.</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>
 
         <br><br><br><br><br>
         <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;"><p>No results found 🙃</p></div>