let startButton;  

let submitButton;

let studyInputs = []; // log the input items

let studyHours = []; // log the hours studied

let days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

let state = "start"; // for values: "start", "input", "graph"

​

function setup() {

  createCanvas(700, 500); // 700 x 500 graph

  background(95, 158, 160); //tealish shade, which I prefer.

  textAlign(CENTER);

  textSize(24);

  fill(0);

  // Show welcome message

  text("Click the start button to log your study hours", width / 2, height / 2);

  // Create a start button and move it below the message

  startButton = createButton("Start");

  startButton.position(width / 2 - 30, height / 2 + 30);

  startButton.mousePressed(startProgram);

  //calling startProgram function

}

​

function startProgram() {

  state = "input"; // input stage

  startButton.hide(); //put away the start button

  background(220); // Change the background to light

  textSize(15);

  fill(0);

  textAlign(CENTER);

  text("Enter your study hours for each day", width / 2, 30);

  //create the label

  let yPos = 60;

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

    textAlign(LEFT);

    text(days[i] + ":", 50, yPos); // text at x=50

    let inp = createInput("");

    inp.position(150, yPos - 15); // x-axis for input field Incremented by 100 for better margin.

    inp.size(50);

    studyInputs.push(inp); //

    yPos += 50; // add space between rows

  }

  // Create a submit button placed after the last input field

  submitButton = createButton("Submit");

  submitButton.position(width / 2 - 30, yPos + 10);

  submitButton.mousePressed(submitData); // submit data called

}

​

function submitData() {

  // check and store if 

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

    //cycle through the inputs to verify the nature of data.

    let val = parseFloat(studyInputs[i].value());

    // parseFloat is a javascript function, which parses

    // a value as string and then converts it to number

    studyHours.push(isNaN(val) ? 0 : val);

    /*

    isNaN is 'Not a number' function which returns true if the value is     passed is not a number. in our case if the value passed is a 

    number, then its true, and pushes 'val' into study hours. and for

    the one where if there is no number entered for instance a letter /

    character instead, this will push the value '0' for the hours.

    */

    studyInputs[i].hide(); // hide the input field after submission

  }

  submitButton.hide();

  state = "graph";  // change state so that draw() will call drawGraph()

}

​

function drawGraph() {

  // Clear the canvas and set the background for the graph

  background(240);

  fill(0);

  textAlign(CENTER);

  textSize(20);

  text("Study Hours Per Day", width / 2, 30);

  // margin between the bars

  let margin = 60;

  let gap = 20; //gap between days

  let availableWidth = width - 2 * margin;

  let barWidth = (availableWidth - (days.length - 1) * gap) / days.length; 

  let maxHours = max(studyHours); // maxiumum value in the array

  if (maxHours === 0) {

    maxHours = 1;  // to avoid division by zeor

  }

  let graphHeight = height - 100;

  stroke(0);

  //horizontal bar

  line(margin, height - 50, width - margin, height - 50);

  // For each day, draw the corresponding bar and label its study hours and name

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

    let x = margin + i * (barWidth + gap);

    let barHeight = map(studyHours[i], 0, maxHours, 0, graphHeight);

    // Draw a blue bar representing the study hours

    fill(50, 150, 200);

    rect(x, height - 50 - barHeight, barWidth, barHeight);

    // draw nymber above the bar

    fill(0);

    noStroke();

    textSize(16);

    text(studyHours[i], x + barWidth / 2, height - 50 - barHeight - 5);

    // label the x-axis and under the bar

    text(days[i], x + barWidth / 2, height - 30);

  }

}

​

//atlas draw function which keeps on cycling, and only draws graph when the state has been changed to draw graph.

function draw() {

  // if state is "graph" continuously draw the graph. 

  if (state === "graph") {

    drawGraph(); // custom function

  }

}