for ainsley

h4_index.js

var title = "What I'm Drinking Now";
//var cocktails = [];
var marioB;
var crocs;
var clickCounter = -1;
var cocktails;
var value = 0;

function preload() {
  cocktails = loadStrings("cocktails.txt"); // this is an array
  marioB = loadImage("marioB.png");
  crocs = loadImage("crocs.png");
}

function setup() {
  createCanvas(600, 400);
  
  // OPEN DEV TOOLS and check the whole array
  console.log(cocktails);
  // check one element of the array
  console.log(cocktails[1]);

  background(255);
  image(marioB, width/2, 60);

  //Display title and headshot
  fill(0);
  textSize(18);
  textAlign(CENTER);
  text(title, width/2, 130);
}

// remove the draw function so it doesn't redraw these things in a loop
/*function draw() {
  background(255);
  //image(marioB, width/2, 60);

  //Display title and headshot
  fill(0);
  textSize(18);
  textAlign(CENTER);
  text(title, width/2, 130);
}*/

  //Display Crocs
function keyPressed() {
  if (value === 0) {
    // the draw function was overwriting what gets drawn here
    fill(255,0,0,random(150,255));
    rect(0,0,400,400);
    image(crocs, 200, 400);
  }
  console.log('keyPressed');
} 

//function mouseIsClicked() {
  // mouseClicked() not mouseIsClicked()
function mouseClicked() {
  if (clickCounter>=0) {
    textSize(12);
    textAlign(CENTER);
    // NOTE: you will need to redraw the background so that the previous text goes away when the new one comes up
    //    (if you didn't want to redraw the *whole* background, you could just draw a rectangle behind the text to cover up the previous text)
    text(cocktails[clickCounter], 50, 160, 300, 300);
    text(clickCounter+1, width/2, 385);
  }

  //Display cocktail recipes one at a time
  if (clickCounter<25) {
    clickCounter++;
  } else {
    clickCounter = -1;
  }
}