JSFiddle - React, Tailwind, and code Playground

by aprilkw

HTML

<article id="intro" class="english" data-publicDate="2014-04-03" alt="some interesting stuff">
    Foo bar baz lorem ipsum dolor sit amet
   </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;
}
#intro {
    border:2px solid red;
}
.public { 
    background:#06f;
}
.spin {
    -webkit-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

//if(far == 0) {
    //alert("That expression was true!");
//}

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

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 intro = document.getElementById("intro");
if(false && intro.getAttribute("alt")) {
    intro.innerHTML = intro.getAttribute("class");
}

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

*/
/*
var intro = document.getElementById("intro");
var introClasses = intro.classList;
introClasses.add("public"); //this add public css on to it
//introClasses.remove("english");
//introClasses.add("spin");
if('spin' == prompt("What do you want me to do?")){
                    introClasses.toggle("spin");
   }
   */
   
var intro = document.getElementById("intro");
var introClasses = intro.classList;
introClasses.add("public");
document.querySelector(".btn").addEventListener("click", function() {
    introClasses.toggle("spin");
});

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