​

function setup() {

  createCanvas(500, 300);

  textAlign(CENTER);

  card = new IDCard("Test Student", 2023);

  createButton("Update Name").mousePressed(() => card.updateName());

  createButton("Update Graduation Year").mousePressed(() => card.updateGrade());

  createButton("Update BG Color").mousePressed(() => card.updateBGColor());

  createButton("Update Logo Color").mousePressed(() => card.updateLogoColor());

}

​

function draw() {

  card.display();

}

​

class IDCard {

​

  constructor(name, gradYear, bgColor='green', logoColor='black') {

    this.name = name;

    this.graduationYear = gradYear;

    this.grade = 12 + 2023 - this.graduationYear;

    this.backgroundColor = bgColor;

    this.logoColor = logoColor;

  }

  updateName() {

    this.name = prompt("Enter new name: ");

  }

  updateGrade() {

    this.graduationYear = prompt("Enter new graduation year: ");

    this.grade = 12 + 2023 - this.graduationYear;

  }

  updateBGColor(){

    this.backgroundColor = prompt("Enter new background color: ");

  }

  updateLogoColor(){

    this.logoColor = prompt("Enter new logo color: ");

  }

  display() {

    // Draw ID card background

    background('white')

    fill(this.backgroundColor);

    rect(20, 20, 460, 260, 5);

​

    // Draw input values

    fill('#000000');

    textSize(20);

    textAlign(LEFT);

    text("Name", 190, 45);

    text(this.name, 190, 85);

    text("Graduation Year", 190, 150);

    text(this.graduationYear, 190, 180);

    text("Grade", 190, 230);

    text(this.grade, 190, 255);

​

    // Draw logo

    fill(this.logoColor);

    rect(20, 20, 150, 260, 5);

    fill('#ffffff');

    textSize(24);

    textAlign(CENTER);

    text("ID Card", 95, 150);

  }

}

​