Skip to content

ltw-webdev-javascript/retro-sign

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Retro sign

Overview

  • 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-dashoffset property from 480px to 0.

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.


Hand in

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


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.

About

Create a simple lightbox with Javascript and CSS effects.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published