ItsOnkar-dev
diff --git a/‎JavaScript-DOM Manipulation/Animation‎
Lines changed: 0 additions & 1 deletion b/‎JavaScript-DOM Manipulation/Animation‎
Lines changed: 0 additions & 1 deletion
diff --git a/‎JavaScript-DOM Manipulation/Animations/index.html‎
Lines changed: 54 additions & 0 deletions b/‎JavaScript-DOM Manipulation/Animations/index.html‎
Lines changed: 54 additions & 0 deletions
diff --git a/‎JavaScript-DOM Manipulation/Animations/index.js‎
Lines changed: 103 additions & 0 deletions b/‎JavaScript-DOM Manipulation/Animations/index.js‎
Lines changed: 103 additions & 0 deletions
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Animations in DOM</title>
+ <style>
+ #container {
+ width: 500px;
+ height: 500px;
+ background: rgb(118, 252, 252);
+ position: relative;
+ border-radius: 10px;
+ border: 1px solid black;
+ margin: auto;
+ }
+
+ #inside {
+ width: 100px;
+ height: 100px;
+ background: rgb(243, 86, 86);
+ position: absolute;
+ border-radius: 10px;
+ }
+
+ .div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ margin-top: 10px;
+ }
+
+ #button {
+ width: 200px;
+ border-radius: 10px;
+ border: none;
+ background: rgb(239, 97, 97);
+ cursor: pointer;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <div id="inside"></div>
+ </div>
+ <div class="div">
+ <button id="button" onclick="moveDiagonally()"><h4>Click to move the box digonally</h4></button>
+ <button id="button" onclick="moveAllFourSides()"><h4>Click to move the box to the each side of the square</h4></button>
+ <button id="resetButton" onclick="reset()"><h3>Click to reset</h3></button>
+ </div>
+ <script src="./index.js"></script>
+ </body>
+</html>
@@ -0,0 +1,103 @@
+// function myMove () {
+// let pos = 0
+// const element = document.getElementById('inside')
+
+// const id = setInterval(frame, 10)
+
+// function frame () {
+// if (pos == 400) {
+// clearInterval(id)
+// }
+// pos++
+// element.style.top = pos + 'px'
+// element.style.left = pos++ + 'px'
+// }
+// }
+
+// More optimized code
+function moveDiagonally () {
+ let pos = 0
+ const element = document.getElementById('inside')
+ const resetButton = document.getElementById('resetButton')
+
+ const id = setInterval(() => {
+
+ resetButton.addEventListener('click', reset)
+
+ if (pos >= 400) {
+ clearInterval(id)
+ } else {
+ pos++
+ element.style.top = pos + 'px'
+ element.style.left = pos++ + 'px'
+ }
+ }, 10)
+
+ function reset () {
+ clearInterval(id) // Stop the animation
+ pos = 0
+ direction = 0
+ element.style.top = '0px'
+ element.style.left = '0px'
+ }
+
+ r
+}
+
+function moveAllFourSides () {
+ let pos = 0
+ let direction = 0
+ const element = document.getElementById('inside')
+ const resetButton = document.getElementById('resetButton')
+
+ const id = setInterval(frame, 10)
+
+ resetButton.addEventListener('click', reset)
+
+ switch (direction) {
+ case 0: // Move from top-left to top-right
+ if (pos >= 400) {
+ direction = 1
+ pos = 0
+ } else {
+ pos++
+ element.style.left = pos + 'px'
+ }
+ break
+ case 1: // Move from top-right to bottom-right
+ if (pos >= 400) {
+ direction = 2
+ pos = 0
+ } else {
+ pos++
+ element.style.top = pos + 'px'
+ }
+ break
+ case 2: // Move from bottom-right to bottom-left
+ if (pos >= 400) {
+ direction = 3
+ pos = 0
+ } else {
+ pos++
+ element.style.left = (400 - pos) + 'px'
+ }
+ break
+ case 3: // Move from bottom-left to top-left
+ if (pos >= 400) {
+ clearInterval(id)
+ reset()
+ } else {
+ pos++
+ element.style.top = (400 - pos) + 'px'
+ }
+ break
+ }
+}
+
+function reset () {
+ clearInterval(id) // Stop the animation
+ pos = 0
+ direction = 0
+ element.style.top = '0px'
+ element.style.left = '0px'
+}