Technigo · HejHTML · Aug 26, 2025 · Aug 26, 2025 · Aug 27, 2025 · Aug 27, 2025
diff --git a/README.md b/README.md
@@ -1,10 +1,20 @@
 # Library
 
-Replace this readme with your own information about the project. You can include things like:
+Hi!
 
-- Brief description of the assignment
-- How you approached the task, what tools and techniques you used, and how you planned it
-- If you had more time, what would be next?
+I started off by asking ChatGPT about every element, every part in the javascript that I did not understand the function of just by reading and looking at videos. Tried to really get in to which code did what and asked a lot about the filter and sorting. I had a loooong talk about loops and how the looping works and why it was effective to write in a way so that I did not have put all book in again and again.
+
+I got lost in css at first, because it's great to have a nice site to look at. But then I really digged into js. I spent my free time during the week reading and taking all the classes and quiz on js in course. I took the quiz several times. Until I nailed it every time. I want to know that I know - not just get stuck in asking chatGPT everytime I forget. But wow, it's very helpful to ask so you don't get stuck and loose all energy in the process. 
+I'm glad I have some previous knowledge in coding, otherwise I would have felt like a cheaty cheater and probably had listened more to chatGPT. Now I'm at least a very irritating boss to it that calls it out when it gets things wrong.
+
+What more could I say about this project? I really liked it. I starts to feel like real websites now. I'm very very excited over the design part. Maybe because it's the easy bits. I don't feel I struggle with html or css, it all makes sense to me. I think I will study UI/UX after this course.
+
+If I did this again, I would have written down a few more js-datatypes, keywords and variables during lessons. Maybe some had stuck more and I did not have to argue so much with chatGPT about them. "What does it do?" "Why do I need this?" "How does it work when my code looks like this?" and a few "can you figure out what I did wrong here?" It is very helpful when AI explains to me in what order to write. Sometimes I have the right code but in the wrong order. 
+
+Happy coding!
+
+Best regards 
+Emma
 
 ## View it live
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+(https://boktipset.netlify.app/)
diff --git a/index.html b/index.html
@@ -1,13 +1,50 @@
 <!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 connect the CSS file -->
-  <title>Library</title>
+  <title>Library = Bibliotek</title>
+  <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-  <h1>Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
+  <header>
+    <h1>Biblioteket!</h1>
+    <div class="controls">
+
+
+      <select id="genre-filter">
+        <option value="all">Alla genrer</option>
+        <option value="Fiction">Fiction</option>
+        <option value="Fantasy">Fantasy</option>
+        <option value="Science Fiction">Science Fiction</option>
+        <option value="Mystery">Mysterium</option>
+        <option value="Horror">Skräck</option>
+        <option value="Adventure">Äventyr</option>
+        <option value="Dystopian">Dystopier</option>
+      </select>
+
+      <select id="sort-books">
+        <option value="year-desc">År (Senast utgiven)</option>
+        <option value="year-asc">Årtal (Äldst)</option>
+        <option value="rating-desc">Betyg (Högsta betyg)</option>
+        <option value="title-asc">Titel (A → Ö)</option>
+        <option value="title-desc">Titel (Ö → A)</option>
+      </select>
+
+      <input type="text" id="search-bar" placeholder="Sök författare eller titel..">
+
+      <button id="random-book">Ge mig boktips!</button>
+    </div>
+
+  </header>
+
+  <section id="random-book-container"></section>
+  <section id="book-list"></section>
+
+  <script src="script.js"></script>
+
 </body>
+
 </html>