14 реализованных pet-проектов в портфолио на Javascript для начинающих фронтенд-разработчиков

В этом видео мы рассмотрим полностью готовые пэт-проекты на JavaScript для новичков.

Я проводил два семидневных интенсива, на каждом из которых было по одному мини-проекту на каждый день, и в итоге получилось 14 проектов.

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

Эти интенсивы предназначены как для новичков, которые только-только изучили теорию и им необходима практика.

Так и для тех, у кого есть небольшой опыт, но нет понимания, как реализовать тот или иной функционал.

Такие интенсивы полезны, поскольку дают практику на реальных проектах.

Эти проекты можно будет добавить в свое портфолио.

И также можно будет использовать наработки и код в дальнейшем в своих собственных проектах.

И давайте перейдем к самим проектам.

Первый это генератор случайных цветов.

Здесь мы по нажатию на кнопку создавали рандомный цвет.

Задавали его для фона.

И выводили кодировку в виде хекс-кода.

Единственное, что бы я здесь добавил, это кнопку для копирования хекс-кода в буфер обмена.

Чтобы вот так каждый раз нам его отсюда не выделять.

И когда вы научитесь получать абсолютно любой цвет, можно подумать, как получать только определенные оттенки.

Например, только светлые или только темные.

Или только зеленого цвета.

Или только синего цвета.

Помимо этого можно еще подумать над тем, как получать какой-то оттенок цвета из определенного набора цветов.

Вот здесь для карточек у меня фон сделан именно таким образом.

Есть набор оттенков зеленый, голубой, фиолетовый.

Оранжевый и розовый.

И каждой карточке задается только какой-то один из этих цветов.

Вторым проектом был текст каунтера.

Здесь мы с вами научились подсчитывать и выводить количество слов, всех символов и специальных символов в тексте.

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

Не выделяя его, а просто нажимая по кнопке.

Четвертым проектом был секундомер.

Здесь я показал, как запускать, останавливать и очищать секундомер.

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

Пятым проектом был генератор случайных чисел.

Здесь мы соответственно по нажатию на кнопку получали случайное число.

При этом была возможность указать диапазон или список чисел из которых оно будет выбираться.

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

Например, чтобы число 5 у нас выпадало в 95% случаев, а число 7 в оставшихся 5%.

Шестой проект это калькулятор.

У него был реализован такой функционал как вычисление квадрата, корня, синуса, косинуса и тангенса числа.

Выполнение простых арифметических действий, таких как сложение, вычитание, умножение и деление.

Возможность вычисления выражений в скобках и дробных чисел.

И возможности очищать всю строку или удалять только последний символ.

Наш калькулятор можно было бы расширить, если добавить, например, вычисления логарифмов, факториалов и прочих функций.

Седьмой проект – Sound Player.

На этом проекте мы научились по нажатию на кнопку добавлять ей анимацию и воспроизводить соответствующую аудиодорожку.

И это был последний проект на первом интенсиве.

Здесь мы полностью все проекты верстали с нуля.

И дальше добавляли логику на JavaScript.

На втором интенсиве со следующими проектами я попробовал новый формат.

И в нем мы писали только логику.

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

имела свое случайное положение по горизонтали случайный размер в заданном диапазоне и свою скорость вращения и при этом мы здесь научились ограничивать количество снежинок для показа следующий проект огненный шторм или шторм сердечек здесь при движении мыши мы создавали анимацию огней пламени к каждому огоньку добавлялись текущие координаты

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

А во втором варианте, который вы здесь видите, каждое слово сначала посимвольно печатается, затем в обратную сторону посимвольно удаляется, и уже только после этого набирается следующее.

Одиннадцатый проект, который мы делали, это был аудиоплеер.

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

Также у нас здесь было добавлено отображение общей продолжительности.

текущего времени и текущей позиции воспроизведения, перемотка песни и воспроизведение следующей аудиодорожки по окончанию текущей.

Еще для аудиоплеера можно было бы добавить возможность управления громкостью и еще какой-нибудь видимый список с песнями.

чтобы была возможность выбрать определенную песню не перебирая все песни из плейлиста двенадцатым проектом у нас была игра составь слово здесь у нас из массива слов выбиралось случайное слово

В нем перемешивались буквы и они выводились на страницу.

И пользователю необходимо было составить все слова.

Тринадцатый проект – калькулятор жизни.

Здесь пользователь после заполнения даты рождения сможет узнать, сколько он прожил времени.

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

Как сколько часов за всю жизнь спал человек, сколько воды он выпил и много чего еще.

Этот проект направлен на работу с датами.

Поэтому здесь можно еще добавить не только сколько человек прожил, но и сколько ему осталось.

И чтобы это значение каждую секунду уменьшалось.

И вы наверное слышали о такой таблице 90 лет жизни в неделях.

Так вот для практики можно было бы попробовать ее воссоздать и при этом закрашивать те квадратики, которые уже прожили.

И последний проект это игра «Найди число».

Ее суть в том, чтобы найти все числа по возрастанию, начиная с единицы.

Здесь по клику на каждое следующее число его ячейка становится полностью прозрачной.

А если пользователь случайно нажмет не на ту ячейку, то ей будет добавляться анимация, как бы показывающая, что это неправильный выбор.

И причем здесь у нас есть возможность задавать поле любой размерности.

На таком проекте видно, как мы можем использовать наработки из предыдущих проектов.

В каждой ячейке здесь задается случайный цвет.

Это из генератора случайных цветов.

Каждое число имеет свой размер в пикселях из заданного диапазона.

Это из генератора случайных чисел.

Из саундплеера мы можем взять добавление анимации для кнопки.

И также помимо этого можно еще добавить сюда какую-нибудь аудиодорожку со звуком ошибки.

И еще можно было бы из проекта с секундомером добавить время.

То есть как только пользователь находит первое число, в это время запускать секундомер и отсчитывать до того момента, пока он не найдет последнее число.

Эти интенсивы вы можете смотреть у меня на YouTube канале.

Все исходники с шаблонами, с HTML и CSS будут в телеграмм канале.

И ссылки на них я оставлю в описании под этим видео.

У каждого интенсива будет два статуса.

Бесплатный и платный.

На бесплатном вы можете смотреть все видео в открытом доступе на момент проведения и какое-то время после.

у вас будет возможность задавать вопросы если возникли какие-то сложности или если что-то осталось непонятным и также будут все исходники и шаблоны без того кода который мы пишем на видео а на платном формате будет какая-то минимальная символическая стоимость но там доступ к видео навсегда и при этом помимо исходников будут все материалы полностью готовых проектов то есть финальных версий