Я наткнулся на контрольно-пропускной пункт, который я просто не могу преодолеть после 5 с лишним часов возни. По сути, я пытаюсь взять ответы из моего API (инструмента поиска рецептов) и вставить каждый отдельный рецепт в свою карточку, имея две карточки рядом по всей странице. Ответы включают в себя различную информацию о рецепте, который будет динамически помещаться в каждую карту, но все, что я пытался отработать на Do c, просто полностью сломало мою страницу.
My JS (отредактировано для удаления пары символов из моего ключа API, извините, но это пробная версия):
//On Index page this function takes search bar input and gives ten results for recipes
function createRecipe() {
var mealName = $("#recipeInput").val().trim();
$.ajax({
url: "https://api.edamam.com/search?q=" + mealName + "&app_id=70e00e26&app_key=6c683b56a399b435d00ee3100c0ca",
method: "GET"
}).then(function(response) {
for (i = 0; i < response.hits.length; i++) {
var newDiv = $("#recipeReveal");
newDiv.append("<div class='card col-lg-4 col-md-5 col-sm-10' style=''>")
.append("<div class='card-body'>")
.append("<h5>" + response.hits[i].recipe.label + "</h5>")
.append("<img class='card-img-top'src='" + response.hits[i].recipe.image + "' alt='Recipe Picture'></img>")
.append("<p class='card-text'>Full recipe instructions can be found at: <a href='" + response.hits[i].recipe.url + "'>" + response.hits[i].recipe.url + "</a></p>")
.append("</div>")
.append("<ul class='list-group list-group-flush'>");
for (j = 0; j < response.hits[i].recipe.ingredients.length; j++) {
newDiv.append("<li class='list-group-item'>" + response.hits[i].recipe.ingredients[j].text + "</li>");
}
newDiv.append("</ul>")
.append("<div class='card-body'>")
.append("<button id='result" + (i + 1) + "' onclick='saveRecipe(" + (i) + ")'>Save Recipe</button>")
.append("</div></div>");
}
queriedRecipe0 = (response.hits[0].recipe.uri);
queriedRecipe1 = (response.hits[1].recipe.uri);
queriedRecipe2 = (response.hits[2].recipe.uri);
queriedRecipe3 = (response.hits[3].recipe.uri);
queriedRecipe4 = (response.hits[4].recipe.uri);
queriedRecipe5 = (response.hits[5].recipe.uri);
queriedRecipe6 = (response.hits[6].recipe.uri);
queriedRecipe7 = (response.hits[7].recipe.uri);
queriedRecipe8 = (response.hits[8].recipe.uri);
queriedRecipe9 = (response.hits[9].recipe.uri);
})
}
Это публикация в div с соответствующим идентификатором "recipeReveal", я думал, что у меня это работает, но оказалось, что я только что сделал один действительно длинный контейнер с крошечным маленьким карта сверху, которую вы даже не видите. Идеальной ситуацией было бы иметь каждый рецепт в отдельной карточке вместе с img response, URL, списком ингредиентов, кнопкой и т. Д. c. Если я смогу получить их в отдельные карты, я определенно думаю, что смогу легко выбить аспекты системы CSS / Grid. Просто JQuery, который получает меня.
PS - Любые ресурсы / легкая для понимания документация по этой теме также приветствуются, если у вас нет времени, чтобы по-настоящему погрузиться в эту тему! Спасибо. `