replace dropdwon with popup

Nvaeplay · Jan 12, 2022 · 0d6d78b · 0d6d78b
1 parent 43e93bc
commit 0d6d78b
Show file tree

Hide file tree

Showing 17 changed files with 145 additions and 338 deletions.
diff --git a/animation/02-drop-down/README.md b/animation/02-drop-down/README.md
diff --git a/animation/02-drop-down/desired-outcome.gif b/animation/02-drop-down/desired-outcome.gif
diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html
diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css
diff --git a/animation/02-drop-down/solution/solution.html b/animation/02-drop-down/solution/solution.html
diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css
diff --git a/animation/02-pop-up/README.md b/animation/02-pop-up/README.md
@@ -0,0 +1,20 @@
+# Popup
+
+In this exercise we have set up a simple pop-up dialog for you. It already works! Load up index.html and give it a shot!
+
+You don't need to worry about the actual functionality here, we've just written a little javascript that adds and removes a `.show` class to the popup and the backdrop.  Your task then is to make it _move_, as in the desired-outcome image below.
+
+### Hints
+- "modal" is another word for 'pop-up'
+- In the code we've provided, the popup is sitting in it's final position, so you'll need to change it's initial position, and then use a transition to move it back to the center.
+- You might want to change the initial opacity from 0% to something like 20% while you're working on it, so you can easily see where it is coming from before you click the button.
+- Don't overthink this one... it might seem complicated, but it requires just a few lines of code.
+
+## Desired Outcome
+
+![outcome](./desired-outcome.gif)
+
+### Self Check
+
+- The pop-up slides down into position when you click the open button, and slides back up when you click 'close modal'
+- The opacity fades smoothly in and out when toggling the modal. 
diff --git a/animation/02-pop-up/desired-outcome.gif b/animation/02-pop-up/desired-outcome.gif
diff --git a/animation/03-pop-up/index.html → animation/02-pop-up/index.html b/animation/03-pop-up/index.html → animation/02-pop-up/index.html
@@ -8,12 +8,15 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div class="button-container">
-      <button id="trigger-modal">Open Modal</button>
-    </div>
+    <div class="backdrop"></div>
     <div class="popup-modal">
+      <h1>Look at me!</h1>
+      <p>I'm a pop up dialog!</p>
       <button id="close-modal">Close Modal</button>
     </div>
+    <div class="button-container">
+      <button id="trigger-modal">Open Modal</button>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/animation/03-pop-up/script.js → animation/02-pop-up/script.js b/animation/03-pop-up/script.js → animation/02-pop-up/script.js
@@ -1,11 +1,12 @@
 const openButton = document.getElementById('trigger-modal');
 const closeButton = document.getElementById('close-modal');
+const backdrop = document.getElementById('backdrop')
 
 function toggleModal() {
-  const container = document.querySelector('.button-container');
   const modalDiv = document.querySelector('.popup-modal');
+  const backdrop = document.querySelector('.backdrop')
   modalDiv.classList.toggle('show');
-  container.classList.toggle('show');
+  backdrop.classList.toggle('show');
 }
 
 openButton.addEventListener('click', toggleModal);

diff --git a/animation/02-pop-up/solution/solution.css b/animation/02-pop-up/solution/solution.css
@@ -0,0 +1,75 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  overflow: hidden;
+}
+
+.button-container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #ffffff;
+  opacity: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button {
+  padding: 20px;
+  color: #ffffff;
+  background-color: #0e79dd;
+  border: none;
+  border-radius: 5px;
+  font-weight: 600;
+}
+
+.popup-modal {
+  padding: 32px 64px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0%;
+  text-align: center;
+}
+.popup-modal p {
+  margin-bottom: 24px
+}
+
+.backdrop {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  background: #000;
+  opacity: 0%;
+}
+
+.popup-modal.show {
+  opacity: 100%;
+  pointer-events: all;
+}
+
+.backdrop.show {
+  opacity: 30%;
+}
+
+/* SOLUTION */
+
+.popup-modal {
+  transition: transform .3s ease-in-out, opacity .4s ease;
+  transform: translate(-50%, -100%);
+}
+
+.popup-modal.show {
+  transform: translate(-50%, -50%);
+}
+
+
diff --git a/animation/03-pop-up/solution/solution.html → animation/02-pop-up/solution/solution.html b/animation/03-pop-up/solution/solution.html → animation/02-pop-up/solution/solution.html
@@ -8,12 +8,15 @@
     <link rel="stylesheet" href="solution.css" />
   </head>
   <body>
-    <div class="button-container">
-      <button id="trigger-modal">Open Modal</button>
-    </div>
+    <div class="backdrop"></div>
     <div class="popup-modal">
+      <h1>Look at me!</h1>
+      <p>I'm a pop up dialog!</p>
       <button id="close-modal">Close Modal</button>
     </div>
+    <div class="button-container">
+      <button id="trigger-modal">Open Modal</button>
+    </div>
     <script src="solution.js"></script>
   </body>
 </html>
diff --git a/animation/03-pop-up/solution/solution.js → animation/02-pop-up/solution/solution.js b/animation/03-pop-up/solution/solution.js → animation/02-pop-up/solution/solution.js
@@ -1,11 +1,12 @@
 const openButton = document.getElementById('trigger-modal');
 const closeButton = document.getElementById('close-modal');
+const backdrop = document.getElementById('backdrop')
 
 function toggleModal() {
-  const container = document.querySelector('.button-container');
   const modalDiv = document.querySelector('.popup-modal');
+  const backdrop = document.querySelector('.backdrop')
   modalDiv.classList.toggle('show');
-  container.classList.toggle('show');
+  backdrop.classList.toggle('show');
 }
 
 openButton.addEventListener('click', toggleModal);