diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..cafaf24 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -1,71 +1,23 @@ - -/* - -The Dataset: Movie Mania - -You are managing a database for a **movie rental platform** called **Movie Mania**. The dataset is an array of objects, where each object represents a movie with the following properties: - -- `title` (string): The title of the movie. -- `genre` (string): The genre of the movie (e.g., "Action", "Comedy", "Drama"). -- `rating` (number): The average viewer rating (out of 10). -- `rented` (boolean): Whether the movie has been rented. - -*/ - +// Movie Mania Dataset 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 } - ]; - - /* - - Task 1: Movie Titles and Ratings šŸŽ„ (`.map`) - - Your manager asks you to display a list of all movie titles and their ratings - 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" - 2. Log the resulting array. - - Expected Output: - [ - "Fast & Furious 10 - Rating: 7.5/10", - "The Notebook - Rating: 8.0/10", - "Spider-Man: No Way Home - Rating: 8.7/10", - "Superbad - Rating: 7.0/10", - "The Dark Knight - Rating: 9.0/10", - "The Intern - Rating: 7.4/10" - ] - */ - - // āœļø Solve it here āœļø - - - /* - Task 2: Find Highly Rated Movies šŸŒŸ (`.filter`) - - Your customers have requested a list of **highly rated movies** - (movies with a rating of 8.0 or higher). - - Steps: - 1. Use `.filter` to create a new array containing only the movies with a rating >= 8.0. - 2. Log the resulting array. - - Expected Output: - [ - { title: "The Notebook", genre: "Drama", rating: 8.0, rented: false }, - { title: "Spider-Man: No Way Home", genre: "Action", rating: 8.7, rented: true }, - { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true } - ] - */ - - // āœļø Solve it here āœļø - - - \ No newline at end of file + { 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 } +]; + +// šŸŽ„ Task 1: Movie Titles and Ratings +const movieTitlesAndRatings = movies.map(movie => { + return `${movie.title} - Rating: ${movie.rating}/10`; +}); + +console.log("šŸŽ¬ Movie Titles and Ratings:"); +console.log(movieTitlesAndRatings); + +// šŸŒŸ Task 2: Find Highly Rated Movies +const highlyRatedMovies = movies.filter(movie => movie.rating >= 8.0); + +console.log("\nšŸŒŸ Highly Rated Movies (8.0+):"); +console.log(highlyRatedMovies); diff --git a/dom_challenges.js b/dom_challenges.js index 1f414b8..c98c815 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -9,11 +9,7 @@ export const newsData = { image: "https://images.unsplash.com/photo-1677442136019-21780ecad995", tag: "Artificial Intelligence", }, - { - title: "SpaceX Successfully Launches New Satellite Constellation", - date: "March 13, 2024", excerpt: - "Starship completes its most ambitious mission yet, deploying 50 satellites in a single launch and advancing global internet coverage goals.", image: "https://images.unsplash.com/photo-1541185933-ef5d8ed016c2", tag: "Space Tech", }, @@ -158,33 +154,103 @@ export function displayArticles(category, featuredArticle = null) { const article = featuredArticle || articles[0]; // 1. Clear previous content + newsContainer.innerHTML = ""; - // 2. Create container elements - + // 2. Create container for featured article + const featuredDiv = document.createElement("div"); + featuredDiv.classList.add("featured-article"); // 3. Create article element + const articleElement = document.createElement("article"); + articleElement.classList.add("news-card", "featured"); // 4. Create and setup image + const image = document.createElement("img"); + image.classList.add("news-image"); + image.src = article.image; + image.alt = article.title; // 5. Create content container + const contentDiv = document.createElement("div"); + contentDiv.classList.add("news-content"); // 6. Create featured label + const featuredLabel = document.createElement("span"); + featuredLabel.classList.add("featured-label"); + featuredLabel.textContent = "Featured Story"; // 7. Create title + const title = document.createElement("h2"); + title.classList.add("news-title"); + title.textContent = article.title; // 8. Create date + const date = document.createElement("div"); + date.classList.add("news-date"); + date.textContent = article.date; // 9. Create excerpt + const excerpt = document.createElement("p"); + excerpt.classList.add("news-excerpt"); + excerpt.textContent = (featuredArticle || articles[0]).excerpt; // 10. Create tag - + const tag = document.createElement("span"); + tag.classList.add("tag"); + tag.textContent = (featuredArticle || articles[0]).tag; // 11. Assemble the elements - + featuredDiv.appendChild(articleElement); + articleElement.appendChild(image); + articleElement.appendChild(contentDiv); + contentDiv.appendChild(featuredLabel); + contentDiv.appendChild(title); + contentDiv.appendChild(date); + contentDiv.appendChild(excerpt); + contentDiv.appendChild(tag); + // 12. Append the article container to the news container + newsContainer.appendChild(featuredDiv); + // 13. Create and append other articles + articles.slice(1).forEach((article) => { + const otherArticle = document.createElement("article"); + otherArticle.classList.add("news-card"); -} + const otherImage = document.createElement("img"); + otherImage.classList.add("news-image"); + otherImage.src = article.image; + otherImage.alt = article.title; + + const otherContentDiv = document.createElement("div"); + otherContentDiv.classList.add("news-content"); + + const otherTitle = document.createElement("h2"); + otherTitle.classList.add("news-title"); + otherTitle.textContent = article.title; + + const otherDate = document.createElement("div"); + otherDate.classList.add("news-date"); + otherDate.textContent = article.date; + + const otherExcerpt = document.createElement("p"); + otherExcerpt.classList.add("news-excerpt"); + otherExcerpt.textContent = article.excerpt; + + const otherTag = document.createElement("span"); + otherTag.classList.add("tag"); + otherTag.textContent = article.tag; + + // Assemble the elements + newsContainer.appendChild(otherArticle); + otherArticle.appendChild(otherImage); + otherArticle.appendChild(otherContentDiv); + otherContentDiv.appendChild(otherTitle); + otherContentDiv.appendChild(otherDate); + otherContentDiv.appendChild(otherExcerpt); + otherContentDiv.appendChild(otherTag); + } + ); // DO NOT CHANGE THIS document.addEventListener("DOMContentLoaded", () => { diff --git a/htmlstructure.html b/htmlstructure.html index ff721c2..d93871a 100644 --- a/htmlstructure.html +++ b/htmlstructure.html @@ -1,12 +1,115 @@ -
-
- 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 + + + + + News Portal + + + + +

Featured News

+
+ + + +