JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<body>
    <div id=nav>
        <ul>
            <li><a href="index.html">Home</a>

            </li>
            <li><a href="#">About</a>

            </li>
        </ul>
    </div>
    <div id=h1>Ontario Vegetables</div>
    <div id="sky" data-season="spring">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/cloud.png">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/mediumcloud.png">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/smallcloud.png">
    </div>
    <div id="rain">
        <img src=" http://www.urbanbeta.ca/wp-content/uploads/2014/04/rain.png ">
    </div>
    <div id="veggies" data-months="May and June">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/mushroom.png ">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/pepper.png ">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/asparagus.png ">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/sprout.png ">
        <img src="http://www.urbanbeta.ca/wp-content/uploads/2014/04/carrot.png ">
    </div>
    <div id="footer">
        <p>More Info? Double Click!</p>
    </div>
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
 body {
    max-width:1300px;
    font-family:'Roboto', sans-serif;
}
#h1 {
    margin:auto;
    width:500px;
    font-size:50px;
    padding-bottom:50px;
}

.h1-change {
    color:#6EBE6D;
}

#nav li {
    font-size:20px;
    display:inline-block;
    list-style: none;
}
#nav a {
    text-decoration: none;
    color: #000000;
    padding: 30px;
}

#sky {
    width:1000px;
    margin:auto;
    z-index:1;
}
#sky img {
    padding-right: 80px;
    z-index:1;
}
.lightning {
    background:url(http://www.urbanbeta.ca/wp-content/uploads/2014/04/lightningstrike.png);
    background-repeat:no-repeat;
    background-position: 10%;
}
#rain {
    width:1000px;
    height:200px;
    margin:auto;
    z-index:2;
    padding-top:-100px;
}
.is-raining {
    background:url(http://www.urbanbeta.ca/wp-content/uploads/2014/04/raining.png);
}
#veggies {
    margin:auto;
    width:1100px;
}
#veggies img {
    padding:30px;
}
.dancing-veggies {
    -webkit-transform:rotate(20deg);
    transform:rotate(20deg)
}
#footer {
    width:170px;
    margin:auto;
    padding-top:100px;
}

JavaScript

//mouseout changes title color
var title = document.getElementById("h1");
title.addEventListener("mouseout", function () {
    title.classList.toggle("h1-change");
});

//on click rain
var isRaining = document.getElementById("rain");
isRaining.addEventListener("click", function () {
    isRaining.classList.toggle("is-raining");
});

//scroll lightning bolt
document.addEventListener("scroll", function () {
    document.getElementById("rain").firstElementChild.classList.add("lightning");
});

//mouseover dancing mushroom and carrot
var dancingMush = document.getElementById("veggies").firstElementChild;
dancingMush.addEventListener("mouseover", function () {
    dancingMush.classList.toggle("dancing-veggies");
});

var dancingCarrot = document.getElementById("veggies").lastElementChild;
dancingCarrot.addEventListener("mouseover", function () {
    dancingCarrot.classList.toggle("dancing-veggies");
});

//dblclick footer opens more info
var footer = document.getElementById("footer");
footer.addEventListener("dblclick", function () {
    window.open("http://www.ontario.ca/foodland/availability-guide");
});

//dataset used to determine which season is in view
var season = document.getElementById("sky");
var userSeason = season.getAttribute('data-season');
console.log(userSeason);