Skip to content

finished #52

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
saidmahad wants to merge 1 commit into
base: main
Choose a base branch
from
Open

finished #52

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
176 changes: 113 additions & 63 deletions dom_challenges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,160 +1,210 @@

// News articles data organized by category
export const newsData = {
'Latest News': [
"Latest News": [
{
title: "GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model",
date: "March 14, 2024",
excerpt: "OpenAI's latest language model demonstrates unprecedented reasoning capabilities and achieves human-level performance across various domains.",
excerpt:
"OpenAI's latest language model demonstrates unprecedented reasoning capabilities and achieves human-level performance across various domains.",
image: "https://images.unsplash.com/photo-1677442136019-21780ecad995",
tag: "Artificial Intelligence"
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.",
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"
tag: "Space Tech",
},
{
title: "Apple Unveils Revolutionary Mixed Reality Device",
date: "March 12, 2024",
excerpt: "The tech giant's latest hardware release promises to transform how we interact with digital content through advanced spatial computing.",
excerpt:
"The tech giant's latest hardware release promises to transform how we interact with digital content through advanced spatial computing.",
image: "https://images.unsplash.com/photo-1592478411213-6153e4ebc07d",
tag: "Hardware"
}
tag: "Hardware",
},
],
'Technology': [
Technology: [
{
title: "Revolutionary Quantum Computer Achieves New Milestone",
date: "March 12, 2024",
excerpt: "IBM's latest quantum processor demonstrates quantum advantage in real-world applications, marking a historic milestone in computing.",
excerpt:
"IBM's latest quantum processor demonstrates quantum advantage in real-world applications, marking a historic milestone in computing.",
image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb",
tag: "Quantum Computing"
tag: "Quantum Computing",
},
{
title: "New Processor Architecture Promises 50% Better Efficiency",
date: "March 11, 2024",
excerpt: "TSMC and AMD collaborate on groundbreaking 2nm chip design, setting new standards for performance and energy efficiency.",
excerpt:
"TSMC and AMD collaborate on groundbreaking 2nm chip design, setting new standards for performance and energy efficiency.",
image: "https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea",
tag: "Hardware"
tag: "Hardware",
},
{
title: "Revolutionary Battery Technology Triples EV Range",
date: "March 10, 2024",
excerpt: "Breakthrough in solid-state battery technology promises to revolutionize electric vehicles with extended range and faster charging.",
excerpt:
"Breakthrough in solid-state battery technology promises to revolutionize electric vehicles with extended range and faster charging.",
image: "https://images.unsplash.com/photo-1593941707882-a5bba14938c7",
tag: "Energy Tech"
}
tag: "Energy Tech",
},
],
'AI & ML': [
"AI & ML": [
{
title: "DeepMind's AlphaFold 3 Revolutionizes Drug Discovery",
date: "March 10, 2024",
excerpt: "Latest version of protein structure prediction AI leads to breakthrough discoveries in pharmaceutical research and disease treatment.",
excerpt:
"Latest version of protein structure prediction AI leads to breakthrough discoveries in pharmaceutical research and disease treatment.",
image: "https://images.unsplash.com/photo-1532187863486-abf9dbad1b69",
tag: "Healthcare AI"
tag: "Healthcare AI",
},
{
title: "AI-Powered Drug Discovery Platform Shows Promise",
date: "March 9, 2024",
excerpt: "Machine learning platform identifies novel drug candidates for rare diseases, reducing development time by 60%.",
excerpt:
"Machine learning platform identifies novel drug candidates for rare diseases, reducing development time by 60%.",
image: "https://images.unsplash.com/photo-1585435557343-3b092031a831",
tag: "Healthcare AI"
tag: "Healthcare AI",
},
{
title: "AI System Masters Complex Strategy Game Go",
date: "March 8, 2024",
excerpt: "New reinforcement learning algorithm demonstrates unprecedented strategic thinking in ancient board game.",
excerpt:
"New reinforcement learning algorithm demonstrates unprecedented strategic thinking in ancient board game.",
image: "https://images.unsplash.com/photo-1529699211952-734e80c4d42b",
tag: "Game AI"
}
tag: "Game AI",
},
],
'Web Development': [
"Web Development": [
{
title: "Next.js 14 Released with Revolutionary Features",
date: "March 8, 2024",
excerpt: "Vercel introduces game-changing features including enhanced server components and automatic performance optimization.",
excerpt:
"Vercel introduces game-changing features including enhanced server components and automatic performance optimization.",
image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c",
tag: "Frontend"
tag: "Frontend",
},
{
title: "WebAssembly Reaches New Adoption Milestone",
date: "March 7, 2024",
excerpt: "Major browsers announce enhanced WebAssembly support, enabling near-native performance for web applications.",
excerpt:
"Major browsers announce enhanced WebAssembly support, enabling near-native performance for web applications.",
image: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6",
tag: "Web Technologies"
tag: "Web Technologies",
},
{
title: "Chrome Introduces Revolutionary Dev Tools Features",
date: "March 6, 2024",
excerpt: "Google Chrome's latest update includes AI-powered debugging and advanced performance analysis tools.",
excerpt:
"Google Chrome's latest update includes AI-powered debugging and advanced performance analysis tools.",
image: "https://images.unsplash.com/photo-1542831371-29b0f74f9713",
tag: "Developer Tools"
}
tag: "Developer Tools",
},
],
'Cyber Security': [
"Cyber Security": [
{
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.",
excerpt:
"Critical zero-day vulnerability in Spring Framework patched, affecting millions of Java applications worldwide.",
image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b",
tag: "Security"
tag: "Security",
},
{
title: "New Encryption Standard Proposed for IoT Devices",
date: "March 5, 2024",
excerpt: "NIST announces quantum-resistant encryption standard specifically designed for resource-constrained IoT devices.",
excerpt:
"NIST announces quantum-resistant encryption standard specifically designed for resource-constrained IoT devices.",
image: "https://images.unsplash.com/photo-1518770660439-4636190af475",
tag: "IoT Security"
tag: "IoT Security",
},
{
title: "Advanced Persistent Threat Group Targeting Tech Firms",
date: "March 4, 2024",
excerpt: "Cybersecurity firms uncover sophisticated attack campaign targeting technology companies worldwide.",
excerpt:
"Cybersecurity firms uncover sophisticated attack campaign targeting technology companies worldwide.",
image: "https://images.unsplash.com/photo-1563986768609-322da13575f3",
tag: "Cyber Threats"
}
]
tag: "Cyber Threats",
},
],
};


