File size: 1,801 Bytes
03c0050 |
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 |
// search and filter functionality
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput')
const sectorFilter = document.getElementById('sectorFilter')
const stockCards = document.querySelectorAll('.stock-card')
function filterStocks() {
const searchTerm = searchInput.value.toLowerCase()
const selectedSector = sectorFilter.value
stockCards.forEach(card => {
const stockCode = card.querySelector('h3').textContent.toLowerCase()
const companyName = card.querySelector('p').textContent.toLowerCase()
const sector = card.dataset.sector
const performance = card.dataset.performance
const matchesSearch = stockCode.includes(searchTerm) || companyName.includes(searchTerm)
const matchesSector = !selectedSector || sector === selectedSector
if (matchesSearch && matchesSector) {
card.style.display = 'block'
card.style.animation = 'fadeIn 0.5s ease-in-out'
} else {
card.style.display = 'none'
}
})
}
searchInput.addEventListener('input', filterStocks)
sectorFilter.addEventListener('change', filterStocks)
// loading animation
setTimeout(() => {
document.querySelectorAll('.loading').forEach(element => {
element.classList.remove('loading')
element.classList.add('loaded')
})
}, 300)
// add hover effects to cards
stockCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-8px) scale(1.02)'
})
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(-8px) scale(1)'
})
})
// smooth scroll behavior
document.documentElement.style.scrollBehavior = 'smooth'
})
|