done

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,16 +40,29 @@ 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`)
 
   Your customers have requested a list of **highly rated 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 ✍️
 
 
-
+ const favMovies = movies.filter((item)=> {
+  return item.rating >= 8
+ });
+
+ console.log(favMovies);

dom_challenges.js

@@ -148,41 +148,79 @@ export const newsData = {
   </div> */
 }
 
-// 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
 
 }
 

index.html

@@ -106,6 +106,7 @@ <h2 class="news-title">Apple Unveils Revolutionary Mixed Reality Device</h2>
       </div>
     </article>
   </div>
+  <script src = "array_challenges.js"></script>
 </body>
 
 </html>