JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<body>
    <div id="container">
        <div id="the_body">
             <h4><span>Mission, Vision, Values</span></h4>

            <div id="post-114">
                <div id="vision">
                     <h2>VISION</h2>

                    <p>PEN Canada envisions a world where writers are free to write, readers are free to read, and freedom of expression prevails.</p>
                </div>
                <div id="mission">
                     <h2>MISSION</h2>

                    <div class="simplePullQuote">
                        <p><strong>Universal Declaration of Human Rights – Article 19:</strong> Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive, and impart information and ideas through any media and regardless of frontiers.</p>
                        <p>
                    </div>
                    <p>PEN Canada is a nonpartisan organization of writers that works with others to defend freedom of expression as a basic human right, at home and abroad. PEN Canada promotes literature, fights censorship, helps free persecuted writers from prison, and assists writers living in exile in Canada.</p>
                </div>
                <div id="values">
                    <h2>VALUES<strong></strong></h2>

                    <p><strong>FREEDOM</strong>
                        <br />We believe that without freedom of expression there is no freedom.</p>
                    <p><strong>ACCOUNTABILITY</strong>
                        <br />In defending persecuted writers and fighting censorship, we endeavor to advance civil society, human rights, and the dignity of the individual.</p>
                    <div class="simplePullQuote">
                        <p><strong>Canadian Charter of Rights and Freedoms – Section 2(b)</strong> Everyone has the…freedom of thought, belief, opinion and expression, including freedom of the press and other media of...

CSS

body {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    margin: 30px;
}
h2 {
    color: red;
}
#container {
    border-color:#666666;
    border: 1px solid #ccc;
    padding:20px
}
p {
    padding-left: 3px;
}

JavaScript

// getElementByID, querySelector, querySelectorAll, getElementsByClassName, firstElementChild

var links = document.querySelectorAll("h2")[0].textContent;
console.log(links);

var txt = document.body.firstElementChild.textContent;
console.log(txt);

var aboutUs = document.getElementById("post-114").textContent;
console.log(aboutUs);

var mission = document.getElementById("mission").textContent;
console.log(mission);

var quotes = document.getElementsByClassName("simplePullQuote")[0].textContent;
console.log(quotes);



var theQuote = {
    simplePullQuote : document.querySelector(".simplePullQuote").textContent
};
//alert(JSON.stringify(theQuote));

var company = {
    mission: document.getElementById("mission").textContent,
    quotes: document.getElementsByClassName("simplePullQuote")[0].textContent
};
//alert(JSON.stringify(theQuote));