Finish popup-modal exercise

programmurr · programmurr · commit 0405fc39ebc6 · 2021-10-21T20:21:32.000+01:00
diff --git a/animation/03-pop-up/README.md b/animation/03-pop-up/README.md
@@ -1,7 +1,28 @@
 # Popup
 
+Popup modals are great for replacing the standard window popups that we often fall back on when we want our users to confirm something, or log in, etc.
+
+In this exercise, activate a popup modal that will appear when the user clicks on the 'Open Modal' button and disappears when they click on the 'Close Modal' button inside the popup. 
+
+The modal should smoothly fade in and slide up to cover the Open button. The background should darken a little to create a clear distinction between foreground and background, and a little shadow should appear on the buttons when you hover over them.
+
+When you're done, keep this repo handy! Being able to build a custom modal is a great show-off for your future projects.
+
+### Hints
+- There's a little Javascript here. Don't worry about it. It's been set up to add/remove the `show` class to the relevant elements when clicked
+- Multiple transitions will be required
+- Pay close attention to the elements being altered with classes being added or removed
+
 ## Desired Outcome
 
 ![outcome](./desired-outcome.gif)
 
 ### Self Check
+
+- The mouse cursor changes to a pointer over the buttons
+- A drop shadow gets added to the buttons when the mouse hovers over them
+- The popup modal appears when the Open button is clicked
+- The background fades to black with 40% opacity when the popup is opened
+- The popup smoothly slides up to cover the existing Open button
+- When the Close button is clicked the popup modal slides back down and gradually disappears
+- When the popup modal is hidden your mouse should not change to the pointer if hovered over an invisible Close button
diff --git a/animation/03-pop-up/index.html b/animation/03-pop-up/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Popup</title>
-    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <div class="button-container">
diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css
@@ -12,12 +12,6 @@ body {
   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,
@@ -37,13 +31,7 @@ body {
   font-weight: 600;
 }
 
-#trigger-modal:hover {
-  cursor: pointer;
-  box-shadow: 1px 1px 2px #000000;
-}
-
-.popup-modal,
-.popup-modal.show {
+.popup-modal {
   width: 30%;
   height: 15%;
   background-color: white;
@@ -52,23 +40,8 @@ body {
   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 {
@@ -80,7 +53,64 @@ body {
   font-weight: 600;
 }
 
+/* SOLUTION */
+
+/* 
+  Disclaimer: duplicating selectors here isn't best practice.
+  We separated it out here to make it extra clear what has changed. 
+*/
+
+.button-container {
+  transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
+}
+
+.button-container.show {
+  background-color: #000000;
+  opacity: 40%;
+}
+
+#trigger-modal:hover,
 #close-modal:hover {
   cursor: pointer;
   box-shadow: 1px 1px 2px #000000;
 }
+
+/* 
+  Keep this '.popup-modal' selector separate from the main 
+  .popup-modal selector, for the reasons outlined above 
+  .pop-up-modal.show
+*/
+.popup-modal {
+  visibility: hidden;
+  transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
+    visibility 0.5s linear;
+}
+
+/* 
+  The common properties between .popup-modal and .popup-modal.show 
+  can easily be added by just adding this selector to the main 
+  .popup-modal selector
+*/
+.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;
+  min-height: 90px;
+}
+
+/* 
+  Keep this selector separate from the main '.popup-modal.show'
+  selector.
+*/
+.popup-modal.show {
+  opacity: 1;
+  visibility: visible;
+  margin-top: 0;
+  transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
+    visibility 0.5s linear;
+}
diff --git a/animation/03-pop-up/style.css b/animation/03-pop-up/style.css
@@ -12,12 +12,6 @@ body {
   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,
@@ -37,13 +31,7 @@ body {
   font-weight: 600;
 }
 
-#trigger-modal:hover {
-  cursor: pointer;
-  box-shadow: 1px 1px 2px #000000;
-}
-
-.popup-modal,
-.popup-modal.show {
+.popup-modal {
   width: 30%;
   height: 15%;
   background-color: white;
@@ -52,23 +40,8 @@ body {
   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 {
@@ -79,8 +52,3 @@ body {
   border-radius: 5px;
   font-weight: 600;
 }
-
-#close-modal:hover {
-  cursor: pointer;
-  box-shadow: 1px 1px 2px #000000;
-}
