JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<ARTICLE id="intro" class="" data-public-date="2014-04-03" alt="some interesting stuff" data-price="400" data-camel-cased-name="This is some data" style="color:#0ff"></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;
    transition-duration:2s;
    height:400px;
    width:400px;
    
}
#intro {
    
}
.public {
    background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Artillery-spoked_wheel.jpg/600px-Artillery-spoked_wheel.jpg);
    background-size:cover;
}

.spin {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
}

p.btn {
    display:inline-block;
    background:#dedede;
    font-size:15px;
    color:#222;
    border:2px dotted #888;
    z-index:10;
    margin-top:4em;
}
p.btn:hover {
    background:#444;
    color:#ddd;
    cursor:pointer;
}
.pulse {
    zoom:1.2;
}

JavaScript

// 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 = { book: { isbn: "1234", name: "Tom Sawyer" } };
Library.book;

intro.dataset.publicDate = "2012-01-03";
//alert(intro.dataset.publicDate);