waa

array_challenges.js

@@ -34,7 +34,7 @@ const movies = [
   2. Log the resulting array.
 
   Expected Output:
-  [
+  [t
     "Fast & Furious 10 - Rating: 7.5/10",
     "The Notebook - Rating: 8.0/10",
     "Spider-Man: No Way Home - Rating: 8.7/10",
@@ -45,6 +45,13 @@ const movies = [
   */
 
   // ✍️ Solve it here ✍️
+console.log(77)
+
+  const newarray= movies.map((movetitle)=>{
+    return`${movetitle.title}  rating  ${movetitle.rating} /10`
+  })
+
+  console.log(newarray)
 
 
   /*
@@ -67,5 +74,11 @@ const movies = [
 
   // ✍️ Solve it here ✍️
 
+  const movies2= movies.filter((item)=>{
+    if(item.rating>=8.0){
+      return item
+    }
+  })
+  console.log(movies2)
 
 

dom_challenges.js

@@ -1,5 +1,5 @@
 
-// News articles data organized by category
+// // News articles data organized by category
 export const newsData = {
   'Latest News': [
     {
@@ -126,35 +126,73 @@ export function displayArticles(category) {
   const articles = newsData[category];
 
   // 1. Clear previous content
+
+  const newsgrid=document.querySelector(".news-grid")
+  newsgrid.innerHTML="";
+
+
 
   // 2. Create container elements
+
+  const featuredArticle=document.createElement("div")
+  featuredArticle.className="featured-article"
 
   // 3. Create article element
+
+  const  featured=document.createElement("article")
+
+ featured.className="news-card featured"
 
   // 4. Create and setup image
-
+  const articleimg=document.createElement("img")
+  articleimg.src=articles.img;
+  articleimg.alt=articles.title;
+  articleimg.className="news-image"
   // 5. Create content container
+  const content=document.createElement("div")
+  content.className="news-content"
 
   // 6. Create featured label
+  const label=document.createElement("span")
+  label.className="featured-label"
 
   // 7. Create title
+  const heading=document.createElement("h2")
+  heading.className="news-title"
+
 
   // 8. Create date
+
+  const seconddiv=document.createElement("div")
+  seconddiv.className="news-date"
 
   // 9. Create excerpt
+  const pragraph=document.createElement("p")
+  pragraph.className="news-excerpt"
 
   // 10. Create tag
-
+ const span = document.createElement("span");
+span.className = "tag";
+
   // 11. Assemble the elements
+  content.appendChild(label);
+content.appendChild(heading);
+content.appendChild(seconddiv);
+content.appendChild(pragraph);
+content.appendChild(span);
+featured.appendChild(articleimg);
+featured.appendChild(content);
+featuredArticle.appendChild(featured);
+newsgrid.appendChild(featuredArticle);
 
 
   newsContainer.insertBefore(featuredArticle, newsContainer.firstChild);
 }
-
+console.log("dommm")
 
 // DO NOT CHANGE THIS
 document.addEventListener('DOMContentLoaded', () => {
   const defaultCategory = 'Latest News';  // Define the default category
   displayArticles(defaultCategory);  // Display articles for the default category
   document.querySelector(`.nav-links a[data-category="${defaultCategory}"]`).classList.add('active');  // Set active class
-});
+});

htmlstructure.html

@@ -1,3 +1,4 @@
+
 <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">
@@ -8,5 +9,11 @@ <h2 class="news-title">GPT-5 Announcement: OpenAI Reveals Next-Generation AI Mod
         <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>
+      <script src="dom_challenges.js"></script>
     </article>
-  </div>
+  </div>
+https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqJJmhTk2LmKYL8HVIL9Kmccu3wRWZ7IhcYQ&s
+
+
+
+https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8EX-GJpVk0Hy-9Z_3HSlGAr-Ow_w6imOXhg&s

index.html

@@ -6,8 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gabi News - Latest Technology Updates</title>
     <link rel="stylesheet" href="styles.css" />
+
   </head>
   <body>
+
       <header class="header">
         <div class="header-content">
           <div class="header-top">
@@ -36,6 +38,7 @@
       <!-- News Container -->
       <div id="news-container" class="news-container">        
         <!-- Featured Article -->
+
 
         <div class="news-grid"></div>
         <script type="module">
@@ -99,5 +102,12 @@ <h2 class="news-title">Apple Unveils Revolutionary Mixed Reality Device</h2>
           </div>
         </article>
       </div>
+
+
+
+     <script src="array_challenges.js"></script>
+
+
+
   </body>
 </html>