settingsAccountsettings
By using our mini forum, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy
Menusettings

Q: Summary (jQuery+DOM task)

+2 votes

You will be given an HTML document, containing an article and a button. Some parts of the text will be highlighted with a <strong> tag. Write a JS function that receives a selector to the button and attaches an event to it. The event executes a function that finds all highlighted parts of the text and places them in a summary after the original article. The article will always be inside a div with ID 'content'.

The summary should be inside a div with ID 'summary', appended after the original article (at the end of its parent). The first element inside the div is a heading (<h2>) with the text 'Summary'. The second element is a paragraph (<p>), inside which are all the extracted parts from the original article. Note that you only need the text without the <strong> tags that originally surround it. See the example for more details.

HTML Skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Summary</title>
	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>

<div class="wrapper">
    <div id="content">
        <p><strong>The Theodor Pallady Museum </strong>is a museum situated in one of the oldest surviving merchant
            houses in Bucharest, Romania. It <strong>includes many works by the </strong>well-known Romanian <strong>painter
                Theodor Pallady</strong>, as well as a number of European and Oriental furniture pieces.</p>
    </div>
    <input type="button" id="generate" value="Generate Summary"/>
</div>
</body>
</html>

Sample Input 1:

<div class="holder">
  <input type="button" id="generate" value="Generate Summary"/>
  <div id="content">
    <p><strong>Important text. </strong>Not too important. <strong>Also useful info.</strong></p>
  </div>
</div>

Sample Output 1:

<div class="holder">
  <input type="button" id="generate" value="Generate Summary"/>
  <div id="content">
    …
  </div>
  <div id="summary">
    <h2>Summary</h2>
    <p>Important text. Also useful info.</p>
  </div>
</div>

Sample Input 2:

<div class="wrapper">
  <div id="content">
    <p><strong>The Theodor Pallady Museum </strong>is a museum situated in one of the oldest surviving merchant houses in Bucharest, Romania. It <strong>includes many works by the </strong>well-known Romanian <strong>painter Theodor Pallady</strong>, as well as a number of European and Oriental furniture pieces.</p>
  </div>
  <input type="button" id="generate" value="Generate Summary"/>
</div>

Sample Output 2:

<div class="wrapper">
  <div id="content">
    …
  </div>
  <input type="button" id="generate" value="Generate Summary"/>
  <div id="summary">
    <h2>Summary</h2>
    <p>The Theodor Pallady Museum includes many works by the painter Theodor Pallady</p>
  </div>
</div>

Screenshots:

summary jquery task with DOM

asked in JavaScript category by user paulcabalit
share on fb share via email

1 Answer

+1 vote

My solution - the HTML code - with the JavaScript function inside:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Summary</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>

<div class="wrapper">
    <div id="content">
        <p><strong>The Theodor Pallady Museum </strong>is a museum situated in one of the oldest surviving merchant
            houses in Bucharest, Romania. It <strong>includes many works by the </strong>well-known Romanian <strong>painter
                Theodor Pallady</strong>, as well as a number of European and Oriental furniture pieces.</p>
    </div>
    <input type="button" id="generate" value="Generate Summary"/>
</div>
<script>
    function generateSummary(selector) {
        $(selector).on("click", function () {
            let summaryText = $("#content strong").text();
            createSummary(summaryText);
        });

        function createSummary(summaryText) {
            //Create elements:
            let summary = $("<div>");
            summary.attr("id", "summary");

            let title = $("<h2>").text("Summary");
            let paragraph = $("<p>").text(summaryText);

            //Append elements:
            summary.append(title);
            summary.append(paragraph);
            let parent = $("#content").parent();
            parent.append(summary);
        }
    }
    $(document).ready(generateSummary("#generate"));
</script>
</body>
</html>

Only the JavaScript function:

function generateSummary(selector) {
    $(selector).on("click", function () {
        let summaryText = $("#content strong").text();
        createSummary(summaryText);
    });

    function createSummary(summaryText) {
        //Create elements:
        let summary = $("<div>");
        summary.attr("id", "summary");

        let title = $("<h2>").text("Summary");
        let paragraph = $("<p>").text(summaryText);

        //Append elements:
        summary.append(title);
        summary.append(paragraph);
        let parent = $("#content").parent();
        parent.append(summary);
    }
}
$(document).ready(generateSummary("#generate"));

 

answered by user ak47seo

Facebook Follow Button

Twitter Follow Button

Related questions

622 questions

979 answers

129 comments

53 users

  | Privacy Policy | Contact Us | Sitemap
Copyright
...