let bgColor;

let button;

let nameInput;

let nameColor;

​

function setup() {

  canvas = createCanvas(200, 200);

  canvas.position(300, 300);

​

  bgColor = color(200);

​

  h1 = createElement("h1", "Document object model");

​

  button = createButton(" CLICK ME ");

  button.mousePressed(changeColor);

​

​

  slider = createSlider(0, 150, 30);

  slider.position(150, 400);

​

​

  nameInput = createInput("   Type a color :");

  nameInput.position(150, 350);

​

  nameColor = createP("Your COLOR !");

  nameColor.mouseOver(paraOver);

  nameColor.mouseOut(paraOut);

  nameInput.changed(updateText);

  nameInput.input(updateText);

​

}

​

function updateText () {

    nameColor.html(nameInput.value());

}

function paraOver() {

  nameColor.html("MOUSE OVER WORKING!! ");

}

​

function paraOut() {

  nameColor.html("M OUT LAH ! ");

}

​

function changeColor() {

  bgColor = color(random(255));

}

​

function mousePressed() {

  // changeColor();

  h1.html("NUM!!");

  createP("My fav number is " + random(0, 100));

}

​

function draw() {

​

  background(bgColor);

​

  h1.position(400 + x, 100);

  x = random(-1, 1);

​

  stroke(255, 0, 200);

  strokeWeight(4);

  noFill();

  ellipse(100, 100, slider.value(), slider.value());

​

  noStroke();

  fill(0);

  text(nameInput.value(), 50, 50);

​

  //nameColor.html(nameInput.value());

​

}