diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..4a6cb19 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -3,7 +3,9 @@ The Dataset: Movie Mania -You are managing a database for a **movie rental platform** called **Movie Mania**. The dataset is an array of objects, where each object represents a movie with the following properties: +You are managing a database for a **movie rental platform** called +**Movie Mania**. The dataset is an array of objects, where each object +represents a movie with the following properties: - `title` (string): The title of the movie. - `genre` (string): The genre of the movie (e.g., "Action", "Comedy", "Drama"). @@ -12,15 +14,7 @@ You are managing a database for a **movie rental platform** called **Movie Mania */ -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 } - ]; - + /* Task 1: Movie Titles and Ratings 🎥 (`.map`) @@ -29,7 +23,8 @@ const movies = [ for a promotional email campaign. Steps: - 1. Use `.map` to create a new array where each item is a string in this format: + 1. Use `.map` to create a new array where each item is a string in this + format: "[title] - Rating: [rating]/10" 2. Log the resulting array. @@ -45,8 +40,20 @@ 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 moviePromo = movies.map((item) => { + console.log(`"${item.title}, - Rating ${item.rating}/10,"`) + }) + /* Task 2: Find Highly Rated Movies 🌟 (`.filter`) @@ -54,7 +61,8 @@ const movies = [ (movies with a rating of 8.0 or higher). Steps: - 1. Use `.filter` to create a new array containing only the movies with a rating >= 8.0. + 1. Use `.filter` to create a new array containing only the movies with + a rating >= 8.0. 2. Log the resulting array. Expected Output: @@ -68,4 +76,8 @@ const movies = [ // ✍️ Solve it here ✍️ - \ No newline at end of file + const favMovies = movies.filter((item)=> { + return item.rating >= 8 + }); + + console.log(favMovies); diff --git a/dom_challenges.js b/dom_challenges.js index 1f414b8..9e06e6e 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -148,41 +148,79 @@ export const newsData = { */ } -// YOUR TASK: Complete this function using the html structure in the htmlstructure.html file +// YOUR TASK: Complete this function using the html structure in +// the htmlstructure.html file -export function displayArticles(category, featuredArticle = null) { +export function displayArticles(category, featuredArticle2 = null) { const newsContainer = document.querySelector("#news-container"); const articles = newsData[category]; // Use the provided featured article or default to the first one - const article = featuredArticle || articles[0]; + const article = featuredArticle2 || articles[0]; // 1. Clear previous content +newsContainer.innerHTML = "" // 2. Create container elements - +const featuredArticle = document.createElement("div") +featuredArticle.className = "featured-article" // 3. Create article element +const newsCardFeatured = document.createElement("article") +newsCardFeatured.className = "news-card featured" // 4. Create and setup image + const newsImage = document.createElement("img") + newsImage.src = article.image; + newsImage.alt = article.title; + newsImage.className = "news-image"; // 5. Create content container + const newsContent= document.createElement("div") + newsContent.className = "news-content"; // 6. Create featured label +const featuredLabel = document.createElement("span") +featuredLabel.className = "featured-label"; +featuredLabel.textContent = "Featured Story" // 7. Create title + const newsTitle = document.createElement("h2") + newsTitle.className = "news-title" + newsTitle.textContent = article.title + // 8. Create date +const newsDate = document.createElement("div") +newsDate.className = "news-date" +newsDate.textContent = article.date // 9. Create excerpt +const excerpt = document.createElement ("p") +excerpt.className = "excerpt" +excerpt.textContent = article.excerpt // 10. Create tag - +const tag = document.createElement("span") +tag.className = "tag" +tag.textContent = article.tag // 11. Assemble the elements + featuredArticle.append(newsCardFeatured) + newsCardFeatured.append(newsImage) + newsCardFeatured.append(newsContent) + newsContent.append(featuredLabel) + newsContent.append(newsTitle) + newsContent.append(newsDate) + newsContent.append(excerpt) + newsContent.append(tag) + + // 12. Append the article container to the news container +newsContainer.append(featuredArticle) +return newsContainer } diff --git a/index.html b/index.html index 6a59a72..ebcabfb 100644 --- a/index.html +++ b/index.html @@ -106,6 +106,7 @@