Completed Week 6 assignment tasks

array_challenges.js

@@ -29,8 +29,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:
-     "[title] - Rating: [rating]/10"
+  1. Use `.map` to create a new array where each item is a in this format:
+     "[title] - Rating: [rating]/10"string 
   2. Log the resulting array.
 
   Expected Output:
@@ -46,7 +46,14 @@ const movies = [
 
   // ✍️ Solve it here ✍️
 
+  /* const title = movies.map((data) => {
+     return data.title
 
+  })
+
+  console.log(title)
+  */
+
   /*
   Task 2: Find Highly Rated Movies 🌟 (`.filter`)
 
@@ -66,6 +73,13 @@ const movies = [
   */
 
   // ✍️ Solve it here ✍️
+
+  /* const HighlyRatedmovies = movies.filter((data) => {
+    if(data.rating >= 8){
+      return data.title
+    }
 
+  })
 
-
+ console.log(HighlyRatedmovies)
+ */

dom_challenges.js

@@ -133,7 +133,7 @@ export const newsData = {
 };
 
 // html structure
-{
+
   /* <div class="featured-article">
     <article class="news-card featured">
       <img class="news-image" src="https://images.unsplash.com/photo-1677442136019-21780ecad995" alt="GPT-5 Announcement">
@@ -146,46 +146,69 @@ export const newsData = {
       </div>
     </article>
   </div> */
-}
 
 // YOUR TASK: Complete this function using the html structure in the htmlstructure.html file
 
-export function displayArticles(category, featuredArticle = null) {
+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
+  // Use the provided featured arrticle or default to the first one
   const article = featuredArticle || articles[0];
 
-  // 1. Clear previous content
+const newsGrid = document.querySelectorAll('.news-grid')[1]
+console.log("newsGrid:", newsGrid)
 
+// 1. Clear previous content
+  newsGrid.innerHTML = ""
   // 2. Create container elements
-
-
+  const newsGridMainDiv = document.createElement("div")
+  newsGridMainDiv.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.className = "news-image"
+  newsimage.alt = article.title
+  newsimage.src = article.image
   // 5. Create content container
-
+  const newsContent = document.createElement("div") 
+  newsContent.className = "news-conten"
   // 6. Create featured label
-
+  const newsFeature = document.createElement("span")
+  newsFeature.className = "featured-label"
+  newsFeature.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 newsTag = document.createElement("span")
+  newsTag.className = "tag"
+  newsTag.textContent = article.tag
   // 11. Assemble the elements
-
+  newsGridMainDiv.append(articleElement)
+  newsGridMainDiv.append(newsContent)
 
-  // 12. Append the article container to the news container
-
-}
+  articleElement.append(newsimage)
 
+  newsContent.append(newsFeature)
+  newsContent.append(newsTitle)
+  newsContent.append(newsDate)
+  newsContent.append(newsExcerpt)
+  newsContent.append(newsTag)
+  // 12. Append the article container to the news container
+  newsGrid.append(newsGridMainDiv)
+    return articles
+}  
 // DO NOT CHANGE THIS
 document.addEventListener("DOMContentLoaded", () => {
   const defaultCategory = "Latest News"; // Define the default category
@@ -194,3 +217,4 @@ document.addEventListener("DOMContentLoaded", () => {
     .querySelector(`.nav-links a[data-category="${defaultCategory}"]`)
     .classList.add("active"); // Set active class
 });
+

htmlstructure.html

@@ -1,12 +1,22 @@
 <div class="featured-article">
-    <article class="news-card featured">
-      <img class="news-image" src="https://images.unsplash.com/photo-1677442136019-21780ecad995" alt="GPT-5 Announcement">
-      <div class="news-content">
-        <span class="featured-label">Featured Story</span>
-        <h2 class="news-title">GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model</h2>
-        <div class="news-date">March 14, 2024</div>
-        <p class="news-excerpt">OpenAI's latest language model demonstrates unprecedented reasoning capabilities and achieves human-level performance across various domains.</p>
-        <span class="tag">Artificial Intelligence</span>
-      </div>
-    </article>
-  </div>
+  <article class="news-card featured">
+    <img
+      class="news-image"
+      src="https://images.unsplash.com/photo-1677442136019-21780ecad995"
+      alt="GPT-5 Announcement"
+    />
+    <div class="news-content">
+      <span class="featured-label">Featured Story</span>
+      <h2 class="news-title">
+        GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model
+      </h2>
+      <div class="news-date">March 14, 2024</div>
+      <p class="news-excerpt">
+        OpenAI's latest language model demonstrates unprecedented reasoning
+        capabilities and achieves human-level performance across various
+        domains.
+      </p>
+      <span class="tag">Artificial Intelligence</span>
+    </div>
+  </article>
+</div>