diff --git a/animation/02-drop-down/README.md b/animation/02-drop-down/README.md deleted file mode 100644 index cedac0c..0000000 --- a/animation/02-drop-down/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# Dropdown - -Here you'll make your very own dropdown menu using pure CSS. - -Animate the appearance of a list so that it slides down when you hover your mouse over the button. This exercise will need multiple CSS selectors to get it working properly. - -## Desired Outcome - -![outcome](./desired-outcome.gif) - -### Self Check -- Does the button's background color change when you hover on it? -- Does the list smoothly slide down underneath the button when the button is hovered over? -- Does the list smoothly slide back up to hiding when the mouse is moved away from the button or a list element? -- Does the list appear and disappear when it is supposed to i.e. only when the mouse is over the button or a list element? \ No newline at end of file diff --git a/animation/02-drop-down/desired-outcome.gif b/animation/02-drop-down/desired-outcome.gif deleted file mode 100644 index 572ad35..0000000 Binary files a/animation/02-drop-down/desired-outcome.gif and /dev/null differ diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html deleted file mode 100644 index e50c3cc..0000000 --- a/animation/02-drop-down/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - Dropdown - - - -
-
- -
-
- - - diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css deleted file mode 100644 index 70a5be5..0000000 --- a/animation/02-drop-down/solution/solution.css +++ /dev/null @@ -1,65 +0,0 @@ -* { - padding: 0; - margin: 0; - font-family: Arial, Helvetica, sans-serif; -} - -.dropdown-container { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.dropdown-menu { - position: relative; -} - -button { - background-color: rgb(108, 238, 255); - padding: 16px; - font-size: 16px; - border: none; -} - -ul { - position: absolute; - left: -25%; - background-color: rgb(189, 188, 188); - width: 160px; - list-style: none; - text-align: center; -} - -li { - padding: 16px; -} - -/* SOLUTION */ - -/* disclaimer: duplicating the `ul` element here isn't best practice. -In your solution you probably put it right inside the existing `ul`, -which _is_ the best practice. -We separated it out here to make it extra clear what has changed. */ - -ul { - overflow: hidden; - max-height: 0; - transition: max-height 0.25s ease-out; -} - -.dropdown-menu:hover ul { - max-height: 500px; - transition: max-height 0.5s ease-out; -} - -button:hover { - cursor: pointer; - background-color: rgb(59, 232, 255); -} - -ul li:hover { - cursor: pointer; - background-color: #ddd; -} diff --git a/animation/02-drop-down/solution/solution.html b/animation/02-drop-down/solution/solution.html deleted file mode 100644 index 84088a1..0000000 --- a/animation/02-drop-down/solution/solution.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - Dropdown - - - -
-
- -
-
- - - diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css deleted file mode 100644 index 4bcb1e8..0000000 --- a/animation/02-drop-down/style.css +++ /dev/null @@ -1,37 +0,0 @@ -* { - padding: 0; - margin: 0; - font-family: Arial, Helvetica, sans-serif; -} - -.dropdown-container { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.dropdown-menu { - position: relative; -} - -button { - background-color: rgb(108, 238, 255); - padding: 16px; - font-size: 16px; - border: none; -} - -ul { - position: absolute; - left: -25%; - background-color: rgb(189, 188, 188); - width: 160px; - list-style: none; - text-align: center; -} - -li { - padding: 16px; -} diff --git a/animation/02-pop-up/README.md b/animation/02-pop-up/README.md new file mode 100644 index 0000000..d2ed5b7 --- /dev/null +++ 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. \ No newline at end of file diff --git a/animation/02-pop-up/desired-outcome.gif b/animation/02-pop-up/desired-outcome.gif new file mode 100644 index 0000000..80e23b3 Binary files /dev/null and b/animation/02-pop-up/desired-outcome.gif differ diff --git a/animation/03-pop-up/index.html b/animation/02-pop-up/index.html similarity index 85% rename from animation/03-pop-up/index.html rename to animation/02-pop-up/index.html index f725a27..7fa3bc2 100644 --- a/animation/03-pop-up/index.html +++ b/animation/02-pop-up/index.html @@ -8,12 +8,15 @@ +
+
+

Look at me!

+

I'm a pop up dialog!

+ +
-
- -
diff --git a/animation/03-pop-up/script.js b/animation/02-pop-up/script.js similarity index 70% rename from animation/03-pop-up/script.js rename to animation/02-pop-up/script.js index e7be984..4f7c25c 100644 --- a/animation/03-pop-up/script.js +++ b/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 new file mode 100644 index 0000000..5182e96 --- /dev/null +++ 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 b/animation/02-pop-up/solution/solution.html similarity index 85% rename from animation/03-pop-up/solution/solution.html rename to animation/02-pop-up/solution/solution.html index de53fdc..2c5f766 100644 --- a/animation/03-pop-up/solution/solution.html +++ b/animation/02-pop-up/solution/solution.html @@ -8,12 +8,15 @@ +
+
+

Look at me!

+

I'm a pop up dialog!

+ +
-
- -
diff --git a/animation/03-pop-up/solution/solution.js b/animation/02-pop-up/solution/solution.js similarity index 70% rename from animation/03-pop-up/solution/solution.js rename to animation/02-pop-up/solution/solution.js index e7be984..4f7c25c 100644 --- a/animation/03-pop-up/solution/solution.js +++ b/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); diff --git a/animation/03-pop-up/style.css b/animation/02-pop-up/style.css similarity index 59% rename from animation/03-pop-up/style.css rename to animation/02-pop-up/style.css index b998438..058533f 100644 --- a/animation/03-pop-up/style.css +++ b/animation/02-pop-up/style.css @@ -12,17 +12,12 @@ body { height: 100vh; background-color: #ffffff; opacity: 100%; + display: flex; + align-items: center; + justify-content: center; } -#trigger-modal, -.popup-modal { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -#trigger-modal { +button { padding: 20px; color: #ffffff; background-color: #0e79dd; @@ -32,23 +27,37 @@ body { } .popup-modal { - width: 30%; - height: 15%; + padding: 32px 64px; background-color: white; border: 1px solid black; border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - margin-top: 10%; - opacity: 0; + 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 } -#close-modal { - padding: 20px; - color: #ffffff; - background-color: #0e79dd; - border: none; - border-radius: 5px; - font-weight: 600; +.backdrop { + pointer-events: none; + position: fixed; + inset: 0; + background: #000; + opacity: 0%; } + +.popup-modal.show { + opacity: 100%; + pointer-events: all; +} + +.backdrop.show { + opacity: 30%; +} + diff --git a/animation/03-pop-up/README.md b/animation/03-pop-up/README.md deleted file mode 100644 index 9b01541..0000000 --- a/animation/03-pop-up/README.md +++ /dev/null @@ -1,28 +0,0 @@ -# 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 \ No newline at end of file diff --git a/animation/03-pop-up/desired-outcome.gif b/animation/03-pop-up/desired-outcome.gif deleted file mode 100644 index 5ca0675..0000000 Binary files a/animation/03-pop-up/desired-outcome.gif and /dev/null differ diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css deleted file mode 100644 index 4f486e4..0000000 --- a/animation/03-pop-up/solution/solution.css +++ /dev/null @@ -1,116 +0,0 @@ -* { - padding: 0; - margin: 0; -} - -body { - overflow: hidden; -} - -.button-container { - width: 100vw; - height: 100vh; - background-color: #ffffff; - opacity: 100%; -} - -#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; -} - -.popup-modal { - width: 30%; - height: 15%; - background-color: white; - border: 1px solid black; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - margin-top: 10%; - opacity: 0; -} - -#close-modal { - padding: 20px; - color: #ffffff; - background-color: #0e79dd; - border: none; - border-radius: 5px; - 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; -}