Pyramid Slide
^ That's how much fun you are about to have.
Your Task
You've been working at Mario Inc for awhile now, and during Studios you have continually iterated on your product, shipping better and better Pyramids.
Today your team's designer, Daisy, came to you with a new UI design and some new features that are surely going to take the company to the next level.
Daisy has mocked up an animation of the functionality she envisions:
Your task is to make it real!
Setup
- Make sure you are logged into Github.
- Make a new repository on Github. Give it the name
pyramid-slide. - Clone your repository down onto your computer.
Notes and Tips
A few tips before you start:
- Don't worry about styles or layout until you are done with all the functionality.
- A "slider" is actually just an
<input>whosetypeattribute is equal to"range". See here for more details. - The slider event that you care about is
oninput. See here for more details. - Remember that a dropdown menu is just a
<select>element with some<option>elements nested inside. - The select event that you care about is
onchange. - You will need to use the following style attributes:
margin,padding,color,background-color,border,border-radius,font-size,font-weight
Ok, you are all set. Go make that pyramid!
Submit Your Work
- Follow the submission instructions.
- Enjoy a cold one.
