diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 7d38b84..0b94fc8 100644 --- a/README.md +++ b/README.md @@ -1 +1,7 @@ -# project-library \ No newline at end of file +# project-library + +This project is a digital library built using an array of data collections. It includes features for filtering, sorting, and random selection of items. The page is responsive, adapting well to mobile, tablet, and desktop views. + + +## Live demo: +https://jojolialbumlibrary.netlify.app/ diff --git a/album-images/Beyonce_-_Lemonade_(Official_Album_Cover).png b/album-images/Beyonce_-_Lemonade_(Official_Album_Cover).png new file mode 100644 index 0000000..8755370 Binary files /dev/null and b/album-images/Beyonce_-_Lemonade_(Official_Album_Cover).png differ diff --git "a/album-images/Beyonc\303\251_-_Cowboy_Carter.png" "b/album-images/Beyonc\303\251_-_Cowboy_Carter.png" new file mode 100644 index 0000000..06981ad Binary files /dev/null and "b/album-images/Beyonc\303\251_-_Cowboy_Carter.png" differ diff --git a/album-images/CorpseBride.jpg b/album-images/CorpseBride.jpg new file mode 100644 index 0000000..20e4aa4 Binary files /dev/null and b/album-images/CorpseBride.jpg differ diff --git a/album-images/Dangerously_In_Love_Album(2003).png b/album-images/Dangerously_In_Love_Album(2003).png new file mode 100644 index 0000000..50a81db Binary files /dev/null and b/album-images/Dangerously_In_Love_Album(2003).png differ diff --git a/album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg b/album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg new file mode 100644 index 0000000..05e3e24 Binary files /dev/null and b/album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg differ diff --git a/album-images/Encore_(Eminem_album)_coverart.jpg b/album-images/Encore_(Eminem_album)_coverart.jpg new file mode 100644 index 0000000..cd38493 Binary files /dev/null and b/album-images/Encore_(Eminem_album)_coverart.jpg differ diff --git a/album-images/HarrypotterPSsoundtrack.jpg b/album-images/HarrypotterPSsoundtrack.jpg new file mode 100644 index 0000000..87a3f09 Binary files /dev/null and b/album-images/HarrypotterPSsoundtrack.jpg differ diff --git a/album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg b/album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg new file mode 100644 index 0000000..a7385c2 Binary files /dev/null and b/album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg differ diff --git a/album-images/Jurassicpark-1-.jpg b/album-images/Jurassicpark-1-.jpg new file mode 100644 index 0000000..615f628 Binary files /dev/null and b/album-images/Jurassicpark-1-.jpg differ diff --git a/album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg b/album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg new file mode 100644 index 0000000..19df903 Binary files /dev/null and b/album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg differ diff --git a/album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg b/album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg new file mode 100644 index 0000000..a939bfa Binary files /dev/null and b/album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg differ diff --git a/album-images/Minutes_to_Midnight_cover.jpg b/album-images/Minutes_to_Midnight_cover.jpg new file mode 100644 index 0000000..dc2a947 Binary files /dev/null and b/album-images/Minutes_to_Midnight_cover.jpg differ diff --git a/album-images/PearlJam-Ten2.jpg b/album-images/PearlJam-Ten2.jpg new file mode 100644 index 0000000..7248e5a Binary files /dev/null and b/album-images/PearlJam-Ten2.jpg differ diff --git a/album-images/PearlJamVitalogy.jpg b/album-images/PearlJamVitalogy.jpg new file mode 100644 index 0000000..33809b8 Binary files /dev/null and b/album-images/PearlJamVitalogy.jpg differ diff --git a/album-images/Taylor_Swift_-_Lover.png b/album-images/Taylor_Swift_-_Lover.png new file mode 100644 index 0000000..17a4306 Binary files /dev/null and b/album-images/Taylor_Swift_-_Lover.png differ diff --git a/album-images/Taylor_Swift_-_Taylor_Swift.png b/album-images/Taylor_Swift_-_Taylor_Swift.png new file mode 100644 index 0000000..664b435 Binary files /dev/null and b/album-images/Taylor_Swift_-_Taylor_Swift.png differ diff --git a/album-images/header-image.jpg b/album-images/header-image.jpg new file mode 100644 index 0000000..ae7dfd7 Binary files /dev/null and b/album-images/header-image.jpg differ diff --git a/album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png b/album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png new file mode 100644 index 0000000..3cc25fd Binary files /dev/null and b/album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png differ diff --git a/album-images/png-transparent-github-git-hub-logo-icon-thumbnail.png b/album-images/png-transparent-github-git-hub-logo-icon-thumbnail.png new file mode 100644 index 0000000..17b1f07 Binary files /dev/null and b/album-images/png-transparent-github-git-hub-logo-icon-thumbnail.png differ diff --git a/album-images/queen-innuendo.jpg b/album-images/queen-innuendo.jpg new file mode 100644 index 0000000..32d19e3 Binary files /dev/null and b/album-images/queen-innuendo.jpg differ diff --git a/album-images/queen-opera.jpg b/album-images/queen-opera.jpg new file mode 100644 index 0000000..2fb5271 Binary files /dev/null and b/album-images/queen-opera.jpg differ diff --git a/album-images/queen-queenII.jpg b/album-images/queen-queenII.jpg new file mode 100644 index 0000000..c2e14f5 Binary files /dev/null and b/album-images/queen-queenII.jpg differ diff --git a/album-images/stevie-wonder-sitkol.jpg b/album-images/stevie-wonder-sitkol.jpg new file mode 100644 index 0000000..18eedc9 Binary files /dev/null and b/album-images/stevie-wonder-sitkol.jpg differ diff --git a/books-images/1984.jpg b/books-images/1984.jpg deleted file mode 100644 index d3b39aa..0000000 Binary files a/books-images/1984.jpg and /dev/null differ diff --git a/books-images/harry-potter-and-the-sorcerer.jpg b/books-images/harry-potter-and-the-sorcerer.jpg deleted file mode 100644 index 05d8a24..0000000 Binary files a/books-images/harry-potter-and-the-sorcerer.jpg and /dev/null differ diff --git a/books-images/moby-dick.jpg b/books-images/moby-dick.jpg deleted file mode 100644 index 20a5ac9..0000000 Binary files a/books-images/moby-dick.jpg and /dev/null differ diff --git a/books-images/pride-and-prejudice.jpg b/books-images/pride-and-prejudice.jpg deleted file mode 100644 index 6460748..0000000 Binary files a/books-images/pride-and-prejudice.jpg and /dev/null differ diff --git a/books-images/the-chronicles-of-narnia.jpg b/books-images/the-chronicles-of-narnia.jpg deleted file mode 100644 index e1848c2..0000000 Binary files a/books-images/the-chronicles-of-narnia.jpg and /dev/null differ diff --git a/books-images/the-great-gatsby.jpg b/books-images/the-great-gatsby.jpg deleted file mode 100644 index 04d0aee..0000000 Binary files a/books-images/the-great-gatsby.jpg and /dev/null differ diff --git a/books-images/the-hobbit.jpg b/books-images/the-hobbit.jpg deleted file mode 100644 index bbf7dde..0000000 Binary files a/books-images/the-hobbit.jpg and /dev/null differ diff --git a/books-images/the-lord-of-the-rings.jpg b/books-images/the-lord-of-the-rings.jpg deleted file mode 100644 index 3823218..0000000 Binary files a/books-images/the-lord-of-the-rings.jpg and /dev/null differ diff --git a/books-images/to-kill-a-mockingbird.jpg b/books-images/to-kill-a-mockingbird.jpg deleted file mode 100644 index 20fadb4..0000000 Binary files a/books-images/to-kill-a-mockingbird.jpg and /dev/null differ diff --git a/books-images/unknown.jpg b/books-images/unknown.jpg deleted file mode 100644 index 3de71e8..0000000 Binary files a/books-images/unknown.jpg and /dev/null differ diff --git a/index.html b/index.html index cf5c31a..a117258 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,115 @@ + - - Project Library + + + Album Library + -

