JSFiddle - React, Tailwind, and code Playground

by aprilkw

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 aboutSite = {};

aboutSite.subject = document.querySelector(".archived").textContent;
aboutSite.header = document.getElementById("site-footer").textContent;
aboutSite.class = document.querySelectorAll(".archived").textContent;

aboutSite.posts = document.getElementById("site-footer");
for (var el = aboutSite.firstElementChild; el; el =el.nextElementSibling) {
    alert(el.textContent);
}


//based on http://maketea.co.uk/


//var posts = {
//post: document.getElementById(".archive").textContent;
// date: document.getElementByClassName("archived__date")[0].textContent
//};