Merge pull request #75 from TyronNIKO/fixing

Fixed mentor pointed error
TyronNIKO · Jul 12, 2024 · 35d42ee · 35d42ee
2 parents 76a3fe2 + 0d6cdeb
commit 35d42ee
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/src/css/glass.css b/src/css/glass.css
diff --git a/src/js/Glass.js b/src/js/Glass.js
@@ -1,32 +1,53 @@
 import '../css/glass.css';
 
-(() => {
+let resize = 0;
+console.log(resize);
+window.addEventListener('resize', () => {
+    let size = window.innerWidth;
+    // console.log(size, resize);
+    console.log(size % 50 == 0);
+
+    if (size % 25 == 0) {
+        //     resize = 375;
+        //     console.log(size, resize);
+        addGlassEffect();
+    }
+
+    // if (size < 375 && resize !== 375) {
+    //     resize = 375;
+    //     console.log(size, resize);
+    //     addGlassEffect();
+    // }
+    // if (size > 375 && size < 767 && resize !== 767) {
+    //     resize = 767;
+    //     console.log(size, resize);
+    //     addGlassEffect();
+    // }
+    // if (size > 768 && size < 1440 && resize !== 1440) {
+    //     resize = 1440;
+    //     console.log(size, resize);
+    //     addGlassEffect();
+    // }
+    // if (size > 1440 && resize !== 1441) {
+    //     resize = 1441;
+    //     console.log(size, resize);
+    //     addGlassEffect();
+    // }
+
+    // addGlassEffect();
+});
+
+function addGlassEffect() {
     const glassList = document.querySelectorAll('.glass');
     let count = 10;
     const globalOffset = 0;
     const offset = 5;
     const compensation = {
         width: 0,
     };
-    let innerWidth = window.innerWidth;
-
-    window.addEventListener('resize', () => {
-        innerWidth = window.innerWidth;
-        const mobileMenu = document.querySelector('.mobil-menu');
-        const isOpen = mobileMenu.classList.contains('is-open');
-        // console.log(innerWidth, isOpen);
 
-        if (isOpen) {
-            // console.log('is open');
-        }
-        if (375 < innerWidth && innerWidth < 768) {
-            // console.log(' Less 768');
-        }
-        if (768 < innerWidth && innerWidth < 1440) {
-            // console.log('Less 1440');
-        }
-    });
     glassList.forEach(glass => {
+        glass.innerHTML = '';
         if (innerWidth < 375) {
             // console.log('Less 375');
             glass.style.width = '90%';
@@ -43,20 +64,18 @@ import '../css/glass.css';
         if (768 < innerWidth && innerWidth < 1440) {
             // console.log('Less 1440');
         }
-        let elem = document.createElement('div');
         compensation.width = glass.clientWidth / count + offset;
-        // console.log(compensation);
-        elem.classList.add('glass-elem');
-        elem.style.width = `${compensation.width}px`;
+        let markup = '';
         for (let i = 0; i < count; i++) {
-            // for (let i = count - 1; i >= 0; i--) {
-            const clone = elem.cloneNode(true);
-            clone.style.left = `${compensation.width * i - offset * i}px`;
-            //   clone.style.left = `${compensation * i}px`;
-            glass.insertAdjacentElement('beforeend', clone);
+            let elem = `<div class="glass-elem" style="width:${
+                compensation.width
+            }px; left:${compensation.width * i - offset * i}px;"></div>`;
+            markup += elem;
         }
+        glass.insertAdjacentHTML('beforeend', markup);
         setTimeout(() => {
             glass.classList.add('active');
         }, 500);
     });
-})();
+}
+addGlassEffect();