Technigo · gittebe · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1 +1,8 @@
-# project-library
+# project-library
+
+This week our project was to build a library using arrays as well as DOM manupulations, functions, variables and event handling. Our recipe library page offers options for filtering, sorting, and randomly selecting items.
+
+This project was the first team project as part of the Technigo bootcamp. Working together on the same repository has been a new important experience for us. 
+We decided on the project together and build a first HTML and CSS together. We worked on the Javascript codes first idividually and explained and discussed them later on.
+
+Link: https://library-recipes.netlify.app
diff --git a/index.html b/index.html
@@ -1,13 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
   <!-- Don't forget to change the title and connect the CSS file -->
-  <title>Project Library</title>
+  <title>Easy Peasy Recipes</title>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
 </head>
+
 <body>
-  <h1>Project Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
+  <header>
+    <h1>Easy Peasy Recipes</h1>
+  </header>
+  <main>
+
+    <div class="categories" id="categories">
+
+
+      <div class="dropdownContainer">
+        <h2>Type of Kitchen</h2>
+        <select id="filterDropdown">
+          <option value="all" id="all">All</option>
+          <option value="italian">Italian</option>
+          <option value="asian">Asian</option>
+          <option value="american">American</option>
+        </select>
+      </div>
+
+      <div class="time-container">
+        <h2 class="">Time</h2>
+        <form for="time">
+          <button type="button" class="shortest" id="shortest">Shortest</button>
+          <button type="button" class="longest" id="longest">Longest</button>
+        </form>
+      </div>
+
+      <div class="sort-container">
+        <h2>Sort A-Z</h2>
+        <form for="sort">
+          <button type="button" class="ascending" id="ascendingButton">Ascending</button>
+          <button type="button" class="decending" id="descendingButton">Decending</button>
+        </form>
+      </div>
+
+    </div>
+
+    <div class="random-container">
+      <h2>What's for dinner tonight?</h2>
+      <p>Can't decide? Let us help you pick your dinner.</p>
+      <button type="button" class="random-button" id="random-button">Surprise me!
+      </button>
+    </div>
+
+    <section id="card-container">
+    </section>
+
+  </main>
+
+  <!-- Link to connect the JavaScript file -->
+  <script src="./script.js"></script>
 </body>
+
 </html>
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,7 +1,9 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+https://library-recipes.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]
+Gitte Beckmann,
+Anna Hansen,
+Gabriella Iofe
+
+[gittebe, Anna2024WebDev, gabster94]