06/04/22

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 Javascript/09-arrys/HomeTasks/Dana/index.html
 Javascript/09-arrys/HomeTasks/Dana/index.ts
-node_modules
+node_modules/
 
 
 

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "liveServer.settings.port": 5503,
-    "compile-hero.disable-compile-files-on-did-save-code": true,
+    "compile-hero.disable-compile-files-on-did-save-code": false,
     "cSpell.words": [
         "moshe"
     ],
@@ -9,6 +9,6 @@
     "diffEditor.ignoreTrimWhitespace": false,
     "editor.trimAutoWhitespace": false,
     "editor.bracketPairColorization.enabled": true,
-    "files.autoSave": "onFocusChange",
+    "files.autoSave": "off",
     "editor.fontSize": 13,
 }

Javascript/09-arrys/01-basic/Example/dist/index.js

@@ -1,11 +1 @@
-var a = ["a", 34, "rt", multy, 12, "aaaa", 456];
-console.log(a);
-function multy(a, b) {
-    return a * b;
-}
-console.log(a[4]); //return the element in the n-th (4th, 5th) place (starting from 0)
-console.log(a[3](5, 5)); // invoke the function in the 4th place
-console.log(a.length);
-for (var i = 0; i < a.length; i++) {
-    (a[i]);
-}
+var arr = ["a", 34, "rt", 12, "aaaa", 456];

Javascript/09-arrys/01-basic/Example/index.ts

@@ -1,15 +1 @@
-const a: Array<any> = ["a", 34, "rt", multy, 12, "aaaa",456];
-console.log(a);
-
-function multy(a, b) {
-  return a * b;
-}
-
-console.log(a[4]); //return the element in the n-th (4th, 5th) place (starting from 0)
-
-console.log(a[3](5, 5)); // invoke the function in the 4th place
-console.log(a.length);
-
-for (let i = 0; i < a.length; i++) {
-  (a[i]);
-}
+const arr =  ["a", 34, "rt", 12, "aaaa",456];

Javascript/11-DOM-manipulations/flyingRocks/Bella/dist/dist/index.dev.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var wrapper1 = document.querySelectorAll('.wrapper1');
+console.dir(wrapper1);
+
+function meteor1() {
+  wrapper1 = document.querySelectorAll('.wrapper1');
+  setInterval(function () {
+    wrapper1.forEach(function (element) {
+      //console.log(listRandomNumber())
+      element.style.top = listRandomNumber();
+      element.style.left = listRandomNumber();
+      element.style.transform = "translate(" + listRandomNumber() + ", " + listRandomNumber() + ")"; //isOverlap()
+    });
+    wrapper1.forEach(function (elem) {
+      elem.onmouseover = mouseInv;
+      window.onclick = mouseHop; // elem.innerHTML += `<div class="wrapper1"> <img src="png_meteor_6537 (1).png" alt=""> </div>`;
+    });
+    isOverlap();
+  }, 2000); //setTimeout (meteor1,5000)
+}
+
+var x1 = 0;
+var y1 = 0;
+var right1 = 0;
+var bottom1 = 0;
+var x2 = 0;
+var y2 = 0;
+var right2 = 0;
+var bottom2 = 0;
+
+function isOverlap() {
+  for (var i = 0; i < wrapper1.length; i++) {
+    x1 = wrapper1[i].getBoundingClientRect().x;
+    right1 = wrapper1[i].getBoundingClientRect().right;
+    bottom1 = wrapper1[i].getBoundingClientRect().bottom;
+    y1 = wrapper1[i].getBoundingClientRect().y;
+
+    for (var j = i + 1; j < wrapper1.length; j++) {
+      x2 = wrapper1[j].getBoundingClientRect().x;
+      right2 = wrapper1[j].getBoundingClientRect().right;
+      bottom2 = wrapper1[j].getBoundingClientRect().bottom;
+      y2 = wrapper1[j].getBoundingClientRect().y;
+
+      if (x1 > x2 && x1 < right2 && y1 > y2 && y1 < bottom2) {
+        console.log("overlap");
+      }
+    }
+  }
+}
+
+function listRandomNumber() {
+  var randomPX = Math.floor(Math.random() * 250);
+  return randomPX + "px";
+}
+
+meteor1();
+
+function mouseInv(ev) {
+  ev.target.style.opacity = 0;
+  meteor1();
+}
+
+function mouseHop(ev) {
+  document.body.innerHTML += "<div class=\"wrapper1\"><img src=\"png_meteor_6537 (1).png\" alt=\"\"></div>";
+  meteor1();
+}

Javascript/11-DOM-manipulations/flyingRocks/Bella/dist/index.js

