JS7

hw.js

// Task 1

function randomNumber(){
  let div = document.createElement('div');
  let text = document.createElement('p');
  let h1 = document.createElement('h1');
  let btn = document.createElement('button');

  text.textContent = "Random number";
  h1.textContent = "Number";
  btn.textContent = "Generate random number";

  let rand = 0;

  btn.addEventListener('click', function(){
    rand = Math.floor(Math.random() * 100);
    h1.textContent = rand;
  });

  //styles
  div.style.width = "250px";
  div.style.border = '3px solid red';
  div.style.textAlign = 'center';
  div.style.padding = '20px 0';

  div.appendChild(text);
  div.appendChild(h1);
  div.appendChild(btn);

  document.body.appendChild(div);
}
randomNumber();

// Task 2
function mouseTracker() {
  let h = document.createElement("h1")
  let h2 = document.createElement("h2");

  document.addEventListener("mousemove", (e) => {
    h.textContent = `X: ${e.x}, Y: ${e.y}`;
  });

  document.addEventListener("mouseup", (e) => {
    console.log(e.button);
    let btn;
    if(e.button === 0) btn = "left"
    else if (e.button === 2) btn = "right"
    else if (e.button === 1) btn = "center"
    else btn = "additional button"
    h2.textContent = `button pressed: ${btn}`
  })
  document.body.appendChild(h);
  document.body.appendChild(h2);
}
mouseTracker()

// Task 3
function progressbar(){
  let progress = document.createElement("progress");
  let btn = document.createElement("button");
  btn.textContent = "Add 5%";

  let number = 0;

  progress.setAttribute("value", number);
  progress.setAttribute("max", "100");

  btn.addEventListener("click", (e) => {
    number+= 5;
    progress.setAttribute("value", number);

  })

  document.body.appendChild(progress);
  document.body.appendChild(btn);
}
progressbar()