diff --git a/animation/03-pop-up/desired-outcome.gif b/animation/03-pop-up/desired-outcome.gif new file mode 100644 index 0000000..5ca0675 Binary files /dev/null and b/animation/03-pop-up/desired-outcome.gif differ diff --git a/animation/03-pop-up/index.html b/animation/03-pop-up/index.html index 1651eae..b556f7b 100644 --- a/animation/03-pop-up/index.html +++ b/animation/03-pop-up/index.html @@ -5,9 +5,15 @@ Popup - + - +
+ +
+
+ +
+ diff --git a/animation/03-pop-up/script.js b/animation/03-pop-up/script.js new file mode 100644 index 0000000..e7be984 --- /dev/null +++ b/animation/03-pop-up/script.js @@ -0,0 +1,12 @@ +const openButton = document.getElementById('trigger-modal'); +const closeButton = document.getElementById('close-modal'); + +function toggleModal() { + const container = document.querySelector('.button-container'); + const modalDiv = document.querySelector('.popup-modal'); + modalDiv.classList.toggle('show'); + container.classList.toggle('show'); +} + +openButton.addEventListener('click', toggleModal); +closeButton.addEventListener('click', toggleModal); diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css index 9a10baf..d370426 100644 --- a/animation/03-pop-up/solution/solution.css +++ b/animation/03-pop-up/solution/solution.css @@ -3,15 +3,19 @@ margin: 0; } -.popup-container { +body { + overflow: hidden; +} + +.button-container { width: 100vw; height: 100vh; background-color: #ffffff; - opacity: 1; + opacity: 100%; transition: background-color 0.5s ease-in, opacity 0.5s ease-in; } -.popup-container.show { +.button-container.show { background-color: #000000; opacity: 40%; } @@ -24,16 +28,59 @@ transform: translate(-50%, -50%); } -.popup-modal { - position: absolute; +#trigger-modal { + padding: 20px; + color: #ffffff; + background-color: #0e79dd; + border: none; + border-radius: 5px; + font-weight: 600; +} + +#trigger-modal:hover { + cursor: pointer; + box-shadow: 1px 1px 2px #000000; +} + +.popup-modal, +.popup-modal.show { width: 30%; - border: 1px solid black; + height: 15%; background-color: white; + border: 1px solid black; + border-radius: 10px; display: flex; - justify-content: space-between; + justify-content: center; + align-items: center; +} + +.popup-modal { + margin-top: 10%; + opacity: 0; visibility: hidden; + transition: margin-top 0.5s ease-out, opacity 0.5s ease-out, + visibility 0.5s linear; } .popup-modal.show { + min-height: 90px; + opacity: 1; visibility: visible; + margin-top: 0; + transition: margin-top 0.5s ease-out, opacity 0.5s ease-out, + visibility 0.5s linear; +} + +#close-modal { + padding: 20px; + color: #ffffff; + background-color: #0e79dd; + border: none; + border-radius: 5px; + font-weight: 600; +} + +#close-modal:hover { + cursor: pointer; + box-shadow: 1px 1px 2px #000000; } diff --git a/animation/03-pop-up/solution/solution.html b/animation/03-pop-up/solution/solution.html index 4c2a853..de53fdc 100644 --- a/animation/03-pop-up/solution/solution.html +++ b/animation/03-pop-up/solution/solution.html @@ -8,12 +8,11 @@ -
- +
+
-

Hey there!

- +
diff --git a/animation/03-pop-up/solution/solution.js b/animation/03-pop-up/solution/solution.js index 66f118d..e7be984 100644 --- a/animation/03-pop-up/solution/solution.js +++ b/animation/03-pop-up/solution/solution.js @@ -1,19 +1,12 @@ const openButton = document.getElementById('trigger-modal'); const closeButton = document.getElementById('close-modal'); -function openModal() { - const container = document.querySelector('.popup-container'); +function toggleModal() { + const container = document.querySelector('.button-container'); const modalDiv = document.querySelector('.popup-modal'); - modalDiv.classList.add('show'); - container.classList.add('show'); + modalDiv.classList.toggle('show'); + container.classList.toggle('show'); } -function closeModal() { - const container = document.querySelector('.popup-container.show'); - const modalDiv = document.querySelector('.popup-modal.show'); - modalDiv.classList.remove('show'); - container.classList.remove('show'); -} - -openButton.addEventListener('click', openModal); -closeButton.addEventListener('click', closeModal); +openButton.addEventListener('click', toggleModal); +closeButton.addEventListener('click', toggleModal); diff --git a/animation/03-pop-up/style.css b/animation/03-pop-up/style.css index e69de29..d370426 100644 --- a/animation/03-pop-up/style.css +++ b/animation/03-pop-up/style.css @@ -0,0 +1,86 @@ +* { + padding: 0; + margin: 0; +} + +body { + overflow: hidden; +} + +.button-container { + width: 100vw; + height: 100vh; + background-color: #ffffff; + opacity: 100%; + transition: background-color 0.5s ease-in, opacity 0.5s ease-in; +} + +.button-container.show { + background-color: #000000; + opacity: 40%; +} + +#trigger-modal, +.popup-modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +#trigger-modal { + padding: 20px; + color: #ffffff; + background-color: #0e79dd; + border: none; + border-radius: 5px; + font-weight: 600; +} + +#trigger-modal:hover { + cursor: pointer; + box-shadow: 1px 1px 2px #000000; +} + +.popup-modal, +.popup-modal.show { + width: 30%; + height: 15%; + background-color: white; + border: 1px solid black; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; +} + +.popup-modal { + margin-top: 10%; + opacity: 0; + visibility: hidden; + transition: margin-top 0.5s ease-out, opacity 0.5s ease-out, + visibility 0.5s linear; +} + +.popup-modal.show { + min-height: 90px; + opacity: 1; + visibility: visible; + margin-top: 0; + transition: margin-top 0.5s ease-out, opacity 0.5s ease-out, + visibility 0.5s linear; +} + +#close-modal { + padding: 20px; + color: #ffffff; + background-color: #0e79dd; + border: none; + border-radius: 5px; + font-weight: 600; +} + +#close-modal:hover { + cursor: pointer; + box-shadow: 1px 1px 2px #000000; +}