Technigo · zoe-lindqvist · Sep 16, 2024 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/README.md b/README.md
@@ -1 +1,13 @@
-# project-library
+# project-library
+
+On.Book is a dynamic website that displays and interacts with a curated array of books. The project addresses the problem by offering an intuitive interface where users can view, filter, sort, and search for books based on various criteria.
+
+# Technologies Used:
+
+- HTML: Structure the content.
+- CSS: Style the interface.
+- JavaScript: Implement dynamic functionality like filtering, sorting, and random selection of items.
+
+# View it live
+
+https://on-book.netlify.app/
diff --git a/books-images/1984.jpg b/books-images/1984.jpg
diff --git a/books-images/alchemist.jpg b/books-images/alchemist.jpg
diff --git a/books-images/book1.jpg b/books-images/book1.jpg
diff --git a/books-images/book10.jpg b/books-images/book10.jpg
diff --git a/books-images/book11.jpg b/books-images/book11.jpg
diff --git a/books-images/book12.jpg b/books-images/book12.jpg
diff --git a/books-images/book2.jpg b/books-images/book2.jpg
diff --git a/books-images/book3.jpg b/books-images/book3.jpg
diff --git a/books-images/book4.jpg b/books-images/book4.jpg
diff --git a/books-images/book5.jpg b/books-images/book5.jpg
diff --git a/books-images/book6.jpg b/books-images/book6.jpg
diff --git a/books-images/book7.jpg b/books-images/book7.jpg
diff --git a/books-images/book8.jpg b/books-images/book8.jpg
diff --git a/books-images/book9.jpg b/books-images/book9.jpg
diff --git a/books-images/harry-potter-and-the-sorcerer.jpg b/books-images/harry-potter-and-the-sorcerer.jpg
diff --git a/books-images/little-women.jpg b/books-images/little-women.jpg
diff --git a/books-images/moby-dick.jpg b/books-images/moby-dick.jpg
diff --git a/books-images/pride-and-prejudice.jpg b/books-images/pride-and-prejudice.jpg
diff --git a/books-images/road.jpg b/books-images/road.jpg
diff --git a/books-images/the-chronicles-of-narnia.jpg b/books-images/the-chronicles-of-narnia.jpg
diff --git a/books-images/the-girl-with-the-dragon-tattoo.jpg b/books-images/the-girl-with-the-dragon-tattoo.jpg
diff --git a/books-images/the-giver.jpg b/books-images/the-giver.jpg
diff --git a/books-images/the-great-gatsby.jpg b/books-images/the-great-gatsby.jpg
diff --git a/books-images/the-hitchhikers-guide-to-the-galaxy.jpg b/books-images/the-hitchhikers-guide-to-the-galaxy.jpg
diff --git a/books-images/the-hobbit.jpg b/books-images/the-hobbit.jpg
diff --git a/books-images/the-hunger-games-hunger-games.jpg b/books-images/the-hunger-games-hunger-games.jpg
diff --git a/books-images/the-lord-of-the-rings.jpg b/books-images/the-lord-of-the-rings.jpg
diff --git a/books-images/to-kill-a-mockingbird.jpg b/books-images/to-kill-a-mockingbird.jpg
diff --git a/books-images/unknown.jpg b/books-images/unknown.jpg
diff --git a/index.html b/index.html
@@ -1,13 +1,118 @@
 <!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" />
