Midterm Excercise 5 (Copy 3039) (Copy 4673)

✨ นายธนเดช แซ่ฉั่ว

<html>
  <head></head>
    <style>
body {
  height: 100%;
  width: 100%;
  background-color: black;
  margin: 0;
}
.a {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 10px;
  box-shadow: 0 0 20px red;
}
.p1 {
  position: absolute;
  left: calc((100% - 100px) / 2);
  margin-top: 1em;
}

.b {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 10px;
  transform: rotate(45deg);
  box-shadow: 0 0 20px purple;
}

.p2 {
  top: calc((100% - 100px) / 2);
  position: absolute;
  margin-left: 1em;
}

.c {
  width: 100px;
  height: 60px;
  background-color: green;
  border-radius: 5px;
  /*   margin-right: 3em; */
  box-shadow: 0 0 20px green;
  transform: skew(-45deg) rotate(45deg);
}

.p3 {
  position: absolute;
  right: 0;
  top: calc((100% - 100px) / 2);
}

.d {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  border-radius: 100%;
  box-shadow: 0 0 20px skyblue;
}

.p4 {
  position: absolute;
  bottom: 0;
  left: calc((100% - 100px) / 2);
  margin-bottom: 1em;
}

.e {
  position: absolute;
  top: calc((100% - 100px) / 2);
  left: calc((100% - 100px) / 2);
}

@keyframes aa {
  to {
    transform: rotatey(360deg);
  }
}

@keyframes bb {
  to {
    transform: rotatex(360deg);
  }
}

@keyframes cc {
  to {
    transform: rotatez(360deg);
  }
}

@keyframes dd {
  to {
    transform: rotatey(360deg);
  }
}

</style>   
    
  <body>
    <div class="a p1"></div>
	 <div class="b p2"></div>
	 <div class="c p3"></div>
	 <div class="d p4"></div>
	 <div class="e"></div>
  </body>
    <script>
      const block = document.querySelector(".e");
document.body.onkeyup = function (e) {
  console.log(e);
  if (e.key == "ArrowUp") {
    block.innerHTML = "<div class='a'></div>";
    block.style.animation = "aa 1s linear";
  } else if (e.key == "ArrowDown") {
    block.innerHTML = "<div class='d'></div>";
    block.style.animation = "bb 1s linear";
  } else if (e.key == "ArrowLeft") {
    block.innerHTML = "<div class='b'></div>";
    block.style.animation = "cc 1s linear";
  } else if (e.key == "ArrowRight") {
    block.innerHTML = "<div class='c'></div>";
    block.style.animation = "dd 1s linear";
  }
}
    </script>
</html>