Skip to content

finished task #67

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

finished task #67

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
11 changes: 11 additions & 0 deletions array.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>array challanges</h2>
<script src="array_challenges.js"></script>

</body>
</html>
13 changes: 10 additions & 3 deletions array_challenges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,10 @@ const movies = [
*/

// ✍️ Solve it here ✍️


const mappedMovie = movies.map((result) => {
return{'title': result.title, 'rating': result.rating }
} )
console.log(mappedMovie)
/*
Task 2: Find Highly Rated Movies 🌟 (`.filter`)

Expand All @@ -67,5 +69,10 @@ const movies = [

// ✍️ Solve it here ✍️

const filterMovie = movies.filter((answer) => {
if (answer.rating >= 8.0) {



return answer.rating }
})
console.log(filterMovie)
47 changes: 35 additions & 12 deletions dom_challenges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,32 +158,55 @@ export function displayArticles(category, featuredArticle = null) {
const article = featuredArticle || articles[0];

// 1. Clear previous content

newsContainer.innerHTML="";
// 2. Create container elements

const containerElement = document.createElement("div")
containerElement.className = "featured-article"

// 3. Create article element

const articleElement = document.createElement("article")
articleElement.className = "news-card featured"
// 4. Create and setup image

const imageElement = document.createElement("img")
imageElement.className = "news-image"
imageElement.src = article.image;
imageElement.alt = article.title;
// 5. Create content container

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

const featuredLabel = document.createElement("span")
featuredLabel.className = "featured-label"
// 7. Create title

const titleElement = document.createElement("h2")
titleElement.className = "news-title"
titleElement.textContent = article.title
// 8. Create date

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

const Excerpt = document.createElement("p")
Excerpt.classname = "news-exerpt"
Excerpt.textContent = article.excerpt;
// 10. Create tag

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

// 11. Assemble the elements

containerElement.append(articleElement)
containerElement.append(imageElement)
containerElement.append(contentContainer)
containerElement.append(featuredLabel)
containerElement.append(titleElement)
containerElement.append(Date)
containerElement.append(Excerpt)
containerElement.append(Tag)

// 12. Append the article container to the news container

newsContainer.append(containerElement)
return newsContainer;
}

// DO NOT CHANGE THIS
Expand Down
5 changes: 3 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
</head>

<body>

<header class="header">
<div class="header-content">
<div class="header-top">
Expand Down Expand Up @@ -84,7 +85,7 @@ <h2 class="news-title">${article.title}</h2>
<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">
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>
Expand All @@ -96,7 +97,7 @@ <h2 class="news-title">SpaceX Successfully Launches New Satellite Constellation<

<article class="news-card">
<img class="news-image" src="https://images.unsplash.com/photo-1592478411213-6153e4ebc07d"
alt="Apple Unveils Revolutionary Mixed Reality Device">
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>
Expand Down