JSFiddle - React, Tailwind, and code Playground

by Andy Mcloughlin

HTML

<ARTICLE id="intro" class="" data-publicDate="2014-04-03" data-camel-cased-name="this is it" alt="some interesting stuff">what color?</ARTICLE>
<p class="btn">Let's spin!</p>

CSS

article {
}
article#intro {
}
p#intro {
}
.public.english {
}
#intro[class^=eng] {
}
#intro[alt^=some] {
}
#intro[data-publicDate^=2014] {
}
article {
    font-size:42px;
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    height:400px;
    width:400px;
    
}
#intro {
    
}
.public {
    background:url(http://cdn.vectorstock.com/i/composite/16,53/bicycle-wheel-vector-501653.jpg);
    background-size:cover;
}
.spin {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg)
}
p.btn {
    display:inline-block;
    background:#dedede;
    font-size:15px;
    color:#222;
    border:2px dotted #888;
}
p.btn:hover {
    background:#444;
    color:#ddd;
    cursor:pointer;
}
.pulse {
    zoom:1.2;
}

JavaScript

/*
https://docs.google.com/document/d/1H0wFC2r8mp8G9gIg9r6hcCvWmwe7le-r-FB2jkxxz9Q/edit

https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

https://gist.github.com/brettz9/4093766    ---ie dataset shim

use 5 different event types
http://www.w3schools.com/tags/ref_eventattributes.asp
*/

/*if(document.getElementById("intro").getAttribute("alt")) {
    alert("That expression was true!");
}*/

/*var intro = document.getElementById("intro");
if(intro.getAttribute("alt")) {
   intro.innerHTML = intro.getAttribute("class");
}*/

/*var myclass = document.getElementById("intro");
if (myclass.getAttribute("class").innerHTML = "public" || "english") {
    alert("yep")
    else {
        alert("nope");
    };*/

// That 'javascript' on the top right is annoying.
var intro = document.getElementById("intro");
var introClasses = intro.classList;
introClasses.add("public");
//introClasses.remove("english");
document.querySelector(".btn").addEventListener("click", function() {
    introClasses.toggle("spin");
});

//intro.addEventListener("mouseover", function() { //intro.classList.toggle("pulse")
//                                               });


intro.style.border = "2px solid green";
intro.style.opacity = "0.2";
var mycolor = prompt("what color?");
intro.style.color = mycolor;
// camel-case-name   ---dataset
alert(intro.dataset.camelCasedName);


// That 'javascript' on the top right is annoying.
/*var intro = document.getElementById("intro");
var introClasses = intro.classList;
introClasses.add("public");
//introClasses.remove("english");
document.querySelector(".btn").addEventListener("click", function() {
    introClasses.toggle("spin");
});

intro.addEventListener("mouseover", function() { intro.classList.toggle("spin")});

//myEle.classList.toggle("forsale", myObject.isThisThingForSale());

intro.style.border = "2px solid green";
intro.style.color = "#f00";
/*var spin = prompt("How much should I zoom?");
intro.style.zoom = spin;
*/
/*var Library = {...