<body>
  <div class="items">
    <div id="rocket">
      <p>Click Me!</p>
    </div>
    <div id="biceps">
      <p>Click Me!</p>
    </div>
    <div id="rain">
      <p>Click Me!</p>
    </div>
  </div>
  <div class="button-box">
    <button class="button" id="reset">Reset</button>
  </div>
</body>
body {
  background-color: #c0effd;
  min-height: 100vh;
  font-family: "Helvatica", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.items > div {
  margin: 1rem;
  background-color: #f7f4f3;
  height: 15rem;
  width: 15rem;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 6px 13px 0px #00000014;
  transition: all .2s ease;
  cursor: pointer;
}

.items > div:hover {
  transform: translateY(-3px);
}

div p {
  font-size: 1.5rem;
}

.button-box {
  margin: 2rem;
}

.button {
      border: none;
      outline: none;
      background-color: #77bfc1;
      color: #fff;
      font-weight: bold;
      padding: 1rem 2rem;
      box-shadow: 0 5px 0 #1e152a;
      transition: all 0.05s ease;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 10px;
}

.button:active {
      transform: translateY(2px);
      box-shadow: 0 0 0 #1e152a;
}

.button:hover {
  background-color: #1a3d3e;
}
const rocket = document.getElementById("rocket")
rocket.addEventListener("click", function(event) {
  document.querySelector("#rocket p").innerHTML = "🚀";
});

const biceps = document.getElementById("biceps")
biceps.addEventListener("click", function(event) {
  document.querySelector("#biceps p").innerHTML = String.fromCodePoint(0x1F4AA);
});

const rain = document.getElementById("rain")
rain.addEventListener("click", function(event) {
  document.querySelector("#rain p").innerHTML = "🌈";
});

const btn = document.getElementById("reset");
btn.addEventListener("click", function(event) {
  const para = document.querySelectorAll(".items p");
  para.forEach((item) => {
    item.textContent = "Click Me!";
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.