LinkedInLearning · serhatece · Jul 23, 2024 · Jul 24, 2024 · Jul 25, 2024 · Jul 27, 2024
diff --git a/02_02/index.html b/02_02/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Module demo</title>
-    <script src="script.js"></script>
   </head>
   <body></body>
+  <script src="script.js"></script>
 </html>
diff --git a/02_03/index.html b/02_03/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Module demo</title>
-    <script src="script.js" defer></script>
   </head>
   <body></body>
+  <script src="script.js" defer></script>
 </html>
diff --git a/03_14/script.js b/03_14/script.js
@@ -1,6 +1,6 @@
 /**
  * Challenge: Create a new object type
- * 
+ *
  * - Create a new object type "Book" using a class or an object constructor function.
  * - Add at least 5 book objects.
  */
@@ -21,3 +21,47 @@ const everydayPack = new Backpack(
 console.log("The everydayPack object:", everydayPack);
 console.log("The pocketNum value:", everydayPack.pocketNum);
 console.log("Days since aquired:", everydayPack.backpackAge());
+
+// Book sınıfı tanımlama
+class Book {
+  constructor(title, author, genre, yearPublished, pages) {
+    this.title = title;
+    this.author = author;
+    this.genre = genre;
+    this.yearPublished = yearPublished;
+    this.pages = pages;
+  }
+
+  // Kitap bilgilerini gösteren metod
+  displayInfo() {
+    console.log(
+      `${this.title} yazarı ${this.author}, ${this.yearPublished} yılında yayımlanmış ve ${this.pages} sayfadır. Tür: ${this.genre}`
+    );
+  }
+}
+
+// Beş farklı kitap nesnesi oluşturma
+const book1 = new Book("1984", "George Orwell", "Distopya", 1949, 328);
+const book2 = new Book("Savaş ve Barış", "Lev Tolstoy", "Roman", 1869, 1225);
+const book3 = new Book(
+  "Harry Potter ve Felsefe Taşı",
+  "J.K. Rowling",
+  "Fantastik",
+  1997,
+  223
+);
+const book4 = new Book("Bülbülü Öldürmek", "Harper Lee", "Roman", 1960, 281);
+const book5 = new Book(
+  "Küçük Prens",
+  "Antoine de Saint-Exupéry",
+  "Çocuk",
+  1943,
+  96
+);
+
+// Nesneleri ve metodları test etme
+book1.displayInfo();
+book2.displayInfo();
+book3.displayInfo();
+book4.displayInfo();
+book5.displayInfo();
diff --git a/05_10/index.html b/05_10/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
     <title>BackpackPacker</title>
     <link
       href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=Work+Sans:[email protected]&display=swap"

diff --git a/05_10/script.js b/05_10/script.js
@@ -1,13 +1,14 @@
 /**
  * Challenge: Add a new element
  * - In JavaScript, create a new element to hold a navigation menu
- * - Add an unordered list and a series of no less than five links to the list 
+ * - Add an unordered list and a series of no less than five links to the list
  * - Use single words like “home”, “about”, etc for the list items and set the src attribute to # for simplicity
  * - Add the new navigation element to the DOM directly after the header
- * - Write basic CSS and add classes as necessary to create a horizontal layout for the menu. 
+ * - Write basic CSS and add classes as necessary to create a horizontal layout for the menu.
  * - A tip: Use either display flex or display grid to create the horizontal menu.
  */
 
+// Import Backpack class from the module (assuming Backpack.js exists and is properly defined)
 import Backpack from "./Backpack.js";
 
 const everydayPack = new Backpack(
@@ -23,33 +24,31 @@ const everydayPack = new Backpack(
 );
 
 const content = `
-
-    <figure class="backpack__image">
-      <img src=${everydayPack.image} alt="" />
-    </figure>
-    <h1 class="backpack__name">Everyday Backpack</h1>
-    <ul class="backpack__features">
-      <li class="packprop backpack__volume">Volume:<span> ${
-        everydayPack.volume
-      }l</span></li>
-      <li class="packprop backpack__color">Color:<span> ${
-        everydayPack.color
-      }</span></li>
-      <li class="backpack__age">Age:<span> ${everydayPack.backpackAge()} days old</span></li>
-      <li class="packprop backpack__pockets">Number of pockets:<span> ${
-        everydayPack.pocketNum
-      }</span></li>
-      <li class="packprop backpack__strap">Left strap length:<span> ${
-        everydayPack.strapLength.left
-      } inches</span></li>
-      <li class="packprop backpack__strap">Right strap length:<span> ${
-        everydayPack.strapLength.right
-      } inches</span></li>
-      <li class="packprop backpack__lid">Lid status:<span> ${
-        everydayPack.lidOpen
-      }</span></li>
-    </ul>
-
+  <figure class="backpack__image">
+    <img src=${everydayPack.image} alt="" />
+  </figure>
+  <h1 class="backpack__name">Everyday Backpack</h1>
+  <ul class="backpack__features">
+    <li class="packprop backpack__volume">Volume:<span> ${
+      everydayPack.volume
+    }l</span></li>
+    <li class="packprop backpack__color">Color:<span> ${
+      everydayPack.color
+    }</span></li>
+    <li class="backpack__age">Age:<span> ${everydayPack.backpackAge()} days old</span></li>
+    <li class="packprop backpack__pockets">Number of pockets:<span> ${
+      everydayPack.pocketNum
+    }</span></li>
+    <li class="packprop backpack__strap">Left strap length:<span> ${
+      everydayPack.strapLength.left
+    } inches</span></li>
+    <li class="packprop backpack__strap">Right strap length:<span> ${
+      everydayPack.strapLength.right
+    } inches</span></li>
+    <li class="packprop backpack__lid">Lid status:<span> ${
+      everydayPack.lidOpen
+    }</span></li>
+  </ul>
 `;
 
 const main = document.querySelector(".maincontent");
@@ -60,3 +59,31 @@ newArticle.setAttribute("id", "everyday");
 newArticle.innerHTML = content;
 
 main.append(newArticle);
+
+// Creating a new navigation element
+const nav = document.createElement("nav");
+nav.classList.add("navigation");
+
+// Creating an unordered list for the navigation menu
+const ul = document.createElement("ul");
+ul.classList.add("nav-list");
+
+// Array of link names
+const links = ["Home", "About", "Services", "Contact", "Blog"];
+
+// Creating list items and links
+links.forEach((linkText) => {
+  const li = document.createElement("li");
+  li.classList.add("nav-item");
+  const a = document.createElement("a");
+  a.setAttribute("href", "#");
+  a.textContent = linkText;
+  li.appendChild(a);
+  ul.appendChild(li);
+});
+
+nav.appendChild(ul);
+
+// Insert the navigation menu directly after the header
+const header = document.querySelector("header");
+header.insertAdjacentElement("afterend", nav);
diff --git a/05_10/style.css b/05_10/style.css
@@ -0,0 +1,24 @@
+/* Basic styles for the navigation menu */
+.navigation {
+  background-color: #333;
+  padding: 10px;
+}
+
+.nav-list {
+  list-style: none;
+  display: flex;
+  justify-content: space-around;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-item a {
+  color: white;
+  text-decoration: none;
+  padding: 10px 20px;
+  display: block;
+}
+
+.nav-item a:hover {
+  background-color: #575757;
+}
diff --git a/07_04/script.js b/07_04/script.js
@@ -2,10 +2,46 @@
  * Challenge: Build and modify an array
  * - Build an array with 8 items
  * - Remove the last item
- * - Add the last item as the first item on the array 
+ * - Add the last item as the first item on the array
  * - Sort the items by alphabetical order
  * - Use the find() method to find a specific item in the array
  * - Remove the item you found using the find method from the array.
  */
 
+// - Build an array with 8 items
+let items = [
+  "apple",
+  "banana",
+  "cherry",
+  "date",
+  "elderberry",
+  "fig",
+  "grape",
+  "honeydew",
+];
 
+console.log("Original Array:", items);
+
+// - Remove the last item
+let lastItem = items.pop();
+console.log("After removing the last item:", items);
+
+// - Add the last item as the first item on the array
+items.unshift(lastItem);
+console.log("After adding the last item as the first item:", items);
+
+// - Sort the items by alphabetical order
+items.sort();
+console.log("After sorting alphabetically:", items);
+
+// - Use the find() method to find a specific item in the array
+let itemToFind = "date";
+let foundItem = items.find((item) => item === itemToFind);
+console.log(`Found item: ${foundItem}`);
+
+// - Remove the item you found using the find method from the array
+let index = items.indexOf(foundItem);
+if (index !== -1) {
+  items.splice(index, 1);
+}
+console.log("After removing the found item:", items);
diff --git a/08_16/script.js b/08_16/script.js
@@ -7,53 +7,69 @@
  */
 import Backpack from "./components/Backpack.js";
 
-const everydayPack = new Backpack(
-  "pack01",
-  "Everyday Backpack",
-  30,
-  "grey",
-  15,
-  26,
-  26,
-  false,
-  "December 5, 2018 15:00:00 PST",
-  "../assets/images/everyday.svg"
-);
+const backpackObjectArray = [
+  new Backpack(
+    "pack01",
+    "Everyday Backpack",
+    30,
+    "grey",
+    15,
+    26,
+    26,
+    false,
+    "December 5, 2018 15:00:00 PST",
+    "../assets/images/everyday.svg"
+  ),
+  new Backpack(
+    "pack02",
+    "Hiking Backpack",
+    50,
+    "blue",
+    20,
+    30,
+    30,
+    true,
+    "January 1, 2020 10:00:00 PST",
+    "../assets/images/hiking.svg"
+  ),
+  // Daha fazla sırt çantası nesnesi ekleyin
+];
 
-const content = `
+const main = document.querySelector(".maincontent");
+
+backpackObjectArray.forEach((backpack) => {
+  const content = `
     <figure class="backpack__image">
-      <img src=${everydayPack.image} alt="" />
+      <img src=${backpack.image} alt="${backpack.name}" />
     </figure>
-    <h1 class="backpack__name">${everydayPack.name}</h1>
+    <h1 class="backpack__name">${backpack.name}</h1>
     <ul class="backpack__features">
       <li class="packprop backpack__volume">Volume:<span> ${
-        everydayPack.volume
+        backpack.volume
       }l</span></li>
       <li class="packprop backpack__color">Color:<span> ${
-        everydayPack.color
+        backpack.color
       }</span></li>
-      <li class="backpack__age">Age:<span> ${everydayPack.backpackAge()} days old</span></li>
+      <li class="backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li>
       <li class="packprop backpack__pockets">Number of pockets:<span> ${
-        everydayPack.pocketNum
+        backpack.pocketNum
       }</span></li>
       <li class="packprop backpack__strap">Left strap length:<span> ${
-        everydayPack.strapLength.left
+        backpack.strapLength.left
       } inches</span></li>
       <li class="packprop backpack__strap">Right strap length:<span> ${
-        everydayPack.strapLength.right
+        backpack.strapLength.right
       } inches</span></li>
       <li class="feature backpack__lid">Lid status:<span> ${
-        everydayPack.lidOpen ? "open" : "closed"
+        backpack.lidOpen ? "open" : "closed"
       }</span></li>
     </ul>
-
-`;
-
-const main = document.querySelector(".maincontent");
+  `;
 
-const newArticle = document.createElement("article");
-newArticle.classList.add("backpack");
-newArticle.setAttribute("id", "everyday");
-newArticle.innerHTML = content;
+  const newArticle = document.createElement("article");
+  newArticle.classList.add("backpack");
+  newArticle.setAttribute("id", backpack.id);
+  newArticle.innerHTML = content;
 
-main.append(newArticle);
+  main.append(newArticle);
+});