finished

array_challenges.js

@@ -45,6 +45,21 @@ const movies = [
   */
 
   // ✍️ Solve it here ✍️
+
+  const MovieMania =[
+    {title: "fast & furious 10" , genre: "action",rating: 7.5, rented: true},
+    {title: "the note book", genre: "drama", rating: 8.0, rented: false},
+    {title: "spider-man no way home", genre: "action" , rating: 8.7, rented: true},
+    {title: "superbad" , genre: "comady", rating: 7.0, rented: false},
+    {title: "the dark knight", genre: "action", rating: 9.0, rented: true},
+    {title: "the interm" ,genre: "comady", rating: 7.4, rented: false},
+  ];
+
+  const RatingMovies =MovieMania.map(function(item){
+    return `title: ${item.title},rating: ${item.rating}`
+  });
+
+  console.log(RatingMovies);
 
 
   /*
@@ -67,5 +82,13 @@ const movies = [
 
   // ✍️ Solve it here ✍️
 
+  const highlyRating =MovieMania.filter(function(items){
+    return items.rating >= 8.0
+  });
+
+  console.log(highlyRating);
+
+
+
 
 

dom_challenges.js

@@ -158,34 +158,91 @@ export function displayArticles(category, featuredArticle = null) {
   const article = featuredArticle || articles[0];
 
   // 1. Clear previous content
+  newsContainer.innerHTML ="";
+
 
   // 2. Create container elements
-
+  const newsDataContainer = document.createElement ("div")
+  newsDataContainer.className = "featured-article"
+
+
 
   // 3. Create article element
+  const newsCard = document.createElement("article")
+  newsCard.className = "news-card featured"
+
+
+
 
   // 4. Create and setup image
+  const newImage = document.createElement("img")
+  newImage.src= article.image
+  newImage.alt= article.tag
+  newImage.className = "news-image"
 
-  // 5. Create content container
+
 
+  // 5. Create content container
+  const contentContainer = document.createElement("div")
+  contentContainer.className= "news-content"
   // 6. Create featured label
+  const featuredlabel = document.createElement("span")
+  featuredlabel.className = "featured-label"
+  featuredlabel.textContent = "Featured Story"
+
 
   // 7. Create title
+const  newTitle = document.createElement("h2")
+newTitle.textContent = article.title
+newTitle.className = "news-title"
 
   // 8. Create date
+  const newsDate = document.createElement("div")
+  newsDate.className = "news-date"
+  newsDate.textContent= article.date
+
 
   // 9. Create excerpt
+  const newExpert = document.createElement("p")
+  newExpert.className = "news-excerpt"
+  newExpert.textContent = article.excerpt
+
 
   // 10. Create tag
+  const newTag = document.createElement("span")
+  newTag.className = "tag"
+  newTag.textContent = article.tag
+
+
 
 
   // 11. Assemble the elements
 
 
   // 12. Append the article container to the news container
 
+newsDataContainer.append(newsCard )
+
+newsCard.append(newImage)
+newsCard.append(contentContainer)
+contentContainer.append(featuredlabel)
+contentContainer.append(newTitle)
+contentContainer.append(newsDate)
+contentContainer.append(newExpert)
+contentContainer.append(newTag)
+
+newsContainer.append(newsDataContainer)
+return newsContainer
+
+
+
+
 }
 
+console.log(displayArticles("Latest News"))
+
+
+
 // DO NOT CHANGE THIS
 document.addEventListener("DOMContentLoaded", () => {
   const defaultCategory = "Latest News"; // Define the default category

index.html

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