day-1 button-ripple-effect

Finn · Finn · commit d5766f0bfb5d · 2023-01-29T15:53:11.000+08:00
diff --git a/button-ripple-effect/script.js b/button-ripple-effect/script.js
@@ -2,15 +2,25 @@ const buttons = document.querySelectorAll('.ripple')
 
 buttons.forEach(button => {
     button.addEventListener('click', function (e) {
+        // e is an event object
+        // clientx provides the horizontal coordinate within the viewport (currently being shown) 
+        // at which the event occur( as opposed to the coordinate within the page)
         const x = e.clientX
         const y = e.clientY
 
+        // event.target provides the reference to the object onto which the event was dispatched 触发事件
+        // it is different from event.currentTarget when the handler is called during the bubbling or capturing phase of the event
+
+        // five values that position can take : static, absolute, relative, fixed, sticky.
+        // offsetTop is the distance between the current node and the closest offset parent( whose position is non-static )
+        // if there is on offset parent, return body
         const buttonTop = e.target.offsetTop
         const buttonLeft = e.target.offsetLeft
 
         const xInside = x - buttonLeft
         const yInside = y - buttonTop
-
+        console.log(e,x,y,'x,y',buttonLeft,buttonTop,'offsetTop,offsetLeft')
+        console.log(this === e.target,'this')
         const circle = document.createElement('span')
         circle.classList.add('circle')
         circle.style.top = yInside + 'px'
diff --git a/workout/day1-button-ripple-effect/index.html b/workout/day1-button-ripple-effect/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <button class="ripple">click me</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/workout/day1-button-ripple-effect/script.js b/workout/day1-button-ripple-effect/script.js
@@ -0,0 +1,31 @@
+const rippleButtons = document.querySelectorAll('.ripple');
+
+function rippleClick(e){
+    console.log(123)
+    const clientX = e.clientX
+    const clientY = e.clientY
+
+    const target = e.target
+    const offsetLeft = target.offsetLeft
+    const offsetTop = target.offsetTop
+
+    const xInside = clientX - offsetLeft;
+    const yInside = clientY - offsetTop;
+
+    const spanNode = document.createElement('span');
+    spanNode.classList.add('rippleCircle');
+    // type of value style.left is a string
+    spanNode.style.left = xInside + 'px'
+    spanNode.style.top = yInside + 'px'
+
+    target.appendChild(spanNode)
+
+    setTimeout(()=>{
+        spanNode.remove()
+    },500)
+}
+
+console.log(rippleButtons,'rippleButtons')
+rippleButtons.forEach((ele) =>{
+    ele.addEventListener('click',rippleClick)
+})
diff --git a/workout/day1-button-ripple-effect/style.css b/workout/day1-button-ripple-effect/style.css
@@ -0,0 +1,51 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #000;
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+button {
+  background-color: purple;
+  color: #fff;
+  border: 1px purple solid;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  padding: 20px 30px;
+  overflow: hidden;
+  margin: 10px 0;
+  position: relative;
+}
+
+button:focus {
+  outline: none;
+}
+/* why set translate(-50%,50%)? */
+/* to set center of the ripple element at the place where the mouse is÷\ */
+.rippleCircle{
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background-color: #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    animation: circle .5s ease-out;
+}
+@keyframes circle{
+    to{
+        transform: translate(-50%, -50%) scale(3);
+        opacity: 0;
+    }
+}
