Язык Javascript относительно легко выучить, в этом сильно помогает практика. Поэтому мы подготовили список идей, которые может воплотить в реальность новичок.
Содержание:
- Создание Todo-листа
- Калькулятор
- Часы и все, что касается времени
- Приложение погоды
- Генератор случайных цитат
- Тесты и викторины
- Dino T-rex
- Генератор цветовой палитры
- Калькулятор чаевых
- Веб-сайт с портфолио
- Какие проекты повышенной сложности можно взять?
- Немного о последовательности действий
Создание Todo-листа
Это небольшая платформа с задачами, где можно записывать свои планы. У данного приложения должно быть несколько функций:
- Добавлять и отмечать задачи как выполненные.
- Удалять различные элементы.
- Переключаться между активными, завершенными и удаленными делами.
Калькулятор
Базовая программа, которую можно сделать на JS. В интернете есть много инструкций на данную тему. Также желательно кастомизировать свое маленькое приложение. Для начала калькулятор должен выполнять 4 задачи: сложение, вычитание, умножение, деление. Потом инструмент можно усложнить.
Часы и все, что касается времени
В первую очередь данный пункт касается отображения часов, минут и секунд. Далее следует кастомизация, также можно добавить секундомер и таймер. Если все получилось, попробуйте сделать часы со стрелками.
Приложение погоды
В первую очередь нужно сделать так, чтобы сайт отображал погоду в конкретном городе. В ходе работы программист научится взаимодействовать в API. Разработка такого приложения - возможность попрактиковаться с HTML и CSS. Усложнение задачи заключается в отображении влажности, прогноза на несколько дней и выбора локации.
API - это способы обмена данными между приложениями.
Генератор случайных цитат
Один из самых простых Pet-проектов на JS. В приложении должно быть два элемента: кнопка, меняющая цитату и окно, в котором написана фраза с указанием авторства. Цитаты должны выбираться произвольно из массива данных.
Тесты и викторины
Рубрика, в которой будет вопрос и несколько вариантов ответа. HTML нужен для структуры, CSS - для красоты, а JS проработает генерацию вопросов и логику ответов. Также при работе вы познакомитесь с JSON - форматом обмена данных, основанном на Java Script.
Поможем вашим детям освоить Javascript с нуля. Познакомим их с синтаксисом, дадим теорию в сжатом виде, расскажем, как работать с HTML-документами и готовить собственные проекты. Обучайтесь вместе с СODDY.
Dino T-rex
Когда нет интернета и вы заходите в хром, появляется динозавр, который бегает по пустыне и перепрыгивает кактусы. В ходе написания кода можно будет немного ознакомиться с тем, как работают изображения. Усложнить проект можно посредством добавления звуков, создания случайного интервала между появлением кактусов и т.д.
Генератор цветовой палитры
Здесь тоже получится поработать над API. В ходе создания проекта нужно будет сделать несколько строчек. Первая будет ответственна за количество получаемых цветов, вторая покажет их тип (HEX, RGB), также будет кнопка, позволяющая генерировать цвета.
Под меню взаимодействия можно сделать 4 квадрата, в каждом из которых будет код выбранного цвета.
Калькулятор чаевых
Упрощенная версия обычного калькулятора. Есть условный счет за обслуживание, на его основе будут насчитываться проценты, которые добавятся к общей сумме. Усложнить программу можно путем добавления нескольких процентных ставок (15, 20, 25).
Веб-сайт с портфолио
Этот проект не только поможет поднять уровень знаний в Javascript, его также можно показать работодателю. На сайте должны быть полезные разделы, главным из которых будет “Обо мне”. Также можно указать список навыков, которыми вы владеете.
Портфолио является важным шагом для получения работы, поэтому следует хорошо потрудиться над оформлением и дизайном. Это значит, что особое внимание нужно уделять HTML и CSS. А если вы уже работали с клиентами (пускай за небольшую цену), можно добавить раздел с отзывами и контактными данными.
Какие проекты повышенной сложности можно взять?
Вышеописанные идеи подходят для новичков, не имеющих опыта в JS. Но при развитии навыка и получении новых знаний можно попробовать воплотить следующие идеи:
- Небольшая социальная сеть. Это прекрасная возможность потренироваться с Node JS. В ней должен быть профиль, возможность публиковать контент, комментарии и лайки.
- Программа отслеживания расходов и доходов. Тяжелее обычного списка дел, так как в ней больше факторов, которые можно воплотить в реальность. Зато можете попрактиковаться в добавлении визуализации данных в виде графиков и диаграмм.
- Лендинг. Он станет полезным дополнением для портфолио. Но при его создании нужно поработать над адаптивной версткой (чтоб он подходил под разные экраны), анимациями и т.д.
Немного о последовательности действий
Вам понравился проект на JS, вы решили его реализовать, но пока многого не знаете. Вот что нужно делать:
- Копируем и вставляем код, понимаем, что проект работает.
- Анализируем код. В одном месте может попасться неизвестный тег, в другом будет интересная структура.
- Пишем код по пунктам. Проверяем, что добавилось.
- Пробуем сделать что-то сами.
- Повторяем.
При изучении программирования на JS нужно как можно больше практиковаться и смотреть, какие решения использовали разработчики.