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 aboutUs = document.getElementById("post-114").textContent;
alert(aboutUs);

//var mission = document.getElementById("mission").textContent;
//alert(mission);

//var quotes = document.getElementsByClassName("simplePullQuote")[0].textContent;
//alert(quotes);

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

/*var theObject = { };    //empty object
theObject.simplePullQuote = doucument.querySelector(".simplePullQuote")[0].textContent;
alert(JSON.stringify(theObject));
*/


//var simplePullQuote = document.querySelector(".simplePullQuote")[0].textContent;
//var pLink = simplePullQuote.querySelector("p");
//alert(pLink);

/*var theObject = {
    simplePullQuote: document.querySelector(".simplePullQuote")[0].textContent,
    pLink: simplePullQuote.querySelectorAll("p")
  //  alert(pLink);
    alert(JSON.stringify(theObject));    
*/
    




/*//var theObject = {
  simplePullQuote = doucument.querySelector (".simplePullQuote");
}
alert(theObject);
//alert(JSON.stringify(theObject));

*/



/*//var outJson = {
  breadcrumb = doucument.querySelector (".breadcrumb");
}
alert(outJson);
//alert(JSON.stringify(outJson));
*/

/*var quotes = document.querySelector(".simplePullQuote").textContent;  
 for (var i=0; i<quotes.length; i++){
     alert(quotes[i]);
 }*/

/*for(var ele=document.body.firstElementChild; ele; ele = ele.nextElementSibling) {
    alert(ele.innerText);
}*/


//var blogHeading = document.getElementsByClassName(".blog-description");
//alert(document.querySelector(".blog-description").textContent;
//alert(blogHeading).textContent;

/*var outJson = { };    //empty object
outJson.breadcrumb = doucument.querySelector (".breadcrumb");

//var outJson = {
  breadcrumb = doucument.querySelector...