JSFiddle - React, Tailwind, and code Playground

by Andy Mcloughlin

HTML

<body>
    <div class="container">
        <div id="site-header">
            <header role="banner"><a class="site-logo" href="/" title="Return to home page"><img src="http://maketea.co.uk/assets/img/icon.svg" alt="Matt Hinchliffe, Front-End Developer logo" width="60" height="60" class="js-svg"></a>
            </header>
            <nav role="navigation">
                <ul class="site-navigation">
                    <li><a href="/articles.html">Articles</a>
                    </li>
                    <li><a href="https://twitter.com/i_like_robots" rel="me">Twitter</a>
                    </li>
                    <li><a href="https://github.com/i-like-robots" rel="me">GitHub</a>
                    </li>
                </ul>
            </nav>
        </div>
        <section id="site-main">
            <div class="archive">
                <h1> Recent posts </h1>
                <article class="archived" itemscope="" itemtype="http://schema.org/BlogPosting">
                    <h1 class="archived__title heading--3" itemprop="name"><a href="/2014/03/05/building-robust-web-apps-with-react-part-1.html" rel="bookmark" itemprop="url">Building robust web apps with React: Part 1, in-browser prototypes</a></h1>
                    <div class="archived__meta text--milli">
                        <time class="archived__date" datetime="2014-03-05" itemprop="datePublished">05 March 2014</time>
                    </div>
                    <p class="archived__excerpt">The robustness engrained into key parts of the web stack gets forgotten as we build more dynamic applications, users might not get anything when even a small problem occurs. React provides a straightforward means to creating adaptive-hybrid or isomorphic web applications which can inject robustness back into our projects.</p>
                </article>
                <article class="archived" itemscope="" itemtype="http://schema.org/BlogPosting">
                    <h1 class="archived__title...

JavaScript

var outputJ = {};

for (scrape = document.body.firstElementChild.firstElementChild; scrape; scrape = scrape.nextElementSibling) {

    outputJ.ALLtext = scrape.textContent;
    outputJ.ALLHTML = scrape.innerHTML;
    //all text Content elements one by one 
    //alert(outputJ.ALLtext);
    //all inner HTML elements one by one
    //alert(outputJ.ALLHTML);   
}

//logo html    
outputJ.headerLogo = document.querySelector(".site-logo").innerHTML;

//nav loop
for (ele = document.querySelector("nav ul li"); ele; ele = ele.nextElementSibling){
    outputJ.nav = ele.textContent;   
    console.log(outputJ.nav);
     }

//HTML logo
console.log(outputJ.headerLogo);

/*var links = document.getElementsByTagName("a");
for(var i = 0; i< links.length; i++){
    links[i].addEventListener("click", function(eve){
    eve.preventDefault(); this.textContent += "."; });    
}*/

/*var h1s = document.getElementsByTagName("h1");
for(var i = 0; i< h1s.length; i++){
    outputJ.h1Tags =  h1s[i].textContent; 
    console.log(outputJ.h1Tags);
}*/

/*var h1s = document.getElementsByTagName("h1");
for (var i = 0; i < h1s.length; i++) {
    var h1 = h1s[i];
    if (!h1.id) {
        h1.id = "h1" + i + (new Date().getTime());
    }
}*/
MyObject = {};
MyObject.someArray = [];
var h1s = document.getElementsByTagName("h1");
for(i = 0; i < h1s.length; i++){
   MyObject.someArray.push( h1s[i].textContent );
    console.log(JSON.stringify(MyObject.someArray));
    }


console.log(JSON.stringify(outputJ));