gabischool · Swar1904 · Jul 17, 2025 · Jul 17, 2025 · Jul 17, 2025 · Jul 18, 2025
diff --git a/array_challenges.js b/array_challenges.js
@@ -1,71 +1,23 @@
-
-/*
-
-The Dataset: Movie Mania
-
-You are managing a database for a **movie rental platform** called **Movie Mania**. The dataset is an array of objects, where each object represents a movie with the following properties:
-
-- `title` (string): The title of the movie.
-- `genre` (string): The genre of the movie (e.g., "Action", "Comedy", "Drama").
-- `rating` (number): The average viewer rating (out of 10).
-- `rented` (boolean): Whether the movie has been rented.
-
-*/
-
+// Movie Mania Dataset
 const movies = [
-    { title: "Fast & Furious 10", genre: "Action", rating: 7.5, rented: true },
-    { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false },
-    { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true },
-    { title: "Superbad", genre: "Comedy", rating: 7.0, rented: false },
-    { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true },
-    { title: "The Intern", genre: "Comedy", rating: 7.4, rented: false }
-  ];
-
-  /*
-
-  Task 1: Movie Titles and Ratings 🎥 (`.map`)
-
-  Your manager asks you to display a list of all movie titles and their ratings 
-  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"
-  2. Log the resulting array.
-
-  Expected Output:
-  [
-    "Fast & Furious 10 - Rating: 7.5/10",
-    "The Notebook - Rating: 8.0/10",
-    "Spider-Man: No Way Home - Rating: 8.7/10",
-    "Superbad - Rating: 7.0/10",
-    "The Dark Knight - Rating: 9.0/10",
-    "The Intern - Rating: 7.4/10"
-  ]
-  */
-
-  // ✍️ Solve it here ✍️
-
-
-  /*
-  Task 2: Find Highly Rated Movies 🌟 (`.filter`)
-
-  Your customers have requested a list of **highly rated movies** 
-  (movies with a rating of 8.0 or higher).
-
-  Steps:
-  1. Use `.filter` to create a new array containing only the movies with a rating >= 8.0.
-  2. Log the resulting array.
-
-  Expected Output:
-  [
-    { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false },
-    { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true },
-    { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true }
-  ]
-  */
-
-  // ✍️ Solve it here ✍️
-
-
-
+  { title: "Fast & Furious 10", genre: "Action", rating: 7.5, rented: true },
+  { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false },
+  { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true },
+  { title: "Superbad", genre: "Comedy", rating: 7.0, rented: false },
+  { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true },
+  { title: "The Intern", genre: "Comedy", rating: 7.4, rented: false }
+];
+
+// 🎥 Task 1: Movie Titles and Ratings
+const movieTitlesAndRatings = movies.map(movie => {
+  return `${movie.title} - Rating: ${movie.rating}/10`;
+});
+
+console.log("🎬 Movie Titles and Ratings:");
+console.log(movieTitlesAndRatings);
+
+// 🌟 Task 2: Find Highly Rated Movies
+const highlyRatedMovies = movies.filter(movie => movie.rating >= 8.0);
+
+console.log("\n🌟 Highly Rated Movies (8.0+):");
+console.log(highlyRatedMovies);
diff --git a/dom_challenges.js b/dom_challenges.js
@@ -9,11 +9,7 @@ export const newsData = {
       image: "https://images.unsplash.com/photo-1677442136019-21780ecad995",
       tag: "Artificial Intelligence",
     },
-    {
-      title: "SpaceX Successfully Launches New Satellite Constellation",
-      date: "March 13, 2024",
       excerpt:
-        "Starship completes its most ambitious mission yet, deploying 50 satellites in a single launch and advancing global internet coverage goals.",
       image: "https://images.unsplash.com/photo-1541185933-ef5d8ed016c2",
       tag: "Space Tech",
     },