Project Library

- +
+
+
+

Album Library

+
+
+ + +
+ + + + +
+ × +

Filter by

+ + + + + + +
+ + + + +
+ × +

Sort

+ + + +
+
+
+ + +
+ + +
+ + + + + \ No newline at end of file diff --git a/recipe-images/baked-chicken.jpg b/recipe-images/baked-chicken.jpg deleted file mode 100644 index b580fdc..0000000 Binary files a/recipe-images/baked-chicken.jpg and /dev/null differ diff --git "a/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg" "b/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg" deleted file mode 100644 index 4a6128e..0000000 Binary files "a/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg" and /dev/null differ diff --git a/recipe-images/chicken-paprikash.jpg b/recipe-images/chicken-paprikash.jpg deleted file mode 100644 index 361e5fe..0000000 Binary files a/recipe-images/chicken-paprikash.jpg and /dev/null differ diff --git a/recipe-images/deep-fried-fish-bones.jpg b/recipe-images/deep-fried-fish-bones.jpg deleted file mode 100644 index d9ed554..0000000 Binary files a/recipe-images/deep-fried-fish-bones.jpg and /dev/null differ diff --git a/recipe-images/fish-dish.jpg b/recipe-images/fish-dish.jpg deleted file mode 100644 index 4166fb7..0000000 Binary files a/recipe-images/fish-dish.jpg and /dev/null differ diff --git a/recipe-images/grilled.jpg b/recipe-images/grilled.jpg deleted file mode 100644 index fe7a433..0000000 Binary files a/recipe-images/grilled.jpg and /dev/null differ diff --git a/recipe-images/individual-vegetarian-lasagnes.jpg b/recipe-images/individual-vegetarian-lasagnes.jpg deleted file mode 100644 index 58fab20..0000000 Binary files a/recipe-images/individual-vegetarian-lasagnes.jpg and /dev/null differ diff --git a/recipe-images/meat.jpg b/recipe-images/meat.jpg deleted file mode 100644 index b1896d9..0000000 Binary files a/recipe-images/meat.jpg and /dev/null differ diff --git a/recipe-images/vegetarian-shepherd's-pie.jpg b/recipe-images/vegetarian-shepherd's-pie.jpg deleted file mode 100644 index a6d811a..0000000 Binary files a/recipe-images/vegetarian-shepherd's-pie.jpg and /dev/null differ diff --git a/recipe-images/vegetarian-stir-fried-garlic-s.jpg b/recipe-images/vegetarian-stir-fried-garlic-s.jpg deleted file mode 100644 index 86babc8..0000000 Binary files a/recipe-images/vegetarian-stir-fried-garlic-s.jpg and /dev/null differ diff --git a/script.js b/script.js index 6a61c06..e27af45 100644 --- a/script.js +++ b/script.js @@ -1,406 +1,415 @@ -/*Here we have created two different arrays that you can work with if you want. -If you choose to create your own arrays with elements, just make sure that some -of the properties make sense to filter on, and some to sort on.*/ +// DOM selectors +const filterButton = document.getElementById('filterButton') +const filterPanel = document.getElementById('filterPanel') +const sortButton = document.getElementById('sortButton') +const sortPanel = document.getElementById('sortPanel') +const closeFilterPanel = document.getElementById('closeFilterPanel') +const closeSortPanel = document.getElementById('closeSortPanel') +const applyFilterButton = document.getElementById('applyFilters') +const applySortButton = document.getElementById('applySort') -const books = [ - { - title: 'The Great Gatsby', - author: 'F. Scott Fitzgerald', - year: 1925, - genre: 'Fiction', - rating: 4.2, - description: - 'A classic novel set in the Roaring Twenties, it explores themes of wealth, love, and the American Dream through the enigmatic Jay Gatsby.', - image: './books-images/the-great-gatsby.jpg' - }, - { - title: 'To Kill a Mockingbird', - author: 'Harper Lee', - year: 1960, - genre: 'Fiction', - rating: 4.5, - description: - 'Set in the American South, this novel tackles issues of racism and injustice through the eyes of young Scout Finch.', - image: './books-images/to-kill-a-mockingbird.jpg' - }, - { - title: '1984', - author: 'George Orwell', - year: 1949, - genre: 'Science Fiction', - rating: 4.4, - description: - 'A dystopian classic that explores totalitarianism and the consequences of a surveillance state in a bleak future.', - image: './books-images/1984.jpg' - }, - { - title: 'Pride and Prejudice', - author: 'Jane Austen', - year: 1813, - genre: 'Fiction', - rating: 4.25, - description: - 'A timeless romance novel that examines societal expectations and the misunderstandings that can arise from pride and prejudice.', - image: './books-images/pride-and-prejudice.jpg' - }, - { - title: 'The Catcher in the Rye', - author: 'J.D. Salinger', - year: 1951, - genre: 'Fiction', - rating: 4, - description: - 'Narrated by the teenage Holden Caulfield, the novel explores themes of alienation and the search for authenticity.', - image: './books-images/unknown.jpg' - }, - { - title: 'The Hobbit', - author: 'J.R.R. Tolkien', - year: 1937, - genre: 'Fantasy', - rating: 4.6, - description: - 'A fantasy adventure novel that follows Bilbo Baggins on a quest to help a group of dwarves reclaim their homeland from a dragon.', - image: './books-images/the-hobbit.jpg' - }, - { - title: "Harry Potter and the Sorcerer's Stone", - author: 'J.K. Rowling', - year: 1997, - genre: 'Fantasy', - rating: 4.7, - description: - 'The first book in the beloved Harry Potter series, it introduces readers to the magical world of Hogwarts and the young wizard Harry Potter.', - image: "./books-images/harry-potter-and-the-sorcerer'.jpg" - }, - { - title: 'Moby-Dick', - author: 'Herman Melville', - year: 1851, - genre: 'Adventure', - rating: 4.1, - description: - 'An epic tale of obsession, revenge, and the relentless pursuit of the great white whale, Moby Dick.', - image: './books-images/moby-dick.jpg' - }, +const genreSelect = document.getElementById('genreSelect') //do we need this ? + +// Function to toggle panels +const togglePanel = (button, panel) => { + panel.classList.toggle('show') + button.classList.toggle('active') +} + +// Event listeners for the Filter and Sort buttons +filterButton.addEventListener('click', () => togglePanel(filterButton, filterPanel)) +sortButton.addEventListener('click', () => togglePanel(sortButton, sortPanel)) + +// Function to close panels +const closePanel = (panel, button) => { + panel.classList.remove('show') + button.classList.remove('active') +} + +// Function to close panels with a delay +const closePanelWithDelay = (panel, button, delay) => { + setTimeout(() => { + closePanel(panel, button) + }, delay) +} + +// Event listeners for the Close buttons +closeFilterPanel.addEventListener('click', () => { + closePanel(filterPanel, filterButton) +}) + +closeSortPanel.addEventListener('click', () => { + closePanel(sortPanel, sortButton) +}) + +// Event listener for Apply button on Filter panel +applyFilterButton.addEventListener('click', () => { + closePanelWithDelay(filterPanel, filterButton, 500) +}) + +// Event listener for Apply button on Sort panel +applySortButton.addEventListener('click', () => { + closePanelWithDelay(sortPanel, sortButton, 700) +}) + +// Album array +const albums = [ { - title: 'The Lord of the Rings: The Fellowship of the Ring', - author: 'J.R.R. Tolkien', - year: 1954, - genre: 'Fantasy', - rating: 4.55, + title: 'A Night at the Opera', + artist: 'Queen', + year: 1975, + genre: 'Rock', + length: 43, description: - 'The first volume of the epic fantasy trilogy follows Frodo Baggins and the Fellowship on their quest to destroy the One Ring.', - image: './books-images/the-lord-of-the-rings.jpg' + `Queen's fourth studio album, known for its eclectic mix of musical styles, including the iconic "Bohemian Rhapsody," and is often hailed as one of the greatest albums of all time.`, + image: './album-images/queen-opera.jpg' }, { - title: 'The Shining', - author: 'Stephen King', - year: 1977, - genre: 'Horror', - rating: 4.3, + title: 'Hybrid theory', + artist: 'Linkin Park', + year: 2000, + genre: 'Rock', + length: 38, description: - "A psychological horror novel that tells the story of the Torrance family's terrifying experiences at the haunted Overlook Hotel.", - image: './books-images/unknown.jpg' + `Linkin Park's debut album, blending nu-metal and rap-rock elements, and featuring hits like "In the End" and "Crawling," which propelled the band to international fame.`, + image: './album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg' }, { - title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe', - author: 'C.S. Lewis', - year: 1950, - genre: 'Fantasy', - rating: 4.15, + title: 'Minutes to Midnight', + artist: 'Linkin Park', + year: 2007, + genre: 'Rock', + length: 43, description: - 'The first book in the Chronicles of Narnia series, it follows the adventures of children who discover the magical land of Narnia.', - image: './books-images/the-chronicles-of-narnia.jpg' + `Minutes to Midnight, released in 2007, marks a shift in Linkin Park's sound from nu-metal to alternative rock. Featuring hits like "What I've Done," the album explores themes of personal and political turmoil.`, + image: './album-images/Minutes_to_Midnight_cover.jpg' }, { - title: 'The Da Vinci Code', - author: 'Dan Brown', - year: 2003, - genre: 'Mystery', - rating: 3.8, - description: - 'A gripping mystery thriller that follows Harvard symbologist Robert Langdon as he unravels the secrets of the Da Vinci Code.', - image: './books-images/unknown.jpg' + title: 'Queen II', + artist: 'Queen', + year: 1974, + genre: 'Rock', + length: 41, + description: `Queen II, released in 1974, showcases Queen's early blend of hard rock and progressive elements. With its fantasy themes and complex arrangements, the album features standout tracks like "Seven Seas of Rhye" and "The March of the Black Queen."`, + image: './album-images/queen-queenII.jpg' }, { - title: 'The Alchemist', - author: 'Paulo Coelho', - year: 1988, - genre: 'Fiction', - rating: 4.25, - description: - 'A philosophical novel that tells the story of Santiago, a shepherd boy, on his quest to discover his personal legend.', - image: './books-images/unknown.jpg' + title: 'Songs in the Key of Life ', + artist: 'Stevie Wonder', + year: 1976, + genre: 'Soul', + length: 105, + description: `Songs in the Key of Life, released in 1976, is one of Stevie Wonder's most celebrated albums. Blending soul, jazz, and funk, it features timeless tracks like "Isn't She Lovely" and "Sir Duke," showcasing Wonder's musical genius and social commentary.`, + image: './album-images/stevie-wonder-sitkol.jpg' }, { - title: 'The Hunger Games', - author: 'Suzanne Collins', - year: 2008, - genre: 'Science Fiction', - rating: 4.3, - description: - "In a dystopian future, Katniss Everdeen becomes a symbol of rebellion when she volunteers to take her sister's place in the brutal Hunger Games.", - image: './books-images/unknown.jpg' + title: 'Innuendo', + artist: 'Queen', + year: 1991, + genre: 'Pop', + length: 54, + description: `Innuendo, released in 1991, is Queen's final album with Freddie Mercury. Known for its eclectic sound and emotional depth, it features powerful tracks like the title song "Innuendo" and the poignant "The Show Must Go On."`, + image: './album-images/queen-innuendo.jpg' }, { - title: 'The Girl with the Dragon Tattoo', - author: 'Stieg Larsson', - year: 2005, - genre: 'Mystery', - rating: 4.1, - description: - 'A gripping mystery novel featuring investigative journalist Mikael Blomkvist and the enigmatic hacker Lisbeth Salander.', - image: './books-images/unknown.jpg' + title: 'Ten', + artist: 'Pearl Jam', + year: 1991, + genre: 'Rock', + length: 53, + description: `Ten, released in 1991, is Pearl Jam's debut album and a cornerstone of the grunge movement. Featuring iconic tracks like "Alive" and "Jeremy," the album explores themes of personal struggle and resilience with raw intensity.`, + image: './album-images/PearlJam-Ten2.jpg' }, { - title: 'The Road', - author: 'Cormac McCarthy', - year: 2006, - genre: 'Dystopian', - rating: 4, - description: - "Set in a post-apocalyptic world, it follows a father and son's harrowing journey to survive and find safety.", - image: './books-images/unknown.jpg' + title: 'Vitalogy', + artist: 'Pearl Jam', + year: 1994, + genre: 'Rock', + length: 55, + description: `Vitalogy, released in 1994, is Pearl Jam's third studio album, blending punk, rock, and experimental sounds. Known for its raw energy and introspective lyrics, the album features standout tracks like "Spin the Black Circle" and "Better Man."`, + image: './album-images/PearlJamVitalogy.jpg' }, { - title: "The Hitchhiker's Guide to the Galaxy", - author: 'Douglas Adams', - year: 1979, - genre: 'Science Fiction', - rating: 4.35, - description: - "A comedic science fiction series that follows the misadventures of Arthur Dent after Earth's destruction.", - image: './books-images/unknown.jpg' - }, - { - title: 'The Giver', - author: 'Lois Lowry', + title: 'Jurassic Park: Original Motion Picture Soundtrack', + artist: 'John Williams', year: 1993, - genre: 'Dystopian', - rating: 4.12, - description: - 'A dystopian novel set in a seemingly perfect society where young Jonas discovers the dark truth beneath the surface.', - image: './books-images/unknown.jpg' - } -] - -const recipes = [ - { - name: 'Individual vegetarian lasagnes', - cuisineType: ['italian'], - ingredients: [ - '1.2 kg cherry tomatoes', - '5 sprigs of fresh thyme', - 'extra virgin olive oil', - '2 shallots', - '2 cloves of garlic', - '500 g baby spinach', - '8-12 fresh or dried lasagne sheets', - '350 g ricotta cheese', - 'WHITE SAUCE', - '600 ml milk', - '25 g unsalted butter', - '2 heaped tablespoons flour', - '150 g vegetarian sharp, mature cheese', - '100 g mozzarella' - ], - source: 'Jamie Oliver', - totalTime: 130, - url: 'http://www.jamieoliver.com/recipes/vegetables-recipes/individual-vegetarian-lasagnes/', - image: './recipe-images/individual-vegetarian-lasagnes.jpg' + genre: 'Film score', + length: 73, + description: `Jurassic Park: Original Motion Picture Soundtrack, composed by John Williams and released in 1993, is a sweeping orchestral score that captures the awe and tension of the film. Iconic themes like the majestic "Theme from Jurassic Park" perfectly embody the sense of wonder and danger in the prehistoric adventure.`, + image: './album-images/Jurassicpark-1-.jpg' }, { - name: 'Vegetarian Stir-Fried Garlic Scape', - cuisineType: ['Balanced'], - ingredients: [ - '8 oz. garlic scapes', - '3 oz. baby corn', - '3 oz. carrots', - '1 oz. dried shiitake mushrooms', - '1 clove of garlic sliced thinly', - '3 slices of fresh ginger root', - '2 tablespoons vegetable oil', - '1/4 cup shaoxing cooking wine', - '1/4 vegetarian stock or water', - '1 tablespoon light soy sauce', - '1 teaspoon sugar', - '1 teaspoon cornstarch', - '1/4 teaspoon ground white pepper' - ], - source: 'Red Cook', - totalTime: null, - url: 'http://redcook.net/2010/06/16/garlic-scape-an-off-menu-treat/', - image: './recipe-images/vegetarian-stir-fried-garlic-s.jpg' + title: 'Home Alone: Original Motion Picture Soundtrack', + artist: 'John Williams', + year: 1990, + genre: 'Film score', + length: 57, + description: `Home Alone: Original Motion Picture Soundtrack, composed by John Williams and released in 1990, combines playful and heartwarming themes with a sense of holiday magic. The iconic "Somewhere in My Memory" beautifully captures the spirit of the film's blend of comedy and Christmas charm.`, + image: './album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg' }, { - name: 'Cheat’s cheesy focaccia', - cuisineType: ['Italian'], - ingredients: [ - '500g pack bread mix', - '2 tbsp olive oil , plus a little extra for drizzling', - '25g parmesan (or vegetarian alternative), grated', - '75g dolcelatte cheese (or vegetarian alternative)' - ], - source: 'BBC Good Food', - totalTime: 40, - url: 'https://www.bbcgoodfood.com/recipes/cheats-cheesy-focaccia', - image: './recipe-images/cheat’s-cheesy-focaccia.jpg' + title: `Harry Potter and the Philosopher's Stone (Original Motion Picture Soundtrack)`, + artist: 'John Williams', + year: 2001, + genre: 'Film score', + length: 74, + description: `Harry Potter and the Philosopher's Stone: Original Motion Picture Soundtrack, composed by John Williams and released in 2001, introduces the magical world of Harry Potter with unforgettable themes. The iconic "Hedwig's Theme" perfectly captures the wonder and enchantment that defines the series.`, + image: './album-images/HarrypotterPSsoundtrack.jpg' }, { - name: "Vegetarian Shepherd's Pie", - cuisineType: ['Balanced', 'High-Fiber'], - ingredients: [ - '2 tablespoons extra-virgin olive oil', - '1 large onion, finely diced', - '2 carrots, peeled and thinly sliced', - '2 celery stalks, thinly sliced', - '10 ounces cremini mushrooms, trimmed and sliced', - '1 tablespoon tomato paste', - "1 tablespoon vegetarian Worcestershire sauce, such as Annie's Naturals", - '1 dried bay leaf', - '1 cup French green lentils, picked over', - 'Kosher salt and freshly ground pepper', - '1 cup frozen peas', - '2 pounds Yukon Gold potatoes, scrubbed and cut into 1 1/2-inch pieces', - '4 cloves garlic', - '4 tablespoons unsalted butter', - '1/2 cup whole milk, warmed' - ], - source: 'Martha Stewart', - totalTime: 120, - url: 'https://www.marthastewart.com/1535235/vegetarian-shepherds-pie', - image: "./recipe-images/vegetarian-shepherd's-pie.jpg" + title: 'E.T. the Extra-Terrestrial: Music from the Original Soundtrack', + artist: 'John Williams', + year: 1982, + genre: 'Film score', + length: 40, + description: `E.T. the Extra-Terrestrial: Music from the Original Soundtrack, composed by John Williams and released in 1982, is a heartwarming and emotional score that perfectly complements the film's themes of friendship and adventure. The iconic "Flying Theme" evokes the magic and wonder of E.T.'s journey.`, + image: './album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg' }, { - name: 'Chicken Paprikash', - cuisineType: ['Low-Carb'], - ingredients: [ - '640 grams chicken - drumsticks and thighs ( 3 whole chicken legs cut apart)', - '1/2 teaspoon salt', - '1/4 teaspoon black pepper', - '1 tablespoon butter – cultured unsalted (or olive oil)', - '240 grams onion sliced thin (1 large onion)', - '70 grams Anaheim pepper chopped (1 large pepper)', - '25 grams paprika (about 1/4 cup)', - '1 cup chicken stock', - '1/2 teaspoon salt', - '1/2 cup sour cream', - '1 tablespoon flour – all-purpose' - ], - source: 'No Recipes', - totalTime: 80, - url: 'http://norecipes.com/recipe/chicken-paprikash/', - image: './recipe-images/chicken-paprikash.jpg' + title: 'Dangerously In Love', + artist: 'Beyoncé', + year: 2003, + genre: 'Pop', + length: 78, + description: `Beyoncé's debut solo album features a mix of R&B, soul, and hip hop, and includes hits like "Crazy in Love" and "Baby Boy."`, + image: './album-images/Dangerously_In_Love_Album(2003).png' }, { - name: 'Baked Chicken', - cuisineType: ['american'], - ingredients: [ - '6 bone-in chicken breast halves, or 6 chicken thighs and wings, skin-on', - '1/2 teaspoon coarse salt', - '1/2 teaspoon Mrs. Dash seasoning', - '1/4 teaspoon freshly ground black pepper' - ], - source: 'Martha Stewart', - totalTime: 90, - url: 'http://www.marthastewart.com/318981/baked-chicken', - image: './recipe-images/baked-chicken.jpg' + title: 'Cowboy Carter', + artist: 'Beyoncé', + year: 2024, + genre: 'Country', + length: 78, + description: `Beyoncé's eighth studio album blends country, R&B, blues, and more, reimagining Americana through the lens of Black pioneers.`, + image: './album-images/Beyoncé_-_Cowboy_Carter.png' }, { - name: 'Deep Fried Fish Bones', - cuisineType: ['south east asian'], - ingredients: ['8 small whiting fish or smelt', '4 cups vegetable oil'], - source: 'Serious Eats', - totalTime: 31, - url: 'http://www.seriouseats.com/recipes/2011/03/deep-fried-fish-bones-recipe.html', - image: './recipe-images/deep-fried-fish-bones.jpg' + title: 'Lemonade', + artist: 'Beyoncé', + year: 2016, + genre: 'Soul', + length: 46, + description: `Beyoncé's sixth studio album is a conceptual project exploring themes of infidelity, empowerment, and healing, featuring a diverse mix of genres.`, + image: './album-images/Beyonce_-_Lemonade_(Official_Album_Cover).png' }, { - name: 'Burnt-Scallion Fish', - cuisineType: ['chinese'], - ingredients: [ - '2 bunches scallions', - '8 tbsp. butter', - '2 8-oz. fish filets' - ], - source: 'Saveur', - totalTime: 70, - url: 'http://www.saveur.com/article/Recipes/Burnt-Scallion-Fish', - image: './recipe-images/fish-dish.jpg' + title: 'Taylor Swift', + artist: 'Taylor Swift', + year: 2005, + genre: 'Country', + length: 40, + description: 'Taylor Swift is the debut studio album by the American singer-songwriter Taylor Swift', + image: 'album-images/Taylor_Swift_-_Taylor_Swift.png' }, { - name: 'Curry-Crusted Fish', - cuisineType: ['south east asian'], - ingredients: [ - '3 slices bread , about 85g/3oz in total', - '1 lime', - '1.0 tbsp Korma curry paste', - '4 thick white fish fillets' - ], - source: 'BBC Good Food', - totalTime: 80, - url: 'http://www.bbcgoodfood.com/recipes/4717/', - image: './recipe-images/fish-dish.jpg' + title: 'Lover', + artist: 'Taylor Swift', + year: 2019, + genre: 'Pop', + length: 62, + description: 'Lover is the seventh studio album by the American singer-songwriter Taylor Swift.', + image: 'album-images/Taylor_Swift_-_Lover.png' }, { - name: 'Meat Stock', - cuisineType: 'american', - ingredients: [ - '2.5 pounds beef marrow bones', - '1 large onion, quartered', - '2 carrots, sliced', - '1 leek, cleaned and sliced', - '2 celery stalks, sliced', - '2.5 pounds organic beef stew meat, cubed', - '2 tablespoons tomato paste', - '5 cloves garlic', - '2 bay leaves', - '3 sprigs thyme', - '3 sprigs Italian parsley', - '1/2 teaspoon black peppercorns' - ], - source: 'Food52', - totalTime: 60, - url: 'https://food52.com/recipes/3712-meat-stock', - image: './recipe-images/meat.jpg' + title: 'Encore', + artist: 'Eminem', + year: 2004, + genre: 'Hip hop', + length: 77, + description: 'Encore is the fifth studio album by American rapper Eminem.', + image: 'album-images/Encore_(Eminem_album)_coverart.jpg' }, { - name: 'Homemade Meat Broth', - cuisineType: 'american', - ingredients: [ - '1 teaspoon salt', - '1 carrot, peeled', - '1 medium onion, peeled', - '2 or 3 celery stalks', - '¼ red or yellow bell pepper, stripped of all its seeds', - '1 small boiling potato, peeled', - '1 ripe, fresh tomato, or 1 canned Italian plum tomato, drained of juice', - '5 pounds assorted pieces of meat and bones (see meat suggestions above), of which no less than 1½ pounds is all meat' - ], - source: 'Cookstr', - totalTime: 60, - url: 'http://www.cookstr.com/recipes/il-brodo-homemade-meat-broth', - image: './recipe-images/meat.jpg' + title: 'Corpse Bride', + artist: 'Danny Elfman', + year: 2005, + genre: 'Film score', + length: 60, + description: 'Music from the film Corps Bride composed by Danny Elfman', + image: 'album-images/CorpseBride.jpg' }, { - name: 'Spice-Rubbed Grilled Flap Meat (Sirloin Tip) Recipe', - cuisineType: 'south-american', - ingredients: [ - '1 tablespoon whole black peppercorns, toasted', - '1 teaspoon coriander seed, toasted', - '1 teaspoon fennel seed, toasted', - '1 teaspoon cumin pods, toasted', - '1 teaspoon red pepper flakes', - '1/2 teaspoon dried oregano', - '2 medium cloves garlic, minced (about 2 teaspoons)', - '2 tablespoons vegetable or canola oil', - '1 whole flap meat steak, 2 to 2 1/2 pounds', - 'Kosher salt' - ], - source: 'Serious Eats', - totalTime: 240, - url: 'http://www.seriouseats.com/recipes/2012/05/spice-rubbed-grilled-flap-meat-sirloin-tip-recipe.html', - image: './recipe-images/grilled.jpg' + title: 'Led Zeppelin IV', + artist: 'Led Zeppelin', + year: 1971, + genre: 'Rock', + length: 43, + description: 'Untitled fourth studio album by the English rock band Led Zeppelin, commonly known as Led Zeppelin IV', + image: 'album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg' } ] +const albumContainer = document.getElementById('album-container') +const fullscreenOverlay = document.getElementById('fullscreen-overlay') + +// Function to toggle bigger card info on mobile +const toggleFullScreen = (event) => { + const albumCard = event.currentTarget + albumCard.classList.toggle('full-screen') + fullscreenOverlay.classList.toggle('active') +} + +// Function to close big card on mobile +const closeFullScreen = (event) => { + event.stopPropagation() + const albumCard = event.currentTarget.closest('.album-card') + albumCard.classList.remove('full-screen') + fullscreenOverlay.classList.remove('active') +} + +// Function to display album information into cards +const getAlbums = (albumArray) => { + albumContainer.innerHTML = '' + albumArray.forEach(album => { + + const albumCard = document.createElement('div') + albumCard.classList.add('album-card') + + albumCard.innerHTML = ` + +
+ ${album.title} album art +
+

${album.title}

+

Artist: ${album.artist}

+

Release Date: ${album.year}

+

Genre: ${album.genre}

+

Length: ${album.length} minutes

+

${album.description}

+ + ` + // Add click event listener only if screen is mobile + if (document.body.classList.contains('mobile')) { + albumCard.addEventListener('click', toggleFullScreen) + } + + albumContainer.appendChild(albumCard) + }) + + updateEventListeners() +} + +// Function to update event listeners based on screen size +const updateEventListeners = () => { + const albumCards = document.querySelectorAll('.album-card') + albumCards.forEach(albumCard => { + albumCard.removeEventListener('click', toggleFullScreen) + if (document.body.classList.contains('mobile')) { + albumCard.addEventListener('click', toggleFullScreen) + } + }) +} + +// Function to check screen size and add/remove mobile class +const checkScreenSize = () => { + if (window.innerWidth <= 768) { + document.body.classList.add('mobile') + } else { + document.body.classList.remove('mobile') + } + updateEventListeners() +} + +checkScreenSize() + +// Check screen size on resize +window.addEventListener('resize', checkScreenSize) + +// Filter Genre & Artist +const filterGenreDropdown = document.getElementById('genreSelect') +const filterArtistDropdown = document.getElementById('artistSelect') +const applyFiltersButton = document.getElementById('applyFilters') + +const filterAlbums = () => { + const genre = filterGenreDropdown.value + const artist = filterArtistDropdown.value + + let filteredAlbums = albums; + + if (genre !== 'all') { + filteredAlbums = filteredAlbums.filter(album => album.genre === genre) + } + + if (artist !== 'all') { + filteredAlbums = filteredAlbums.filter(album => album.artist === artist) + } + + getAlbums(filteredAlbums) +} + +// Event listener for Apply button in Filter panel +applyFiltersButton.addEventListener('click', filterAlbums) + +// Random button +const randomButton = document.getElementById('randomButton') + +const getRandomAlbum = () => { + const randomIndex = Math.floor(Math.random() * albums.length) + + const randomAlbum = albums[randomIndex] + albumContainer.innerHTML = '' + albumContainer.innerHTML = ` +
+
+ ${randomAlbum.title} album art +
+

