Recipe Search by Item

Recipe Search by Item - CSS

/* CSS Mini Reset */
		html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
			.clear{clear:both; width:100%; display:inline-block; height:0; visibility: hidden;}



			/* begin css */

#megacontainer{
    width: 100%;
    background-image:url(backgound.png);
    background-attachment: fixed;
}

#divholder{
    width: 70%;
    margin: 0 auto;
    background-color: white;
    
}

#container{
    width: 100%;
    height: 180px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fffefa;
    border-bottom: 1px;
    border-bottom-color: #ebebeb;
    border-style: solid;
;
    
    text-align: center;
}

#recipes{
    width:70%;
    height: 1200%;
    margin: 0 auto;
    
    
}

#space{
    height: 150px;
}

#checkcat{
    font-family: Helvetica;
}

#searchdiv{
    height: 250px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding-top: 10%;
    font-family: Merriweather;
    color: #ffae2e;
    font-weight: bold;
    font-size: 40px;
    line-height: 45px;
    background-color: #fffefa  ;
}
#allergies{
    height:50px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    font-family: Merriweather;
    color: #ffce81;
    font-weight: bold;
    font-size: 24px;
    background-color: #fffefa;
}

#submit{
    background-color: #ccc;
    height: 40px;
    width:150px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius:30px;
    color: #fff;
    font-family: 'Helvetica Neue';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    outline: none;
    display: block;
    margin: 0 auto;
    margin-top:20px;
    margin-bottom: 20px;
}

#submit:hover {
    border: none;
    background:#ffae2e;
    box-shadow: 0px 0px 1px #777;
    outline: none;
}

#submit:focus {
    outline: none;
    border: none;
}

.recipeName {
	float: left;
    font-size: 24px;
    font-weight: bold;
	width: 100%;
	padding-top: 10px;  
	font-family: 'Merriweather';
    text-align: left  ;
    margin-top: 1%;
    padding-bottom: 2%;
	color: #676767;
    border-bottom: 1px;
    border-style: dotted;
    border-bottom-color: #cbcbcb;
}
.ingredients {
    float: left;
    margin-bottom: 10%;
    margin-top: 3%;
    width: 100%;  
	font-family: 'Merriweather';
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.1px;
    text-align: left;
    color: #676767;
}

.time{
    float: left;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 3%;
	font-family: 'Open Sans';
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    text-align: left;
    color: #676767;
    
}

.image{
    height: 240px;
    width: 360px; 
    padding-top: 5px;
}

#search{
    
    margin: 0 auto;
    margin-top: 3%;
    padding-left: 57px;
    background-image:url('icon_15440.png');
    background-size: 60px, 60px;
    background-repeat:no-repeat;
    background-position:left;
    border:1px solid #dfdfdf;
    height: 60px;
    width: 400px;
    font-family: 'Helvetica Neue';
    font-weight: 300;
    font-size: 20px;
    color: #b8b8b8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: left;
    display: block;    
}

#search:focus {
    outline: none;
}

.switch{
    margin: 0 auto;
    text-align: center;
    background-color: #fffefa;
    height: 150px;
}

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
    background-color: #8fddda;
    height: 10px;
    width:70px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius:4px;
    color: #fff;
    font-family: 'Merriweather';
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    outline: none;
    display:inline-block;
    padding: 10px;
    margin: 5px;
}

label:hover {
    background-color: #27c6c0;
}

.recipe-holder {
    height: 700px;
    width: 360px;
    border-style: solid;
    border-width: 1px;
    border-color: #dfdfdf;
    padding: 5px;
    margin: 0 auto;
    margin-top: 40px;
}

.viewRecipe:link {
    height: 40px;
    width: 200px;
    background-color: red;
    border-radius: 4px;
}

.viewRecipeText:link {
    height: 40px;
    width: 200px;
    font-family: 'Helvetica Neue';
    background-color: #ffae2e;
    border-radius: 4px;
}

/* Default State */
.checks {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
}

<!--till here-->




.Button {
	background-color:#44c767;
    height: 50px;
    width 150px;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Helvetica Neue;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.Button:hover {
	background-color:#5cbf2a;
}
.Button:active {
	position:relative;
	top:1px;
}


#title {
    font-size: 24px;
    font-weight: bold;
}

#ingredients{
    font-size: 14px;
}

#directions{
    font-size: 14px;
    font-weight: bold;
}