// YOUR TASK: Complete this function using the html structure in the htmlstructure.html file

export function displayArticles(category) {
const newsContainer = document.querySelector('#news-container');
const newsContainer = document.querySelector("#news-container");
const articles = newsData[category];

// 1. Clear previous content

newsContainer.innerHTML = "";

// 2. Create container elements

const mainDiv = document.createElement("div"); // waa marka aad div ugu wayn aad soo qadanyso furisteed iyo xiraysteeda iyo waxa ku dhex jira marka so qadanyso
mainDiv.className = "featured-article";

const newProject = articles[0];

// 3. Create article element

const mainArticle = document.createElement("article");
mainArticle.className = "news-card featured";

// 4. Create and setup image

const sawir = document.createElement("img");
sawir.className = "news-image";
sawir.src = newProject.image;
sawir.alt = newProject.title;

// 5. Create content container

const secDiv = document.createElement("div");
secDiv.className = "news-content";
// 6. Create featured label

const featuredlabel = document.createElement("span");
featuredlabel.className = "featured-label";
featuredlabel.textContent = "Featured Story";

// 7. Create title

const tittle = document.createElement("h2");
tittle.className = "news-title";
tittle.textContent = newProject.title;

// 8. Create date

const Date = document.createElement("div");
Date.className = "news-date";
Date.textContent = newProject.date;
// 9. Create excerpt

const Excerpt = document.createElement("p");
Excerpt.className = "news-excerpt";
Excerpt.textContent = newProject.excerpt;

// 10. Create tag

const Tag = document.createElement("span");
Tag.className = "tag";
Tag.textContent = newProject.tag;

// 11. Assemble the elements


newsContainer.insertBefore(featuredArticle, newsContainer.firstChild);
}
mainDiv.appendChild(mainArticle);
mainArticle.appendChild(sawir);
mainArticle.appendChild(secDiv);
secDiv.appendChild(featuredlabel);
secDiv.appendChild(tittle);
secDiv.appendChild(Date);
secDiv.appendChild(Excerpt);
secDiv.appendChild(Tag);

// 12. Append the featured article to the news container
newsContainer.appendChild(mainDiv);
return newsContainer;
}

// DO NOT CHANGE THIS
document.addEventListener('DOMContentLoaded', () => {
const defaultCategory = 'Latest News'; // Define the default category
displayArticles(defaultCategory); // Display articles for the default category
document.querySelector(`.nav-links a[data-category="${defaultCategory}"]`).classList.add('active'); // Set active class
});
document.addEventListener("DOMContentLoaded", () => {
const defaultCategory = "Latest News"; // Define the default category
displayArticles(defaultCategory); // Display articles for the default category
document
.querySelector(`.nav-links a[data-category="${defaultCategory}"]`)
.classList.add("active"); // Set active class
});
32 changes: 21 additions & 11 deletions htmlstructure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
<div class="featured-article">
<article class="news-card featured">
<img class="news-image" src="https://images.unsplash.com/photo-1677442136019-21780ecad995" alt="GPT-5 Announcement">
<div class="news-content">
<span class="featured-label">Featured Story</span>
<h2 class="news-title">GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model</h2>
<div class="news-date">March 14, 2024</div>
<p class="news-excerpt">OpenAI's latest language model demonstrates unprecedented reasoning capabilities and achieves human-level performance across various domains.</p>
<span class="tag">Artificial Intelligence</span>
</div>
</article>
</div>
<article class="news-card featured">
<img
class="news-image"
src="https://images.unsplash.com/photo-1677442136019-21780ecad995"
alt="GPT-5 Announcement"
/>
<div class="news-content">
<span class="featured-label">Featured Story</span>
<h2 class="news-title">
GPT-5 Announcement: OpenAI Reveals Next-Generation AI Model
</h2>
<div class="news-date">March 14, 2024</div>
<p class="news-excerpt">
OpenAI's latest language model demonstrates unprecedented reasoning
capabilities and achieves human-level performance across various
domains.
</p>
<span class="tag">Artificial Intelligence</span>
</div>
</article>
</div>
Loading