+    <title>On.Book Library</title>
+    <link rel="stylesheet" href="style.css" />
+    <!-- Preconnect to Google Fonts to optimize font loading -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- Google Font: PT Serif (for typography) -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <header>
+      <div class="navbar">
+        <div class="logo">
+          <h1>On.Book</h1>
+        </div>
+        <!-- Navigation Links -->
+        <nav>
+          <ul>
+            <li><a href="#">Books</a></li>
+            <li><a href="#">Categories</a></li>
+            <li><a href="#">Wishlist</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">About Us</a></li>
+          </ul>
+        </nav>
+        <!-- Search and Sign-in Section -->
+        <div class="search-signin">
+          <div class="search-box">
+            <input type="text" placeholder="Search book..." />
+          </div>
+          <!-- Divider between search and sign-in -->
+          <span class="divider">|</span>
+
+          <a href="javascript:void(0)" class="search-button">Search</a>
+        </div>
+      </div>
+    </header>
+    <!-- Hero Section: Introduction and Featured Books Slider -->
+    <section class="hero">
+      <div class="hero-content">
+        <div class="text-content">
+          <h2>Find Your Next Book</h2>
+          <p>
+            Our most popular and trending <b>On.Book</b> perfect.<br />Not sure
+            what to read now? Read the perfect book to match your mood.
+          </p>
+          <button>Explore Now</button>
+        </div>
+        <div class="book-slider">
+          <!-- First Book -->
+          <div class="book framed">
+            <img src="books-images/book1.jpg" alt="The Stranger" />
+            <p>The Stranger<br /><small>Albert Camus</small></p>
+          </div>
+          <!-- Middle Book (reverse-rounded with title/author above the image) -->
+          <div class="book framed reverse">
+            <p>Der Process<br /><small>Franz Kafka</small></p>
+            <img src="books-images/book2.jpg" alt="Der Process" />
+          </div>
+          <!-- Third Book -->
+          <div class="book framed">
+            <img src="books-images/book3.jpg" alt="The Divine Comedy" />
+            <p>The Divine Comedy<br /><small>Dante</small></p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Bestsellers Section: Displays the Bestselling Books -->
+    <section class="bestsellers">
+      <div class="bestsellers-header">
+        <h2>Bestsellers</h2>
+        <!-- Sorting and Filtering Options -->
+        <div class="sort-filter">
+          <!-- Sort Dropdown -->
+          <select id="sort-dropdown">
+            <option value="" disabled selected>Sort by</option>
+            <option value="titleAZ">Title (A-Z)</option>
+            <option value="titleZA">Title (Z-A)</option>
+            <option value="yearNewest">Year (Newest)</option>
+            <option value="yearOldest">Year (Oldest)</option>
+            <option value="ratingHighest">Rating (Highest)</option>
+            <option value="ratingLowest">Rating (Lowest)</option>
+          </select>
+          <!-- Sort Button -->
+          <button class="sort-btn" id="sort-button">Sort</button>
+          <!-- Genre Filter Dropdown -->
+          <div class="genre-filter">
+            <button class="genre-btn" id="genre-button">Genre</button>
+            <div id="dropdown-menu" class="dropdown-content">
+              <select id="filter-dropdown">
+                <option value="" disabled selected>Filter By:</option>
+                <option value="fiction">Fiction</option>
+                <option value="nonfiction">Nonfiction</option>
+                <option value="art-history">Art History</option>
+                <option value="psychology">Psychology</option>
+                <option value="mystery">Mystery</option>
+                <option value="fantasy">Fantasy</option>
+                <option value="crime-fiction">Crime Fiction</option>
+                <option value="dystopian">Dystopian</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Container for Displaying the List of Books -->
+      <div class="book-list" id="book-list"></div>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/instructions.md b/instructions.md
@@ -14,30 +14,29 @@ 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*:
-    - 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
 
 ## Stretch Goals
 
 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
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,7 +1,8 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+https://on-book.netlify.app/
 
 ## 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]
+
+- [https://github.com/zoe-lindqvist]
+- [https://github.com/jacquelinekellyhunt]
+- [https://github.com/Fannyhenriques]
diff --git a/recipe-images/baked-chicken.jpg b/recipe-images/baked-chicken.jpg
diff --git a/recipe-images/cheat’s-cheesy-focaccia.jpg b/recipe-images/cheat’s-cheesy-focaccia.jpg
diff --git a/recipe-images/chicken-paprikash.jpg b/recipe-images/chicken-paprikash.jpg
diff --git a/recipe-images/deep-fried-fish-bones.jpg b/recipe-images/deep-fried-fish-bones.jpg
diff --git a/recipe-images/fish-dish.jpg b/recipe-images/fish-dish.jpg
diff --git a/recipe-images/grilled.jpg b/recipe-images/grilled.jpg
diff --git a/recipe-images/individual-vegetarian-lasagnes.jpg b/recipe-images/individual-vegetarian-lasagnes.jpg
diff --git a/recipe-images/meat.jpg b/recipe-images/meat.jpg
diff --git a/recipe-images/vegetarian-shepherd's-pie.jpg b/recipe-images/vegetarian-shepherd's-pie.jpg
diff --git a/recipe-images/vegetarian-stir-fried-garlic-s.jpg b/recipe-images/vegetarian-stir-fried-garlic-s.jpg