BARAK

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

	<link rel="stylesheet" type="text/css" href="mycss.css">

    <script>
        $(function(){
            var url = 'https://cors-anywhere.herokuapp.com/http://food2fork.com/api/search?key=462b1cc8d4f2730081462fbc65136320&q=pizza';

            var url1 = "https://cors-anywhere.herokuapp.com/http://food2fork.com/api/get?key=462b1cc8d4f2730081462fbc65136320&rId=47746"

            $.ajax({
                type: 'POST',
                datatype: 'json',
                url: url,
                success:function (data) {
					var items = [];
					var mydata=JSON.parse(data);
					console.log("s ajax",mydata);
					//console.log("count : ",JSON.parse(data));

					 $.each(mydata.recipes, function( index, item ) {
					  $(".menu").append("<li class='nav-item'><span class='nav-link' onclick=load_content('https://cors-anywhere.herokuapp.com/http://food2fork.com/api/get?key=462b1cc8d4f2730081462fbc65136320&rId="+item.recipe_id+"');>"+item.title+"</span></li>");
					});

                },
                error:function(error){
                    console.log("error : "+error);
                }
            });

        })

		const load_content= (url) =>
		{
			$(".loader").show();

			 $.ajax({
                type: 'POST',
                datatype: 'json',
                url: url,
                success:function (data) {
					$(".loader").hide();
					var mydata=JSON.parse(data);
                    console.log (data);
					$(".content").html(data);
                },
                error:function(error){
                    console.log("error Ajax: " ,error);
                }
            });
		}

    </script>

</head>
<body>
	<div class="container mt-3">
		<div class="row">
			<div class="col-md-4">
				<ul class="nav flex-column menu">


				</ul>
			</div>
			<div class="col-md-8 content">
				<div class="loader" style="display:none;"></div>
			</div>
		</div>
	</div><!--End of container -->
</body>
</html>