Finish popup-modal exercise

2021-10-21 20:21:32 +01:00 · 2021-10-21 20:21:32 +01:00 · 0405fc39eb
parent 37187c9111
commit 0405fc39eb
4 changed files with 81 additions and 62 deletions
--- 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
--- 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">
--- 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;
+}
--- 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;
-}