Автор оригинала: FreeCodeCamp Community Member.
На прошлой неделе я решил взять на себя новый вызов. Я назвал это: # 100days100projects Испытание.
Целью задачи является создание одного проекта каждый день. Подумайте об этом как следующий шаг для вызова # 100daysofcode.
Проект может быть либо:
- приложение
- Компонент
- сайт
- игра
- библиотека и так далее…
Используемый языком программирования также не важен, но мне нужно завершить проект к 11:59 вечера (мое время), иначе я «наказываю» сам, отдавая 5 человек на 5 человек (всего 25 долларов) – первые 5 человек, которые Узнайте его в Twitter, что я пропустил крайний срок. ?
Если вы хотите присоединиться, вы можете узнать больше об этой задаче, а другие варианты у него есть здесь Отказ
Примечание : Вам не нужно давать 5 долларов, если вы потерпите неудачу, просто установите другие «наказание» для себя. Кроме того, есть другие варианты с меньшими днями ( 7days7Projects и 30days30Projects ) Если вы не хотите принимать в 100дней вызов.
Для первого проекта в # 100days100projects Я думал о работе с общедоступным API, чтобы получить некоторые данные, которые будут отображаться в веб-странице – обычная вещь с API.
Для этого я решил использовать Темаалдб Public API для получения каких-либо случайных блюд, нажав кнопку. Что-то простое! ?
Проверьте живую версию того, что мы собираемся построить в этой статье на Кодепен :
Как всегда, давайте начнем в начале:
HTML
Feeling hungry?
Get a random meal by clicking below
У нас немного текста, но две самые важные части:
-
#get_mealкнопка и -
#mealдевочка
Мы собираемся использовать кнопка сделать запрос на API. Это отправит некоторые данные, которые мы собираемся вкладывать в #meal Div который действует как контейнер – в этом случае.
Обычно после HTML я пойду прямо в CSS. Но у нас еще нет вся разметка, так как она будет заполнена в JavaScript Раздел, так вот что мы собираемся сделать дальше.
JavaScript
Как упоминалось выше, нам нужны кнопка и этот контейнер Div :
const get_meal_btn = document.getElementById('get_meal');
const meal_container = document.getElementById('meal');
Далее, прежде чем мы погрузимся больше в код, давайте посмотрим, что вернется API. Для этого, пожалуйста, откройте следующий URL: https://www.theemealdb.com/api/json/v1/1/random.php Отказ
Как вы можете увидеть из URL, мы получаем Случайные Питание от этого API (обновить, чтобы увидеть случайность ). Когда мы делаем Получить Запрос на эту конечную точку (например, доступ к этому из браузера), он отправляет обратно ответ JSON, что мы можем анализировать, чтобы получить нужные данные данные.
Данные выглядят что-то подобное:
{
meals: [
{
idMeal: '52873',
strMeal: 'Beef Dumpling Stew',
strDrinkAlternate: null,
strCategory: 'Beef',
strArea: 'British',
strInstructions: 'Long description',
strMealThumb:
'https://www.themealdb.com/images/media/meals/uyqrrv1511553350.jpg',
strTags: 'Stew,Baking',
strYoutube: 'https://www.youtube.com/watch?v=6NgheY-r5t0',
strIngredient1: 'Olive Oil',
strIngredient2: 'Butter',
strIngredient3: 'Beef',
strIngredient4: 'Plain Flour',
strIngredient5: 'Garlic',
strIngredient6: 'Onions',
strIngredient7: 'Celery',
strIngredient8: 'Carrots',
strIngredient9: 'Leek',
strIngredient10: 'Swede',
strIngredient11: 'Red Wine',
strIngredient12: 'Beef Stock',
strIngredient13: 'Bay Leaf',
strIngredient14: 'Thyme',
strIngredient15: 'Parsley',
strIngredient16: 'Plain Flour',
strIngredient17: 'Baking Powder',
strIngredient18: 'Suet',
strIngredient19: 'Water',
strIngredient20: '',
strMeasure1: '2 tbs',
strMeasure2: '25g',
strMeasure3: '750g',
strMeasure4: '2 tblsp ',
strMeasure5: '2 cloves minced',
strMeasure6: '175g',
strMeasure7: '150g',
strMeasure8: '150g',
strMeasure9: '2 chopped',
strMeasure10: '200g',
strMeasure11: '150ml',
strMeasure12: '500g',
strMeasure13: '2',
strMeasure14: '3 tbs',
strMeasure15: '3 tblsp chopped',
strMeasure16: '125g',
strMeasure17: '1 tsp ',
strMeasure18: '60g',
strMeasure19: 'Splash',
strMeasure20: '',
strSource:
'https://www.bbc.co.uk/food/recipes/beefstewwithdumpling_87333',
dateModified: null
}
];
}
В основном мы вернемся на массив Питание Но только с одним предметом в нем – случайно генерируется один. И этот пункт имеет все данные, которые мы хотим продемонстрировать в нашем небольшом приложении. Вещи как:
- Имя еды (под
Strmeal) - Категория еды (под
st City) - Изображение еды (под
Strmeallumbe) - Видео YouTube с рецептом (под
Stryoutube) - Ингредиенты и меры (в соответствии с
stringredrededientsxиstrmeasurex– x, представляющие nth ингредиент и это мера). Это немного неловко, как я ожидаю, чтобы здесь есть массив с этой информацией, но они Выберите, чтобы добавить его как выбросы объекта. Далеко …? Важно отметить, что максимум 20 ингредиентов/мер, хотя они не все заполнены – некоторые из них могут быть пустыми, поэтому нам нужно объяснить это.
Теперь, когда у нас есть кнопка, мы собираемся добавить слушатель события для Нажмите событие. Внутри мы собираемся сделать запрос на API:
get_meal_btn.addEventListener('click', () => {
fetch('https://www.themealdb.com/api/json/v1/1/random.php')
.then(res => res.json())
.then(res => {
createMeal(res.meals[0]);
})
.catch(e => {
console.warn(e);
});
});
Мы используем извлекать API, чтобы сделать запрос. Мы просто должны проходить в URL API, который мы хотим сделать Получить просьба, и мы собираемся вернуть обещание.
Как только это разрешено, у нас есть ответ ( Res ). Это res еще не в состоянии, что мы хотим, чтобы это было, поэтому мы собираемся позвонить в .json () Метод на нем. Затем, наконец, у нас есть красивый объект. Ура! ?
Как упомянуто выше, API возвращает Питание массив, но только с предметом в нем. Поэтому мы собираемся передать этот предмет (по индексу 0 ) в наше CreateMeal Функция, которую мы определим дальше.
Я собираюсь вставить весь блок код ниже, и мы собираемся впоследствии в подробности, так что держитесь на секунду. ?
const createMeal = meal => {
const ingredients = [];
// Get all ingredients from the object. Up to 20
for (let i = 1; i <= 20; i++) {
if (meal[`strIngredient${i}`]) {
ingredients.push(
`${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`
);
} else {
// Stop if there are no more ingredients
break;
}
}
const newInnerHTML = `
${
meal.strCategory
? `Category: ${meal.strCategory}
`
: ''
}
${meal.strArea ? `Area: ${meal.strArea}
` : ''}
${
meal.strTags
? `Tags: ${meal.strTags
.split(',')
.join(', ')}
`
: ''
}
Ingredients:
${ingredients.map(ingredient => `- ${ingredient}
`).join('')}
${meal.strMeal}
${meal.strInstructions}
${
meal.strYoutube
? `
Video Recipe
`
: ''
}
`;
meal_container.innerHTML = newInnerHTML;
};
В основном целая цель функции состоит в том, чтобы получить ответ JSON, разбирать его и преобразовать его в HTML-компонент. Для этого нам нужно сделать пару вещей, так как данные еще не сформированы именно так, как мы хотим, чтобы это было.
Во-первых, мы получаем все Ингредиенты и их Меры Отказ Как упомянуто выше, существует максимум 20 ингредиентов, но они разделены в свои собственные свойства в объекте, как: stringredient1 , Stringredient2 и т. Д… (Я до сих пор не знаю, почему они это сделали, но …?).
Итак, мы создаем для петля, которая идет от 1 к 20 и проверяет, если еда Это соответствует ингредиент – мера пара. Если это так, мы вкладываем в Ингредиенты множество. Если нет большего количества ингредиентов, мы останавливаем на петлю с помощью Перерыв условие.
Далее мы создаем newinnerhtml Строка, которая будет держать всю разметку HTML. В нем мы разбираем оставшиеся свойства, которые мы хотим отображаться.
Примечание что некоторые из свойств могут быть недоступны. Так что мы используем Тернарный оператор Чтобы проверить, есть ли данные для отображения соответствующего тега. Если у нас нет этого, мы возвращаем пустую строку, и на странице не будет отображаться. категория и область Примеры этих типов свойств.
Теги вступают в строку, разделенную на запятую, как: 'tag1, tag2, tag3' Отказ Так что нам нужно Сплит это с помощью этой запятой, а Присоединяйтесь к Это обратно запятой и пространством, как выглядит приятнее ( 'Tag1, Tag2, Tag3' ❤️). Или хотя бы для меня делает. ?
Показать Ингредиенты , мы отображаем массив, и мы создаем Для каждого ингредиента/измерения пара. В конце мы присоединяемся к массиву обратно, чтобы сформировать строку. (Это то, что вы сделаете в ReactJS, но без Присоединиться к ING PALT?).
Также есть видео YouTube строка (Может быть), который возвращает URL видео. Но для того, чтобы мы встроить видео на странице, нам нужно только извлечь идентификатор видео. Для этого мы используем .SLICE (-11) Чтобы получить последние 11 символов строки, так как это скрывается идентификатор?
И, наконец, мы устанавливаем все это newinnerhtml быть еда_container ‘s innerhtml -> Это заполнит, что div со всей этой информацией!
Весь этот процесс повторит каждый раз, когда мы нажимаем на Получить еду кнопка.
CSS.
Последняя часть – это стиль немного, верно? ?
Для CSS Я хотел использовать что-то новое, поэтому я попробовал Скелетки библиотека. Это полезно, если у вас небольшой проект и не хочу перегружать все эти классы, так как у него есть только пара, которые позаботятся о некотором основном стиле (например, кнопка) и отзывчивая часть.
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 0;
min-height: calc(100vh - 60px);
}
img {
max-width: 100%;
}
p {
margin-bottom: 5px;
}
h3 {
margin: 0;
}
h5 {
margin: 10px 0;
}
li {
margin-bottom: 0;
}
.meal {
margin: 20px 0;
}
.text-center {
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Вы можете увидеть, что CSS довольно прост. Единственная часть, которую стоит упомянуть, это .videowrapper Декларация CSS. Это гарантирует, что встроенный youtube реагирует. (Получил это из CSS-Tricks – спасибо, ребята!?)
Вывод
И VUILà! Были сделаны! ?
Теперь вы должны знать, как использовать публичное API, чтобы получить некоторые данные, которые вы можете легко вставить на страницу! Отличная работа! ?
Это первый проект, который я сделал для # 100days100projects. испытание. Вы можете проверить, какие другие проекты, которые я построил и какие правила вызова (если вы можете присоединиться), нажав на здесь .
Вы можете прочитать больше моих статей на www.florin-pop.com Отказ
Счастливое кодирование! ?