JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<div data-my-stuff="foobar" style="height:700px">
</div>
<div class="circle"></div>
<div class="square"></div>
<div data-my-stuff="foobar" style="height:700px">
</div>


<div class="header">
    <img id="logo" src="http://www.clker.com/cliparts/E/W/P/P/y/f/barbecue-utensils-hi.png" alt="chef logo" />
    	<h1>ALMA GRACE</h1>

    	<h3 id="subtitle">Favourite Recipes</h2>

	</div>

	<div class="main-content">
		<div class="col-recipe">
			<p id="text1">I love cooking and I enjoy trying new recipes. My family and friends love my food. This website is dedicated to home cooks who share the same passion that I have.</p>
<!--comment-->

<p class="button">Click Me</p>            

            
		<div class="col-one">	
			<h4>Lasagna</h4>
            
     
            
			<img id="lasagna" src="http://images.media-allrecipes.com/userphotos/250x250/00/03/24/32427.jpg" alt="Lasagna" /> 
			<p>Ricotta, assorted meats, mozzarella cheese, tomato sauce and tender pasta baked in the oven. 
			<a href="http://allrecipes.com/Recipe/Worlds-Best-Lasagna/Detail.aspx?event8=1&prop24=SR_Thumb&e11=lasagna&e8=Quick%20Search&event10=1&e7=Recipe%20Hub" target="_blank">World's Best Lasagna</a>
			</p>
		</div>
		
		<div class="col-two">
			<h4>Seafood Soup</h4>
			<img id="seafood" src="http://awetthai.com/wp-content/uploads/2013/12/tom-yum-seafood-soup-awet-thai.jpg" alt="Seafood Soup" /> 
			<p>The ultimate seafood soup with fish (halibut, snapper, bass and/or grouper), shellfish, shrimp and lobster. 
			<a href="http://www.foodnetwork.com/recipes/tyler-florence/the-ultimate-sea-food-soup-recipe.html" target="_blank">Ultimate Seafood Soup</a>
			</p>
		</div>
		<div class="col-three">		
			<h4>Chicken Souvlaki</h4>
			<img id="chicken" src="http://images.media-allrecipes.com/userphotos/250x250/00/23/09/230908.jpg" alt="Chicken Souvlaki" /> 
			<p>This recipe features the fresh-tasting combination of lemon juice, garlic, and olive oil that is so prevalent in Greek cuisine.
			<a...

CSS

.circle {
    width:100px;
    height:100px;
    display:block;
    position:relative;;
    top:0;left:0;
    background-color:gold;
    border-radius:100%;
    -webkit-transition-duration:2s;
    z-index:10;
    
}
.circle.setting {
    background-color:#f00;
}


body {
    background-color:#000;
    background-image:url(http://testcollectivator.com/images/stars.png), url(http://testcollectivator.com/images/stars.png), url(http://testcollectivator.com/images/stars.png);
    background-position:100px 0, 0 100px, 250px 200px;
    margin: auto;
   // width: 900px;
    font-family:'Arial', sans serif;
    color: #000;
}
p.button {
    width: 70px;
    background:#dedede;
    font-size:15px;
    color:#000;
    border:2px solid #ff6600;
    border-radius:8px;
    font-size:16px;
    margin-top:20px;
	margin-left:0px;
	padding:5px 5px 5px 5px;
}
p.button:hover {
    background:#444;
    color:#ddd;
    cursor:pointer;
}
p {
    line-height: 20px;
    color: #000;
}
a {
    color: #e25d33;
    font-size: 14px;
}
a:hover {
    font-color: #000088;
}
a:visited {
    text-decoration: none;
    color: #990099;
}
a:focus {
    text-decoration: none;
    color: #000088;
    border-bottom-style: solid;
}
.header {
    margin: 20px 0 20px 0;
    background-color: #ffffff;
    padding: 15px;
    color: #000000;
    text-shadow:0px 0px 2px #FFFFFF, 2px 2px 2px #333333;
    box-shadow: 5px 5px 5px #330000;
    opacity: 0.9;
}
.header img {
    float: left;
    height:100px;
    margin: 10px 20px 0 0;
}
h1 {
    font-family: Arial, cursive;
    font-size: 2em;
    color: #000;
    margin: 0;
}
h3 {
    font-family: Arial, cursive;
    font-size: 1.5em;
    color: #000088;
}
h2, h4 {
    color: #000000;
    text-shadow:0px 0px 2px #FFFFFF, 2px 2px 2px #333333;
}
h5 {
    font-family: Arial, cursive;
    font-size: 1em;
    color: #000;
}
.main-content {
    padding: 15px;
    overflow:hidden;
    opacity: 0.9;
}
.col-recipe {
    padding: 5px 5px 10px 10px;
    background-color:...

JavaScript

//Alma Grace HW#2 (April 10, 2014)

window.addEventListener("scroll", function() {
    var st = document.body.scrollTop;
    var sun = document.querySelector(".circle");
    document.body.style.backgroundPosition = 
        100 + Math.sin(st/50)*20 + "px 0," +
        "0 " + Math.floor(100 - 1.5*st) + "px," +
        "250px " + Math.floor(200-4*st) + "px";
    if(st > sun.offsetTop-200) {
        sun.style.marginLeft = st - 500 + "px";
    } //console.log(document.querySelector(".circle").offsetTop);
});

document.querySelector(".circle").addEventListener("mouseenter", function() {
    this.classList.add("setting");
});

var lasagna = document.querySelector("#lasagna");
lasagna.addEventListener("mouseover", function () {
    lasagna.style.border = "5px solid green";
 
});

var lasagna = document.querySelector("#lasagna");
lasagna.addEventListener("mouseout", function () {
    lasagna.style.border = "2px dotted red";
 
});

var fname = document.querySelector("#fname");
fname.addEventListener("mousedown", function () {
    fname.style.background = "yellow";
  
   
 
});
fname.addEventListener("mouseup", function () {
    fname.style.background = "white";
   
 });


// ALMA


function addEventsToHTML() {
    var stitle = document.getElementById('subtitle');
    stitle.onmouseover = changeSubTitle1;
    stitle.onmouseout = changeSubTitle2;

    function changeSubTitle1() {
        this.style.background = "#ff9933";
        this.style.color = "#fff";
        document.getElementById("logo").src = "http://www.captaindsjobs.com/wp-content/themes/captainds/css/images/food-fullplate.png";
        document.getElementById("subtitle").innerHTML = "Yummy Recipes";
    }
        function changeSubTitle2() {
        this.style.background = "#ffffff";
        this.style.color = "#000";
        document.getElementById("logo").src = "http://www.clker.com/cliparts/E/W/P/P/y/f/barbecue-utensils-hi.png";
        document.getElementById("subtitle").innerHTML = "Favourite Recipes";
   ...