tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #224 from dougc85/fix_animation_grammar 

02-pop-up: fix grammar in readme
This commit is contained in:
Kevin Mulhern 2022-10-05 10:40:13 +01:00 committed by GitHub
parent 913a077823 39c4e869d6
commit 5ebf0de398
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
animation/02-pop-up/README.md
View File

@ -2,11 +2,11 @@
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! 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. 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 ### Hints
- "modal" is another word for 'pop-up' - "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. - In the code we've provided, the popup is sitting in its final position. You'll need to change its 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. - 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. - Don't overthink this one... it might seem complicated, but it requires just a few lines of code.
@ -16,5 +16,5 @@ You don't need to worry about the actual functionality here, we've just written
### Self Check ### 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 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. - The opacity fades smoothly in and out when toggling the modal