Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pull request #77

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 02_02/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion 02_03/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
46 changes: 45 additions & 1 deletion 03_14/script.js
Original file line number Diff line number Diff line change
@@ -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.
*/
Expand All @@ -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();
1 change: 1 addition & 0 deletions 05_10/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
85 changes: 56 additions & 29 deletions 05_10/script.js
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -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");
Expand All @@ -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);
24 changes: 24 additions & 0 deletions 05_10/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
38 changes: 37 additions & 1 deletion 07_04/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

// Step 1: Build an array with 8 items
let items = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape", "honeydew"];
console.log("Initial array:", items);

// Step 2: Remove the last item
let lastItem = items.pop();
console.log("Array after removing last item:", items);
console.log("Last item:", lastItem);

// Step 3: Add the last item as the first item on the array
items.unshift(lastItem);
console.log("Array after adding last item to the start:", items);

// Step 4: Sort the items by alphabetical order
items.sort();
console.log("Array sorted alphabetically:", items);

// Step 5: Use the find() method to find a specific item in the array
let itemToFind = "cherry";
let foundItem = items.find(item => item === itemToFind);
console.log("Found item:", foundItem);

// Step 6: Remove the item you found using the find() method from the array
if (foundItem) {
items = items.filter(item => item !== foundItem);
console.log(Array after removing ${foundItem}:, items);
} else {
console.log(${itemToFind} not found in 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);
78 changes: 47 additions & 31 deletions 08_16/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Loading