@@ -1,33 +1,59 @@
-// function moveObj() {
-//     const $span = $(".spaceRock");
-//     $span.animate([
-//         // keyframes
-//         { transform: 'translateY(100vh)' },
-//         { transform: 'translateX(100vw)' }
-//       ], function() {
-//         let maxLeft = $(window).width() - $span.width();
-//         let maxTop = $(window).height() - $span.height();
-//         let leftPos = Math.floor(Math.random() * (maxLeft + 10))
-//         let topPos = Math.floor(Math.random() * (maxTop + 10))
-//         $span.css({ left: leftPos, top: topPos });
-//     });
-// };
-// moveObj();
-// setInterval(moveObj,100);
-var spaceRocks = document.querySelectorAll('.spaceRock');
-spaceRocks.forEach(function (element) {
-    element.style.left = getRandomPosition();
-    element.style.top = getRandomPosition();
-});
-function getRandomPosition() {
-    var element = (((Math.random() * 800) + 60).toFixed()) + 'px';
-    console.dir(element);
-    return element;
+var wrapper1 = document.querySelectorAll('.wrapper1');
+console.dir(wrapper1);
+function meteor1() {
+    wrapper1 = document.querySelectorAll('.wrapper1');
+    setInterval(function () {
+        wrapper1.forEach(function (element) {
+            //console.log(listRandomNumber())
+            element.style.top = listRandomNumber();
+            element.style.left = listRandomNumber();
+            element.style.transform = "translate(" + listRandomNumber() + ", " + listRandomNumber() + ")";
+            //isOverlap()
+        });
+        wrapper1.forEach(function (elem) {
+            elem.onmouseover = mouseInv;
+            window.onclick = mouseHop;
+            // elem.innerHTML += `<div class="wrapper1"> <img src="png_meteor_6537 (1).png" alt=""> </div>`;
+        });
+        isOverlap();
+    }, 2000);
+    //setTimeout (meteor1,5000)
 }
-getRandomPosition();
-setInterval(function () {
-    for (var i = 0; i < spaceRocks.length; i++) {
-        spaceRocks.style.top = getRandomPosition() + "px";
-        spaceRocks.style.left = getRandomPosition() + "px";
+var x1 = 0;
+var y1 = 0;
+var right1 = 0;
+var bottom1 = 0;
+var x2 = 0;
+var y2 = 0;
+var right2 = 0;
+var bottom2 = 0;
+function isOverlap() {
+    for (var i = 0; i < wrapper1.length; i++) {
+        x1 = wrapper1[i].getBoundingClientRect().x;
+        right1 = wrapper1[i].getBoundingClientRect().right;
+        bottom1 = wrapper1[i].getBoundingClientRect().bottom;
+        y1 = wrapper1[i].getBoundingClientRect().y;
+        for (var j = i + 1; j < wrapper1.length; j++) {
+            x2 = wrapper1[j].getBoundingClientRect().x;
+            right2 = wrapper1[j].getBoundingClientRect().right;
+            bottom2 = wrapper1[j].getBoundingClientRect().bottom;
+            y2 = wrapper1[j].getBoundingClientRect().y;
+            if (x1 > x2 && x1 < right2 && y1 > y2 && y1 < bottom2) {
+                console.log("overlap");
+            }
+        }
     }
-}, 1000);
+}
+function listRandomNumber() {
+    var randomPX = Math.floor(Math.random() * 250);
+    return randomPX + "px";
+}
+meteor1();
+function mouseInv(ev) {
+    ev.target.style.opacity = 0;
+    meteor1();
+}
+function mouseHop(ev) {
+    document.body.innerHTML += "<div class=\"wrapper1\"><img src=\"png_meteor_6537 (1).png\" alt=\"\"></div>";
+    meteor1();
+}

Javascript/11-DOM-manipulations/flyingRocks/Bella/dist/style.css

@@ -1,17 +1,25 @@
-span {
+body {
+  margin: 0%;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  background-image: url(https://www.nlspacecampus.eu/cache/3/1920x1080/mob-shutterstock-481251031-20210610135721_1920x1080.jpg);
+}
+
+.wrapper1 {
+  transition: all 4000ms ease-in-out;
+  animation-name: rotate360;
+  height: 10vh;
+  position: relative;
   display: inline-block;
-  position: absolute;
-  transition: all 1000ms ease-in-out;
+  transition: all 2s;
 }
-span img {
-  width: 100%;
+.wrapper1 img {
   height: 100%;
-  /* ENDLESS ROTATE */
-  animation: rotate 4s linear infinite;
-  width: 24vw;
-  height: 24vh;
+  animation: 5s rotate360 infinite linear;
 }
-@keyframes rotate {
+
+@keyframes rotate360 {
   to {
     transform: rotate(360deg);
   }

Javascript/11-DOM-manipulations/flyingRocks/Bella/index.html

@@ -6,43 +6,34 @@
     <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="./dist/style.css">
+    <link rel="stylesheet" href="dist/style.css">
 </head>
 
 <body>
+    <div class="wrapper1" id="move" >
+        <img src="png_meteor_6537 (1).png" alt="">
+    </div>
+    <div class="wrapper1" id="move">
+        <img src="png_meteor_6537 (1).png" alt="">
+    </div>
 
-    <!-- <div class="flier">
+    <div class="wrapper1" id="move">
         <img src="png_meteor_6537 (1).png" alt="">
     </div>
-    <div class="flier">
+    <div class="wrapper1" id="move">
         <img src="png_meteor_6537 (1).png" alt="">
     </div>
-    <div class="flier">
+
+    <div class="wrapper1" id="move">
         <img src="png_meteor_6537 (1).png" alt="">
     </div>
-    <div class="flier">
+    <div class="wrapper1" id="move">
         <img src="png_meteor_6537 (1).png" alt="">
-    </div> -->
-
-
-    <div class="container">
-        <span class="spaceRock">
-            <img src="png_meteor_6537 (1).png">
-        </span>
-        <span class="spaceRock">
-            <img src="png_meteor_6537 (1).png">
-        </span>
-        <span class="spaceRock">
-            <img src="png_meteor_6537 (1).png">
-        </span>
-        <span class="spaceRock">
-            <img src="png_meteor_6537 (1).png">
-        </span>
     </div>
 
+</div>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="./dist/index.js"></script>
+<script src="dist/index.js"></script>
 
 </body>