JSFiddle - React, Tailwind, and code Playground

by Maria

HTML

<ARTICLE id="intro" class="" data-publicDate="2014-04-03" alt="some interesting stuff" data-price="400" data-camel-cased-name="This is some data" style="COLOR:#0FF
">SOME TEXT</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;
    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);
}
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

// 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")
});

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

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

//alert(intro.style);

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

alert(intro.dataset.publicDate);