Lesson 3, Topic 2
In Progress

A button function

sana-steve May 20, 2019
Lesson Progress
0% Complete

If you went through the Intro to JS course, then you made a few simple buttons in the Logic challenges Your First Button and Smarter Button. In case you forgot, let’s re-hash how to make a simple button.First, what are the bare minimum features of a button?

  1. A shape on the canvas (typically a rectangle)
  2. Includes a label or icon that describes what it will do
  3. Responds to the user clicking on it (but not elsewhere)

We can achieve #1 and #2 pretty easily:

fill(0, 234, 255);
rect(100, 100, 150, 50, 5);
fill(0, 0, 0);
textSize(19);
text("Useless button", 110, 133);

To achieve #3, we need to define a mouseClicked function that will get called when the user clicks, and inside of that, we need to check whether mouseX and mouseY are within the bounding box of the button