completed assignment

.vscode/settings.json

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

array_challenges.js

@@ -45,7 +45,10 @@ const movies = [
   */
 
   // ✍️ Solve it here ✍️
-
+  const movie=movies.map((movie) => {
+    return `${movie.title} - Rating: ${movie.rating}/10`;
+  })
+  console.log(movie);
 
   /*
   Task 2: Find Highly Rated Movies 🌟 (`.filter`)
@@ -67,5 +70,7 @@ const movies = [
 
   // ✍️ Solve it here ✍️
 
-
-
+  const highly = movies.filter((movie) => {
+    return movie.rating >=8.0;})
+  console.log(highly);
+

dom_challenges.js

@@ -117,7 +117,19 @@ export const newsData = {
     }
   ]
 };
-
+/*{ <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> }*/
 
 // YOUR TASK: Complete this function using the html structure in the htmlstructure.html file
 
@@ -126,26 +138,61 @@ export function displayArticles(category) {
   const articles = newsData[category];
 
   // 1. Clear previous content
-
-  // 2. Create container elements
-
+  newsContainer.innerHTML = '';
+
+  // 2. Create container for featured article
+  const featuredArticle = document.createElement('div');
+  featuredArticle.classList.add('featured-article');
+
   // 3. Create article element
-
+  const article = document.createElement('article');
+  article.className="news-card featured"; // kuwaan oo nkale ka dhig
+
   // 4. Create and setup image
-
+  const image = document.createElement("img");
+  image.className="news-image";
+  image.src = articles[0].image;
+  image.alt = articles[0].title;
+
   // 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";
+  label.textContent = 'Featured Story';
+
   // 7. Create title
-
+  const title = document.createElement('h2');
+  title.className="news-title";
+  title.textContent = articles[0].title;
+
   // 8. Create date
-
+  const date = document.createElement('div');
+  date.classNmae="news-date";
+  date.textContent = articles[0].date;
+
   // 9. Create excerpt
-
+  const excerpt = document.createElement('p');
+  excerpt.className="news-excerpt";
+  excerpt.textContent = articles[0].excerpt;
+
   // 10. Create tag
-
+  const tag = document.createElement('span');
+  tag.classNAme="tag";
+  tag.textContent = articles[0].tag;
+
   // 11. Assemble the elements
+  content.appendChild(label);
+  content.appendChild(title);
+  content.appendChild(date);
+  content.appendChild(excerpt);
+  content.appendChild(tag);
+
+  article.appendChild(image);
+  article.appendChild(content);
+  featuredArticle.appendChild(article);
 
 
   newsContainer.insertBefore(featuredArticle, newsContainer.firstChild);

index.html

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