From 81ff45b51f7f41e5195d5a990e68625d7a63d5fb Mon Sep 17 00:00:00 2001
From: Ali <alifmohamed121@gmail.com>
Date: Thu, 17 Jul 2025 14:18:26 -0400
Subject: [PATCH] finish

---
 array_challenges.js | 11 +++++++++--
 dom_challenges.js   | 44 +++++++++++++++++++++++++++++++++++++++-----
 index.html          |  2 ++
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/array_challenges.js b/array_challenges.js
index 3e3c564..3ac7d61 100644
--- a/array_challenges.js
+++ b/array_challenges.js
@@ -46,7 +46,11 @@ const movies = [
   
   // ✍️ Solve it here ✍️
   
-  
+  const titleRating = movies.map((item) => {
+    return `${item.title} - Rating: ${item.rating}/10`
+
+  })
+  console.log(titleRating)
   /*
   Task 2: Find Highly Rated Movies 🌟 (`.filter`)
   
@@ -66,6 +70,9 @@ const movies = [
   */
   
   // ✍️ Solve it here ✍️
-
+  const highlyRatedMovies = movies.filter((item) => {
+    return item.rating >= 8.0
+  })
+console.log(highlyRatedMovies)
 
  
\ No newline at end of file
diff --git a/dom_challenges.js b/dom_challenges.js
index 1f414b8..5608293 100644
--- a/dom_challenges.js
+++ b/dom_challenges.js
@@ -153,37 +153,71 @@ export const newsData = {
 export function displayArticles(category, featuredArticle = 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];
 
   // 1. Clear previous content
+      newsContainer.innerHTML = "";
 
   // 2. Create container elements
+const featuredArticlediv = document.createElement("div")
+featuredArticlediv.className = "featured-Article"
 
 
   // 3. Create article element
+const articleElement = document.createElement("article")
+articleElement.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 newsExcerpt = document.createElement("p")
+  newsExcerpt.className = "news-excerpt"
+  newsExcerpt.textContent = article.excerpt
 
   // 10. Create tag
-
+const tag = document.createElement("span")
+tag.className = "tag"
+tag.textContent = article.tag
 
   // 11. Assemble the elements
- 
+  featuredArticlediv.append(articleElement)
+  articleElement.append(newsImage)
+  articleElement.append(newsContent)
+  newsContent.append(featuredLabel)
+  newsContent.append(newsTitle)
+  newsContent.append(newsDate)
+  newsContent.append(newsExcerpt)
+  newsContent.append(tag)
 
   // 12. Append the article container to the news container
-
+  newsContainer.append(featuredArticlediv)
+return newsContainer
 }
 
 // DO NOT CHANGE THIS
diff --git a/index.html b/index.html
index 6a59a72..5934b96 100644
--- a/index.html
+++ b/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>
\ No newline at end of file