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 class="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. TESTED
var text1 = document.body.textContent;
alert (text1);
//displays all the text content AND the tags. TESTED
var text2 = document.body.innerHTML;
//alert (text2);
//--list
/*
var list = document.getElementsById("beverage");
var listitem1 = list.textContent[0];
alert (list1);
*/
//syntax
//var list=document.getElementsByTagName("UL")[0]
//list.getElementsByTagName("LI")[0].innerHTML="Milk";
/*
var body = document.getElementsByTagName("body")[0];
var child = body.firstChild;
alert (child.tagName);
// as per above example it is a h1 TESTED
alert (child.textContent);
//not running
var next = child.nextSibling;
alert (next.tagName); // as per above example it is a p
*/
//-- the first child of the document node is the html node.TESTED
//var htmlNode = document.childNodes[0];
//alert(document.childNodes[0]);
//-- the second child of the document node is the html node. TESTED
//var bodyNode = document.childNodes[1];
//alert(document.childNodes[1]);
//-- the html nodes parent is the document. TESTED
//var htmlNode = document.childNodes[0];
//if( htmlNode.parentNode == document ) {
//alert( "Hooray! The HTML node's parent is the document object!" );}
//-- resulting name of the paragraphNode is #text. TESTED
//var htmlNode = document.childNodes[0];
//var bodyNode = document.childNodes[1];
//var paragraphNode = bodyNode.childNodes[1];
//alert( bodyNode.childNodes[1].nodeName);
/*
var paragraphNode = document.getElementById("excitingText");
if(document.firstChild.lastChild.childNodes[1] == paragraphNode) {
alert( "paragraphNode IT IS INDEED!" );}
*/
// TESTED
/*var allParagraphs = document.getElementsByTagName('p');
for (var i=0; i < allParagraphs.length; i++ ) {
// do your processing here, using
// "allParagraphs[i]" to reference
// the current element of the
// collection
alert( "This is paragraph " + i + "!" );
}
*/