CSS challenge

CSS challenge

<style>
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.red {
  width: 300px;
  height: 300px;
  background-color: crimson;
}

.yellow {
  width: 250px;
  height: 250px;
  background: gold;
}

.blue {
  width: 200px;
  height: 200px;
  background: slateblue;
}

.green {
  width: 150px;
  height: 150px;
  background: seagreen;
}

.orange {
  width: 100px;
  height: 100px;
  background: orangered;
}

</style>

<div class="red box">
  <div class="yellow box">
    <div class="blue box">
      <div class="green box">
        <div class="orange box"></div>
      </div>
    </div>
  </div>
</div>

<script>
  (() => {
    const container = document.body;
    const colours = ['red', 'yellow', 'blue', 'green', 'orange'];
    container.addEventListener('click', function(e) {
      const { target } = e;
      const selected = colours.filter(colour => target.className.includes(colour)).pop();
      alert(selected || 'no colour!');
    });
  })()
</script>