From 3d2bc82ab3bbd4b3760064c11737525d7b601079 Mon Sep 17 00:00:00 2001 From: Abdulkadir Hassan Elmi Date: Mon, 28 Jul 2025 19:39:09 +0300 Subject: [PATCH] Completed Week 6 assignment tasks --- array_challenges.js | 46 ++++++----- dom_challenges.js | 47 +++++++++-- index.html | 185 ++++++++++++++++++++++++-------------------- 3 files changed, 171 insertions(+), 107 deletions(-) diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..33fda4f 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -1,4 +1,3 @@ - /* The Dataset: Movie Mania @@ -13,15 +12,20 @@ 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 }, + { 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`) @@ -43,11 +47,16 @@ const movies = [ "The Intern - Rating: 7.4/10" ] */ - - // ✍️ Solve it here ✍️ - - - /* + +// ✍️ Solve it here ✍️ + +const moviesMania = movies.map( + (Movie) => `${Movie.title} - rating ${Movie.rating} / 10` +); + +console.log(moviesMania); + +/* Task 2: Find Highly Rated Movies 🌟 (`.filter`) Your customers have requested a list of **highly rated movies** @@ -64,8 +73,9 @@ const movies = [ { title: "The Dark Knight", genre: "Action", rating: 9.0, rented: true } ] */ - - // ✍️ Solve it here ✍️ +// ✍️ Solve it here ✍️ + +const highlyRatedMovie = movies.filter((movie) => movie.rating >= 8.0); - \ No newline at end of file +console.log(highlyRatedMovie); diff --git a/dom_challenges.js b/dom_challenges.js index 1f414b8..5a162ae 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -26,7 +26,7 @@ export const newsData = { tag: "Hardware", }, ], - "Technology": [ + Technology: [ { title: "Revolutionary Quantum Computer Achieves New Milestone", date: "March 12, 2024", @@ -108,6 +108,7 @@ export const newsData = { { title: "Major Security Vulnerability Patched in Popular Framework", date: "March 6, 2024", + excerpt: "Critical zero-day vulnerability in Spring Framework patched, affecting millions of Java applications worldwide.", image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", @@ -153,37 +154,69 @@ export const newsData = { 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 const article = featuredArticle || articles[0]; + console.log(article); // 1. Clear previous content + newsContainer.innerHTML = ""; // 2. Create container elements - + const featuredDiv = document.createElement("div"); + featuredDiv.className = "featured-article"; + newsContainer.appendChild(featuredDiv); // 3. Create article element + const articleEL = document.createElement("article"); + articleEL.className = "news-card featured"; + featuredDiv.appendChild(articleEL); // 4. Create and setup image + const img = document.createElement("img"); + img.className = "news-image"; + img.src = article.image; + img.alt = article.title; + articleEL.appendChild(img); // 5. Create content container + const contentDiv = document.createElement("div"); + contentDiv.className = "news-content"; + articleEL.appendChild(contentDiv); // 6. Create featured label + const featuredLabel = document.createElement("span"); + featuredLabel.className = "featured-label"; + featuredLabel.textContent = "Featured Story"; + contentDiv.appendChild(featuredLabel); // 7. Create title + const newsTitle = document.createElement("h2"); + newsTitle.className = "news-title"; + newsTitle.textContent = article.title; + contentDiv.appendChild(newsTitle); // 8. Create date + const newsDate = document.createElement("div"); + newsDate.className = "news-date"; + newsDate.textContent = article.date; + contentDiv.appendChild(newsDate); // 9. Create excerpt + const newsExcerpt = document.createElement("p"); + newsExcerpt.className = "news-excerpt"; + newsExcerpt.textContent = article.excerpt; + contentDiv.appendChild(newsExcerpt); // 10. Create tag - - - // 11. Assemble the elements - + const tag = document.createElement("span"); + tag.className = "tag"; + tag.textContent = article.tag; + contentDiv.appendChild(tag); // 12. Append the article container to the news container + return newsContainer; } // DO NOT CHANGE THIS diff --git a/index.html b/index.html index 6a59a72..0957a5b 100644 --- a/index.html +++ b/index.html @@ -1,69 +1,75 @@ - + + + + + Gabi News - Latest Technology Updates + + - - - - Gabi News - Latest Technology Updates - - - - -
-
-
-
-
- -
-

Your Source for the Latest Technology Updates

+ +
+
+
+
+
+ +
+

Your Source for the Latest Technology Updates

+
+
- -
-
- + - -
- + +
+ -
- -
- - -
-
- SpaceX Successfully Launches New Satellite Constellation -
-

SpaceX Successfully Launches New Satellite Constellation

-
March 13, 2024
-

Starship completes its most ambitious mission yet, deploying 50 satellites in a single - launch and advancing global internet coverage goals.

- Space Tech -
-
+ +
-
- Apple Unveils Revolutionary Mixed Reality Device -
-

Apple Unveils Revolutionary Mixed Reality Device

-
March 12, 2024
-

The tech giant's latest hardware release promises to transform how we interact with - digital content through advanced spatial computing.

- Hardware -
-
-
- + +
+
+ SpaceX Successfully Launches New Satellite Constellation +
+

+ SpaceX Successfully Launches New Satellite Constellation +

+
March 13, 2024
+

+ Starship completes its most ambitious mission yet, deploying 50 + satellites in a single launch and advancing global internet coverage + goals. +

+ Space Tech +
+
- \ No newline at end of file +
+ Apple Unveils Revolutionary Mixed Reality Device +
+

+ Apple Unveils Revolutionary Mixed Reality Device +

+
March 12, 2024
+

+ The tech giant's latest hardware release promises to transform how + we interact with digital content through advanced spatial computing. +

+ Hardware +
+
+
+ + +