From 898bb8abfc675a3c3d00e8c083bc18139cab2805 Mon Sep 17 00:00:00 2001 From: Aryan1982 Date: Fri, 20 Oct 2023 18:55:01 +0530 Subject: [PATCH] Added modals for success and error that can be used anywhere --- index.html | 13 ++++++++++- script.js | 17 +++++++++++++- style.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 42086d3..dc5ad03 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,16 @@ - + + +
@@ -143,6 +152,8 @@

+ + diff --git a/script.js b/script.js index 29f572a..b0e9729 100644 --- a/script.js +++ b/script.js @@ -99,6 +99,20 @@ function downloadImage(imageUrl) { aTag.remove(); } + +// function for message modal +function messageModal(message){ + const modal = document.getElementById('messageModal') + modal.style.display = "flex"; + + const messageElement = document.getElementById('messageModalText') + messageElement.textContent = message; + + document.getElementById('acknowledgmentBtn').addEventListener('click',function(){ + modal.style.display = "none"; + }); +} + const randomid = () => { return Math.floor(Math.random() * 731) + 1; }; @@ -111,7 +125,8 @@ searchbtn.onclick = () => { getSearchSuperHero(inputValue); } else { // Handle the case where the input is empty (e.g., show an error message). - alert("Input is empty. Please enter a hero name."); + messageModal("Input is empty. Please enter a hero name."); + // alert("Input is empty. Please enter a hero name."); } }; diff --git a/style.css b/style.css index d7207bf..1bb3862 100644 --- a/style.css +++ b/style.css @@ -738,6 +738,72 @@ center { color:white; } +.modal{ + display: flex; + display: none; + background-color: rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 9999; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.modal > div { + color: white; + background-color: black; + border:1px solid white; + border-radius: 10px; + padding: 30px 40px 30px 40px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); + position: relative; + top: -50px; + z-index: 10000; + max-width: 500px; + max-height: 80%; + overflow: auto; +} + +.modalButtons{ + margin-top: 20px; + display:flex; + justify-content: end; +} + +.modalButtons button{ + --bg: #ba4394; + --hover-bg: #ff90e8; + --hover-text: #ba4394; + color: #ffe4f9; + border: 1px solid var(--bg); + border-radius: 6px; + padding: 0.8em 2em; + background: var(--bg); + transition: 0.2s; + margin-right: 0.6rem; + font-size: 16px; +} + +.modalButtons button:hover { + color: var(--hover-text); + transform: translate(-0.25rem, -0.25rem); + background: var(--hover-bg); + box-shadow: 0.25rem 0.25rem var(--bg); + margin-left: 0.6rem; + font-size: 16px; + letter-spacing: 2px; + font-weight: bold; +} + +.modalButtons button:active { + transform: translate(0); + box-shadow: none; +} + @media screen and (max-width: 406px) { .head-title {