/* unvisited link */
a:link {
  color: #00FF00;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Recipe Search by Item - HTML

<html>

    <head>
        <title>Favorite Food</title>
        <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css">
        <link href=’http://fonts.googleapis.com/css?family=Merriweather&#8217;
rel=’stylesheet’ type=’text/css’>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link rel="icon" type="image/png" href="pineapple.png">
        
    </head>
    <body>
    <div id="megacontainer">
        <div id="divholder">
            <form name="search">
        <div id="searchdiv"> Search recipes based <br> on your favorite food!
            
            <input type="text" id="search" placeholder="type the food of your choice"> <br>
        </div>
             <div id="allergies">Any Allergies?</div>
    <div id="container">
            <!--div class="switch">
               
                <!-- the name is what the server needs to know what it is -->
                <!-- the value is what appears on the button -->
                <!-- the "action" -->
                
                <input type="checkbox" name="option1" class=checks value="Dairy"><label>Dairy</label>
                <input type="checkbox" name="option2" value="Egg" checked><label>Egg</label>
                <input type="checkbox" name="option3" value="Gluten"><label>Gluten</label>
                <input type="checkbox" name="option4" value="Peanut"><label>Peanut</label>
                <input type="checkbox" name="option5" value="Seafood"><label>Seafood</label>
                <input type="checkbox" name="option6" value="Sesame"><label>Sesame</label>
                <input type="checkbox" name="option7" value="Soy"><label>Soy</label>
                <input type="checkbox" name="option8" value="Sulfate"><label>Sulfate</label>
                <input type="checkbox" name="option9" value="Tree Nut"><label>Tree Nut</label>
                <input type="checkbox" name="option10" value="Wheat"><label>Wheat</label>
                <input type="checkbox" name="option11" value="Meat & Poultry"><label>Meat</label>
                <input type="checkbox" name="option12" value="Fish"><label>Fish</label>
                <input type="button" value="Search" onClick="searchRecipes()" id="submit"> 

            
            </div>
            
            </form>
        <div id="recipes">
        </div>
    </div>
    </div>
    </div>
    </body>

</html>  

Recipe Search by Item - JavaScript

function searchRecipes() {

// 1. send request to API
    $.get("http://api.yummly.com/v1/api/recipes?_app_id=30885432&_app_key=6eaaa7c45fffeea3f37d9adb28ad9960&q="+document.getElementById("search").value, function(response){
       console.log(response);
      //saving the data in an array
      var matches= response["matches"];
       
        //loop through this array and read each result
    for(var i=0;i<matches.length;i++){

        var imRecipe = matches[i];
        //console.log(imRecipe);
        
        requestRecipeImage(imRecipe,i);
   }
              
    

        
});


// 2. recieve the answer
// 3. Process the answer and display the information

}


function requestRecipeImage(recipe, num) {
    
    // now, get this recipes image. to do that, ma
    $.get("http://api.yummly.com/v1/api/recipe/"+recipe.id+"?_app_id=30885432&_app_key=6eaaa7c45fffeea3f37d9adb28ad9960&q=", function (response){
        
        console.log(response);

        //DISPLAY
        //console.log(imRecipe.totalTimeInSeconds);
//        console.log(imRecipe["smallImageUrls"]);
//        console.log(imRecipe["recipeName"]);
//        console.log(imRecipe["totalTimeInSeconds"]);
//        console.log(imRecipe["ingredients"]);
        
        
        //create recipe holder that will contain
        var recipeHolder = document.createElement("div");
        recipeHolder.className += 'recipe-holder';

        var myRecipeName = document.createElement("div");
        myRecipeName.innerHTML = recipe.recipeName;
        myRecipeName.className = "recipeName";
        myRecipeName.id = "name"+num;
//        myRecipeName.style.color = "blue";
//        myRecipeName.style.fontSize = "18px";
        
        var time = document.createElement("div");
        time.innerHTML = "preparation time: " + recipe.totalTimeInSeconds/60 + " minutes";
        time.className = "time";
        //time.id = "time"+i;
        
        //console.log(imRecipe["totalTimeInSeconds"]);

        var ingredients = document.createElement("div");
        ingredients.className = "ingredients";
        //console.log("imRecipe ingredients is " + imRecipe["ingredients"]);
        for(var j=0;j<5;j++){
        ingredients.innerHTML += recipe.ingredients[j] + '</br>';
        }
        //Array.join("/n");
        //ingredients.id = "ingredients"+i;
        
        var link = document.createElement("a");
        link.setAttribute('href', "http://www.google.com");
        var linkText = document.createTextNode("view recipe");
        link.appendChild(linkText);
        link.className = "viewRecipe";
        linkText.className = "viewRecipeText";
        
        var image = document.createElement("img");
        image.setAttribute('src', response.images[0].hostedLargeUrl); 
        image.setAttribute('width', '360px'); 
        image.setAttribute('height','240px'); 
        image.className = "image";
        //image.id = "image"+i;
        
        //var childDiv = document.createElement("div");
        //myRecipeDiv.appendChild(childDiv);
        
        
        //all of these are inside "recipe holder"
        //if i want to add buttons, it will be here.
        recipeHolder.appendChild(myRecipeName);
        recipeHolder.appendChild(image);
        recipeHolder.appendChild(time);
        recipeHolder.appendChild(ingredients);
        recipeHolder.appendChild(link);
       
        document.getElementById('recipes').appendChild(recipeHolder);
            
        
      });
          
    
}