Sweden's National Parks #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

HeleneWestrin wants to merge 14 commits into Technigo:main from HeleneWestrin:main

.DS_Store

Binary file not shown.

README.md

-Original file line number
+Diff line change
@@ -1 +1,15 @@
-    # project-library
+    # 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/)

books-images/1984.jpg

Binary file not shown.

books-images/harry-potter-and-the-sorcerer.jpg

Binary file not shown.

books-images/moby-dick.jpg

Binary file not shown.

books-images/pride-and-prejudice.jpg

Binary file not shown.

books-images/the-chronicles-of-narnia.jpg

Binary file not shown.

books-images/the-great-gatsby.jpg

Binary file not shown.

books-images/the-hobbit.jpg

Binary file not shown.

books-images/the-lord-of-the-rings.jpg

Binary file not shown.

books-images/to-kill-a-mockingbird.jpg

Binary file not shown.

books-images/unknown.jpg

Binary file not shown.

images/.DS_Store

Binary file not shown.

images/abisko-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/angso-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/arrow.svg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/asnen-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/bjornlandet-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/bla-jungfrun-nationalpark.webp

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/dalby-soderskog-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/djuro-nationalpark.webp

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/farnebofjarden-nationalpark.webp

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/favicon.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/fjarnebofjarden-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/fulufjallet-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/garphyttan-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/gotska-sandon-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/hamra-nationalpark.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

images/haparanda-skardgards-nationalpark.jpg

images/kosterhavets-nationalpark.jpg

images/muddus-nationalpark.jpg

images/muddus-nationalpark.webp

images/norra-kvill-nationalpark.jpg

images/padjelanta-nationalpark.jpg

images/pieljekaise-nationalpark.jpg

images/sarek-nationalpark.jpg

images/skuleskogens-nationalpark.webp

images/soderasen-nationalpark.jpg

images/sonfjallets-nationalpark.jpg

images/stenshuvuds-nationalpark.jpg

images/stora-mosse-nationalpark.jpg

images/stora-sjofallet-nationalpark.jpg

images/swedish-national-parks.webp

images/tiveden-nationalpark.jpg

images/tofsingdalen-nationalpark.jpg

images/tresticklan-nationalpark.jpg

images/tyresta-nationalpark.jpg

images/vadvetjakka-nationalpark.jpg

index.html

-Original file line number
+Diff line change
@@ -1,13 +1,63 @@
     <!DOCTYPE html>
     <html lang="en">
-    <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <!-- Don't forget to change the title and connect the CSS file -->
-      <title>Project Library</title>
-    </head>
-    <body>
-      <h1>Project Library</h1>
-      <!-- Don't forget to connect the JavaScript file -->
-    </body>
-    </html>
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400..700&family=Frank+Ruhl+Libre:wght@400..700&display=swap"
+          rel="stylesheet"
+        />
+        <link rel="stylesheet" href="style.css" />
+        <link rel="icon" href="./images/favicon.png" />
+        <title>Sweden's National Parks</title>
+      </head>
+      <body>
+        <main class="container">
+          <section class="intro">
+            <header class="hero">
+              <h1 class="hero__title">Sweden's<br />National Parks</h1>
+              <img
+                alt="A national park in Sweden by ChatGPT"
+                class="hero__image"
+                src="./images/swedish-national-parks.webp"
+              />
+            </header>
+            <section id="filters" class="filters">
+              <div id="filter-region" class="button-group">
+                <button class="is-selected" data-region="All">All</button>
+                <button data-region="North">Northern</button>
+                <button data-region="Central">Central</button>
+                <button data-region="South">South</button>
+              </div>
+            </section>
+          </section>
+          <section class="park-content">
+            <div id="park-meta" class="park-meta">
+              <div id="park-results" class="park-results"></div>
+              <div class="park-order-results">
+                <label for="sort-parks" class="select-label">Sort by:</label>
+                <select id="sort-parks">
+                  <option value="alphabetical" selected>Alphabetical</option>
+                  <option value="largest">Largest</option>
+                  <option value="smallest">Smallest</option>
+                </select>
+              </div>
+            </div>
+            <form class="search-parks" id="search-parks">
+              <label>
+                <span>Search parks</span>
+                <input
+                  id="search-parks__input"
+                  type="search"
+                  placeholder="Search parks"
+                />
+              </label>
+            </form>
+            <section id="parks" class="cards"></section>
+          </section>
+        </main>
+        <script src="script.js"></script>
+      </body>
+    </html>

instructions.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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,12 +32,14 @@ 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

    - Go wild with the sorting. Sort on:

      - 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

pull_request_template.md

This file was deleted.

recipe-images/baked-chicken.jpg

Diff not rendered.

recipe-images/cheat’s-cheesy-focaccia.jpg

Diff not rendered.

recipe-images/chicken-paprikash.jpg

Diff not rendered.

recipe-images/deep-fried-fish-bones.jpg

Diff not rendered.

recipe-images/fish-dish.jpg

Diff not rendered.

recipe-images/grilled.jpg

Diff not rendered.

recipe-images/individual-vegetarian-lasagnes.jpg

Diff not rendered.

recipe-images/meat.jpg

Diff not rendered.

recipe-images/vegetarian-shepherd's-pie.jpg

Diff not rendered.

recipe-images/vegetarian-stir-fried-garlic-s.jpg

Diff not rendered.