Skip to content

Use Javascript form events to adjust the background colour of a circle on the screen.

Notifications You must be signed in to change notification settings

ltw-webdev-javascript/circle-colourer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

summary time deliverables
Use Javascript form events to adjust the background colour of a circle on the screen.
1 hour
1 HTML file, 1 CSS file, 1 JS file

Circle colourer

Overview

  • Fork this repository.
  • Make a <form> tag with an <input> inside it—use type="color" for the input.
  • When the form’s change event fires, adjust the background-color of the ball to match the input’s value.
  • Run it through Markbot and make sure it passes all the checks.

Goal

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. Allow the user to add a new ball to the screen by clicking a button. Changing the colour will now affect that ball.
  2. Allow the user to click on any ball, changing the focus, therefore the colour changes the focused ball.

Watch this video to see how it interacts.

About

Use Javascript form events to adjust the background colour of a circle on the screen.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published