LAB WEEK 08: DOM Elements

let button;

let sel;

let img;

​

function preload(){

  img = loadImage('BlackShirt.png');

}

function setup() { 

  createCanvas(400, 400);

  background(0);

  button = createButton('add to cart');

  button.position(500, 500);

  button.mousePressed(changeBG);

  //button

  let inp = createInput('');

  inp.position(240, 150);

  inp.size(300);

  inp.input(myInputEvent);

  //input

  textAlign(CENTER);

  background(200);

  sel = createSelect();

  sel.position(200, 500);

  sel.option('small');

  sel.option('medium');

  sel.option('large');

  sel.selected('small');

  sel.changed(mySelectEvent);

}

function draw() {

  background(239);

  let a = createA('https://www2.hm.com/en_us/index.html', 'H&M');

a.position(375, 133);

//link  

  image(img, 100, 50, 200, 300);

}

function changeBG() {

  let val = random(255);

  background(val);

  //button

}

function myInputEvent() {

  console.log('you are typing: ', this.value());

  //input

}

function mySelectEvent() {

  let item = sel.value();

  background(200);

  text('It is a ' + item + '!', 50, 50);

}

​