add

MariiaSam · Aug 8, 2023 · dd7c1c3 · dd7c1c3
1 parent 973ce91
commit dd7c1c3
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 4 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/portfolio/.DS_Store b/images/portfolio/.DS_Store
diff --git a/images/portfolio/row/.DS_Store b/images/portfolio/row/.DS_Store
diff --git a/js/evt.css b/js/evt.css
@@ -0,0 +1,53 @@
+.box {
+  width: 100px;
+  height: 100px;
+}
+
+.container {
+  display: flex;
+  justify-content: space-around;
+}
+
+.item-black {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  padding: 10px;
+  border: 2px solid black;
+}
+
+.item-green {
+  width: 70px;
+  height: 70px;
+  background-color: green;
+  padding: 10px;
+  border: 2px solid black;
+}
+
+.item-red {
+  background-color: red;
+  padding: 10px;
+  border: 2px solid black;
+}
+
+
+/* 
+ul {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 20px;
+    user-select: none;
+    list-style: none;
+  }
+  
+  .item {
+    width: 300px;
+    border: 1px solid black;
+  }
+  
+  
+  .modal{
+      background-color: white;
+  }
+   */
diff --git a/js/evt.html b/js/evt.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./evt.css">
+</head>
+<body>
+    <div class="container js-box">
+        <button type="button" class="js-button js-box-1  item-red"  data-color="red"  > Red</button>
+        <button type="button" class="js-button js-box-2 item-blue"   data-color="blue" >Blue</button>
+        <button type="button" class="js-button js-box-3 item-green"  data-color="green">Green</button>
+
+    </div>
+    <script src="./evt.js"></script>
+</body>
+</html>
diff --git a/js/evt.js b/js/evt.js
@@ -0,0 +1,24 @@
+const box = document.querySelector('.js-box');
+console.log(box);
+const jsButton = document.querySelectorAll('.js-button')
+
+box.addEventListener('click', handlerBox);
+
+function handlerBox(evt) {
+if (evt.currentTarget === evt.target){
+    return;
+} 
+
+if (!evt.target.classList.contains('.js-button')){
+return;
+}
+console.log(evt.target);
+}
+
+// jsButton.addEventListener('click', handlerButton);
+
+// function handlerButton(evt) {
+
+//     console.log(evt.target);
+
+//     }
diff --git a/js/practice.js b/js/practice.js
@@ -246,6 +246,104 @@ console.log(secondAbra);
 abra.innerHTML = `<span>!!!!${secondAbra}</span>`
 abra.style.color ="red";
 abra.textContent = "Whfkjdsxhfvkdjxfhgvc";
-const abraThird = String(abra.slice(4));
 
-//======================================== 
+//======================================== 
+const container = document.querySelector('.js-container');
+// // const box = document.querySelector('.js-box')
+// [...container.children].forEach((box) => {
+//     box.addEventListener('click', handlerClick)
+// })
+
+// function handlerClick(evt) {
+//     console.log(evt.currentTarget);
+// }
+
+container.addEventListener('click', handlerClick)
+
+function handlerClick(evt) {
+    // console.log('currentTarget', evt.currentTarget);
+    // if (evt.currentTarget === evt.target) {
+    //     return;
+    // }
+
+    if (!evt.target.classList.contains('js-box')) {
+        return;
+    }
+    console.log('target', evt.target);
+}
+
+// box.addEventListener('click', handlerClick);
+// box.addEventListener('click', handlerClick1);
+// box.addEventListener('click', handlerClick2);
+
+// function handlerClick(evt) {
+//     console.log(evt.target);
+//     evt.stopImmediatePropagation();
+//     evt.stopPropagation()
+//     console.log('fn1');
+// }
+
+// function handlerClick1(evt) {
+//     console.log(evt.target);
+
+//     console.log('fn2');
+// }
+// function handlerClick2(evt) {
+//     console.log(evt.target);
+//     console.log('fn3');
+// }
+
+
+// const box1 = document.querySelector('.js-box-1')
+// const box2 = document.querySelector('.js-box-2')
+// const box3 = document.querySelector('.js-box-3')
+
+
+// box1.addEventListener('click', handlerClick1)
+// box2.addEventListener('click', handlerClick2)
+// box3.addEventListener('click', handlerClick3)
+
+
+
+// function handlerClick1() {
+//     console.log("box - 1");
+// }
+// function handlerClick2(evt) {
+//     console.log("box - 2");
+//     // evt.stopPropagation();
+// }
+// function handlerClick3(evt) {
+//     console.log("box - 3");
+// }
+
+
+// const instance = basicLightbox.create(`
+// 	<h1>Dynamic Content</h1>
+// 	<p>You can set the content of the lightbox with JS.</p>
+// `)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/target.css b/js/target.css
@@ -0,0 +1,44 @@
+.box {
+  width: 100px;
+  height: 100px;
+}
+
+.container {
+  display: flex;
+  justify-content: space-around;
+}
+
+.item-black {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+}
+
+.item-green {
+  width: 70px;
+  height: 70px;
+  background-color: green;
+}
+
+.item-red {
+  background-color: red;
+}
+
+ul {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 20px;
+    user-select: none;
+    list-style: none;
+  }
+
+  .item {
+    width: 300px;
+    border: 1px solid black;
+  }
+
+
+  .modal{
+      background-color: white;
+  }
diff --git a/js/target.html b/js/target.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="target.css">
+</head>
+<body>
+
+     <d class="container js-container">
+      <div class="box js-box js-box-1 item-red" data-color="red"></div>
+      <div class="box js-box js-box-3 item-black" data-color="black"></div>
+      <div class="box js-box js-box-2 item-green" data-color="green"></div>
+    </d iv> 
+     <ul class="js-products"></ul> 
+    <h1 class="js-title"></h1>
+    <div id="controls">
+      <input type="number" min="1" max="100" step="1" class="js-input" />
+      <button type="button" class="js-create">Create</button>
+      <button type="button" class="js-destroy">Destroy</button>
+    </div>
+
+    <div id="boxes"></div>
+<script src="js/practice.js"></script>
+
+</body>
+</html>
diff --git a/practice.html b/practice.html
@@ -563,10 +563,9 @@ <h1 class="titleInputTest">Hello, <span id="name-output">Anonymous</span>!</h1>
 </div>
 
 
-
-
 </section>
 
+
     </main>
 
 <!--Footer-->
-Original file line number
+Diff line change
@@ Expand Up @@
     </div>
     </section>
         </main>
     <!--Footer-->
@@ Expand Down @@