diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..82bafe1 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -13,14 +13,15 @@ You are managing a database for a **movie rental platform** called **Movie Mania */ const movies = [ - { title: "Fast & Furious 10", genre: "Action", rating: 7.5, rented: true }, - { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false }, - { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true }, - { title: "Superbad", genre: "Comedy", rating: 7.0, rented: false }, - { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true }, - { title: "The Intern", genre: "Comedy", rating: 7.4, rented: false } + { title: "Fast & Furious 10", genre: "Action", rating: 7.5, rented: true , landscope:4563}, + { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false , landscope:4563 }, + { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true , landscope:4563}, + { title: "Superbad", genre: "Comedy", rating: 7.0, rented: false , landscope:4563 }, + { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true , landscope:4563}, + { title: "The Intern", genre: "Comedy", rating: 7.4, rented: false , landscope:4563 } ]; + /* Task 1: Movie Titles and Ratings 🎥 (`.map`) @@ -45,8 +46,15 @@ const movies = [ */ // ✍️ Solve it here ✍️ + - +const titleArating=movies.map((items)=>{ + return items.title+" -Rating" +items.rating+"/10"; +}) +console.log(titleArating); + + + /* Task 2: Find Highly Rated Movies 🌟 (`.filter`) @@ -68,4 +76,9 @@ const movies = [ // ✍️ Solve it here ✍️ - \ No newline at end of file + + + const highlyratemovies=movies.filter((items)=>{ + return items.rating>=8.0; + }) + console.log(highlyratemovies); \ No newline at end of file diff --git a/dom_challenges.js b/dom_challenges.js index bb943d5..7693a2c 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -124,31 +124,68 @@ export const newsData = { export function displayArticles(category) { const newsContainer = document.querySelector('#news-container'); const articles = newsData[category]; - + // 1. Clear previous content - - // 2. Create container elements - - // 3. Create article element - - // 4. Create and setup image - - // 5. Create content container - - // 6. Create featured label - - // 7. Create title - - // 8. Create date - - // 9. Create excerpt - - // 10. Create tag - - // 11. Assemble the elements - - - newsContainer.insertBefore(featuredArticle, newsContainer.firstChild); + newsContainer.innerHTML = ""; + + // 2. Loop through articles in selected category + articles.forEach((articleData, index) => { + // 3. Create article wrapper + const wrapper = document.createElement("div"); + wrapper.className = index === 0 ? "featured-article" : "news-article"; + + // 4. Create article element + const article = document.createElement("article"); + article.className = index === 0 ? "news-card featured" : "news-card"; + + // 5. Create and setup image + const img = document.createElement("img"); + img.className = "news-image"; + img.src = articleData.image; + img.alt = articleData.title; + + // 6. Create content container + const content = document.createElement("div"); + content.className = "news-content"; + + // 7. Add featured label if first article + if (index === 0) { + const featuredLabel = document.createElement("span"); + featuredLabel.className = "featured-label"; + featuredLabel.textContent = "Featured Story"; + content.appendChild(featuredLabel); + } + + // 8. Create and add title + const title = document.createElement("h2"); + title.className = "news-title"; + title.textContent = articleData.title; + + // 9. Create and add date + const date = document.createElement("div"); + date.className = "news-date"; + date.textContent = articleData.date; + + // 10. Create and add excerpt + const excerpt = document.createElement("p"); + excerpt.className = "news-excerpt"; + excerpt.textContent = articleData.excerpt; + + // 11. Create and add tag + const tag = document.createElement("span"); + tag.className = "tag"; + tag.textContent = articleData.tag; + + // 12. Assemble elements + content.appendChild(title); + content.appendChild(date); + content.appendChild(excerpt); + content.appendChild(tag); + article.appendChild(img); + article.appendChild(content); + wrapper.appendChild(article); + newsContainer.appendChild(wrapper); + }); } diff --git a/index.html b/index.html index fda5eb7..27ff268 100644 --- a/index.html +++ b/index.html @@ -99,5 +99,10 @@

Apple Unveils Revolutionary Mixed Reality Device

+ + + + + \ No newline at end of file