Lesson 3, Topic 2
In Progress

A button function

Sana 23/11/2024
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

Exit mobile version