diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..c654f53 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -46,7 +46,25 @@ const movies = [ // ✍️ Solve it here ✍️ - + const movies = [ + { title: "Fast & Furious 10", genre: "Action", rating: 7.5, rented: true }, + { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false }, + { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true }, + { title: "Superbad", genre: "Comedy", rating: 7.0, rented: false }, + { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true }, + { title: "The Intern", genre: "Comedy", rating: 7.4, rented: false } + ]; + + const movieinfo = movies.map(movie => { + + return '${movie.title} rating: ${movie.rating}10' + + }) + +console.log (movieinfo) + + + /* Task 2: Find Highly Rated Movies 🌟 (`.filter`) @@ -67,5 +85,13 @@ const movies = [ // ✍️ Solve it here ✍️ +const movies = [ + + { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false }, + { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true }, + { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true } + ] + + const highlyRatedMovie = movies.filter(movie => movie.rating >=8.0 ); - \ No newline at end of file + console.log(highlyRatedMovie) \ No newline at end of file diff --git a/dom_challenges.js b/dom_challenges.js index 1f414b8..eec0f41 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -158,34 +158,84 @@ export function displayArticles(category, featuredArticle = null) { const article = featuredArticle || articles[0]; // 1. Clear previous content + newsContainer.innerHTML = ""; // 2. Create container elements + const featuredDiv = document.createElement("div"); + featuredDiv.classList.add("featured-article"); + // 3. Create article element + const articlelement = document.createElement("article"); + articlelement.classList.add("news-card,feafured"); // 4. Create and setup image +const img = document.createElement("img"); +img.classList.add("news-image"); +img.src = article.image; +img.alt = article.title; + // 5. Create content container + const contentDiv = document.createElement("div"); + contentDiv.classList.add("news-content"); // 6. Create featured label +const label = document.createElement("span"); +label.classList.add("featured-label"); +label.textContent = "Featured Story"; // 7. Create title + const title = document.createElement("h2"); + title.classList.add("news-title"); + title.textContent = article.title; // 8. Create date + const date = document.createElement("div"); + date.classList.add("news-date"); + date.textContent = article.date; // 9. Create excerpt + const excerpt = document.createElement("p"); + excerpt.classList.add("news-excert"); + excerpt.textContent = article.excerpt; // 10. Create tag + const tag = document.createElement("span"); + tag.classList.add("tag"); + tag.textContent = article.tag; // 11. Assemble the elements + featuredDiv.append(articlelement); + + articlelement.append(img); + + articlelement.append(contentDiv); + + contentDiv.append(label); + + contentDiv.append(title); + + contentDiv.append(date); + + contentDiv.append(excerpt); + + contentDiv.append(tag); + + + // 12. Append the article container to the news container + newsContainer.append(featuredDiv); + + return newsContainer; } + // DO NOT CHANGE THIS document.addEventListener("DOMContentLoaded", () => { const defaultCategory = "Latest News"; // Define the default category @@ -194,3 +244,5 @@ document.addEventListener("DOMContentLoaded", () => { .querySelector(`.nav-links a[data-category="${defaultCategory}"]`) .classList.add("active"); // Set active class }); + + diff --git a/index.html b/index.html index 6a59a72..682b620 100644 --- a/index.html +++ b/index.html @@ -108,4 +108,5 @@