${randomAlbum.title}

+

Artist: ${randomAlbum.artist}

+

Release Date: ${randomAlbum.year}

+

Genre: ${randomAlbum.genre}

+

Length: ${randomAlbum.length} minutes

+

${randomAlbum.description}

+
` + + // albumContainer.classList.add('random-card') + // Add the clicked class + randomButton.classList.add('clicked') + + // Remove the clicked class after a short delay + setTimeout(() => { + randomButton.classList.remove('clicked') + }, 200) +} + +// Event listener to trigger randomAlbum +randomButton.addEventListener('click', getRandomAlbum) + +// Sort and display albums +const sortAlbumDropdown = document.getElementById('sortSelect') + +const sortAlbums = () => { + const sortOption = sortAlbumDropdown.value + let sortedAlbums + + if (sortOption === 'alpha-title') { + sortedAlbums = albums.sort((a, b) => a.title.localeCompare(b.title)) + } + else if (sortOption === 'reverse-title') { + sortedAlbums = albums.sort((a, b) => b.title.localeCompare(a.title)) + } + else if (sortOption === 'alpha-artist') { + sortedAlbums = albums.sort((a, b) => a.artist.localeCompare(b.artist)) + } + else if (sortOption === 'reverse-artist') { + sortedAlbums = albums.sort((a, b) => b.artist.localeCompare(a.artist)) + } + else if (sortOption === 'newest-year') { + sortedAlbums = albums.sort((a, b) => b.year - a.year) + } + else if (sortOption === 'oldest-year') { + sortedAlbums = albums.sort((a, b) => a.year - b.year) + } + else if (sortOption === 'shortest-length') { + sortedAlbums = albums.sort((a, b) => a.length - b.length) + } + else if (sortOption === 'longest-length') { + sortedAlbums = albums.sort((a, b) => b.length - a.length) + } + else { + sortedAlbums = albums.sort((a, b) => a.title.localeCompare(b.title)) + } + getAlbums(sortedAlbums) +} + +sortAlbumDropdown.addEventListener('change', sortAlbums) + +sortAlbums() diff --git a/style.css b/style.css index e69de29..1614ac8 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,481 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #060606; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + box-sizing: border-box; +} + +.header { + background-image: url('./album-images/header-image.jpg'); + background-size: cover; + background-position: center; + height: 20vh; + width: 100%; + margin-bottom: 20px; + position: relative; + box-sizing: border-box; +} + +.overlay { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + padding: 0; + background-color: rgba(0, 0, 0, 0.55); + height: 20vh; + overflow: hidden; +} + +h1 { + font-size: 10vw; + font-weight: bolder; + font-family: 'Montserrat', sans-serif; + color: white; + background: linear-gradient(90deg, + #fff 30%, + #ff1493 50%, + #fff 70%, + #eeefbe 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + background-size: 200% auto; + display: inline-block; + animation: shimmer 3s linear forwards; +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: -100% 0; + } +} + +.button-container { + display: flex; + justify-content: center; + position: relative; + gap: 10px; +} + +.panel { + position: fixed; + top: 20vh; + right: -100%; + /* Start off-screen */ + width: 500px; + height: calc(100% - 20vh); + /* Adjust height to fit below the header */ + background-color: rgba(0, 0, 0, 0.8); + color: white; + transition: right 0.9s ease; + z-index: 1000; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 20px; + padding: 20px; + box-sizing: border-box; +} + +label { + font-weight: bold; + padding-top: 15px; +} + +select { + background-color: #000; + color: #fff; + border: 1px solid #734a58; + padding: 10px; + border-radius: 4px; + width: 100%; + margin-bottom: 10px; + font-size: 16px; + outline: none; + appearance: none; + -webkit-appearance: none; + /* Remove default styling in Safari */ + -moz-appearance: none; + /* Remove default styling in Firefox */ + transition: box-shadow 0.3s ease; +} + +select:focus { + box-shadow: 0 0 10px rgba(115, 74, 88, 0.8); +} + +.apply { + padding: 10px 20px; + margin-top: 20px; + background-color: #000; + color: #fff; + border: 2px solid #fff; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s, color 0.3s, transform 0.2s; +} + +.apply:hover { + filter: invert(1); + transform: translateY(-5px); +} + +.apply:active { + transform: scale(0.95); + background-color: #555; +} + +.panel.show { + right: 0; +} + +.closePanel { + position: absolute; + top: 10px; + right: 10px; + font-size: 30px; + transition: transform 0.2s, color 0.2s; + padding: 5px; + border-radius: 50%; +} + +.closePanel:hover { + transform: scale(1.5); + color: #800080; +} + +.closePanel:active { + transform: scale(1); + color: #ff69b4; +} + +.button { + padding: 10px 20px; + text-align: center; + background-color: rgb(18, 2, 12); + color: white; + border: none; + cursor: pointer; + font-size: 18px; + font-family: 'Montserrat', sans-serif; + border: 1px solid pink; + border-radius: 4px; +} + +.button:hover { + background-color: grey; +} + +.button.active { + background-color: rgb(63, 6, 63); +} + +.random-button { + padding: 10px 20px; + margin-top: 10px; + background-color: rgb(18, 2, 12); + border: 2px solid purple; + color: white; + font-size: 18px; + font-family: 'Montserrat', sans-serif; + cursor: pointer; + border-radius: 4px; +} + +.random-button:hover { + background-color: #734a58; +} + +.random-button.clicked { + background-color: #80408c; + border: 2px solid purple; +} + +.album-container { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + align-items: stretch; + width: 100%; + padding: 20px; + overflow-x: hidden; +} + +.fullscreen-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + display: none; +} + +.fullscreen-overlay.active { + display: block; +} + +.album-card, +.random-card { + display: flex; + align-items: center; + flex-direction: column; + padding: 3rem; + width: 90%; + max-width: 300px; + background-color: #1b2028; + border-radius: 16px; + position: relative; + border: 3px solid transparent; + background-clip: padding-box; + text-align: center; + color: #f1f3f3; + background-image: linear-gradient(135deg, + rgba(117, 46, 124, 0.35), + rgba(115, 74, 88, 0.1) 15%, + #1b2028 20%, + #1b2028 100%); + + &:after { + content: ""; + display: block; + top: -3px; + left: -3px; + bottom: -3px; + right: -3px; + z-index: -1; + position: absolute; + border-radius: 16px; + background-image: linear-gradient(135deg, + #752e7c, + #734a58 20%, + #1b2028 30%, + #2c333e 100%); + } +} + +.album-art, +.random-art { + border-radius: 5%; + overflow: hidden; + width: 175px; + height: 175px; + position: relative; + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + } +} + +.album-card h2, +.random-card h2 { + margin: 10px 0; + font-size: 1.5em; +} + +.album-card p, +.random-card p { + margin: 5px 0; + color: #f1f3f3; +} + +.close-btn { + display: none; +} + +footer { + border-top: 4px dotted white; + margin-top: 4%; + color: white; + padding: 2%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +footer .personal-info-items { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + width: 100%; +} + +footer h4 { + font-size: 1rem; + margin: 5px 0; + text-align: center; +} + +footer i { + margin-right: 8px; +} + +footer a { + color: white; + text-decoration: none; + transition: color 0.3s ease; +} + +footer a:hover { + color: purple; +} + +/* For mobile screens */ +@media (max-width: 768px) { + .panel { + width: 100%; + } + + .button { + font-size: 14px; + } + + .random-button { + font-size: 14px; + } + + footer { + margin-bottom: 4px; + } + + footer .personal-info-items { + display: flex; + justify-content: center; + padding: 5%; + font-size: 6px; + gap: 5px; + width: 100%; + } + + .album-container { + flex-wrap: wrap; + padding: 20px 10px; + width: 100vw; + box-sizing: border-box; + justify-items: center; + gap: 10px; + } + + .random-card { + flex: 1; + justify-items: center; + padding: 3rem; + width: 300px; + } + + .album-card, + .random-card { + flex: 1 1 calc(50% - 20px); + min-width: 100px; + max-width: 300px; + margin-top: 0; + padding: 2.2%; + transition: all 0.3s ease; + } + + .album-card.full-screen { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + padding: 2rem; + + width: 90vw; + max-width: 90vw; + max-height: 90vh; + background-color: #1b2028; + border-radius: 16px; + border: 3px solid transparent; + background-clip: padding-box; + text-align: center; + color: #f1f3f3; + background-image: linear-gradient(135deg, + rgba(117, 46, 124, 0.35), + rgba(115, 74, 88, 0.1) 15%, + #1b2028 20%, + #1b2028 100%); + } + + + .album-card.full-screen .album-art img { + height: 100%; + object-fit: contain; + + } + + .album-card.full-screen p { + font-size: .9em; + } + + .album-card.full-screen .more-info { + display: block; + } + + .album-card.full-screen .close-btn { + display: block; + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + color: #f1f3f3; + font-size: 2rem; + cursor: pointer; + } + + .album-art { + width: 100%; + padding-top: 0; + } + + .album-card h2 { + font-size: 1em; + /* margin: 10px 0px 0px 0px; */ + } + + .album-card p { + font-size: .65em; + } + + .more-info { + display: none; + } +} + +@media (min-width: 767px) { + h1 { + font-size: 7vw; + } +} \ No newline at end of file