finished

array_challenges.js

@@ -46,7 +46,10 @@ const movies = [
 
   // ✍️ Solve it here ✍️
 
-
+   const movieList = movies.map((movie)=>{
+    return `${movie.title} - Rating: ${movie.rating}/10`
+  })
+  console.log(movieList)
   /*
   Task 2: Find Highly Rated Movies 🌟 (`.filter`)
 
@@ -67,5 +70,9 @@ const movies = [
 
   // ✍️ Solve it here ✍️
 
+const highlyRatedMovies = movies.filter((movie) => {
+  return movie.rating >= 8.0;
+})
 
+console.log(highlyRatedMovies)
 

dom_challenges.js

@@ -158,32 +158,57 @@ export function displayArticles(category, featuredArticle = null) {
   const article = featuredArticle || articles[0];
 
   // 1. Clear previous content
-
+newsContainer.innerHTML = "";
   // 2. Create container elements
-
+ const featuredMain = document.createElement("div");
 
   // 3. Create article element
+const articleElement = document.createElement("article");
+articleElement.classList.add("news-card", "featured")
 
   // 4. Create and setup image
-
+const imgElement = document.createElement("img");
+imgElement.className ="news-image"
+imgElement.src = article.image;
+imgElement.alt = article.title;
   // 5. Create content container
-
+const contentElement = document.createElement("div");
+contentElement.className ="news-content"
   // 6. Create featured label
-
+const labelElement = document.createElement("span");
+labelElement.className ="featured-label"
+labelElement.textContent = "Featured Story";
   // 7. Create title
-
+const titleElement = document.createElement("h2");
+titleElement.className ="news-title"
+titleElement.textContent = article.title;
   // 8. Create date
+ const dateElement = document.createElement("div");
+dateElement.className ="news-date"
+dateElement.textContent = article.date;
 
   // 9. Create excerpt
-
+  const excerptElement = document.createElement("p");
+excerptElement.className ="news-excerpt"
+excerptElement.textContent = article.excerpt;
   // 10. Create tag
-
+const tagElement = document.createElement("span");
+tagElement.className ="tag"
+tagElement.textContent = article.tag;
 
   // 11. Assemble the elements
-
+ contentElement.appendChild(labelElement);
+contentElement.appendChild(titleElement);
+contentElement.appendChild(dateElement);
+contentElement.appendChild(excerptElement);
+contentElement.appendChild(tagElement);
+articleElement.appendChild(imgElement);
+articleElement.appendChild(contentElement);
 
-  // 12. Append the article container to the news container
+featuredMain.appendChild(articleElement);
 
+  // 12. Append the article container to the news container
+newsContainer.appendChild(featuredMain);
 }
 
 // DO NOT CHANGE THIS
@@ -193,4 +218,4 @@ document.addEventListener("DOMContentLoaded", () => {
   document
     .querySelector(`.nav-links a[data-category="${defaultCategory}"]`)
     .classList.add("active"); // Set active class
-});
+});

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>