From a16a9f359a5750ef3bbbc05e2273c9bd67b4b0f6 Mon Sep 17 00:00:00 2001
From: zakariahasanabdiali <zakihasanabdu443@gmail.com>
Date: Wed, 16 Jul 2025 17:14:35 +0300
Subject: [PATCH]  Week 6 JS Assignment

---
 array_challenges.js |  5 ++-
 dom_challenges.js   | 74 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/array_challenges.js b/array_challenges.js
index 3e3c564..9ac9f5d 100644
--- a/array_challenges.js
+++ b/array_challenges.js
@@ -46,6 +46,8 @@ const movies = [
   
   // ✍️ Solve it here ✍️
   
+  const titlesAndRatings = movies.map(movie => `${movie.title} - Rating: ${movie.rating}/10`);
+console.log(titlesAndRatings);
   
   /*
   Task 2: Find Highly Rated Movies 🌟 (`.filter`)
@@ -67,5 +69,6 @@ const movies = [
   
   // ✍️ Solve it here ✍️
 
-
+const highlyRatedMovies = movies.filter(movie => movie.rating >= 8.0);
+console.log(highlyRatedMovies);
  
\ No newline at end of file
diff --git a/dom_challenges.js b/dom_challenges.js
index 1f414b8..27ecd62 100644
--- a/dom_challenges.js
+++ b/dom_challenges.js
@@ -194,3 +194,77 @@ document.addEventListener("DOMContentLoaded", () => {
     .querySelector(`.nav-links a[data-category="${defaultCategory}"]`)
     .classList.add("active"); // Set active class
 });
+
+export function displayArticles(category, featuredArticle = null) {
+  const newsContainer = document.querySelector("#news-container");
+  const articles = newsData[category];
+  
+  if (!articles || articles.length === 0) {
+    newsContainer.innerHTML = "<p>No articles available in this category.</p>";
+    return;
+  }
+  
+  // 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.classList.add("featured-article");
+
+  // 3. Create article element
+  const articleEl = document.createElement("article");
+  articleEl.classList.add("news-card", "featured");
+
+  // 4. Create and setup image
+  const img = document.createElement("img");
+  img.classList.add("news-image");
+  img.src = article.image;
+  img.alt = article.title;
+
+  // 5. Create content container
+  const contentDiv = document.createElement("div");
+  contentDiv.classList.add("news-content");
+
+  // 6. Create featured label
+  const featuredLabel = document.createElement("span");
+  featuredLabel.classList.add("featured-label");
+  featuredLabel.textContent = "Featured Story";
+
+  // 7. Create title
+  const titleEl = document.createElement("h2");
+  titleEl.classList.add("news-title");
+  titleEl.textContent = article.title;
+
+  // 8. Create date
+  const dateEl = document.createElement("div");
+  dateEl.classList.add("news-date");
+  dateEl.textContent = article.date;
+
+  // 9. Create excerpt
+  const excerptEl = document.createElement("p");
+  excerptEl.classList.add("news-excerpt");
+  excerptEl.textContent = article.excerpt;
+
+  // 10. Create tag
+  const tagEl = document.createElement("span");
+  tagEl.classList.add("tag");
+  tagEl.textContent = article.tag;
+
+  // 11. Assemble the elements
+  contentDiv.appendChild(featuredLabel);
+  contentDiv.appendChild(titleEl);
+  contentDiv.appendChild(dateEl);
+  contentDiv.appendChild(excerptEl);
+  contentDiv.appendChild(tagEl);
+
+  articleEl.appendChild(img);
+  articleEl.appendChild(contentDiv);
+
+  featuredArticleDiv.appendChild(articleEl);
+
+  // 12. Append the article container to the news container
+  newsContainer.appendChild(featuredArticleDiv);
+}