"Drink 1L Water",

  "Eat Vegetables",

  "30min Exercise",

  "Eat a Fruit",

  "No Junk Food",

  "8 Hours of Sleep",

  "Meditate 10 min",

  "No Sugary Drinks",

  "Stretch 10 min",

  "No Fast Food",

  "Try New Recipe",

  "Limit Screen Time",

  "Take the Stairs",

  "Floss Teeth",

  "Compliment Someone",

  "Read for 20min",

  "Eat a Protein-Rich Meal",

  "Practice Gratitude",

  "Limit Caffeine",

  "Random Act of Kindness",

  "Eat a Plant-Based Meal",

  "Unplug Before Bed",

  "Gratitude Journal",

  "30min Outdoor Time",

  "Limit Sodium Intake",

];

​

let squares = []; // Store square positions

let circlesToDraw = []; // Store circle drawing state

​

function setup() {

  createCanvas(700, 700);

  background("lightblue");

​

  let squareSize = 140;

  for (let x = 0; x < width; x += squareSize) {

    for (let y = 0; y < height; y += squareSize) {

      squares.push({ x, y, size: squareSize });

      circlesToDraw.push(false); // Initialize all squares as not clicked

    }

  }

}

​

function draw() {

  background(220);

​

  for (let i = 0; i < squares.length; i++) {

    let squareData = squares[i];

    let { x, y, size } = squareData;

​

    fill("lightblue");

    rect(x, y, size, size);

​

    fill("black");

    textAlign(CENTER);

    text(sentences[i], x + size / 2, y + size / 2);

​

    if (circlesToDraw[i]) {

      fill("purple");

      circle(x + size / 2, y + size / 2, 30);

    }

  }

}

​

function mousePressed() {

  for (let i = 0; i < squares.length; i++) {

    let squareData = squares[i];

    let { x, y, size } = squareData;

​

    if (

      mouseX > x &&

      mouseX < x + size &&

      mouseY > y &&

      mouseY < y + size

    ) {

      circlesToDraw[i] = true; // Set the clicked square as true to draw a circle

    }

  }

}

​