Kyle-Jackson / circle-colourer

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

Circle colourer

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

---

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

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

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