add site

VladimirSaenko · Mar 21, 2021 · bb48c0a · bb48c0a
1 parent 04b83b2
commit bb48c0a
Show file tree

Hide file tree

Showing 25 changed files with 700 additions and 0 deletions.
diff --git a/images/camera1.jpg b/images/camera1.jpg
diff --git a/images/camera2.jpg b/images/camera2.jpg
diff --git a/images/camera3.jpg b/images/camera3.jpg
diff --git a/images/headphone1.jpg b/images/headphone1.jpg
diff --git a/images/headphone2.jpg b/images/headphone2.jpg
diff --git a/images/headphone3.jpg b/images/headphone3.jpg
diff --git a/images/headphone4.jpg b/images/headphone4.jpg
diff --git a/images/icon.png b/images/icon.png
diff --git a/images/mobile1.jpg b/images/mobile1.jpg
diff --git a/images/mobile2.jpg b/images/mobile2.jpg
diff --git a/images/mobile3.jpg b/images/mobile3.jpg
diff --git a/images/mobile4.jpg b/images/mobile4.jpg
diff --git a/images/mobile5.jpg b/images/mobile5.jpg
diff --git a/images/shoe1.jpg b/images/shoe1.jpg
diff --git a/images/shoe2.jpg b/images/shoe2.jpg
diff --git a/images/shoe3.jpg b/images/shoe3.jpg
diff --git a/images/shoe4.jpg b/images/shoe4.jpg
diff --git a/images/watch1.jpg b/images/watch1.jpg
diff --git a/images/watch2.jpg b/images/watch2.jpg
diff --git a/images/watch3.jpg b/images/watch3.jpg
diff --git a/images/watch4.jpg b/images/watch4.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Filter-Images-example</title>
+    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <ul class="filter-menu">
+            <li>All</li>
+            <li>Camera</li>
+            <li>Headphone</li>
+            <li>Mobile</li>
+            <li>Shoe</li>
+            <li>Watch</li>
+        </ul>
+        <div class="product">
+            <div class="itemBox" data-item="camera">
+                <img src="images/camera1.jpg" alt="camera1"></img>
+            </div>
+            <div class="itemBox" data-item="camera">
+                <img src="images/camera2.jpg" alt="camera1"></img>
+            </div>
+            <div class="itemBox" data-item="camera">
+                <img src="images/camera3.jpg" alt="camera1"></img>
+            </div>
+            <div class="itemBox" data-item="headphone">
+                <img src="images/headphone1.jpg" alt="headphone1"></img>
+            </div>
+            <div class="itemBox" data-item="headphone">
+                <img src="images/headphone2.jpg" alt="headphone2"></img>
+            </div>
+            <div class="itemBox" data-item="headphone">
+                <img src="images/headphone3.jpg" alt="headphone3"></img>
+            </div>
+            <div class="itemBox" data-item="headphone">
+                <img src="images/headphone4.jpg" alt="headphone4"></img>
+            </div>
+            <div class="itemBox" data-item="mobile">
+                <img src="images/mobile1.jpg" alt="mobile1"></img>
+            </div>
+            <div class="itemBox" data-item="mobile">
+                <img src="images/mobile2.jpg" alt="mobile2"></img>
+            </div>
+            <div class="itemBox" data-item="mobile">
+                <img src="images/mobile3.jpg" alt="mobile3"></img>
+            </div>
+            <div class="itemBox" data-item="mobile">
+                <img src="images/mobile4.jpg" alt="mobile4"></img>
+            </div>
+            <div class="itemBox" data-item="mobile">
+                <img src="images/mobile5.jpg" alt="mobile5"></img>
+            </div>
+            <div class="itemBox" data-item="shoe">
+                <img src="images/shoe1.jpg" alt="shoe1"></img>
+            </div>
+            <div class="itemBox" data-item="shoe">
+                <img src="images/shoe2.jpg" alt="shoe2"></img>
+            </div>
+            <div class="itemBox" data-item="shoe">
+                <img src="images/shoe3.jpg" alt="shoe3"></img>
+            </div>
+            <div class="itemBox" data-item="shoe">
+                <img src="images/shoe4.jpg" alt="shoe4"></img>
+            </div>
+            <div class="itemBox" data-item="watch">
+                <img src="images/watch1.jpg" alt="watch1"></img>
+            </div>
+            <div class="itemBox" data-item="watch">
+                <img src="images/watch2.jpg" alt="watch2"></img>
+            </div>
+            <div class="itemBox" data-item="watch">
+                <img src="images/watch3.jpg" alt="watch3"></img>
+            </div>
+            <div class="itemBox" data-item="watch">
+                <img src="images/watch4.jpg" alt="watch4"></img>
+            </div>
+        </div>
+    </div>
+    <script src="scripts/filterscript.js"></script>
+    <script src="scripts/vanilla-tilt.js"></script>
+    <script type="text/javascript">
+        VanillaTilt.init(document.querySelectorAll(".product .itemBox"), {
+            max: 15,
+            speed: 400,
+            glare: true,
+            "max-glare": 1
+        });
+        //It also supports NodeList
+        // VanillaTilt.init(document.querySelectorAll(".your-element"));
+    </script>
+</body>
+</html>
diff --git a/scripts/filterscript.js b/scripts/filterscript.js
@@ -0,0 +1,23 @@
+
+"use strict"
+
+const liItem = document.querySelectorAll('.filter-menu li');
+const imgItem = document.querySelectorAll('.product .itemBox');
+
+liItem.forEach(li => {
+    li.onclick = () => {
+        liItem.forEach(other => {
+            other.className = "";
+        })
+        li.className = "active";
+        const value = li.textContent;
+        imgItem.forEach(img => {
+            img.classList.add("delete");
+            img.classList.remove("active");
+            if(img.getAttribute('data-item') == value.toLowerCase() || value == "All") {
+                img.classList.add("active");
+                img.classList.remove("delete");
+            }
+        })
+    }
+})