prime

index.html

@@ -22,6 +22,7 @@ <h1>Prime Number Checker</h1>
         <div class="search-history-header">
             <h2>Search History</h2>
             <button id="clearHistoryButton">Clear History</button>
+            <div id="message">&nbsp;History Cleared&nbsp;</div>
         </div>
         <table id="historyTable">
             <thead>

script.js

@@ -14,26 +14,40 @@ function isPrime(num) {
 function clearHistory() {
     localStorage.removeItem('searchHistory');
     const historyBody = document.getElementById('historyBody');
+    const message = document.getElementById('message');
     historyBody.innerHTML = '';
+    let isMessageVisible = false;
+    if (!isMessageVisible) {
+        message.style.animation = 'none';
+        void message.offsetWidth;
+        message.style.animation = null;
+        message.style.display = 'block';
+        isMessageVisible = true;
+
+        setTimeout(() => {
+            message.style.display = 'none';
+            isMessageVisible = false;
+        }, 3000);
+    }
 }
 
 const clearHistoryButton = document.getElementById('clearHistoryButton');
 clearHistoryButton.addEventListener('click', clearHistory);
 
+
+
 function checkPrime() {
     const numberInput = document.getElementById('numberInput').value;
     const resultElement = document.getElementById('result');
     const historyTable = document.getElementById('historyTable');
     const historyBody = document.getElementById('historyBody');
 
-    // Input validation
     if (numberInput === '' || isNaN(numberInput)) {
         resultElement.textContent = 'Please enter a Valid Number';
         return;
     }
 
-    // Check for a large number input
-    if (BigInt(numberInput) >= 10n**308n) {
+    if (BigInt(numberInput) >= 10n ** 308n) {
         resultElement.textContent = 'Maximum Limit Reached';
         return;
     }
@@ -48,14 +62,12 @@ function checkPrime() {
     const searchHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
     searchHistory.push({ number: numberInput, isPrime: isPrimeResult });
 
-    // Limit displayed history entries (e.g., to the last 10)
     if (searchHistory.length > 10) {
         searchHistory.shift();
     }
 
     localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
 
-    // Update displayed history
     historyBody.innerHTML = '';
     searchHistory.forEach((item) => {
         const row = document.createElement('tr');
@@ -75,8 +87,7 @@ window.addEventListener('load', () => {
     const historyBody = document.getElementById('historyBody');
     const searchHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
 
-    // Display a limited number of history entries
-    const displayedHistory = searchHistory.slice(-10); // Display the last 10 entries
+    const displayedHistory = searchHistory.slice(-100);
     displayedHistory.forEach((item) => {
         const row = document.createElement('tr');
         const numberCell = document.createElement('td');

style.css

@@ -56,7 +56,6 @@ p#result {
     margin-bottom: 110px;
 }
 
-/* Style the Search History heading and "Clear History" button */
 .search-history-header {
     display: flex;
     justify-content: space-between;
@@ -118,6 +117,25 @@ tr:hover {
     transition: background-color 0.3s ease-in-out;
 }
 
+#message {
+    display: none;
+    background-color: #585555;
+    color: white;
+    padding: 10px;
+    border-radius: 18px;
+    position: absolute;
+    bottom: 15%;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: fadeOut 3s ease-in-out;
+}
+
+@keyframes fadeOut {
+    0% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { opacity: 0; display: none; }
+}
+
 footer {
     position: fixed;
     bottom: 0;