-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
187 lines (169 loc) · 5.15 KB
/
main.js
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
const nftContainer = document.getElementById('nft-container');
const faqContainer = document.querySelector('.questions-container');
let filterInput = document.getElementById('filterInput');
let nftString = '';
let faqString = '';
const nfts = [
{
name: 'RED CROWN KING',
assetID: '#0001',
price: '500.00',
img: 'images/crown1.png',
category: 'Kings',
},
{
name: 'RED CROWN QUEEN',
assetID: '#0002',
price: '250.00',
img: 'images/crown2.png',
category: 'Queens',
},
{
name: 'RED CROWN JACK',
assetID: '#0003',
price: '600.00',
img: 'images/crown3.png',
category: 'Jacks',
},
{
name: 'BLUE CROWN KING',
assetID: '#0004',
price: '800.00',
img: 'images/crown4.png',
category: 'Kings',
},
{
name: 'BLUE CROWN QUEEN',
assetID: '#0005',
price: '670.00',
img: 'images/crown5.png',
category: 'Queens',
},
{
name: 'BLUE CROWN JACK',
assetID: '#0006',
price: '750.00',
img: 'images/crown6.png',
category: 'Jacks',
},
];
const faqs = [
{
question: 'What is Castle?',
description:
'Castle is a collection of crowns designed by Ian Broqueza and minted as NFTs. They are inspired from various suits of card, from King, Queen, Jack, Ace and the Numbers. Each has different races that distinguishes its uniqueness. Grab your crown now!',
},
{
question: 'How to get a Crown?',
description:
'Castle is a collection of crowns designed by Ian Broqueza and minted as NFTs. They are inspired from various suits of card, from King, Queen, Jack, Ace and the Numbers. Each has different races that distinguishes its uniqueness. Grab your crown now!',
},
{
question: 'How to get listed?',
description:
'Castle is a collection of crowns designed by Ian Broqueza and minted as NFTs. They are inspired from various suits of card, from King, Queen, Jack, Ace and the Numbers. Each has different races that distinguishes its uniqueness. Grab your crown now!',
},
];
for (let item of nfts) {
nftString += `
<div id="nft-cards">
<div class="nft-card ${item.category}">
<img class="nft-image" src="${item.img}" alt="crown-nft" />
<span class="tag new">NEW</span>
<span class="basket">
<ion-icon name="basket"></ion-icon>
</span>
<div class="nft-description">
<div class="nft-name">
<a href="nft-info.html">${item.name} <span class="assetID">${item.assetID}</span></a>
</div>
<div class="nft-price">₱ ${item.price} <button class="heart "><ion-icon class="heart-active" name="heart-outline"></ion-icon></button></div>
</div>
</div>
</div>
`;
nftContainer.innerHTML = nftString;
}
for (let faq of faqs) {
faqString += `
<div class="question">
<button class="btn-accord">
<span> ${faq.question} </span>
<i class="fas fa-chevron-up"></i>
</button>
<p>
${faq.description}
</p>
</div>
`;
// console.log(faq.question);
faqContainer.innerHTML = faqString;
}
// console.log(nftContainer);
// console.log(faqString);
console.log(faqContainer);
// Functions
// Faq Section
const accordButtons = document.querySelectorAll('.btn-accord');
accordButtons.forEach((button) => {
button.addEventListener('click', () => {
const para = button.nextElementSibling;
const icon = button.children[1];
para.classList.toggle('show');
icon.classList.toggle('rotate');
});
});
// Filter
// Buttons
function filterProduct(value) {
//Button class code
let buttons = document.querySelectorAll('.filter-value');
buttons.forEach((button) => {
//check if value equals innerText
if (value.toUpperCase() == button.innerText.toUpperCase()) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
//select all cards
let elements = document.querySelectorAll('.nft-card');
//loop through all cards
elements.forEach((element) => {
//display all cards on 'all' button click
if (value == 'all') {
element.classList.remove('hide');
} else {
//Check if element contains category class
if (element.classList.contains(value)) {
//display element based on category
element.classList.remove('hide');
} else {
//hide other elements
element.classList.add('hide');
}
}
});
}
//Search button click
document.getElementById('search').addEventListener('click', () => {
//initializations
let searchInput = document.getElementById('search-input').value;
let elements = document.querySelectorAll('.nft-name');
let cards = document.querySelectorAll('.nft-card');
//loop through all elements
elements.forEach((element, index) => {
//check if text includes the search value
if (element.innerText.includes(searchInput.toUpperCase())) {
//display matching card
cards[index].classList.remove('hide');
} else {
//hide others
cards[index].classList.add('hide');
}
});
});
//Initially display all products
window.onload = () => {
filterProduct('all');
};