diff --git a/index.html b/index.html index 34368ee..ed5e785 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@

Prime Number Checker

Search History

+
 History Cleared 
diff --git a/script.js b/script.js index aacdaea..3ceea86 100644 --- a/script.js +++ b/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'); diff --git a/style.css b/style.css index ad0e84e..fd44399 100644 --- a/style.css +++ b/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;