kaylaboch / retro-sign

Create a simple lightbox with Javascript and CSS effects.

Retro sign

• Approx. completion time: 1 hour
• Deliverables: 1 HTML file, 1 CSS file, 1 JS file

---

Create a retro sign that turns on/off when a button is pressed.

• 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.

---

Details

• Line drawing: animate the stroke-dasharray property, only the first number, animate from 0 to 480.

---

Goal

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.

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.

---

---

Optional challenges

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.

1. When clicking the button a second time the lines draw backwards
   Watch this video to see how it interacts.