Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
script.js 2.39 KB
Newer Older
Teo Ackovski's avatar
project 1 final upload  
Teo Ackovski committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69 
        document.querySelector("#filter-coding").addEventListener("change", filterCoding);
        document.querySelector("#filter-design").addEventListener("change", filterDesign);
        document.querySelector("#filter-marketing").addEventListener("change", filterMarketing);
        

        function filterCoding() {
            hideAllCards();

            if(document.querySelector("#filter-coding").checked) {
                var codingCards = document.querySelectorAll(".coding");
                codingCards.forEach(codingCard => {
                    codingCard.style.display = "inline-block";
                });

                document.querySelector("#filter-design").checked = false;
                document.querySelector("#filter-marketing").checked = false;
            } else {
                showAllCards();
            }
        }

        function filterDesign() {
            hideAllCards();

            if(document.querySelector("#filter-design").checked) {
                var designCards = document.querySelectorAll(".design");
                designCards.forEach(designCard => {
                    designCard.style.display = "inline-block";
                });

                document.querySelector("#filter-coding").checked = false;
                document.querySelector("#filter-marketing").checked = false;
            } else {
                showAllCards();
            }
        }

        function filterMarketing() {
            hideAllCards();

            if(document.querySelector("#filter-marketing").checked) {
                var marketingCards = document.querySelectorAll(".marketing");
                marketingCards.forEach(marketingCard => {
                    marketingCard.style.display = "inline-block";
                });

                document.querySelector("#filter-design").checked = false;
                document.querySelector("#filter-coding").checked = false;
            } else {
                showAllCards();
            }
        }
       

        function hideAllCards() {
            var allCards = document.querySelectorAll(".card");  

            allCards.forEach(card => {
                card.style.display = "none";
            });
        }

        function showAllCards() {
            var allCards = document.querySelectorAll(".card");  

            allCards.forEach(card => {
                card.style.display = "inline-block";
            });
        }