Create Mouse Chaser

Niloth-p · dev-shetty · commit b35482672ca3 · 2023-10-01T18:45:57.000+05:30
diff --git a/UI Snippets/Mouse Chaser/index.html b/UI Snippets/Mouse Chaser/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mouse Chaser</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="mover" onmouseover="moverHandler()" id="catch">
+        <p>Catch me if you can</p>
+    </div>
+    <script src="script.js"></script>
+</body>       
+</html>
diff --git a/UI Snippets/Mouse Chaser/script.js b/UI Snippets/Mouse Chaser/script.js
@@ -0,0 +1,14 @@
+const moverHandler = () => {
+    let moverEle = document.getElementsByClassName("mover")[0];
+
+    let maxX = window.innerWidth - moverEle.clientWidth;
+    let maxY = window.innerHeight - moverEle.clientHeight;
+
+    let randomX = Math.random() * maxX;
+    let randomY = Math.random() * maxY;
+
+    randomX = Math.min(randomX, maxX);
+    randomY = Math.min(randomY, maxY);
+
+    moverEle.style.transform = `translate(${randomX}px, ${randomY}px)`;
+};
diff --git a/UI Snippets/Mouse Chaser/styles.css b/UI Snippets/Mouse Chaser/styles.css
@@ -0,0 +1,10 @@
+.mover {
+    background-color: lightskyblue;
+    color: black;
+    display: inline-block;
+    padding: 0px 20px;
+    margin: 20px;
+    font-family: "Arial";
+    font-size: large;
+    position: relative;
+}
