From ffda53377dc6302d8ade9ab1444eff3a87c7a4ba Mon Sep 17 00:00:00 2001 From: mohamed Date: Sat, 30 Aug 2025 20:45:32 -0700 Subject: [PATCH] week6: simple student-style arrays + DOM --- array_challenges.js | 82 ++---------- dom_challenges.js | 315 ++++++++++++++++++-------------------------- 2 files changed, 140 insertions(+), 257 deletions(-) diff --git a/array_challenges.js b/array_challenges.js index 3e3c564..4ca10b0 100644 --- a/array_challenges.js +++ b/array_challenges.js @@ -1,71 +1,11 @@ - -/* - -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. - -*/ - -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 +const titlesAndRatings = movies.map(function(movie){ + var t = String(movie.title); + var r = Number(movie.rating); + return t + ' - ' + r.toFixed(1); +}); +console.log('Formatted:', titlesAndRatings); + +const highRated = movies.filter(function(movie){ + return Number(movie.rating) >= 8.0; +}); +console.log('High rated (>=8.0):', highRated); diff --git a/dom_challenges.js b/dom_challenges.js index 1f414b8..3f72d0d 100644 --- a/dom_challenges.js +++ b/dom_challenges.js @@ -1,196 +1,139 @@ -// News articles data organized by category -export const newsData = { - "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.", - 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", - }, - { - 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.", - image: "https://images.unsplash.com/photo-1592478411213-6153e4ebc07d", - tag: "Hardware", - }, - ], - "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.", - image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb", - 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.", - image: "https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea", - 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.", - image: "https://images.unsplash.com/photo-1593941707882-a5bba14938c7", - tag: "Energy Tech", - }, - ], - "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.", - image: "https://images.unsplash.com/photo-1532187863486-abf9dbad1b69", - 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%.", - image: "https://images.unsplash.com/photo-1585435557343-3b092031a831", - 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.", - image: "https://images.unsplash.com/photo-1529699211952-734e80c4d42b", - tag: "Game AI", - }, - ], - "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.", - image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c", - 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.", - image: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6", - 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.", - image: "https://images.unsplash.com/photo-1542831371-29b0f74f9713", - tag: "Developer Tools", - }, - ], - "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.", - image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", - 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.", - image: "https://images.unsplash.com/photo-1518770660439-4636190af475", - 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.", - image: "https://images.unsplash.com/photo-1563986768609-322da13575f3", - tag: "Cyber Threats", - }, - ], -}; - -// html structure -{ - /*
-
- 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 -
-
-
*/ +(function(){ + var css = "" + + "#__diag{position:fixed;bottom:10px;right:10px;background:#0b1220;color:#dbe4ff;border:1px solid #334155;padding:8px 10px;border-radius:8px;font:12px/1.35 ui-sans-serif,system-ui;z-index:9999;opacity:.9}" + + "#articles-container, #cards, .articles, .news-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));max-width:1100px;margin:20px auto;padding:0 14px;}" + + ".article-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);display:flex;flex-direction:column;}" + + ".article-img{width:100%;height:200px;object-fit:cover;display:block;background:#f2f3f5;}" + + ".article-body{padding:14px 16px 12px 16px;display:flex;flex-direction:column;gap:8px}" + + ".article-title{font-size:18px;line-height:1.25;color:#1f2937;margin:0}" + + ".article-title a{color:#1f2937;text-decoration:none}" + + ".article-title a:hover{text-decoration:underline}" + + ".article-date{font-size:12px;color:#6b7280}" + + ".article-excerpt{font-size:14px;color:#374151}" + + ".article-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}" + + ".pill{font-size:12px;color:#374151;background:#eef2ff;border:1px solid #dbe3ff;border-radius:999px;padding:4px 8px;display:inline-block}" + + "[data-category]{cursor:pointer;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:16px;padding:6px 10px;margin:0 6px 6px 0;display:inline-block;user-select:none}" + + "[data-category].is-active{background:#e0e7ff;border-color:#c7d2fe}"; + var style=document.createElement('style'); style.textContent=css; document.head.appendChild(style); +})(); + +function norm(s){return (s||"").replace(/\s+/g," ").trim().toLowerCase();} +function getContainer(){ + return document.getElementById('articles-container') + || document.getElementById('cards') + || document.querySelector('.articles') + || document.querySelector('.news-list') + || document.body; +} +function getImage(a){return a&&(a.image||a.imageUrl||a.img||a.thumbnail||a.thumb||a.cover)||"";} +function getExcerpt(a){var x=a&&(a.excerpt||a.description||a.content||a.summary)||""; if(x.length>220)x=x.slice(0,217)+"..."; return x;} +function getDate(a){var d=a&&(a.date||a.publishedAt||a.time)||""; var dt=d?new Date(d):null; return dt&&!isNaN(dt)?dt.toLocaleDateString():"";} +function createCard(a){ + var card=document.createElement('div'); card.className='article-card'; + var src=String(getImage(a)); + if(src){ var img=document.createElement('img'); img.className='article-img'; img.src=src; img.alt=a&&a.title||""; card.appendChild(img); } + else { var ph=document.createElement('div'); ph.className='article-img'; card.appendChild(ph); } + var body=document.createElement('div'); body.className='article-body'; + var h2=document.createElement('h2'); h2.className='article-title'; + if(a&&a.url){ var link=document.createElement('a'); link.href=a.url; link.target='_blank'; link.rel='noopener'; link.textContent=a.title||'Untitled'; h2.appendChild(link); } + else { h2.textContent=a&&a.title||'Untitled'; } + var date=document.createElement('div'); date.className='article-date'; date.textContent=getDate(a); + var p=document.createElement('p'); p.className='article-excerpt'; p.textContent=getExcerpt(a); + var tags=document.createElement('div'); tags.className='article-tags'; + var cat=document.createElement('span'); cat.className='pill'; cat.textContent=a&&a.category||'News'; tags.appendChild(cat); + if(a&&Array.isArray(a.tags)){ for(var i=0;i { - 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 -}); +ensureDataCategoryOnTabs(); +delegateClicks(); +var first=document.querySelector('[data-category].is-active')||document.querySelector('[data-category][data-default]'); +if(!first){ var all=document.querySelectorAll('[data-category]'); var pick=null; for(var i=0;i