<div class="circle"></div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  margin: 20px;
  font-family: "Khand";
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

html {
  overflow: hidden;
}

div.circle {
  background: yellow;
  color: white;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 50px solid orangered;
}

const circle = document.querySelector(".circle");

document.addEventListener("keydown", (event) => {
  console.log(event);

  let rVal = Math.floor(200 + Math.random() * 200);
  if (event.code == "KeyR" && event.repeat != true) {
    circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`);
  }

  if (event.key == "B" && event.shiftKey == true) {
    let rVal = Math.floor(10 + Math.random() * 40);

    circle.setAttribute("style", `border: ${rVal}px solid orangered;`);
  }

  if (event.code == "ArrowUp" && event.repeat != true) {
    circle.classList.add("animate__animated", "animate__bounce");
  }
});

document.addEventListener("keyup", (event) => {
  if (event.code == "ArrowUp") {
    setTimeout(() => {
      circle.classList.remove("animate__animated", "animate__bounce");
    }, 4000);
  }
});