История классного учебного проекта.
Изучение веб-разработки было большим приключением. И каждая дорога требует следующего шага.
В данном случае это означает использование новых инструментов для выполнения той же работы, что и раньше, с новым трюком у меня в рукаве.
Именно поэтому я выбрал этот новый проект в свое портфолио. Разработка «Генератора случайных команд покемонов» удовлетворила все мои потребности в продвижении к более высокой ступени в процессе обучения.
Я хотел делать запросы к общедоступному API и определенно трачу много времени на то, чтобы выбрать, какое приложение мне сделать. Но немного подумав, я решил использовать что-то, что является частью меня, то есть покемонов.
«Хорошо, но покедекс - это слишком много для простого учебного проекта. Что я мог сделать вместо этого? ». Сначала я хотел создать приложение, которое позволило бы пользователю создать свою собственную команду покемонов, набрав имя покемона в поле поиска и получив обратно отображение некоторых данных о них. Но во время разработки я понял, что для хранения информации потребуется прочная структура данных, такая как список, когда, нажав кнопку, которая возвращает пользователю полную случайную команду без разрешения на изменение, она может сэкономить мне некоторую работу, разрешив мне хранить информацию в массиве.
Использование Sass
Будь то запись в блоге или видеоролик о планах на Youtube, вы всегда найдете рекомендации по изучению препроцессора CSS, наиболее распространенными из которых являются Sass и Less. Не могу отрицать, я выбираю Sass, потому что он самый популярный среди них. И, оглядываясь назад, я полностью согласен с рекомендацией препроцессора. Он сохранил много строк и решил небольшую проблему, которая возникла у меня с css, а именно повторение свойств гибкости.
Flexbox - это функция css, которая используется в проекте несколько раз. Используя функцию микширования Sass, мы можем сохранить несколько строк кода, передающих направление и позицию гибкости, которые мы хотим, чтобы гибкие элементы были.
Переменные css также изменились с использованием Sass. Они невероятно полезны, если я захочу внести какие-либо изменения в будущем.
Окончательный дизайн выставки данных было довольно сложно придумать. Дизайн - не самое лучшее качество, но я думаю, что конечный результат удовлетворительный.
Логика
Итак, часть javascript была самой интересной в проекте. Возможность получить API и показать данные на экране была потрясающим чувством.
Поговорим о коде и о том, как он работает.
Идея приложения - вернуть случайную команду одним нажатием кнопки. Эта задача разделена на 3 этапа:
- Получите 6 уникальных случайных чисел от 1 до 898 (последний доступный покемон).
- Делайте запросы, используя сгенерированные номера.
- Выставляйте данные каждого покемона на экране.
Первый шаг выполняется функцией getNewTeam, которую можно увидеть в приведенном ниже фрагменте.
Эта функция сопоставляет базовый массив, получая его исходное значение и передавая его в качестве параметра функции getRandomNumber, которая использует классический Math.random для возврата случайного числа. Результат проходит проверку на уникальность, а затем добавляется к дополнительному массиву, содержащему уже нарисованные числа.
Второй шаг - сделать запросы сейчас, когда мы получили номера покемонов. С помощью Promise мы сопоставляем массив, содержащий 6 полученных нами случайных чисел, так что теперь они содержат объектный результат запроса в каждой позиции. Это возможно только благодаря слабой типизации javascript.
В приведенном выше коде показано выполнение третьего шага, и он находится внутри анонимной функции внутри функции then.
Код структурирует HTML-код, необходимый для отображения карточек, с помощью строки шаблона, обращающейся к элементам внутри каждого объекта результата.
Прежде чем мы сможем вернуть и сопоставить результат, нам нужно проверить, имеет ли запрошенный покемон несколько типов. Цикл for, который выполняется в строках 4–10, гарантирует, что мы отобразим каждый тип, который есть у Покемона, добавив каждый тип в массив «types», который будет позже обрабатывается внутри оператора return.
Строки 12–54 собирают HTML-код для отображения. В каждом месте, где должна быть информация, мы используем «$ {acess_object_here}», чтобы позже оно заменялось значением этого свойства.
В строке 26 показано, как мы обрабатываем ранее определенный массив «types». Используя $ {types.join (‘’)}, мы можем добавить его содержимое в окончательный отрисованный HTML.
Строка 56 в конце указывает, что все карточки добавляются в наш основной файл HTML посредством манипуляции с DOM.
И наконец, что не менее важно, строка 59 дает возможность в будущих итерациях рисовать покемонов, которые были нарисованы ранее. Удаление этой строки гарантирует, что каждый вызов будет показывать покемона, который ранее не рисовался.
Вывод
Этот проект был прекрасным способом использовать в веб-разработке все, чему я научился за последний месяц.
Чтобы узнать больше о коде, зайдите в репозиторий по адресу: https://github.com/ClaudioKamoda/Pokemon-Team
Вы также можете проверить мое портфолио, чтобы узнать обо мне больше: https://claudiokamoda.github.io/Portfolio/
Спасибо за чтение!!
