Technigo · JoyceKuode · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,7 @@
-# project-library
+# 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
diff --git a/album-images/Beyoncé_-_Cowboy_Carter.png b/album-images/Beyoncé_-_Cowboy_Carter.png
diff --git a/album-images/CorpseBride.jpg b/album-images/CorpseBride.jpg
diff --git a/album-images/Dangerously_In_Love_Album(2003).png b/album-images/Dangerously_In_Love_Album(2003).png
diff --git a/album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg b/album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg
diff --git a/album-images/Encore_(Eminem_album)_coverart.jpg b/album-images/Encore_(Eminem_album)_coverart.jpg
diff --git a/album-images/HarrypotterPSsoundtrack.jpg b/album-images/HarrypotterPSsoundtrack.jpg
diff --git a/album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg b/album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg
diff --git a/album-images/Jurassicpark-1-.jpg b/album-images/Jurassicpark-1-.jpg
diff --git a/album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg b/album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg
diff --git a/album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg b/album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg
diff --git a/album-images/Minutes_to_Midnight_cover.jpg b/album-images/Minutes_to_Midnight_cover.jpg
diff --git a/album-images/PearlJam-Ten2.jpg b/album-images/PearlJam-Ten2.jpg
diff --git a/album-images/PearlJamVitalogy.jpg b/album-images/PearlJamVitalogy.jpg
diff --git a/album-images/Taylor_Swift_-_Lover.png b/album-images/Taylor_Swift_-_Lover.png
diff --git a/album-images/Taylor_Swift_-_Taylor_Swift.png b/album-images/Taylor_Swift_-_Taylor_Swift.png
diff --git a/album-images/header-image.jpg b/album-images/header-image.jpg
diff --git a/...-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png b/...-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png
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
diff --git a/album-images/queen-innuendo.jpg b/album-images/queen-innuendo.jpg
diff --git a/album-images/queen-opera.jpg b/album-images/queen-opera.jpg
diff --git a/album-images/queen-queenII.jpg b/album-images/queen-queenII.jpg
diff --git a/album-images/stevie-wonder-sitkol.jpg b/album-images/stevie-wonder-sitkol.jpg
diff --git a/books-images/1984.jpg b/books-images/1984.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/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/the-chronicles-of-narnia.jpg b/books-images/the-chronicles-of-narnia.jpg
diff --git a/books-images/the-great-gatsby.jpg b/books-images/the-great-gatsby.jpg
diff --git a/books-images/the-hobbit.jpg b/books-images/the-hobbit.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,115 @@
 <!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>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <title>Album Library</title>
 </head>
+
 <body>
-  <h1>Project Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
+  <div id="fullscreen-overlay" class="fullscreen-overlay"></div>
+  <header class="header">
+    <div class="overlay">
+      <h1>Album Library</h1>
+    </div>
+  </header>
+
+  <!-- Button Container -->
+  <div class="button-container">
+    <!-- Filter Button -->
+    <button id="filterButton" class="button">Filter</button>
+
+    <!-- Filter Panel -->
+    <div id="filterPanel" class="panel">
+      <span id="closeFilterPanel" class="closePanel" style="cursor: pointer;">&times;</span>
+      <h3>Filter by</h3>
+      <!--  Select menu for genre  -->
+      <label for="genreSelect">Genre:</label>
+      <select id="genreSelect">
+        <option value="all">Show all</option>
+        <option value="Country">Country</option>
+        <option value="Film score">Film score</option>
+        <option value="Hip hop">Hip hop</option>
+        <option value="Pop">Pop</option>
+        <option value="Rock">Rock</option>
+        <option value="Soul">Soul</option>
+      </select>
+      <label for="artistSelect">Artist:</label>
+      <select id="artistSelect">
+        <option value="all">Show all</option>
+        <option value="Beyoncé">Beyoncé</option>
+        <option value="Danny Elfman">Danny Elfman</option>
+        <option value="Eminem">Eminem</option>
+        <option value="John Williams">John Williams</option>
+        <option value="Led Zeppelin">Led Zeppelin</option>
+        <option value="Linkin Park">Linkin Park</option>
+        <option value="Pearl Jam">Pearl Jam</option>
+        <option value="Queen">Queen</option>
+        <option value="Stevie Wonder">Stevie Wonder</option>
+        <option value="Taylor Swift">Taylor Swift</option>
+      </select>
+      <button id="applyFilters" class="apply">Apply</button>
+    </div>
+
+    <!-- Sort Button -->
+    <button id="sortButton" class="button">Sort</button>
+    <!-- Sort Panel -->
+    <div id="sortPanel" class="panel">
+      <span id="closeSortPanel" class="closePanel" style="cursor: pointer;">&times;</span>
+      <h3>Sort</h3>
+      <!-- Select menu for sorting -->
+      <select id="sortSelect">
+        <option value="alpha-title">Alphabetically by Title A-Z</option>
+        <option value="reverse-title">Alphabetically by Title Z-A</option>
+        <option value="alpha-artist">Alphabetically by Artist A-Z</option>
+        <option value="reverse-artist">Alphabetically by Artist Z-A</option>
+        <option value="newest-year">By Release Year Newest to Oldest</option>
+        <option value="oldest-year">By Release Year Oldest to Newest</option>
+        <option value="shortest-length">By Length Shortest to Longest</option>
+        <option value="longest-length">By Length Longest to Shortest</option>
+      </select>
+      <button id="applySort" class="apply">Apply</button>
+    </div>
+  </div>
+  <div>
+    <!-- Random button -->
+    <button id="randomButton" class="random-button">Show Random Album</button>
+  </div>
+
+  <!-- Album Container -->
+  <div id="album-container" class="album-container"></div>
+  <script src="script.js"></script>
+  <!-- personal info -->
+
+  <footer>
+    <div class="personal-info-items">
+      <h4 class="github-account">
+        <a href="https://github.com/JoyceKuode" target="_blank">
+          <img src="album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png" alt="GitHub"
+            width="20"> JoyceKuode
+        </a>
+      </h4>
+      <h4>
+        <a href="https://github.com/IamLise" target="_blank">
+          <img src="album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png"
+            alt="GitHub Logo" width="20"> IamLise
+        </a>
+      </h4>
+      <h4>
+        <a href="https://github.com/Joheri1" target="_blank">
+          <img src="album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png"
+            alt="GitHub Logo" width="20"> Joheri1
+        </a>
+      </h4>
+    </div>
+    <div>
+      <h4>© 2024 Copyright - Developed by Joyce Kuo, Liselotte Engström, and Johanna Eriksson</h4>
+    </div>
+  </footer>
 </body>
+
 </html>
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