diff --git a/.DS_Store b/.DS_Store
index 95c3b72..31c8fa2 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/images/.DS_Store b/images/.DS_Store
index f3d20dc..35883c4 100644
Binary files a/images/.DS_Store and b/images/.DS_Store differ
diff --git a/images/portfolio/.DS_Store b/images/portfolio/.DS_Store
index 75b0ee1..eca2d9c 100644
Binary files a/images/portfolio/.DS_Store and b/images/portfolio/.DS_Store differ
diff --git a/images/portfolio/row/.DS_Store b/images/portfolio/row/.DS_Store
index 80ab608..bb15407 100644
Binary files a/images/portfolio/row/.DS_Store and b/images/portfolio/row/.DS_Store differ
diff --git a/js/evt.css b/js/evt.css
new file mode 100644
index 0000000..9795f47
--- /dev/null
+++ 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;
+ }
+ */
\ No newline at end of file
diff --git a/js/evt.html b/js/evt.html
new file mode 100644
index 0000000..92d6303
--- /dev/null
+++ b/js/evt.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/evt.js b/js/evt.js
new file mode 100644
index 0000000..c2a3e69
--- /dev/null
+++ 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);
+
+// }
\ No newline at end of file
diff --git a/js/practice.js b/js/practice.js
index 5267dce..db2f513 100644
--- a/js/practice.js
+++ b/js/practice.js
@@ -246,6 +246,104 @@ console.log(secondAbra);
abra.innerHTML = `!!!!${secondAbra}`
abra.style.color ="red";
abra.textContent = "Whfkjdsxhfvkdjxfhgvc";
-const abraThird = String(abra.slice(4));
-//========================================
\ No newline at end of file
+//========================================
+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(`
+// Dynamic Content
+// You can set the content of the lightbox with JS.
+// `)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/target.css b/js/target.css
new file mode 100644
index 0000000..9a542da
--- /dev/null
+++ 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;
+ }
\ No newline at end of file
diff --git a/js/target.html b/js/target.html
new file mode 100644
index 0000000..8b0eec3
--- /dev/null
+++ b/js/target.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/practice.html b/practice.html
index d812a3a..4502fb0 100644
--- a/practice.html
+++ b/practice.html
@@ -563,10 +563,9 @@
-
-
+