Currently, I am attempting to showcase the data retrieved from the following URL: . My objective is to format the parsed data with a specific style. However, I have encountered difficulties accomplishing this using `window.open()`. Any assistance in resolving this issue would be greatly appreciated.
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function clickFunction(recipes){
var myWindow = window.open("", "MsgWindow");
//console.log(recipes);
myWindow.document.write('<br>Name:'+recipes.name+'<br>');
myWindow.document.write("<table><tr><th>Name</th><th>Amount</th></tr>
</table>");
for(var i=0; i < recipes.Ingredients.length; i++){
var name = recipes.Ingredients[i].name;
var amount = recipes.Ingredients[i].amount;
myWindow.document.write("<table><tr><td>"+name+"</td><td>"+amount+"
</td></tr></table>");
}
myWindow.document.write('<br>Steps:'+recipes.steps+'<br>');
myWindow.document.write('<br>Similar Cuisines:'+recipes.SimilarCuisines+'<br>');
myWindow.document.close();
}
</script>
</head>
/* Rest of the HTML code as it is */
css:
*{
box-sizing: border-box;
}
body{
background: url('cutlery.jpg');
}
/* Rest of the CSS code as it is */
js:
$(function(){
var $container = $('.container');
$.ajax({
type:'GET',
dataType: 'json',
url:'https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json',
success: function (data) {
//console.log(data.recipes);
var htmlContent="";
for (var i=0; i<data.recipes.length;i++) {
var recipe = data.recipes[i];
htmlContent += "<div class=\"card\" onclick='clickFunction("+JSON.stringify(data.recipes[i])+")'>";
htmlContent += "<h1>";
htmlContent += data.recipes[i].name
htmlContent += "</h1>";
htmlContent += "</div>";
}
document.getElementById("recipebody").innerHTML = htmlContent;
}
});
});
/* Rest of the JavaScript code as it is */
I am encountering challenges in properly formatting the content. While exploring various solutions, I have not been able to integrate them seamlessly into my current project.