diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..ff34ec1 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -46,7 +46,10 @@ const movies = [ // ✍️ Solve it here ✍️ - + const movieList = movies.map((movie)=>{ + return `${movie.title} - Rating: ${movie.rating}/10` + }) + console.log(movieList) /* Task 2: Find Highly Rated Movies 🌟 (`.filter`) @@ -67,5 +70,9 @@ const movies = [ // ✍️ Solve it here ✍️ +const highlyRatedMovies = movies.filter((movie) => { + return movie.rating >= 8.0; +}) +console.log(highlyRatedMovies) \ No newline at end of file diff --git a/dom_challenges.js b/dom_challenges.js index 1f414b8..e39a8bb 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -158,32 +158,57 @@ export function displayArticles(category, featuredArticle = null) { const article = featuredArticle || articles[0]; // 1. Clear previous content - +newsContainer.innerHTML = ""; // 2. Create container elements - + const featuredMain = document.createElement("div"); // 3. Create article element +const articleElement = document.createElement("article"); +articleElement.classList.add("news-card", "featured") // 4. Create and setup image - +const imgElement = document.createElement("img"); +imgElement.className ="news-image" +imgElement.src = article.image; +imgElement.alt = article.title; // 5. Create content container - +const contentElement = document.createElement("div"); +contentElement.className ="news-content" // 6. Create featured label - +const labelElement = document.createElement("span"); +labelElement.className ="featured-label" +labelElement.textContent = "Featured Story"; // 7. Create title - +const titleElement = document.createElement("h2"); +titleElement.className ="news-title" +titleElement.textContent = article.title; // 8. Create date + const dateElement = document.createElement("div"); +dateElement.className ="news-date" +dateElement.textContent = article.date; // 9. Create excerpt - + const excerptElement = document.createElement("p"); +excerptElement.className ="news-excerpt" +excerptElement.textContent = article.excerpt; // 10. Create tag - +const tagElement = document.createElement("span"); +tagElement.className ="tag" +tagElement.textContent = article.tag; // 11. Assemble the elements - + contentElement.appendChild(labelElement); +contentElement.appendChild(titleElement); +contentElement.appendChild(dateElement); +contentElement.appendChild(excerptElement); +contentElement.appendChild(tagElement); +articleElement.appendChild(imgElement); +articleElement.appendChild(contentElement); - // 12. Append the article container to the news container +featuredMain.appendChild(articleElement); + // 12. Append the article container to the news container +newsContainer.appendChild(featuredMain); } // DO NOT CHANGE THIS @@ -193,4 +218,4 @@ document.addEventListener("DOMContentLoaded", () => { 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 6a59a72..7ec7b75 100644 --- a/index.html +++ b/index.html @@ -106,6 +106,7 @@