diff --git a/Html-files/menu.html b/Html-files/menu.html index 52a9989a..28baddd1 100644 --- a/Html-files/menu.html +++ b/Html-files/menu.html @@ -316,10 +316,53 @@ .fa-brands.fa-x-twitter:hover { color: #181e20 !important; } + + + + + .popup-modal { + position: fixed; + top: 2.5rem; + left: 50%; + transform: translateX(-50%); + background-color: #ffffff; + color: #000000; + padding: 18px 32.5px; + border-radius: 30px; + font-size: 16px; + z-index: 100000; + box-shadow: 0 15px 50px 0 rgba(0,0,0,.35); + font-size: .9rem; + display: flex; + display: none; + gap: .5rem; + align-items: center; + width: 40px; + max-width: 90%; + width: max-content; + text-align: center; + } + + .popup-modal.show { + display: flex; + gap: .5rem; + opacity: 1; + transition: opacity 0.3s ease-in-out; + } + + .popup-modal.fade-out { + opacity: 0; + transition: opacity 0.3s ease-in-out; + } + + +
@@ -977,8 +1020,33 @@

Follow const badgeCountElement = document.getElementById('badgeCount'); let currentCount = parseInt(badgeCountElement.innerText); badgeCountElement.innerText = currentCount + 1; + showPopup("Item added to Cart succesfully!!"); }) } + + function showPopup(message,type='success') { + let popupModal = document.getElementById('popup-modal'); + let popupMessage = document.getElementById('popup-message'); + + if (type==='error'){ + popupMessage.innerHTML = ` ${message}`; + } + else { + popupMessage.innerHTML = ` ${message}`; + } + + popupModal.classList.add('show'); + setTimeout(() => { + popupModal.classList.add('fade-out'); + }, 5000); + + setTimeout(() => { + popupModal.classList.remove('show', 'fade-out'); + }, 6000); + } + + + // document.getElement('add-to-cart-button').addEventListener('click', function() { // const badgeCountElement = document.getElementById('badgeCount'); @@ -992,4 +1060,4 @@

Follow - \ No newline at end of file +