summary | time | deliverables |
---|---|---|
Create a retro sign that turns on/off when a button is pressed. |
1 hour |
1 HTML file, 1 CSS file, 1 JS file |
- Fork this repository.
- When the button is clicked, lines are drawn to the text and the colour engages.
- DO NOT change the HTML file.
- Run it through Markbot and make sure it passes all the checks.
- Line drawing: animate the
stroke-dashoffset
property from480px
to0
.
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
- Watch this video to see how it interacts.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit online.
These challenges are here if you’d like to try a little more work—they are for extra experience and learning. They are completely optional and not graded. Show them to me if you’d like—I’d love to see them.
- When clicking the button a second time the lines draw backwards
Watch this video to see how it interacts.