diff --git a/dom_challenges.js b/dom_challenges.js index bb943d5..4bfa72c 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -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 -}); \ No newline at end of file +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 +}); diff --git a/htmlstructure.html b/htmlstructure.html index ff721c2..cee4056 100644 --- a/htmlstructure.html +++ b/htmlstructure.html @@ -1,12 +1,22 @@
-
- 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 +
+ 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 +
+
+ diff --git a/index.html b/index.html index fda5eb7..0a6020e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,59 +8,66 @@ -
-
-
-
-
- -
-

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 +
+
+ +
+ 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 +
+
+
- \ No newline at end of file + diff --git a/js.js b/js.js new file mode 100644 index 0000000..a3feb94 --- /dev/null +++ b/js.js @@ -0,0 +1,60 @@ +// 1. Clear previous content +newsContainer.innerHTML = ""; + +// 2. Create container elements +const mafaturedArticle = document.createElement("div"); +featuredArticle.classList.add("featured-article"); + +const item = articles[0]; + +// 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.src = item.image; +image.alt = item.title; + +// 5. Create content container +const content = document.createElement("div"); +content.classList.add("news-content"); + +// 6. Create featured label +const Label = document.createElement("span"); +Label.classList.add("featured-label"); +Label.textContent = "Featured"; + +// 7. Create title +const title = document.createElement("h2"); +title.classList.add("news-title"); +title.textContent = item.title; +// 8. Create date +const data = document.createElement("div"); +data.classList.add("news-date"); +data.textContent = item.date; + +// 9. Create excerpt +const excerpt = document.createElement("p"); +excerpt.classList.add("news-excerpt"); +excerpt.textContent = item.excerpt; + +// 10. Create tag +const tag = document.createElement("span"); +tag.classList.add("news-tag"); +tag.textContent = item.tag; + +// 11. Assemble the elements + +content.appendChild(Label); +content.appendChild(title); +content.appendChild(data); +content.appendChild(excerpt); +content.appendChild(tag); + +articleElement.appendChild(image); +articleElement.appendChild(content); + +featuredArticle.appendChild(articleElement); + +newsContainer.appendChild(featuredArticle);