Две недели назад я не знал, что такое Fetch, и, вероятно, никогда раньше не использовал API — по крайней мере, напрямую. Вот почему мне кажется странным представлять свой первый проект в качестве онлайн-студента по разработке программного обеспечения, и в этом проекте используется несколькозапросов на выборку и несколькоAPI. Основным API, который управляет этим проектом, является Ageify.io, ресурс, который использует данные о частоте имен для оценки возраста данного имени. API также позволяет вам вводить страну, чтобы сделать возраст более точным.

Вот где появился второй API. Мой первоначальный проект включал два текстовых поля ввода: одно для имени, а другое для двухбуквенного кода страны. И хотя это работало для кодов стран, которые я знал, таких как «США», это не срабатывало для тех, которые я не знал. (Я продолжал вводить «Великобритания» и был разочарован, обнаружив, что это недействительный код. Должен ли я был все время знать, что это «Великобритания»? Вероятно.) Поэтому я решил, что заполнение раскрывающегося меню странами мир был бы намного удобнее. Так же это дало мне возможность впихнуть в этот проект второй API, чего я никак не ожидал. Готовый проект предоставляет пользователю выпадающий список с названиями стран, а не кодами, что, на мой взгляд, чище и человечнее. (Особая благодарность Нэнси, руководителю моей группы, за поиск списка названий и кодов стран в формате JSON.)

По какой-то причине совместить навыки JavaScript, которые я до сих пор изучал в школе Flatiron, далось мне довольно легко. Слушатели событий больше не казались пугающими, а Fetch, который был гораздо более внутренним, чем любой код, который я делал раньше, перестал быть загадкой. Чтобы украсить приложение, я добавил список «Сохраненные имена», в котором пользователь мог «сохранять» имена, которые он искал, что также регистрировало бы возраст и код страны (если они были включены). В JavaScript есть много вещей, которые могут понравиться, и в данном случае мне очень понравился метод getElementsByTagName; Мне удалось легко получить массив элементов li в ul «Сохраненные имена» и проверить, меньше ли длина этого массива 1, и в этом случае весь раздел (имеется в виду заголовок «Сохраненные имена») будет скрыт. Исчезновение заголовка при отсутствии сохраненных имен определенно сделано для более чистого UX.

Проблема, которая меня больше всего смутила, возникла на более поздних этапах проекта, когда я настраивал выпадающее меню. Это элемент HTML, с которым я не очень хорошо знаком, поскольку использовал его только один раз. Я жестко запрограммировал ‹option› по умолчанию со значением «select», но не мог понять, как на самом деле сделать это значение по умолчанию. Я ввожу имя, выбираю «Соединенные Штаты» в качестве опции страны, получаю возраст для этого имени, нажимаю «Назад», чтобы вернуться к полям ввода, и… в раскрывающемся меню по-прежнему отображается «Соединенные Штаты». Я исследовал эту проблему на Stack Overflow и в других местах, и мне показалось, что не существует простого решения этой проблемы. Я попытался добавить «selected=‘selected’» (или просто «selected») к элементу «option» по умолчанию, но это не сработало — меню по-прежнему не сбрасывалось. В итоге я использовал решение, которое несколько раз появлялось на Stack Overflow; Я взял элемент ‹select›, используя его идентификатор, перебрал его содержимое (теги ‹option› со значениями страны) и установил для их атрибутов .selectedIndex значение 0, индекс параметра по умолчанию. Это закончилось тем, что помогло.

Это определенно отнимало много времени, но я нашел свободу и открытость проекта веселыми и вдохновляющими. Вот небольшое видео-прохождение готового продукта!