JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

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

    	<h3>Favourite Recipes</h2>
	</div>

	<div id="main-content">
		<div class="col-recipe">
			<p>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>
			<p>The recipes in my web page are my favourites: breakfast, lunch and dinner. The recipes are easy. Try them. I hope you will enjoy it as much as I do. Have fun!</p>
		
		<div class="col-one">	
			<h4>Lasagna</h4>
			<img 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 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 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 href="http://allrecipes.com/Recipe/Chicken-Souvlaki-with-Tzatziki-Sauce/Detail.aspx?event8=1&prop24=SR_Thumb&e11=chicken%20souvlaki&e8=Quick%20Search&event10=1&e7=Recipe%20Hub"...

CSS

body {
    background: url("http://www.prlog.org/11598193-granite-kitchen-countertop.jpg");
    margin: auto;
    width: 690px;
    font-family:'Arial', sans serif;
    color: #000;
}
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;
    width:170px;
    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: #ffffff;
    width:650px;
    float:left;
    margin-right: 40px;
}
#main-content img {
    width:190px;
    height: 142px;
    box-shadow: 1px 1px 5px #330000;
    border-radius: 5px 5px 5px 5px;
}
.col-one {
    padding: 5px 10px 5px 5px;
    background-color: #fff;
    width:200px;
    float:left;
}
.col-two {
    padding: 5px 10px 5px 5px;
    background-color: #fff;
    width:200px;
    float:left;
}
.col-three {
    padding: 5px 10px 5px 5px;
    background-color: #fff;
    width:200px;
    float:left;
}
#col-links {
    padding: 10px 0px 30px 10px;
    background-color: #ffffff;
    margin-left: 0px;
    float:left;
    color: #000000;
    opacity: 0.8;
    box-shadow: 1px 1px 5px #330000;
    width: 635px;
}
#col-links p {
   ...

JavaScript

// -- ALMA GRACE DOM TREE

//displays all the text content without the tag. OK
//var text1 = document.body.textContent;
//alert (text1);

//displays all the text content AND the tags. OK
//var text2 = document.body.innerHTML;
//alert (text2);

//how to perform an action on each child node. OK
/*var element = document.getElementById("col-links");
if(element.nodeType==1) {
    alert("this is an element node");
}
*/

/*
//how to perform an action on each child node ; Sample Chapter 13 basic scripting p427
var element1 = document.getElementById("col-links");
var node, displayString1;
for (var i =0; i < element1.childNodes.length; i++) {
     node = element1.childNodes[i];
    displayString1 += node.nodeName + ": " + node.nodeValue + "\n";

} 
*/

/*
//how to find all <a> tags ; Sample Chapter 13 basic scripting p429
var element2 = document.getElementsByTagName("a");
var displayString2;
for (var i = 0; i < element2.length; i++) {
    displayString2 += links[i].nodeType + "\n";
}
*/


//how to test for and retrieve an attribute
var element3 = document.getElementById("col-links");
if (element3.hasAttribute("class")) {
    alert("class: " + element3.getAttribute("class"));
} else {
    alert("No attribute class);
 };

 // how to use the name and value properties
 var element5 = document.getElementById("col-links");
    var result='';
for (var i = 0; i < element5.attributes.length; i++) {
    result += element5.attrubutes[i].name + "=" + element5.attrubutes[i].value + "\n";
}
    alert(result);
          
//how to test change an attribute
//var element4 = document.getElementById("col-links");
//element4.setAttribute("border", "2");
          
          
          
 /* did not run - sample
function myFunction()
{
var txt="   ";
var c=document.body.childNodes;
for (i=0; i<c.length; i++)
  {
  txt=txt + c[i].nodeName + " < br > ";
  };

 alert (txt);   
}


    //--list

var list = document.getElementsById("
    beverage ");
var listitem1 = list.textContent[0];
alert...