За последние два месяца я работал над десятью проектами, начиная с самых простых и заканчивая более сложными в конце. Во всяком случае, для меня более продвинутый!

Приступая к этим проектам, я определенно опасался и был готов приложить все усилия, какие только мог. Это определенно помогло мне усвоить все, чему я научился за последние пять месяцев, особенно JavaScript. Определенно, за последние два месяца были проблемы, но с ними было весело столкнуться.

Первые пять проектов были самыми простыми. Там был простой счетчик, раскрывающийся список, который менял цвет фона при выборе, игра в угадывание чисел, камень-ножницы-бумага и часы.

Ко всем этим, хотя некоторые из них были очень простыми, я хотел приложить свои собственные усилия. Например, счетчик должен был дойти до 100, но я решил ограничить его до 0–10, чтобы сделать его немного более сложным. Я также решил сделать так, чтобы цвет фона постепенно становился ярче/темнее в зависимости от того, идет ли счетчик вниз или вверх. Вот этот проект.

Благодаря всем этим проектам, а также пониманию того, как добиться желаемого результата, я хотел, чтобы каждый из них казался уникальным, пусть даже в самых незначительных аспектах. Тот, который меня взволновал и которым я больше всего доволен из первых пяти, — это, безусловно, ножницы для бумаги. Может быть, это мое детство подстрекало меня, но я должен был сделать это крутым.

При нажатии любой из кнопок я закодировал небольшой забавный текст в блоке выше в зависимости от результата пользователя, выигравшего, проигравшего или нарисовавшего. При нажатии любой из кнопок (благодаря методу forEach) выполняются несколько различных функций. Текстовый div над кнопкой виден только в течение двух секунд, а затем истечет время ожидания, чтобы позволить ему иметь «игровой поток». Логика всей игры также выполняется по нажатию любой из кнопок.

Случайный элемент из массива камень, ножницы, бумага выбирается и помещается напротив кнопки, которую нажал пользователь. Текст появляется в div выше, чтобы показать результат. Хотя для многих это было просто, для меня в то время это было забавно :) Мне также понравилось делать эту игру адаптивной для просмотра на мобильных устройствах. Вот этот проект.

Последними пятью проектами были викторина, калькулятор чаевых, приложение todo (две части) и приложение рецептов. Опять же, особенно для первых двух, я хотел придать вещам свой собственный стиль.

Для викторины и калькулятора чаевых я узнал больше об анимации CSS, чтобы реализовать свое видение того, что я хотел завершить. В викторине мне стало немного сложнее: когда нажимались кнопки и выполнялась анимация, другие элементы перемещались, вызывая искажения. Я научился заставлять JavaScript распознавать экран определенной ширины и менять стили на основе этого.

Это потребовало добавления множества классов к элементам через скрипт.

Я приложил много усилий с калькулятором чаевых, и большая часть страницы анимируется при наведении и щелчке. Установлен флажок, который делает видимой всю страницу. Внизу пользователь может ввести общую сумму за еду и процент чаевых. При отправке значений логика извлекает эти значения и передает их в качестве аргументов функции, суммирует результаты и отображает их. Весь процесс имеет анимацию.

Функция findTotalsAndDisplay принимает процент чаевых и общее количество еды в качестве аргументов и запускает код для вычисления результатов. Он также добавляет классы к тегам, которые отображают результаты. Вот проект.

Работая над этими проектами, я даже больше узнал о Git. Вторая часть проекта, в которой я создал новую функцию, требовала, чтобы я создал эту функцию в новой ветке в Git. Я нашел время, чтобы эффективно изучить ветки, сделал хорошие заметки, и мне было так приятно использовать эти новые знания в проекте.

Первой частью проекта было приложение Todo, в котором только введенные пользователем значения добавлялись к HTML и сохранялись в localStorage. Во второй части я извлекал API и добавлял их в HTML и localStorage, если не было введенных пользователем значений. Именно здесь я создал новую ветку, обновил функцию в этой ветке и отправил ее в новую удаленную ветку. Вот тот проект (есть две ветки).

До начала этих проектов у меня было приличное понимание JavaScript и самых основ того, как решать проблемы на различных фронтах, таких как проблемы с DOM, проблемы с массивами и т. д. Это определенно проложило путь и дало мне больше. уверенно браться за эти проекты. Вы можете увидеть мой репортаж о предыдущем модуле здесь.

После завершения этих проектов моя уверенность в JavaScript стала довольно высокой. Постоянное применение моих знаний и реализация их во все более сложных проектах помогли мне понять все, чему я научился. В любых местах, где я застревал, мой наставник TJ мог дать мне подсказки и подсказки, а также дать немного места, чтобы попытаться решить проблему самостоятельно. Если это не удавалось, его открытое руководство по-прежнему заставляло меня полностью понять, что я сделал неправильно, и как исправить это в будущем.

Самая сложная часть этих проектов для меня, безусловно, была связана с появлением API. В целом это было довольно просто: вы получаете данные с помощью запроса на получение, понимаете, как они содержатся, например, один большой объект или массив, полный объектов, понимаете, какие именно данные полезны для проекта, и выясняете, как правильно их получить. данные в скрипт. В целом просто, но время от времени то, как извлекать некоторые типы данных, меня застревало.

Например, эти пары значений ключа с нулевыми и пустыми строковыми значениями

Сначала я изо всех сил пытался понять, как получить эти значения, поскольку они представляли собой смесь истинных и ложных значений. Через некоторое время работы и помощи моего наставника. Я придумал хорошее решение: цикл for, объединяющий два значения свойства вместе, и оператор if, чтобы проверить, превышает ли значение длину двух.

Самым приятным моментом, как всегда, было ощущение, когда все объединяется, священная тройка: HTML, CSS и JavaScript. Это действительно приятно — вложить работу в проект и, наконец, увидеть конечный результат.

В любом случае, пора переходить к следующему модулю, где я буду изучать и создавать проекты с помощью React JS, увидимся!