Weeks6

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

array_challenges.js

@@ -13,14 +13,15 @@ You are managing a database for a **movie rental platform** called **Movie Mania
 */
 
 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 }
+    { title: "Fast & Furious 10", genre: "Action", rating: 7.5, rented: true  , landscope:4563},
+    { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false , landscope:4563 },
+    { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true  , landscope:4563},
+    { title: "Superbad", genre: "Comedy", rating: 7.0, rented: false , landscope:4563 },
+    { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true  , landscope:4563},
+    { title: "The Intern", genre: "Comedy", rating: 7.4, rented: false , landscope:4563 }
   ];
 
+
   /*
 
   Task 1: Movie Titles and Ratings 🎥 (`.map`)
@@ -45,8 +46,15 @@ const movies = [
   */
 
   // ✍️ Solve it here ✍️
+
 
-
+const titleArating=movies.map((items)=>{
+  return items.title+" -Rating" +items.rating+"/10";
+})
+console.log(titleArating);
+
+
+
   /*
   Task 2: Find Highly Rated Movies 🌟 (`.filter`)
 
@@ -68,4 +76,9 @@ const movies = [
   // ✍️ Solve it here ✍️
 
 
-
+
+
+ const highlyratemovies=movies.filter((items)=>{
+  return items.rating>=8.0;
+ })
+ console.log(highlyratemovies);

dom_challenges.js

@@ -124,31 +124,68 @@ export const newsData = {
 export function displayArticles(category) {
   const newsContainer = document.querySelector('#news-container');
   const articles = newsData[category];
-  
+
   // 1. Clear previous content
-
-  // 2. Create container elements
-
-  // 3. Create article element
-
-  // 4. Create and setup image
-
-  // 5. Create content container
-
-  // 6. Create featured label
-
-  // 7. Create title
-
-  // 8. Create date
-
-  // 9. Create excerpt
-
-  // 10. Create tag
-
-  // 11. Assemble the elements
-
-
-  newsContainer.insertBefore(featuredArticle, newsContainer.firstChild);
+  newsContainer.innerHTML = "";
+
+  // 2. Loop through articles in selected category
+  articles.forEach((articleData, index) => {
+    // 3. Create article wrapper
+    const wrapper = document.createElement("div");
+    wrapper.className = index === 0 ? "featured-article" : "news-article";
+
+    // 4. Create article element
+    const article = document.createElement("article");
+    article.className = index === 0 ? "news-card featured" : "news-card";
+
+    // 5. Create and setup image
+    const img = document.createElement("img");
+    img.className = "news-image";
+    img.src = articleData.image;
+    img.alt = articleData.title;
+
+    // 6. Create content container
+    const content = document.createElement("div");
+    content.className = "news-content";
+
+    // 7. Add featured label if first article
+    if (index === 0) {
+      const featuredLabel = document.createElement("span");
+      featuredLabel.className = "featured-label";
+      featuredLabel.textContent = "Featured Story";
+      content.appendChild(featuredLabel);
+    }
+
+    // 8. Create and add title
+    const title = document.createElement("h2");
+    title.className = "news-title";
+    title.textContent = articleData.title;
+
+    // 9. Create and add date
+    const date = document.createElement("div");
+    date.className = "news-date";
+    date.textContent = articleData.date;
+
+    // 10. Create and add excerpt
+    const excerpt = document.createElement("p");
+    excerpt.className = "news-excerpt";
+    excerpt.textContent = articleData.excerpt;
+
+    // 11. Create and add tag
+    const tag = document.createElement("span");
+    tag.className = "tag";
+    tag.textContent = articleData.tag;
+
+    // 12. Assemble elements
+    content.appendChild(title);
+    content.appendChild(date);
+    content.appendChild(excerpt);
+    content.appendChild(tag);
+    article.appendChild(img);
+    article.appendChild(content);
+    wrapper.appendChild(article);
+    newsContainer.appendChild(wrapper);
+  });
 }
 
 

index.html

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