Crushing

document.getElementbyId('box').classList.add("border");

document.getElementbyId('box').style.border= "1px solid red";

#xxxten.big {
  width: 300px;
}

document.querySelector('#xxxten').addEventListener('click', function() {
  this.classList.toggle('big');
});

document.querySelector('button').addEventListener('click', function() {
  const bar = document.querySelector('#progress');
  const label = document.querySelector('#procent');

  let width = 0;
  const interval = setInterval(function() {
    if (++width >= 100) {
      clearInterval(interval);
    }

    bar.style.width = label.innerText = `${width}%`;
  }, 10);
});

for (var i=0;i<10            ;                i++)
или
for (var i=0;i<10            ,                i++)

.bubble {
  width: 20em;
  border: solid 1px gray;
  padding: 1em;
  margin: 1em;
  background: yellow;
  
  position: relative;
}

.bubble:before {
  content: '';
  width: 20px;
  height: 20px;
  background: yellow;
  position: absolute;
  bottom: calc(0% - 11px); /* size + border */
  left: calc(50% - 10px);  /* size */
  transform: rotate(45deg);
  border-right: solid 1px gray;
  border-bottom: solid 1px gray;
}