-
Notifications
You must be signed in to change notification settings - Fork 414
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1190 from karthiknadar1204/main
Added dynamic iskcon events
- Loading branch information
Showing
8 changed files
with
205 additions
and
40 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| [ | ||
| { | ||
| "id": 1, | ||
| "image": "../Images/Govardhan.jpeg", | ||
| "heading": "Govardhana Puja", | ||
| "description": "Govardhana Puja is a festival celebrating the Govardhana lila of Lord Krishna. On this day, Go-Puja is also performed as part of the festival.", | ||
| "date": "Tue 14th November 2023", | ||
| "btnText": "Book Tickets", | ||
| "link": "https://www.iskconbangalore.org/govardhana-puja/", | ||
| "state": "Bangalore" | ||
| }, | ||
| { | ||
| "id": 2, | ||
| "image": "../Images/padmini.jpeg", | ||
| "heading": "Padmini Ekadashi", | ||
| "description": "The date of Padmini Ekadashi also comes only once every three years.", | ||
| "date": "Sat 29th July 2023", | ||
| "btnText": "Book Tickets", | ||
| "state": "Bangalore" | ||
| }, | ||
| { | ||
| "id": 3, | ||
| "image": "../Images/krishna_iskcon.jpeg", | ||
| "heading": "Sri Krishna Janmashtami", | ||
| "description": "Sri Krishna Janmashtami (August 19, 2022) is the most important festival to celebrate the birth of Lord Krishna.", | ||
| "date": "Sun 6th September 2023", | ||
| "btnText": "Book Tickets", | ||
| "link": "https://www.iskconbangalore.org/sri-krishna-janmashtami/", | ||
| "state": "Mumbai" | ||
| }, | ||
| { | ||
| "id": 4, | ||
| "image": "../Images/Jhulan.jpeg", | ||
| "heading": "Jhulan Utsava", | ||
| "description": "Jhulan utsava is celebrated for five days in the month of Shravana. Deities of Radha and Krishna are gently swayed on the swing.", | ||
| "date": "Sun 27th August 2023", | ||
| "btnText": "Book Tickets", | ||
| "link": "https://www.iskconbangalore.org/jhulan-utsava/", | ||
| "state": "Vellore" | ||
| }, | ||
| { | ||
| "id": 5, | ||
| "image": "../Images/Gita_Jayanti.jpeg", | ||
| "heading": "Gita Jayanti Mahotsava", | ||
| "description": "Gita Jayanti is the auspicious day of the advent of Srimad Bhagavad-gita. This is the day on which Lord Krishna imparted the essence of Vedic.", | ||
| "date": "Sat 23rd December 2023", | ||
| "btnText": "Book Tickets", | ||
| "link": "https://www.iskconbangalore.org/gita-jayanti/", | ||
| "state": "Delhi" | ||
| } | ||
| ] | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| function fetchData() { | ||
| return fetch('data.json') | ||
| .then(response => response.json()) | ||
| .catch(error => console.error('Error fetching data:', error)); | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const swiper = new Swiper('.swiper-container', { | ||
| slidesPerView: 'auto', | ||
| loop: true, | ||
| grabCursor: true, | ||
| pagination: { | ||
| el: '.swiper-pagination', | ||
| clickable: true, | ||
| }, | ||
| autoplay: { | ||
| delay: 5000, | ||
| disableOnInteraction: false, | ||
| }, | ||
| }); | ||
|
|
||
| let eventData; | ||
|
|
||
| fetchData().then(data => { | ||
| eventData = data; | ||
| createEventCards(data, swiper); | ||
| }); | ||
|
|
||
| const searchInput = document.querySelector('#search-bar'); | ||
| const searchButton = document.querySelector('#search-button'); | ||
|
|
||
| function handleSearch() { | ||
| const searchText = searchInput.value.toLowerCase(); | ||
| const filteredEvents = eventData.filter(event => event.state.toLowerCase().includes(searchText)); | ||
| updateEventCards(filteredEvents, swiper); | ||
| } | ||
|
|
||
| searchInput.addEventListener('input', handleSearch); | ||
| searchButton.addEventListener('click', handleSearch); | ||
| }); | ||
|
|
||
| function createEventCards(data, swiper) { | ||
| const eventCardsContainer = document.querySelector('.cards'); | ||
|
|
||
| data.forEach(event => { | ||
| createEventCard(event, swiper, eventCardsContainer); | ||
| }); | ||
|
|
||
| swiper.update(); | ||
| } | ||
|
|
||
| function createEventCard(event, swiper, container) { | ||
| const { image, heading, description, date, btnText, link, state } = event; | ||
|
|
||
| const card = document.createElement('div'); | ||
| card.classList.add('card', 'bg-indigo-600', 'w-[340px]', 'h-[480px]', 'p-4', 'text-slate-100', 'rounded-md', 'ease-in-out', 'duration-300', 'hover:shadow-2xl', 'hover:scale-110', 'flex', 'flex-col', 'justify-between', 'gap-y-5'); | ||
| card.style.marginRight = '20px'; | ||
| const imageElement = document.createElement('img'); | ||
| imageElement.src = image; | ||
| imageElement.alt = heading; | ||
| imageElement.classList.add('card-image', 'w-full', 'h-[210px]', 'rounded-md'); | ||
|
|
||
| const cardBody = document.createElement('div'); | ||
| cardBody.classList.add('card-body', 'flex', 'flex-col', 'justify-evenly', 'gap-y-4', 'text-sm', 'grow'); | ||
|
|
||
| const headingElement = document.createElement('p'); | ||
| headingElement.classList.add('card-title', 'text-center', 'font-semibold'); | ||
| headingElement.innerText = heading; | ||
|
|
||
| const descriptionElement = document.createElement('p'); | ||
| descriptionElement.innerText = description; | ||
|
|
||
| const dateElement = document.createElement('span'); | ||
| dateElement.classList.add('text-slate-400', 'font-semibold', 'text-xs'); | ||
| dateElement.innerText = date; | ||
|
|
||
| const btn = document.createElement('a'); | ||
| btn.href = link; | ||
| btn.target = "_blank"; | ||
| btn.classList.add('font-semibold', 'w-full', 'bg-emerald-500', 'py-3', 'text-center', 'uppercase', 'tracking-widest', 'ease-in-out', 'duration-300', 'hover:bg-indigo-900', 'rounded-md'); | ||
| btn.innerText = btnText; | ||
|
|
||
| const stateElement = document.createElement('span'); | ||
| stateElement.classList.add('text-slate-400', 'font-semibold', 'text-xs'); | ||
| stateElement.innerText = state; | ||
|
|
||
| cardBody.appendChild(headingElement); | ||
| cardBody.appendChild(descriptionElement); | ||
| cardBody.appendChild(dateElement); | ||
| cardBody.appendChild(stateElement); | ||
| cardBody.appendChild(btn); | ||
|
|
||
| card.appendChild(imageElement); | ||
| card.appendChild(cardBody); | ||
|
|
||
| container.appendChild(card); | ||
| swiper.appendSlide(card); | ||
| } | ||
|
|
||
| function updateEventCards(filteredEvents, swiper) { | ||
| const eventCardsContainer = document.querySelector('.cards'); | ||
| const allCards = eventCardsContainer.querySelectorAll('.card'); | ||
|
|
||
| allCards.forEach(card => { | ||
| card.style.display = 'none'; | ||
| }); | ||
|
|
||
| filteredEvents.forEach(event => { | ||
| const card = eventCardsContainer.querySelector(`[data-event-id="${event.id}"]`); | ||
| if (card) { | ||
| card.style.display = 'block'; | ||
| } else { | ||
| createEventCard(event, swiper, eventCardsContainer); | ||
| } | ||
| }); | ||
|
|
||
| swiper.update(); | ||
| } | ||
|
|