Skip to content

Completed Week 6 assignment tasks #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zacimka wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Completed Week 6 assignment tasks #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 28 additions & 18 deletions array_challenges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

/*

The Dataset: Movie Mania
Expand All @@ -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`)

Expand All @@ -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**
Expand All @@ -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);

console.log(highlyRatedMovie);
47 changes: 40 additions & 7 deletions dom_challenges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const newsData = {
tag: "Hardware",
},
],
"Technology": [
Technology: [
{
title: "Revolutionary Quantum Computer Achieves New Milestone",
date: "March 12, 2024",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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
Expand Down
185 changes: 103 additions & 82 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,75 @@
<!-- DO NOT CHANGE THE HTML -->
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gabi News - Latest Technology Updates</title>
<link rel="stylesheet" href="styles.css" />
</head>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gabi News - Latest Technology Updates</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<header class="header">
<div class="header-content">
<div class="header-top">
<div class="header-top-content">
<div class="header-left">
<img src="https://plus.gabischool.com/assets/uploads/gabinews.png" alt="Gabi News Logo" class="logo">
<div class="header-text">
<p>Your Source for the Latest Technology Updates</p>
<body>
<header class="header">
<div class="header-content">
<div class="header-top">
<div class="header-top-content">
<div class="header-left">
<img
src="https://plus.gabischool.com/assets/uploads/gabinews.png"
alt="Gabi News Logo"
class="logo"
/>
<div class="header-text">
<p>Your Source for the Latest Technology Updates</p>
</div>
</div>
</div>
</div>
<nav class="main-nav">
<div class="nav-links">
<a href="#" data-category="Latest News" class="active"
>Latest News</a
>
<a href="#" data-category="Technology">Technology</a>
<a href="#" data-category="AI & ML">AI & ML</a>
<a href="#" data-category="Web Development">Web Development</a>
<a href="#" data-category="Cyber Security">Cyber Security</a>
</div>
</nav>
</div>
<nav class="main-nav">
<div class="nav-links">
<a href="#" data-category="Latest News" class="active">Latest News</a>
<a href="#" data-category="Technology">Technology</a>
<a href="#" data-category="AI & ML">AI & ML</a>
<a href="#" data-category="Web Development">Web Development</a>
<a href="#" data-category="Cyber Security">Cyber Security</a>
</div>
</nav>
</div>
</header>

</header>

<!-- News Container -->
<div id="news-container" class="news-container">
<!-- Featured Article -->
<!-- News Container -->
<div id="news-container" class="news-container">
<!-- Featured Article -->

<div class="news-grid"></div>
<script type="module">
import { newsData, displayArticles } from './dom_challenges.js';
<div class="news-grid"></div>
<script type="module">
import { newsData, displayArticles } from "./dom_challenges.js";

// Target the news-grid that contains the static articles (the second one)
const newsGrid = document.querySelectorAll('.news-grid')[1]; // Get the second .news-grid element
// Target the news-grid that contains the static articles (the second one)
const newsGrid = document.querySelectorAll(".news-grid")[1]; // Get the second .news-grid element

// Update grid when category changes
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
const category = link.dataset.category;
// Update grid when category changes
document.querySelectorAll(".nav-links a").forEach((link) => {
link.addEventListener("click", () => {
const category = link.dataset.category;

// Update active state
document.querySelectorAll('.nav-links a').forEach(l => l.classList.remove('active'));
link.classList.add('active');
// Update active state
document
.querySelectorAll(".nav-links a")
.forEach((l) => l.classList.remove("active"));
link.classList.add("active");

// Update featured article and grid
displayArticles(category);
// Update featured article and grid
displayArticles(category);

// Update grid
const articles = newsData[category].slice(1);
// Update grid
const articles = newsData[category].slice(1);

newsGrid.innerHTML = '';
articles.forEach(article => {
newsGrid.innerHTML += `
newsGrid.innerHTML = "";
articles.forEach((article) => {
newsGrid.innerHTML += `
<article class="news-card">
<img class="news-image" src="${article.image}" alt="${article.title}">
<div class="news-content">
Expand All @@ -74,38 +80,53 @@ <h2 class="news-title">${article.title}</h2>
</div>
</article>
`;
});
});
});
});
</script>
</div>

<!-- Initial Articles -->
<div class="news-grid">
<article class="news-card">
<img class="news-image" src="https://images.unsplash.com/photo-1541185933-ef5d8ed016c2"
alt="SpaceX Successfully Launches New Satellite Constellation">
<div class="news-content">
<h2 class="news-title">SpaceX Successfully Launches New Satellite Constellation</h2>
<div class="news-date">March 13, 2024</div>
<p class="news-excerpt">Starship completes its most ambitious mission yet, deploying 50 satellites in a single
launch and advancing global internet coverage goals.</p>
<span class="tag">Space Tech</span>
</div>
</article>
</script>
</div>

<article class="news-card">
<img class="news-image" src="https://images.unsplash.com/photo-1592478411213-6153e4ebc07d"
alt="Apple Unveils Revolutionary Mixed Reality Device">
<div class="news-content">
<h2 class="news-title">Apple Unveils Revolutionary Mixed Reality Device</h2>
<div class="news-date">March 12, 2024</div>
<p class="news-excerpt">The tech giant's latest hardware release promises to transform how we interact with
digital content through advanced spatial computing.</p>
<span class="tag">Hardware</span>
</div>
</article>
</div>
</body>
<!-- Initial Articles -->
<div class="news-grid">
<article class="news-card">
<img
class="news-image"
src="https://images.unsplash.com/photo-1541185933-ef5d8ed016c2"
alt="SpaceX Successfully Launches New Satellite Constellation"
/>
<div class="news-content">
<h2 class="news-title">
SpaceX Successfully Launches New Satellite Constellation
</h2>
<div class="news-date">March 13, 2024</div>
<p class="news-excerpt">
Starship completes its most ambitious mission yet, deploying 50
satellites in a single launch and advancing global internet coverage
goals.
</p>
<span class="tag">Space Tech</span>
</div>
</article>

</html>
<article class="news-card">
<img
class="news-image"
src="https://images.unsplash.com/photo-1592478411213-6153e4ebc07d"
alt="Apple Unveils Revolutionary Mixed Reality Device"
/>
<div class="news-content">
<h2 class="news-title">
Apple Unveils Revolutionary Mixed Reality Device
</h2>
<div class="news-date">March 12, 2024</div>
<p class="news-excerpt">
The tech giant's latest hardware release promises to transform how
we interact with digital content through advanced spatial computing.
</p>
<span class="tag">Hardware</span>
</div>
</article>
</div>
<script src="array_challenges.js"></script>
</body>
</html>