Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0272fe7

Browse files
task day 20 done
1 parent 0876ff4 commit 0272fe7

File tree

1 file changed

+71
-30
lines changed

1 file changed

+71
-30
lines changed

‎day20/STARTER-FILES/app.js

Lines changed: 71 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,92 @@
11
const episodes = [
22
{
33
id: 39,
4-
title: 'Tech to Look Forward to in 2022',
5-
description: 'In this episode, Amy and James discuss the future of web development: Astro, Veet, Supabase, SvelteKit, Redwood.js, Blitz.js, GitHub Co-Pilot, Web Assembly, Blockchain, w3, no-code, and low-code.',
6-
cover: 'cover__episode-39.png',
7-
link: 'https://www.compressed.fm/episode/39'
4+
title: "Tech to Look Forward to in 2022",
5+
description:
6+
"In this episode, Amy and James discuss the future of web development: Astro, Veet, Supabase, SvelteKit, Redwood.js, Blitz.js, GitHub Co-Pilot, Web Assembly, Blockchain, w3, no-code, and low-code.",
7+
cover: "cover__episode-39.png",
8+
link: "https://www.compressed.fm/episode/39"
89
},
910
{
1011
id: 38,
11-
title: '2021 Gift Guide',
12-
description: 'This episode is full of picks! Amy and James talk about all of their favorite things, just in time for the holidays.',
13-
cover: 'cover__episode-38.png',
14-
link: 'https://www.compressed.fm/episode/38'
12+
title: "2021 Gift Guide",
13+
description:
14+
"This episode is full of picks! Amy and James talk about all of their favorite things, just in time for the holidays.",
15+
cover: "cover__episode-38.png",
16+
link: "https://www.compressed.fm/episode/38"
1517
},
1618
{
1719
id: 37,
18-
title: 'Building a Course',
19-
description: 'In this episode, Amy and James discuss all the things that go into course creation: why? What? How? Where to Host? Building the right audience.',
20-
cover: 'cover__episode-37.png',
21-
link: 'https://www.compressed.fm/episode/37'
20+
title: "Building a Course",
21+
description:
22+
"In this episode, Amy and James discuss all the things that go into course creation: why? What? How? Where to Host? Building the right audience.",
23+
cover: "cover__episode-37.png",
24+
link: "https://www.compressed.fm/episode/37"
2225
},
2326
{
2427
id: 36,
25-
title: 'SVGs FTW',
26-
description: 'In this episode, Amy and James discuss all things SVGs: what is, why and when to reach for it, and seven different ways to get an SVG on the page, and the pros and cons of each method.',
27-
cover: 'cover__episode-36.png',
28-
link: 'https://www.compressed.fm/episode/36'
28+
title: "SVGs FTW",
29+
description:
30+
"In this episode, Amy and James discuss all things SVGs: what is, why and when to reach for it, and seven different ways to get an SVG on the page, and the pros and cons of each method.",
31+
cover: "cover__episode-36.png",
32+
link: "https://www.compressed.fm/episode/36"
2933
},
3034
{
3135
id: 35,
32-
title: 'Crossover Episode with Purrfect Dev',
33-
description: 'This is a crossover episode with our friends, Alex Patterson and Brittney Postma from the Purrfect.dev podcast. In this episode, we all discuss our jobs. Even though we\'re all in tech, our day- to - day work looks vastly different.',
34-
cover: 'cover__episode-35.png',
35-
link: 'https://www.compressed.fm/episode/35'
36+
title: "Crossover Episode with Purrfect Dev",
37+
description:
38+
"This is a crossover episode with our friends, Alex Patterson and Brittney Postma from the Purrfect.dev podcast. In this episode, we all discuss our jobs. Even though we're all in tech, our day- to - day work looks vastly different.",
39+
cover: "cover__episode-35.png",
40+
link: "https://www.compressed.fm/episode/35"
3641
},
3742
{
3843
id: 34,
39-
title: 'Getting git',
40-
description: 'In this episode, Amy and James explain the fundamentals of git and their most-used commands. They also explain basic different workflows, if you\'re working with a team or by yourself.',
41-
cover: 'cover__episode-34.png',
42-
link: 'https://www.compressed.fm/episode/34'
44+
title: "Getting git",
45+
description:
46+
"In this episode, Amy and James explain the fundamentals of git and their most-used commands. They also explain basic different workflows, if you're working with a team or by yourself.",
47+
cover: "cover__episode-34.png",
48+
link: "https://www.compressed.fm/episode/34"
4349
},
4450
{
4551
id: 33,
46-
title: 'Small Design Tweaks that Make All the Difference',
47-
description: 'In this episode, Amy and James talk about small design tweaks that you can make that will make a big difference. These recommendations are helpful if you\'re looking for basic principles and guidelines to take your site to the next level.',
48-
cover: 'cover__episode-33.png',
49-
link: 'https://www.compressed.fm/episode/33'
50-
},
51-
]
52+
title: "Small Design Tweaks that Make All the Difference",
53+
description:
54+
"In this episode, Amy and James talk about small design tweaks that you can make that will make a big difference. These recommendations are helpful if you're looking for basic principles and guidelines to take your site to the next level.",
55+
cover: "cover__episode-33.png",
56+
link: "https://www.compressed.fm/episode/33"
57+
}
58+
];
59+
60+
const ulElement = document.querySelector("ul");
61+
const liElements = document.querySelectorAll("li");
62+
const coverElement = document.querySelector(".cover");
63+
const contentElement = document.querySelector(".content");
64+
65+
const fillTheUlPageList = () => {
66+
for (let i = 0; i < episodes.length; i++) {
67+
liElements[i].childNodes[1].childNodes[1].innerText =
68+
"episode " + episodes[i].id;
69+
liElements[i].childNodes[1].childNodes[3].innerText = episodes[i].title;
70+
}
71+
};
72+
73+
ulElement.addEventListener("click", (e) => {
74+
if (e.target.classList.contains("title")) {
75+
liElements.forEach((li) => li.classList.remove("selected"));
76+
e.path[2].classList.add("selected");
77+
78+
for (const item of episodes) {
79+
if (e.target.innerText === item.title) {
80+
coverElement.childNodes[1].setAttribute(
81+
"src",
82+
`./images/${item.cover}`
83+
);
84+
contentElement.childNodes[1].innerText = item.title;
85+
contentElement.childNodes[3].innerText = item.description;
86+
contentElement.childNodes[5].setAttribute("href", item.link);
87+
}
88+
}
89+
}
90+
});
91+
92+
fillTheUlPageList();

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /