diff --git a/animation/01-button-hover/README.md b/animation/01-button-hover/README.md new file mode 100644 index 0000000..e4ee37c --- /dev/null +++ b/animation/01-button-hover/README.md @@ -0,0 +1,12 @@ +# Button Hover + +Use a transition to increase the font-size property of the button when you hover your mouse over it. + +## Desired Outcome + +![outcome](./desired-outcome.gif) + +### Self Check +- Does the font-size property change to increase the size? +- Do other properties of the button remain unchanged? +- Does the `:hover` pseudo-class trigger the transition? diff --git a/animation/01-button-hover/desired-outcome.gif b/animation/01-button-hover/desired-outcome.gif new file mode 100644 index 0000000..23083bb Binary files /dev/null and b/animation/01-button-hover/desired-outcome.gif differ diff --git a/animation/01-button-hover/index.html b/animation/01-button-hover/index.html new file mode 100644 index 0000000..35b6bce --- /dev/null +++ b/animation/01-button-hover/index.html @@ -0,0 +1,15 @@ + + + + + + + Button Hover + + + +
+ +
+ + diff --git a/animation/01-button-hover/solution/solution.css b/animation/01-button-hover/solution/solution.css new file mode 100644 index 0000000..5fa39a3 --- /dev/null +++ b/animation/01-button-hover/solution/solution.css @@ -0,0 +1,36 @@ +#transition-container { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; +} + +button { + width: 158px; + height: 55px; + border: 1px solid black; + border-radius: 5px; + background-color: white; + color: black; + font-size: small; + text-align: center; +} + +/* SOLUTION */ + +/* disclaimer: duplicating the `button` element here isn't best practice. +In your solution you probably put it right inside the existing `button`, +which _is_ the best practice. +We separated it out here to make it extra clear what has changed. */ + +button { + transition: font-size 1s ease-out 0.25s; +} + +button:hover { + font-size: x-large; + cursor: pointer; +} diff --git a/animation/01-button-hover/solution/solution.html b/animation/01-button-hover/solution/solution.html new file mode 100644 index 0000000..84e6599 --- /dev/null +++ b/animation/01-button-hover/solution/solution.html @@ -0,0 +1,15 @@ + + + + + + + Button Hover + + + +
+ +
+ + diff --git a/animation/01-button-hover/style.css b/animation/01-button-hover/style.css new file mode 100644 index 0000000..ec65525 --- /dev/null +++ b/animation/01-button-hover/style.css @@ -0,0 +1,20 @@ +#transition-container { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; +} + +button { + width: 158px; + height: 55px; + border: 1px solid black; + border-radius: 5px; + background-color: white; + color: black; + font-size: small; + text-align: center; +} diff --git a/animation/02-drop-down/README.md b/animation/02-drop-down/README.md new file mode 100644 index 0000000..cedac0c --- /dev/null +++ b/animation/02-drop-down/README.md @@ -0,0 +1,15 @@ +# 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 new file mode 100644 index 0000000..572ad35 Binary files /dev/null and b/animation/02-drop-down/desired-outcome.gif differ diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html new file mode 100644 index 0000000..e50c3cc --- /dev/null +++ b/animation/02-drop-down/index.html @@ -0,0 +1,22 @@ + + + + + + + Dropdown + + + +
+
+ +
+
+ + + diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css new file mode 100644 index 0000000..70a5be5 --- /dev/null +++ b/animation/02-drop-down/solution/solution.css @@ -0,0 +1,65 @@ +* { + 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 new file mode 100644 index 0000000..84088a1 --- /dev/null +++ b/animation/02-drop-down/solution/solution.html @@ -0,0 +1,22 @@ + + + + + + + Dropdown + + + +
+
+ +
+
+ + + diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css new file mode 100644 index 0000000..4bcb1e8 --- /dev/null +++ b/animation/02-drop-down/style.css @@ -0,0 +1,37 @@ +* { + 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/03-pop-up/README.md b/animation/03-pop-up/README.md new file mode 100644 index 0000000..9b01541 --- /dev/null +++ b/animation/03-pop-up/README.md @@ -0,0 +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 \ No newline at end of file diff --git a/animation/03-pop-up/desired-outcome.gif b/animation/03-pop-up/desired-outcome.gif new file mode 100644 index 0000000..5ca0675 Binary files /dev/null and b/animation/03-pop-up/desired-outcome.gif differ diff --git a/animation/03-pop-up/index.html b/animation/03-pop-up/index.html new file mode 100644 index 0000000..f725a27 --- /dev/null +++ b/animation/03-pop-up/index.html @@ -0,0 +1,19 @@ + + + + + + + Popup + + + +
+ +
+
+ +
+ + + diff --git a/animation/03-pop-up/script.js b/animation/03-pop-up/script.js new file mode 100644 index 0000000..e7be984 --- /dev/null +++ b/animation/03-pop-up/script.js @@ -0,0 +1,12 @@ +const openButton = document.getElementById('trigger-modal'); +const closeButton = document.getElementById('close-modal'); + +function toggleModal() { + const container = document.querySelector('.button-container'); + const modalDiv = document.querySelector('.popup-modal'); + modalDiv.classList.toggle('show'); + container.classList.toggle('show'); +} + +openButton.addEventListener('click', toggleModal); +closeButton.addEventListener('click', toggleModal); diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css new file mode 100644 index 0000000..4f486e4 --- /dev/null +++ b/animation/03-pop-up/solution/solution.css @@ -0,0 +1,116 @@ +* { + 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; +} diff --git a/animation/03-pop-up/solution/solution.html b/animation/03-pop-up/solution/solution.html new file mode 100644 index 0000000..de53fdc --- /dev/null +++ b/animation/03-pop-up/solution/solution.html @@ -0,0 +1,19 @@ + + + + + + + Popup + + + +
+ +
+
+ +
+ + + diff --git a/animation/03-pop-up/solution/solution.js b/animation/03-pop-up/solution/solution.js new file mode 100644 index 0000000..e7be984 --- /dev/null +++ b/animation/03-pop-up/solution/solution.js @@ -0,0 +1,12 @@ +const openButton = document.getElementById('trigger-modal'); +const closeButton = document.getElementById('close-modal'); + +function toggleModal() { + const container = document.querySelector('.button-container'); + const modalDiv = document.querySelector('.popup-modal'); + modalDiv.classList.toggle('show'); + container.classList.toggle('show'); +} + +openButton.addEventListener('click', toggleModal); +closeButton.addEventListener('click', toggleModal); diff --git a/animation/03-pop-up/style.css b/animation/03-pop-up/style.css new file mode 100644 index 0000000..b998438 --- /dev/null +++ b/animation/03-pop-up/style.css @@ -0,0 +1,54 @@ +* { + 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; +}