diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..0a0eb1e Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 7d38b84..1cade19 100644 --- a/README.md +++ b/README.md @@ -1 +1,15 @@ -# project-library \ No newline at end of file +# Sweden's National Parks + +## The project + +The aim was to create some sort of library that could be filtered in some way and also sorted. I decided to create a library over the National Parks in Sweden. + +## The problem + +The biggest challange was to figure out how to combine both the filter and the sorting so that they worked together. + +If I would have had more time I would have wanted to try adding a range slider with two values for filtering on size. + +## View it live + +[swedensnationalparks.netlify.app](https://swedensnationalparks.netlify.app/) 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/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/abisko-nationalpark.jpg b/images/abisko-nationalpark.jpg new file mode 100644 index 0000000..eb882a8 Binary files /dev/null and b/images/abisko-nationalpark.jpg differ diff --git a/images/angso-nationalpark.jpg b/images/angso-nationalpark.jpg new file mode 100644 index 0000000..58eb645 Binary files /dev/null and b/images/angso-nationalpark.jpg differ diff --git a/images/arrow.svg b/images/arrow.svg new file mode 100644 index 0000000..4ce58d7 --- /dev/null +++ b/images/arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/asnen-nationalpark.jpg b/images/asnen-nationalpark.jpg new file mode 100644 index 0000000..1ed6f10 Binary files /dev/null and b/images/asnen-nationalpark.jpg differ diff --git a/images/bjornlandet-nationalpark.jpg b/images/bjornlandet-nationalpark.jpg new file mode 100644 index 0000000..f6d5501 Binary files /dev/null and b/images/bjornlandet-nationalpark.jpg differ diff --git a/images/bla-jungfrun-nationalpark.webp b/images/bla-jungfrun-nationalpark.webp new file mode 100644 index 0000000..3acd0b5 Binary files /dev/null and b/images/bla-jungfrun-nationalpark.webp differ diff --git a/images/dalby-soderskog-nationalpark.jpg b/images/dalby-soderskog-nationalpark.jpg new file mode 100644 index 0000000..93397e9 Binary files /dev/null and b/images/dalby-soderskog-nationalpark.jpg differ diff --git a/images/djuro-nationalpark.webp b/images/djuro-nationalpark.webp new file mode 100644 index 0000000..da3736a Binary files /dev/null and b/images/djuro-nationalpark.webp differ diff --git a/images/farnebofjarden-nationalpark.webp b/images/farnebofjarden-nationalpark.webp new file mode 100644 index 0000000..f8658ed Binary files /dev/null and b/images/farnebofjarden-nationalpark.webp differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000..ce11eb2 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/fjarnebofjarden-nationalpark.jpg b/images/fjarnebofjarden-nationalpark.jpg new file mode 100644 index 0000000..8605aa7 Binary files /dev/null and b/images/fjarnebofjarden-nationalpark.jpg differ diff --git a/images/fulufjallet-nationalpark.jpg b/images/fulufjallet-nationalpark.jpg new file mode 100644 index 0000000..7727979 Binary files /dev/null and b/images/fulufjallet-nationalpark.jpg differ diff --git a/images/garphyttan-nationalpark.jpg b/images/garphyttan-nationalpark.jpg new file mode 100644 index 0000000..3c4d240 Binary files /dev/null and b/images/garphyttan-nationalpark.jpg differ diff --git a/images/gotska-sandon-nationalpark.jpg b/images/gotska-sandon-nationalpark.jpg new file mode 100644 index 0000000..dfd0ee0 Binary files /dev/null and b/images/gotska-sandon-nationalpark.jpg differ diff --git a/images/hamra-nationalpark.jpg b/images/hamra-nationalpark.jpg new file mode 100644 index 0000000..7c9ab28 Binary files /dev/null and b/images/hamra-nationalpark.jpg differ diff --git a/images/haparanda-skardgards-nationalpark.jpg b/images/haparanda-skardgards-nationalpark.jpg new file mode 100644 index 0000000..b53abbc Binary files /dev/null and b/images/haparanda-skardgards-nationalpark.jpg differ diff --git a/images/kosterhavets-nationalpark.jpg b/images/kosterhavets-nationalpark.jpg new file mode 100644 index 0000000..81d1aee Binary files /dev/null and b/images/kosterhavets-nationalpark.jpg differ diff --git a/images/muddus-nationalpark.jpg b/images/muddus-nationalpark.jpg new file mode 100644 index 0000000..82aef88 Binary files /dev/null and b/images/muddus-nationalpark.jpg differ diff --git a/images/muddus-nationalpark.webp b/images/muddus-nationalpark.webp new file mode 100644 index 0000000..d998532 Binary files /dev/null and b/images/muddus-nationalpark.webp differ diff --git a/images/norra-kvill-nationalpark.jpg b/images/norra-kvill-nationalpark.jpg new file mode 100644 index 0000000..fc337de Binary files /dev/null and b/images/norra-kvill-nationalpark.jpg differ diff --git a/images/padjelanta-nationalpark.jpg b/images/padjelanta-nationalpark.jpg new file mode 100644 index 0000000..57db214 Binary files /dev/null and b/images/padjelanta-nationalpark.jpg differ diff --git a/images/pieljekaise-nationalpark.jpg b/images/pieljekaise-nationalpark.jpg new file mode 100644 index 0000000..0282e6e Binary files /dev/null and b/images/pieljekaise-nationalpark.jpg differ diff --git a/images/sarek-nationalpark.jpg b/images/sarek-nationalpark.jpg new file mode 100644 index 0000000..617405d Binary files /dev/null and b/images/sarek-nationalpark.jpg differ diff --git a/images/skuleskogens-nationalpark.webp b/images/skuleskogens-nationalpark.webp new file mode 100644 index 0000000..c8f581d Binary files /dev/null and b/images/skuleskogens-nationalpark.webp differ diff --git a/images/soderasen-nationalpark.jpg b/images/soderasen-nationalpark.jpg new file mode 100644 index 0000000..f7d480e Binary files /dev/null and b/images/soderasen-nationalpark.jpg differ diff --git a/images/sonfjallets-nationalpark.jpg b/images/sonfjallets-nationalpark.jpg new file mode 100644 index 0000000..7c8980b Binary files /dev/null and b/images/sonfjallets-nationalpark.jpg differ diff --git a/images/stenshuvuds-nationalpark.jpg b/images/stenshuvuds-nationalpark.jpg new file mode 100644 index 0000000..3a3b666 Binary files /dev/null and b/images/stenshuvuds-nationalpark.jpg differ diff --git a/images/stora-mosse-nationalpark.jpg b/images/stora-mosse-nationalpark.jpg new file mode 100644 index 0000000..d98d10b Binary files /dev/null and b/images/stora-mosse-nationalpark.jpg differ diff --git a/images/stora-sjofallet-nationalpark.jpg b/images/stora-sjofallet-nationalpark.jpg new file mode 100644 index 0000000..a442cfc Binary files /dev/null and b/images/stora-sjofallet-nationalpark.jpg differ diff --git a/images/swedish-national-parks.webp b/images/swedish-national-parks.webp new file mode 100644 index 0000000..64c7b97 Binary files /dev/null and b/images/swedish-national-parks.webp differ diff --git a/images/tiveden-nationalpark.jpg b/images/tiveden-nationalpark.jpg new file mode 100644 index 0000000..d77f48a Binary files /dev/null and b/images/tiveden-nationalpark.jpg differ diff --git a/images/tofsingdalen-nationalpark.jpg b/images/tofsingdalen-nationalpark.jpg new file mode 100644 index 0000000..be88364 Binary files /dev/null and b/images/tofsingdalen-nationalpark.jpg differ diff --git a/images/tresticklan-nationalpark.jpg b/images/tresticklan-nationalpark.jpg new file mode 100644 index 0000000..f84734d Binary files /dev/null and b/images/tresticklan-nationalpark.jpg differ diff --git a/images/tyresta-nationalpark.jpg b/images/tyresta-nationalpark.jpg new file mode 100644 index 0000000..b66c773 Binary files /dev/null and b/images/tyresta-nationalpark.jpg differ diff --git a/images/vadvetjakka-nationalpark.jpg b/images/vadvetjakka-nationalpark.jpg new file mode 100644 index 0000000..a1eadd2 Binary files /dev/null and b/images/vadvetjakka-nationalpark.jpg differ diff --git a/index.html b/index.html index cf5c31a..184c390 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,63 @@ - - - - - Project Library - - -

