Merge pull request #59 from programmurr/feature/programmurr-animation-exercises
Add css-exercises for the new HTML/CSS Update transition/keyframe lessons
This commit is contained in:
Cody Loyd
GitHub
commit
8e92a0956b
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
### 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?
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Button Hover</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="transition-container">
|
||||
<button>Transition!</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Button Hover</title>
|
||||
<link rel="stylesheet" href="solution.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="transition-container">
|
||||
<button>Transition!</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
### 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?
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dropdown</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="dropdown-container">
|
||||
<div class="dropdown-menu">
|
||||
<button>Dropdown</button>
|
||||
<ul>
|
||||
<li>Item 1</a>
|
||||
<li>Item 2</a>
|
||||
<li>Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dropdown</title>
|
||||
<link rel="stylesheet" href="solution.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="dropdown-container">
|
||||
<div class="dropdown-menu">
|
||||
<button>Dropdown</button>
|
||||
<ul>
|
||||
<li>Item 1</a>
|
||||
<li>Item 2</a>
|
||||
<li>Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="button-container">
|
||||
<button id="trigger-modal">Open Modal</button>
|
||||
</div>
|
||||
<div class="popup-modal">
|
||||
<button id="close-modal">Close Modal</button>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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="solution.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="button-container">
|
||||
<button id="trigger-modal">Open Modal</button>
|
||||
</div>
|
||||
<div class="popup-modal">
|
||||
<button id="close-modal">Close Modal</button>
|
||||
</div>
|
||||
<script src="solution.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue