<div class="content-wrapper">
  <div id="myBox" class="box thin">
    <p>content</p>
  </div>

  <div class="button-row">
    <button id="addBtn">Add Class</button>
    <button id="removeBtn">Remove Class</button>
    <button id="replaceBtn">Replace Class</button>
    <button id="toggleBtn">Toggle Class</button>
  </div>
</div>

.content-wrapper {
  margin-block-start: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-row {
  margin-block: 2em;
  width: 200px;
  display: flex;
  flex-flow: row wrap;
  gap: 0.75em;
}

button: {
  width: 45px;
}

.thin {
  border: 5px solid black;
}

.thick {
  border: 10px solid black;
}

.hotpink {
  background: hotpink;
  color: white;
}

.blue {
  background: navy;
  color: white;
}

const myBox = document.querySelector("#myBox");

const add = document.querySelector("#addBtn");
const remove = document.querySelector("#removeBtn");
const replace = document.querySelector("#replaceBtn");
const toggle = document.querySelector("#toggleBtn");
const scan = document.querySelector("scanBtn");

addBtn.addEventListener("click", (evt) => {
  myBox.classList.add("hotpink");
});

removeBtn.addEventListener("click", (evt) => {
  if (myBox.classList.contains("hotpink")) {
    myBox.classList.remove("hotpink");
  }
  if (myBox.classList.contains("blue")) {
    myBox.classList.remove("blue");
  }
});

replaceBtn.addEventListener("click", (evt) => {
  if (!myBox.classList.contains("hotpink")) {
    myBox.classList.add("hotpink");
    myBox.classList.replace("hotpink", "blue");
  } else {
    myBox.classList.replace("hotpink", "blue");
  }
});

toggleBtn.addEventListener("click", (evt) => {
  myBox.classList.toggle("thick");
});