I am attempting to populate index.html with the contents from an array using a JavaScript loop. However, I am encountering an issue where a CSS class for picture formatting is displaying some odd characters when rendered in the latest version of Firefox.
I would like to understand why this is happening, how to prevent it, or explore alternative methods to ensure that this CSS class is applied correctly in the final output.
function populateIndex(){
$("#showRecipes").html("");
let recipeList = "";
for (i = 0; i < recipes.length; i++) {
let recipeArticle = '<div>';
articleRecipe += '<div class="recipePhoto">' //issue with the "\recipePhoto\"
recipeArticle += '<img src=/images/' + recipes[i].photo + '></div>';
recipeArticle += '<div> <h1>' + recipes[i].title + '</h1></div>';
recipeArticle += '<div class="card bg-light"><div class="card-body row"><div class="col-sm-6"><p>' + recipes[i].author + '</p></div><div class="col-sm-6"><p>' + recipes[i].time + 'minutes</p></div></div></div>'
recipeArticle += '<div><p>' + recipes[i].method + '</p></div>'
recipeArticle += '<div class="card-body row"><div><p>' + recipes[i].likes + '</p></div><div><button type="button" class="btn btn-sm"><i class="material-icons"aria-hidden="true">thumb_up</i></button><button type="button" class="btn btn-sm"><i class="material-icons"aria-hidden="true">thumb_down</i></button></div><div><p>' + recipes[i].dislikes + '</p></div></div>'
recipeArticle += '</div>';
recipeList += recipeArticle;
}
$("#showRecipes").html($("#showRecipes").html() + recipeList);
This is the CSS class that I am attempting to use.
#recipePhoto {
margin-left: auto;
margin-right: auto;
width: 100%;
max-height: 500px;
overflow: hidden;
object-fit:cover;
}