Project Library

- - - \ No newline at end of file + + + + + + + + + Sweden's National Parks + + +
+
+
+

Sweden's
National Parks

+ A national park in Sweden by ChatGPT +
+
+
+ + + + +
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+ + + diff --git a/instructions.md b/instructions.md index 977cabc..253fb44 100644 --- a/instructions.md +++ b/instructions.md @@ -14,15 +14,15 @@ In order to simplify the execution of this project, we have provided you with tw ## How to get started - ## Requirements + - Your page should display all of the elements (and their information) in the chosen array when the website is loaded - Your page should have at least one `filter`, e.g. on genre or cuisine type - Your page should be able to `sort` on at least one property, e.g.: - - *for books*: + - _for books_: - from newest to oldest and vice versa - from the highest to lowest rating and vice versa - - *for recipes*: + - _for recipes_: - from most to least ingredients and vice versa - from longest to shortest cooking time and vice versa - Your page should feature a button that selects a random book/recipe, and your page should display the selected item @@ -32,6 +32,7 @@ In order to simplify the execution of this project, we have provided you with tw So you’ve completed all the steps above? Great job! Make sure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional. ### Intermediate stretch goals + - Go wild with the filtering. Add a filter to: - only show the recipes with less than 5 or 10 ingredients - only show the books from the 21st century @@ -39,5 +40,6 @@ So you’ve completed all the steps above? Great job! Make sure you've committed - Alphabetical order ### Advanced stretch goals + - Create a search bar where the user can search for specific keywords - Recreate the same design as the one provided in the example on Figma diff --git a/pull_request_template.md b/pull_request_template.md deleted file mode 100644 index d92c89b..0000000 --- a/pull_request_template.md +++ /dev/null @@ -1,7 +0,0 @@ -## Netlify link -Add your Netlify link here. -PS. Don't forget to add it in your readme as well. - -## Collaborators -Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this: -[github-username-1, github-username-2] 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..1577729 100644 --- a/script.js +++ b/script.js @@ -1,406 +1,455 @@ -/*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.*/ +/* ********************************* + Constants +********************************* */ +const FILTER_ALL = "All"; +const SORT_ALPHABETICAL = "alphabetical"; +const SORT_LARGEST = "largest"; +const SORT_SMALLEST = "smallest"; +const FILTER_KEY_REGION_GROUP = "regionGroup"; -const books = [ +/* ********************************* + DOM selectors & Variables +********************************* */ + +// Container for displaying parks +const parksContainer = document.getElementById("parks"); + +// Container for showing how many parks are visible +const parkResults = document.getElementById("park-results"); + +// Variable to store the current sort option selected by the user +let currentSortOption = SORT_ALPHABETICAL; // Default value + +// Variable to store the current filter value selected by the user +let currentFilterValue = FILTER_ALL; // Default value + +// The key to filter parks by, e.g., "regionGroup" +let currentFilterKey = FILTER_KEY_REGION_GROUP; + +// Global variable to store the current search term +let currentSearchTerm = ""; // Default value is an empty string + +/* ********************************* + Array with objects +********************************* */ + +const nationalParksInSweden = [ { - 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' + name: "Abisko", + size: 77, + region: "Norrbotten", + regionGroup: "North", + image: "abisko-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/abisko-nationalpark/", }, { - 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' + name: "Björnlandet", + size: 11, + region: "Västerbotten", + regionGroup: "North", + image: "bjornlandet-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/bjornlandets-nationalpark/", }, { - 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' + name: "Blå Jungfrun", + size: 1.98, + region: "Kalmar", + regionGroup: "South", + image: "bla-jungfrun-nationalpark.webp", + externalLink: + "https://www.sverigesnationalparker.se/park/bla-jungfrun-nationalpark/", }, { - 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' + name: "Dalby Söderskog", + size: 0.36, + region: "Skåne", + regionGroup: "South", + image: "dalby-soderskog-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/dalby-soderskog-nationalpark/", }, { - 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' + name: "Djurö", + size: 24, + region: "Västra Götaland", + regionGroup: "Central", + image: "djuro-nationalpark.webp", + externalLink: + "https://www.sverigesnationalparker.se/park/djuro-nationalpark/", }, { - 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' + name: "Fulufjället", + size: 385, + region: "Dalarna", + regionGroup: "Central", + image: "fulufjallet-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/fulufjallets-nationalpark/", }, { - 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" + name: "Färnebofjärden", + size: 101, + region: "Gävleborg", + regionGroup: "Central", + image: "farnebofjarden-nationalpark.webp", + externalLink: + "https://www.sverigesnationalparker.se/park/farnebofjardens-nationalpark/", }, { - 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' + name: "Garphyttan", + size: 1.11, + region: "Örebro", + regionGroup: "Central", + image: "garphyttan-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/garphyttans-nationalpark/", }, { - title: 'The Lord of the Rings: The Fellowship of the Ring', - author: 'J.R.R. Tolkien', - year: 1954, - genre: 'Fantasy', - rating: 4.55, - 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' + name: "Gotska Sandön", + size: 36, + region: "Gotland", + regionGroup: "South", + image: "gotska-sandon-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/gotska-sandons-nationalpark/", }, { - title: 'The Shining', - author: 'Stephen King', - year: 1977, - genre: 'Horror', - rating: 4.3, - 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' + name: "Hamra", + size: 13.83, + region: "Gävleborg", + regionGroup: "Central", + image: "hamra-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/hamra-nationalpark/", }, { - title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe', - author: 'C.S. Lewis', - year: 1950, - genre: 'Fantasy', - rating: 4.15, - 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' + name: "Haparanda Skärgård", + size: 60, + region: "Norrbotten", + regionGroup: "North", + image: "haparanda-skardgards-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/haparanda-skargards-nationalpark/", }, { - 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' + name: "Kosterhavet", + size: 388, + region: "Västra Götaland", + regionGroup: "South", + image: "kosterhavets-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/kosterhavets-nationalpark/", }, { - 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' + name: "Muddus", + size: 493, + region: "Norrbotten", + regionGroup: "North", + image: "muddus-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/muddus--muttos-nationalpark/", }, { - 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' + name: "Norra Kvill", + size: 1.14, + region: "Kalmar", + regionGroup: "Central", + image: "norra-kvill-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/norra-kvills-nationalpark/", }, { - 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' + name: "Padjelanta", + size: 1984, + region: "Norrbotten", + regionGroup: "North", + image: "padjelanta-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/padjelanta--badjelannda-nationalpark/", }, { - 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' + name: "Pieljekaise", + size: 153, + region: "Norrbotten", + regionGroup: "North", + image: "pieljekaise-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/pieljekaise-nationalpark/", }, { - 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' + name: "Sarek", + size: 1970, + region: "Norrbotten", + regionGroup: "North", + image: "sarek-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/sarek-nationalpark/", }, { - title: 'The Giver', - author: 'Lois Lowry', - 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: "Skuleskogen", + size: 30, + region: "Västernorrland", + regionGroup: "North", + image: "skuleskogens-nationalpark.webp", + externalLink: + "https://www.sverigesnationalparker.se/park/skuleskogens-nationalpark/", + }, { - 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' + name: "Sonfjället", + size: 103, + region: "Jämtland", + regionGroup: "Central", + image: "sonfjallets-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/sonfjallets-nationalpark/", }, { - 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' + name: "Stenshuvud", + size: 3.9, + region: "Skåne", + regionGroup: "South", + image: "stenshuvuds-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/stenshuvuds-nationalpark/", }, { - 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' + name: "Stora Sjöfallet", + size: 1278, + region: "Norrbotten", + regionGroup: "North", + image: "stora-sjofallet-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/stora-sjofallets--stuor-muorkke-nationalpark/", }, { - 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" + name: "Store Mosse", + size: 100, + region: "Jönköping", + regionGroup: "South", + image: "stora-mosse-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/store-mosse-nationalpark/", }, { - 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' + name: "Söderåsen", + size: 16.25, + region: "Skåne", + regionGroup: "South", + image: "soderasen-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/soderasens-nationalpark/", }, { - 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' + name: "Tiveden", + size: 20, + region: "Västergötland", + regionGroup: "Central", + image: "tiveden-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/tivedens-nationalpark/", }, { - 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' + name: "Tresticklan", + size: 28.97, + region: "Västra Götaland", + regionGroup: "Central", + image: "tresticklan-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/tresticklans-nationalpark/", }, { - 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' + name: "Tyresta", + size: 19.7, + region: "Stockholm", + regionGroup: "Central", + image: "tyresta-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/tyresta-nationalpark/", }, { - 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' + name: "Töfsingdalen", + size: 16.15, + region: "Dalarna", + regionGroup: "Central", + image: "tofsingdalen-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/tofsingdalens-nationalpark/", }, { - 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' + name: "Vadvetjåkka", + size: 26.3, + region: "Norrbotten", + regionGroup: "North", + image: "vadvetjakka-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/vadvetjakka-nationalpark/", }, { - 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' + name: "Åsnen", + size: 19, + region: "Kronoberg", + regionGroup: "South", + image: "asnen-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/asnens-nationalpark/", }, { - 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' + name: "Ängsö", + size: 1.68, + region: "Västmanland", + regionGroup: "Central", + image: "angso-nationalpark.jpg", + externalLink: + "https://www.sverigesnationalparker.se/park/angso-nationalpark/", + }, +]; + +/* ********************************* + Function to load parks into the DOM +********************************* */ + +const renderParks = (parks) => { + // Initialize an empty string to build up the HTML content + let html = ""; + + // Loop through each park in the array + parks.forEach((park) => { + html += ` + +
+ ${park.size} km² + Image of ${park.name} +
+
+

