diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..d907eaa 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -20,6 +20,8 @@ const movies = [ { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true }, { title: "The Intern", genre: "Comedy", rating: 7.4, rented: false } ]; + + /* @@ -45,6 +47,12 @@ const movies = [ */ // ✍️ Solve it here ✍️ + +// const itemmov = movies.map((item) =>{ +// return `${item.title} ${item.rating}` +// }) + +// console.log(itemmov) /* @@ -67,5 +75,10 @@ const movies = [ // ✍️ Solve it here ✍️ +// const highrm = movies.filter((item) =>{ +// return item.rating >= 8.0 }) + +// console.log(highrm) + \ No newline at end of file diff --git a/dom_challenges.js b/dom_challenges.js index bb943d5..9a7011f 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -1,4 +1,3 @@ - // News articles data organized by category export const newsData = { 'Latest News': [ @@ -121,31 +120,79 @@ export const newsData = { // YOUR TASK: Complete this function using the html structure in the htmlstructure.html file +// const newsnav = document.querySelector("main-nav") + export function displayArticles(category) { const newsContainer = document.querySelector('#news-container'); const articles = newsData[category]; + + // 1. Clear previous content + newsContainer.innerHTML = ""; + // 2. Create container elements + const featuredArticle = document.createElement("div") + featuredArticle.className = "featured-article" // 3. Create article element + const articleElment = document.createElement("div") + articleElment.className = "news-card featured" // 4. Create and setup image + const newsimg = document.createElement("img") + newsimg.src = articles [0].image; + newsimg.alt = articles [0].name; + newsimg.className = "news-img" // 5. Create content container - + const newsContent = document.createElement("div") + newsContent.className = "news-content" // 6. Create featured label + const newsfeaturedlabel = document.createElement("span") + newsfeaturedlabel.className = "featured-label" + newsfeaturedlabel.textContent = articles.label + + + // 7. Create title + const newsTittle = document.createElement("h2") + newsTittle.textContent = articles.title // 8. Create date + const newsDate = document.createElement("div") + newsDate.className = "news-date" // 9. Create excerpt + const newsExcerpt = document.createElement("p") + newsExcerpt.textContent = articles.excerpt // 10. Create tag + const newsTag = document.createElement("span") + newsTag.className = "tag" + newsTag.textContent = articles.tag // 11. Assemble the elements + + +newsContent.append(newsTittle, newsDate, newsExcerpt, newsTag); +articleElment.append(newsimg, newsContent); +featuredArticle.append(articleElment); +newsContainer.append(featuredArticle); + + + + + + + + + + + + newsContainer.insertBefore(featuredArticle, newsContainer.firstChild); @@ -157,4 +204,12 @@ 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 -}); \ No newline at end of file +}); + + + + + + + + diff --git a/index.html b/index.html index fda5eb7..f9b2814 100644 --- a/index.html +++ b/index.html @@ -99,5 +99,8 @@