I have to write a function that takes a blog id as argument (e.g. 'blog-1' and 'blog-2'), and then, from the element with an id that matches the argument, the function needs to select all the elements that has the attribute class="content". Finally, the function needs to return the elements obtained from the previous step.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<h2>Our Amazing Blogs</h2>
<div id="blog-1">
<h3>How to prepare the perfect pizza</h3>
<p class="content">
The secret for preparing the perfect pizza is.... #!/*?@, and ####@@@!</br>
So you just have to $%!?#**- it!
</p>
<p class="content">
<u>Upgrade to Pro to uncover the full post</u>
</p>
</div>
<div id="blog-2">
<h3>My life as a shrimp</h3>
<p class="content">
Few years back I got tired of all the pressure put on me just for the fact of being a human being.
Why does society expect you to behave like a person just for the fact of being one?!
So I decided to turn myself into a shrimp and what happend next is amazing...
</p>
<p class="content">
<u>Upgrade to Pro to uncover the full post</u>
</p>
</div>
</body>
</html>
Javascript base:
function getContentFromBlog(blogId) {
// Get the right div according to the given blogid
let blog = "Replace this string with the expression to get the blog div";
// Get all elements with content class from the blog div
let content = "Replace this string with the expression to get the elements with 'content' class from the blog div";
// Write the return statement to return content
}
function getContentFromBlog(blogid) {
const div = document.querySelectorAll(`div#${blogid} p.content`);
if (!div) {
return;
}
return Array.from(div).map((ele) => ele.textContent.split("\n").join(''));
}
console.log(getContentFromBlog("blog-1"));<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<h2>Our Amazing Blogs</h2>
<div id="blog-1">
<h3>How to prepare the perfect pizza</h3>
<p class="content">
The secret for preparing the perfect pizza is.... #!/*?@, and ####@@@!</br>
So you just have to $%!?#**- it!
</p>
<p class="content">
<u>Upgrade to Pro to uncover the full post</u>
</p>
</div>
<div id="blog-2">
<h3>My life as a shrimp</h3>
<p class="content">
Few years back I got tired of all the pressure put on me just for the fact of being a human being. Why does society expect you to behave like a person just for the fact of being one?! So I decided to turn myself into a shrimp and what happend next is
amazing...
</p>
<p class="content">
<u>Upgrade to Pro to uncover the full post</u>
</p>
</div>
</body>
</html>