${park.name}

+

${park.region}

+
+ + `; + }); + + // Update with number of parks currently displayed + parkResults.innerHTML = `

${parks.length} parks

`; + + // Update the parks container in the DOM with the generated HTML + parksContainer.innerHTML = html; +}; + +/* ********************************* + Function to sort parks based on the selected option +********************************* */ + +const sortParks = (parks, sortOption) => { + // Create a copy of the parks array to avoid changing the original array + const parksCopy = [...parks]; + + // Check which sort option is selected and sort accordingly + if (sortOption === SORT_ALPHABETICAL) { + parksCopy.sort((a, b) => a.name.localeCompare(b.name)); + } else if (sortOption === SORT_LARGEST) { + parksCopy.sort((a, b) => b.size - a.size); + } else if (sortOption === SORT_SMALLEST) { + parksCopy.sort((a, b) => a.size - b.size); + } + + // Return the sorted array of parks + return parksCopy; +}; + +/* ********************************* + Function to update parks display based on current filter and sort +********************************* */ + +const updateParksDisplay = () => { + // If filter is set to "All", use the original array and apply the search filter + let parksToDisplay = [...nationalParksInSweden]; + + // Apply region filter if not "All" + if (currentFilterValue !== FILTER_ALL) { + parksToDisplay = parksToDisplay.filter((park) => { + return park[currentFilterKey] === currentFilterValue; + }); + } + + // If a search term is provided, filter the parks based on the search term + if (currentSearchTerm) { + parksToDisplay = parksToDisplay.filter((park) => + JSON.stringify(park) + .toLowerCase() + .includes(currentSearchTerm.toLowerCase()) + ); } -] + + // Sort the parks based on the current sort option + parksToDisplay = sortParks(parksToDisplay, currentSortOption); + + // Load the sorted and filtered parks into the DOM + renderParks(parksToDisplay); +}; + +/* ********************************* + Event listeners for region filter buttons +********************************* */ + +// Select all filter buttons within the element with id "filter-region" +const filterButtons = document.querySelectorAll("#filter-region button"); + +// Add event listeners to each filter button +filterButtons.forEach((button) => { + button.addEventListener("click", () => { + // If the user clicks the active filter, stop executing with return + if (currentFilterValue === button.dataset.region) { + return; + } + + // Remove the "is-selected" class from all buttons + filterButtons.forEach((btn) => btn.classList.remove("is-selected")); + + // Add the "is-selected" class to the clicked button + button.classList.add("is-selected"); + + // Update the current filter value based on the button's data-region attribute + currentFilterValue = button.dataset.region; + + // Update the parks display based on the new filter + updateParksDisplay(); + }); +}); + +/* ********************************* + Event listener for sort select dropdown +********************************* */ + +// Get the select element for sorting parks +const sortSelect = document.getElementById("sort-parks"); + +// Add an event listener to the sort select dropdown +sortSelect.addEventListener("change", () => { + // Update the current sort option based on the selected value + currentSortOption = sortSelect.value; + + // Update the parks display based on the new sort option + updateParksDisplay(); +}); + +/* ********************************* + Event listener for search input +********************************* */ + +const searchInput = document.getElementById("search-parks__input"); + +searchInput.addEventListener("input", () => { + // Update the global search term + currentSearchTerm = searchInput.value; + + // Update the parks display based on the search term + updateParksDisplay(); +}); + +/* ********************************* + Initial load of parks +********************************* */ + +updateParksDisplay(); diff --git a/style.css b/style.css index e69de29..0c5b2f3 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,428 @@ +:root { + --white: #fff; + --black: #000; + --dark-gray: #666; + --medium-gray: #999; + --light-gray: #eee; + --grid-width: min(calc(100% - 2rem), 75rem); + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 0.75rem; + --space-lg: 1rem; + --space-xl: 1.5rem; + --space-2xl: 1.75rem; + --space-3xl: 2rem; + --font-family-chivo-mono: "Chivo Mono", monospace; + --font-family-frank-ruhl: "Frank Ruhl Libre", serif; +} + +/* ********************************* + Resets & Globals +********************************* */ + +* { + box-sizing: border-box; +} + +*:focus-visible { + outline: 0.25rem solid green; + outline-offset: 0.375rem; + border-radius: 1rem; +} + +body { + font-family: var(--font-family-chivo-mono); + margin: 0; + padding: 0; +} + +section { + width: 100%; +} + +img { + max-width: 100%; + height: auto; +} + +/* ********************************* + Typography +********************************* */ + +h1, +h2, +h3 { + font-family: var(--font-family-frank-ruhl); + line-height: 1.1; + + a & { + color: var(--black); + } +} + +h1 { + font-size: 2.65rem; + letter-spacing: -0.05rem; + font-weight: 400; +} + +h3 { + font-size: 1rem; + font-weight: 500; + + @media (min-width: 768px) { + font-size: 1.25rem; + } +} + +p { + font-size: 1rem; + line-height: 1.4; +} + +/* ********************************* + Buttons +********************************* */ + +button { + color: var(--black); + background-color: transparent; + border: 0.125rem solid var(--black); + border-radius: 2.5rem; + + font-family: var(--font-family-chivo-mono); + font-weight: 500; + font-size: 0.85rem; + + padding: 0.625rem 1.5rem; + cursor: pointer; + transition: 0.25s ease-out; + transition-property: background, box-shadow; + + @media (min-width: 768px) { + font-size: 1rem; + } + + &.is-selected { + color: var(--white); + background-color: var(--black); + } + + &:hover:not(.is-selected) { + background-color: var(--light-gray); + } + + &:disabled { + cursor: not-allowed; + color: var(--medium-gray); + border-color: var(--medium-gray); + } +} + +.button-group { + display: flex; + flex-direction: row; + gap: var(--space-sm); + overflow: auto; + scroll-behavior: smooth; + + &::-webkit-scrollbar { + display: none; + } + + @media (min-width: 768px) { + justify-content: center; + overflow: visible; + } + + @media (min-width: 1025px) { + flex-flow: column wrap; + align-items: center; + } + + button { + @media (max-width: 767px) { + &:first-child { + margin-left: var(--space-lg); + } + &:last-child { + margin-right: var(--space-lg); + } + } + + @media (min-width: 1025px) { + width: 100%; + flex: 1 1 100%; + } + } +} + +/* ********************************* + Forms +********************************* */ +select { + -webkit-appearance: none; /* For WebKit browsers */ + -moz-appearance: none; /* For Firefox */ + appearance: none; /* Removes native styling */ + + background-color: transparent; + background-image: url("images/arrow.svg"); /* Custom arrow icon */ + background-repeat: no-repeat; + background-position: right 0 center; + background-size: 0.875rem; + padding-right: 0.875rem; + + font-family: "Chivo Mono"; + font-size: 0.75rem; + color: var(--black); + text-align: right; + border: none; + cursor: pointer; + + &:focus { + outline: none; + } + + @media (min-width: 768px) { + font-size: 0.875rem; + } +} + +.select-label { + font-family: "Chivo Mono"; + font-size: 0.75rem; + @media (min-width: 768px) { + font-size: 0.875rem; + } +} + +.search-parks { + position: relative; + + label { + display: flex; + align-items: center; + } + + label span { + position: absolute; + color: transparent; + left: 1rem; + } + + input { + font-family: var(--font-family-chivo-mono); + border: 1px solid var(--medium-gray); + border-radius: 0.5rem; + padding: 1rem; + width: 100%; + font-size: 1rem; + transition: 0.25s ease-out; + transition-property: border, box-shadow; + + &:focus { + outline: none; + border-color: var(--black); + box-shadow: 0 0 0 0.25rem var(--light-gray); + } + } +} + +/* ********************************* + Containers +********************************* */ + +.container { + display: flex; + align-items: center; + flex-direction: column; + gap: var(--space-xl); + margin: var(--space-lg) auto; + + @media (min-width: 1025px) { + flex-direction: row; + align-items: flex-start; + gap: calc(var(--space-3xl) * 2); + width: var(--grid-width); + padding: calc(var(--space-3xl) * 2) 0; + } +} + +/* ********************************* + Intro + Hero +********************************* */ + +.intro { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xl); + + @media (min-width: 1025px) { + position: sticky; + top: 2rem; + max-width: 20rem; + } +} + +.hero { + display: flex; + position: relative; + flex-direction: column; + justify-content: flex-end; + + width: var(--grid-width); + max-width: 22rem; + min-height: 24rem; + + background-color: #ccc; + border-top-left-radius: 12rem; + border-top-right-radius: 12rem; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + + padding: var(--space-3xl); + overflow: hidden; + + @media (min-width: 1025px) { + width: 100%; + } + + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + display: block; + height: 100%; + width: 100%; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent); + z-index: 0; + } + + .hero__title { + color: var(--white); + text-align: center; + text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.67); + margin: 0; + z-index: 1; + } +} + +.hero__image { + position: absolute; + top: 0; + left: 0; + object-fit: cover; + width: 100%; + height: 100%; +} + +/* ********************************* + Meta information + Sorting +********************************* */ +.park-content { + display: flex; + flex-flow: row wrap; + gap: var(--space-md); + width: var(--grid-width); + + @media (min-width: 1025px) { + width: 100%; + } + + > * { + flex: 0 0 100%; + } +} + +.park-meta { + display: flex; + justify-content: space-between; +} + +.park-results h3 { + margin: 0; +} + +/* ********************************* + Cards +********************************* */ + +.cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-lg); + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 1fr); + } + + @media (min-width: 1025px) { + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3xl); + } +} + +.card { + display: flex; + flex-direction: column; + gap: var(--space-sm); + + text-decoration: none; +} + +a.card { + .card__image:hover { + border: 0.25rem solid var(--black); + } +} + +.card__top { + position: relative; +} + +.card__bottom { + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-sm); +} + +.card__badge { + position: absolute; + top: var(--space-md); + right: var(--space-md); + + color: var(--black); + background-color: var(--white); + border-radius: var(--space-3xl); + + font-size: 0.75rem; + padding: var(--space-xs) var(--space-sm); +} + +.card__image { + background-color: var(--light-gray); + object-fit: cover; + aspect-ratio: 5 / 6; + border-radius: var(--space-lg); + width: 100%; + border: 0 solid transparent; + transition: border 0.25s ease-out; +} + +.card__title { + margin: 0; +} + +.card__info { + color: var(--dark-gray); + font-size: 0.75rem; + line-height: 1.2; + margin: 0; + + @media (min-width: 768px) { + font-size: 0.875rem; + } +}