@@ -158,33 +154,103 @@ export function displayArticles(category, featuredArticle = null) {
   const article = featuredArticle || articles[0];
 
   // 1. Clear previous content
+  newsContainer.innerHTML = "";
 
-  // 2. Create container elements
-
+  // 2. Create container for featured article
+  const featuredDiv = document.createElement("div");
+  featuredDiv.classList.add("featured-article");
 
   // 3. Create article element
+  const articleElement = document.createElement("article");
+  articleElement.classList.add("news-card", "featured");
 
   // 4. Create and setup image
+  const image = document.createElement("img");
+  image.classList.add("news-image");
+  image.src = article.image;
+  image.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 title = document.createElement("h2");
+  title.classList.add("news-title");
+  title.textContent = article.title;
 
   // 8. Create date
+  const date = document.createElement("div");
+  date.classList.add("news-date");
+  date.textContent = article.date;
 
   // 9. Create excerpt
+  const excerpt = document.createElement("p");
+  excerpt.classList.add("news-excerpt");
+  excerpt.textContent = (featuredArticle || articles[0]).excerpt;
 
   // 10. Create tag
-
+  const tag = document.createElement("span");
+  tag.classList.add("tag");
+  tag.textContent = (featuredArticle || articles[0]).tag;
 
   // 11. Assemble the elements
-
+    featuredDiv.appendChild(articleElement);
+  articleElement.appendChild(image);
+  articleElement.appendChild(contentDiv);
+  contentDiv.appendChild(featuredLabel);
+  contentDiv.appendChild(title);
+  contentDiv.appendChild(date);
+  contentDiv.appendChild(excerpt);
+  contentDiv.appendChild(tag);  
+
 
   // 12. Append the article container to the news container
+  newsContainer.appendChild(featuredDiv);
+  // 13. Create and append other articles
+  articles.slice(1).forEach((article) => {  
+    const otherArticle = document.createElement("article");
+    otherArticle.classList.add("news-card");
 
-}
+    const otherImage = document.createElement("img");
+    otherImage.classList.add("news-image");
+    otherImage.src = article.image;
+    otherImage.alt = article.title;
+
+    const otherContentDiv = document.createElement("div");
+    otherContentDiv.classList.add("news-content");
+
+    const otherTitle = document.createElement("h2");
+    otherTitle.classList.add("news-title");
+    otherTitle.textContent = article.title;
+
+    const otherDate = document.createElement("div");
+    otherDate.classList.add("news-date");
+    otherDate.textContent = article.date;
+
+    const otherExcerpt = document.createElement("p");
+    otherExcerpt.classList.add("news-excerpt");
+    otherExcerpt.textContent = article.excerpt;
+
+    const otherTag = document.createElement("span");
+    otherTag.classList.add("tag");
+    otherTag.textContent = article.tag;
+
+    // Assemble the elements
+    newsContainer.appendChild(otherArticle);
+    otherArticle.appendChild(otherImage);
+    otherArticle.appendChild(otherContentDiv);
+    otherContentDiv.appendChild(otherTitle);
+    otherContentDiv.appendChild(otherDate);
+    otherContentDiv.appendChild(otherExcerpt);
+    otherContentDiv.appendChild(otherTag);
+  }
+  );
 
 // DO NOT CHANGE THIS
 document.addEventListener("DOMContentLoaded", () => {

diff --git a/htmlstructure.html b/htmlstructure.html
@@ -1,12 +1,115 @@
-<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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>News Portal</title>
+  <style>
+    .featured-article { margin-bottom: 2rem; }
+    .news-card.featured { display: flex; border: 1px solid #ccc; padding: 1rem; border-radius: 8px; }
+    .news-image { width: 200px; height: auto; margin-right: 1rem; border-radius: 5px; }
+    .news-content { flex: 1; }
+    .featured-label { font-weight: bold; color: crimson; display: block; margin-bottom: 0.5rem; }
+    .news-title { font-size: 1.5rem; margin: 0; }
+    .news-date { color: #666; font-size: 0.9rem; margin-bottom: 0.5rem; }
+    .news-excerpt { margin-bottom: 0.5rem; }
+    .tag { font-size: 0.8rem; background: #eee; padding: 0.2rem 0.5rem; border-radius: 3px; }
+  </style>
+</head>
+<body>
+
+  <h1>Featured News</h1>
+  <div id="news-container"></div>
+
+  <script type="module">
+    // ✅ Step 1: News Data
+    export const newsData = {
+      "Latest News": [
+        {
+          title: "GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model",
+          date: "March 14, 2024",
+          excerpt:
+            "OpenAI's latest language model demonstrates unprecedented reasoning capabilities and achieves human-level performance across various domains.",
+          image: "https://images.unsplash.com/photo-1677442136019-21780ecad995",
+          tag: "Artificial Intelligence",
+        },
+        {
+          title: "SpaceX Successfully Launches New Satellite Constellation",
+          date: "March 13, 2024",
+          excerpt:
+            "Starship completes its most ambitious mission yet, deploying 50 satellites in a single launch and advancing global internet coverage goals.",
+          image: "https://images.unsplash.com/photo-1541185933-ef5d8ed016c2",
+          tag: "Space Tech",
+        },
+        {
+          title: "Apple Unveils Revolutionary Mixed Reality Device",
+          date: "March 12, 2024",
+          excerpt:
+            "The tech giant's latest hardware release promises to transform how we interact with digital content through advanced spatial computing.",
+          image: "https://images.unsplash.com/photo-1592478411213-6153e4ebc07d",
+          tag: "Hardware",
+        },
+      ]
+    };
+
+    // ✅ Step 2: Display Function
+    export function displayArticles(category, featuredArticle = null) {
+      const newsContainer = document.querySelector("#news-container");
+      const articles = newsData[category];
+
+      const article = featuredArticle || articles[0];
+      newsContainer.innerHTML = ""; // Clear previous
+
+      const featuredDiv = document.createElement("div");
+      featuredDiv.classList.add("featured-article");
+
+      const articleElement = document.createElement("article");
+      articleElement.classList.add("news-card", "featured");
+
+      const image = document.createElement("img");
+      image.classList.add("news-image");
+      image.src = article.image;
+      image.alt = article.title;
+
+      const contentDiv = document.createElement("div");
+      contentDiv.classList.add("news-content");
+
+      const featuredLabel = document.createElement("span");
+      featuredLabel.classList.add("featured-label");
+      featuredLabel.textContent = "Featured Story";
+
+      const title = document.createElement("h2");
+      title.classList.add("news-title");
+      title.textContent = article.title;
+
+      const date = document.createElement("div");
+      date.classList.add("news-date");
+      date.textContent = article.date;
+
+      const excerpt = document.createElement("p");
+      excerpt.classList.add("news-excerpt");
+      excerpt.textContent = article.excerpt;
+
+      const tag = document.createElement("span");
+      tag.classList.add("tag");
+      tag.textContent = article.tag;
+
+      contentDiv.appendChild(featuredLabel);
+      contentDiv.appendChild(title);
+      contentDiv.appendChild(date);
+      contentDiv.appendChild(excerpt);
+      contentDiv.appendChild(tag);
+
+      articleElement.appendChild(image);
+      articleElement.appendChild(contentDiv);
+      featuredDiv.appendChild(articleElement);
+      newsContainer.appendChild(featuredDiv);
+    }
+
+    // ✅ Step 3: Load on Page Ready
+    document.addEventListener("DOMContentLoaded", () => {
+      const defaultCategory = "Latest News";
+      displayArticles(defaultCategory);
+    });
+  </script>
+</body>
+</html>