JSFiddle - React, Tailwind, and code Playground

by Pearlin Lawrence

HTML

<article id ="intro" class ="english" data-publicDate="2014-04-03" alt="some stuff">
    Foo bar bas 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:12px;
}
#intro {
    border:2px solid red;
}
.public { 
    background:#efefef;
}
artilce {
    font-size:42px;
    -webkit-transition-duration:2s;
       
}
#intro{
    border: 2px solid red;
}
.public{
    background:#06f;
}
.spin {
    -webkit-
    transform: rotate(360deg);
}
p.btn: hover {
    background:#444;
    color: #ddd;
    cursor:pointer;
 
}
.pulse {
    zoom:1.2;
}

JavaScript

//element.getAttribute , ClassList

/*if (false == 0) {
    alert ("True!!");
}*/
/*if (document.getElementById("intro").getAttribute("id"))
{
    alert ("True");
}*/
/*var intro = document.getElementById("intro");
if (intro.getAttribute("alt")){
    intro.innerHTML =  intro.getAttribute ("data-publicDate");
}*/
/*var intro = document.getElementById("intro");
if (false && intro.getAttribute("alt")){
    intro.innerHTML =  intro.getAttribute ("class");
}*/
var intro = document.getElementById("intro");
var introClasses = intro.classList;
introClasses.add("public");
//introClasses.remove("english");
//introClasses.toggle("english");

/*if ("spin" == prompt ("What do you want me to do?")){
    introClasses.toggle ("spin");
}*/

document.querySelector(".btn").addEventListener("click", function(){
    introClasses.toggle("spin");
});

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