diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..0400c96 Binary files /dev/null and b/.DS_Store differ diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..9a9698c 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -29,8 +29,8 @@ const movies = [ for a promotional email campaign. Steps: - 1. Use `.map` to create a new array where each item is a string in this format: - "[title] - Rating: [rating]/10" + 1. Use `.map` to create a new array where each item is a in this format: + "[title] - Rating: [rating]/10"string 2. Log the resulting array. Expected Output: @@ -46,7 +46,14 @@ const movies = [ // ✍️ Solve it here ✍️ + /* const title = movies.map((data) => { + return data.title + }) + + console.log(title) + */ + /* Task 2: Find Highly Rated Movies 🌟 (`.filter`) @@ -66,6 +73,13 @@ const movies = [ */ // ✍️ Solve it here ✍️ + + /* const HighlyRatedmovies = movies.filter((data) => { + if(data.rating >= 8){ + return data.title + } + }) - \ No newline at end of file + console.log(HighlyRatedmovies) + */ \ No newline at end of file diff --git a/dom_challenges.js b/dom_challenges.js index 1f414b8..0771a90 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -133,7 +133,7 @@ export const newsData = { }; // html structure -{ + /*
GPT-5 Announcement @@ -146,46 +146,69 @@ export const newsData = {
*/ -} // YOUR TASK: Complete this function using the html structure in the htmlstructure.html file -export function displayArticles(category, featuredArticle = null) { +export function displayArticles(category, featuredArticle = null){ const newsContainer = document.querySelector("#news-container"); const articles = newsData[category]; - - // Use the provided featured article or default to the first one + // Use the provided featured arrticle or default to the first one const article = featuredArticle || articles[0]; - // 1. Clear previous content +const newsGrid = document.querySelectorAll('.news-grid')[1] +console.log("newsGrid:", newsGrid) +// 1. Clear previous content + newsGrid.innerHTML = "" // 2. Create container elements - - + const newsGridMainDiv = document.createElement("div") + newsGridMainDiv.className = "featured-article" // 3. Create article element - + const articleElement = document.createElement("article") + articleElement.className = ("news-card featured") // 4. Create and setup image - + const newsimage = document.createElement("img") + newsimage.className = "news-image" + newsimage.alt = article.title + newsimage.src = article.image // 5. Create content container - + const newsContent = document.createElement("div") + newsContent.className = "news-conten" // 6. Create featured label - + const newsFeature = document.createElement("span") + newsFeature.className = "featured-label" + newsFeature.textContent = "Featured Story" // 7. Create title - + const newsTitle = document.createElement("h2") + newsTitle.className = "news-title" + newsTitle.textContent = article.title // 8. Create date - + const newsDate = document.createElement("div") + newsDate.className = "news-date" + newsDate.textContent = article.date // 9. Create excerpt - + const newsExcerpt = document.createElement("p") + newsExcerpt.className = "news-excerpt" + newsExcerpt.textContent = article.excerpt // 10. Create tag - - + const newsTag = document.createElement("span") + newsTag.className = "tag" + newsTag.textContent = article.tag // 11. Assemble the elements - + newsGridMainDiv.append(articleElement) + newsGridMainDiv.append(newsContent) - // 12. Append the article container to the news container - -} + articleElement.append(newsimage) + newsContent.append(newsFeature) + newsContent.append(newsTitle) + newsContent.append(newsDate) + newsContent.append(newsExcerpt) + newsContent.append(newsTag) + // 12. Append the article container to the news container + newsGrid.append(newsGridMainDiv) + return articles +} // DO NOT CHANGE THIS document.addEventListener("DOMContentLoaded", () => { const defaultCategory = "Latest News"; // Define the default category @@ -194,3 +217,4 @@ document.addEventListener("DOMContentLoaded", () => { .querySelector(`.nav-links a[data-category="${defaultCategory}"]`) .classList.add("active"); // Set active class }); + diff --git a/htmlstructure.html b/htmlstructure.html index ff721c2..cee4056 100644 --- a/htmlstructure.html +++ b/htmlstructure.html @@ -1,12 +1,22 @@
-
- GPT-5 Announcement -
- Featured Story -

GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model

-
March 14, 2024
-

OpenAI's latest language model demonstrates unprecedented reasoning capabilities and achieves human-level performance across various domains.

- Artificial Intelligence -
-
-
\ No newline at end of file +
+ GPT-5 Announcement +
+ Featured Story +

+ GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model +

+
March 14, 2024
+

+ OpenAI's latest language model demonstrates unprecedented reasoning + capabilities and achieves human-level performance across various + domains. +

+ Artificial Intelligence +
+
+