Что можно писать на js

Зачем учить JavaScript и где он пригодится

Аспирант Нетологии Максим Пименов рассказывает про JavaScript — невероятно популярный язык программирования, который учит сайты реагировать на поведение посетителей.

JavaScript — это лучший друг HTML и CSS. HTML задает разметку сайта, CSS отвечает за внешний вид, а JavaScript все это оживляет. С помощью кода на JavaScript программист определяет, как страница отреагирует на действия пользователя.

Сейчас JavaScript — единственный язык программирования для браузеров. Он работает под Windows, macOS, Linux и на мобильных платформах, то есть везде. Если не знаешь JavaScript, делать в программировании интерактивных сайтов нечего.

В 2009 году появился Node. js, который вывел JavaScript за пределы браузеров. Теперь его можно запустить хоть на стиральной машине. О том, что такое Node. js и зачем он нужен, мы уже писали, поэтому не буду рассказывать о нем подробно.

Без JavaScript делать в программировании интерактивных сайтов нечего

Максим Пименов

Профессия

Frontend-разработчик с нуля

Узнать больше

• Получите востребованную профессию frontend-разработчика
• Реализуйте жизнеспособные проекты уже во время обучения
• Соберите крутое портфолио для получения работы своей мечты
• Научитесь работать с HTML, CSS, JavaScript, JSX, XHR и AJAX, React, VirtualDOM, Flexbox, React Router

Как работает JavaScript

Любое действие пользователя на странице порождает событие. Программирование на JavaScript — это обработка событий. Вот как выглядит обычный сценарий:

Пользователь что-то сделал на странице
↓
В браузере сработало событие
↓
Запустился JavaScript-код, который назначен на событие
↓
JavaScript изменил что-то на странице.

Программист пишет обработчик только для тех событий, на которые стоит реагировать:

Пользователь кликнул мышью
↓
Сработало событие onclick
↓
Запустилась функция changePhoto
↓
В галерее сменилось фото

Пользователь нажал клавишу
↓
Сработало событие onkeydown
↓
Программист не назначил обработчик события
↓
Ничего не произошло

JavaScript — это, прежде всего, реакция на события

Чем хорош JavaScript

JavaScript полностью интегрирован с HTML, он способен как угодно менять веб-страницу. В ответ на событие программист может:

• на лету вставить в HTML-код любые теги;
• задать внешний вид элементов через класс и атрибуты HTML;
• переместить любой элемент;
• запросить у пользователя данные;
• отправить запрос на сервер (технология AJAX).

Это только то, что сразу пришло в голову. JavaScript может намного больше, в пределах своей страницы он Бог.

JavaScript — подходящий язык для изучения программирования. Он достаточно прост, но содержит все фундаментальные вещи: алгоритмы, объектно-ориентированную модель, структуры данных. Если традиционные языки для обучения — Pascal и Basic — несут мало практической пользы, то JavaScript — рабочая лошадка.

Начинать с JavaScript хорошо и потому, что синтаксически он похож на великий и ужасный язык С. Изучив JavaScript, получишь базовое представление обо всех «сиобразных» языках: С++, C#, Java, PHP. Они задают тренд в своих областях и весьма популярны, поэтому для новичка важно познакомиться с синтаксисом С.

Программа на JavaScript — это простой текст. Писать на JavaScript можно в любом текстовом редакторе.

В пределах своей страницы JavaScript — Бог

Ограничения

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

Из-за правил безопасности браузеры ограничивают мощь JavaScript и за пределами «родной» страницы. Управлять вкладками можно при определенных условиях или же вовсе нельзя. Например, JavaScript может закрыть только ту вкладку, которую создал сам.

Год-два назад появились платформы Node.js и React Native, с ними на JavaScript пишут не только для браузера, но и для компьютеров со смартфонами. Это модные и трендовые технологии, но глобально JavaScript — язык программирования для интернета.

На JavaScript пишут для интернета и браузеров

Конкуренты

Сейчас в веб-программировании нет ничего, что способно пошатнуть позиции JavaScript. Язык настолько удачен, что нет причин изобретать что-то другое.

С чистым JavaScript конкурируют только надстройки над ним: CoffeeScript, TypeScript, Dart. Код надстроек порой компактнее, его легче читать и отлавливать ошибки, но перед выполнением он все равно преобразуется в JavaScript.

Главная сила JavaScript — вечная молодость. Он вышел 21 год назад, но не устарел, а развивался и развивается вслед за HTML.

Серьезных конкурентов у JavaScript нет

Что изучать до JavaScript

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

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

JavaScript — подходящий первый язык, если связываешь будущее с веб-разработкой

Куда развиваться JavaScript-программисту

Изучив основы JavaScript, можно копать так глубоко, как хочется.

Хорошо освоить библиотеки и фреймворки для JavaScript — наборы готовых классов с функциями. Некоторые из них настолько мощные, что полностью меняют сценарии программирования. Для JavaScript самые популярные фреймворки и библиотеки — React, jQuery и Angular2.

Кроме фреймворков полезно изучить надстройки над JavaScript: CoffeeScript, TypeScript и Dart. Одни надстройки сделают ваш код чище и компактнее, другие — строже.

Наконец, можно взяться за серверное программирование и Node.js. Это трендовая технология, которую используют BMW, Amazon, Apple и другие серьезные компании. Так вы расширите область своих знаний JavaScript за пределы управления веб-страницей.

Для JavaScript-программиста нет потолка развития

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

Особенности JavaScript: зачем учить этот язык программирования и где он пригодится

Javascript – это мультипарадигменный язык программирования. Он используется в веб-браузерах, на нем можно писать игры, разрабатывать различные приложения для компьютера и мобильных устройств, создавать серверную часть сайта и производить прочие интересные вещи. Воу-воу, не слишком ли много Javascript берет на себя? Давайте обо всем по порядку.

История возникновения JavaScript

Давным-давно, когда на планете Земля жили еще динозавры, в 1995 году, компания-мастодонт Netscape поставила задачу своему разработчику Брендану Айку создать язык программирования для своего браузера, чтобы решить вопрос взаимодействия с пользователем. Выпуск языка состоялся как раз перед релизом второй бета-версии браузера Netscape Navigator 18 сентября 1995 года. Также нужно отдать должное компании Sun, без которой этого бы не случилось. Именно они были теми руками, которых так не хватало в Netscape: специалисты помогли ускорить процесс разработки в несколько раз и успеть как раз вовремя.

Первоначально язык программирования имел следующие названия: Mocha, Livescript, LiveWire (для серверной части). Поскольку в то время огромной популярностью пользовались языки C и Java, создатели решили «хайпануть» и дали название своему детищу – Javascript.

Параллельно их конкурент Microsoft трудился над своим браузером Internet Explorer, и в версии 3.0 у них вышел релиз собственного языка программирования под названием Jscript. Тут же встал вопрос: как дальше действовать и развиваться при наличии двух языков?

Спустя некоторое время инициативу в свои руки взял Netscape и провел стандартизацию языка через ассоциацию ECMA. Рабочая группа TC-39 присвоила стандарту имя ECMA-262. Возникали проблемы с торговой маркой ECMA, так как она не могла использовать Javascript в качестве названия.

После дебатов было решено, что описанный стандартном язык будет называться ECMAScript. Выходит так, что на сегодняшний день Javascript является по своей сути коммерческим названием ECMAScript. Кстати, на момент публикации статьи ожидается выход новой версии ECMAScript 2021.

Особенности языка программирования JavaScript

В мире frontend-разработки все строится на трех китах: HTML, CSS, Javascript. HTML отвечает за каркас страницы, CSS – за стилизацию страницы, Javascript – за создание интерактива на странице.

Что можно создать при помощи Javascript:

• динамический контент
• анимацию 2D/3D графики
• веб-приложения
• игры
• управление мультимедией и много другое.

И это далеко не полный список. Самый типичный пример работы Javascript – это слайдер на странице. На нашем сайте мы как раз используем подобные.

Вся магия случается при нажатии на кнопку переключения слайда. Сюда добавлено событие, которое ждет клика. Когда событие происходит, слайд меняется по заданному алгоритму.

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

Преимущества и недостатки JavaScript

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

Преимущества JavaScript:

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

Востребованный язык программирования. Если верить статистике, Javascript входит в топ-3 языков программирования в мире.

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

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

Недостатки JavaScript:

Отсутствие чтения и загрузки файлов. Это сделано из соображения безопасности для пользователей.

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

Динамическая типизация. Причина частых проблем при разработке – нет возможности выявить ошибки заранее, только на этапе работы. Еще Javascript игнорирует явные несостыковки, которые прямо-таки бросаются в глаза. Поэтому это настоящая боль для человека, который захотел изучить Javascript после освоения строго типизированного языка (Java, C, C++).

Больше статей на схожую тематику:

Изучение языка программирования Javascript: стоит ли начинать?

Как уже было сказано, на сегодняшний день Javascript является одним из популярных и востребованных языков программирования. Есть желание научиться создавать крутые веб-сайты и веб-приложения? Хочется писать код для серверной части? Вас привлекает разработка мобильных и настольных приложений? Ответ один – изучайте Javascript!

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

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

Стоит сделать большую оговорку. Если вы желаете сменить профессию и полностью погрузиться в мир web-разработки, то лучше всего начать путь с основ построения страниц. Речь идет о HTML и CSS. HTML – скелет страницы сайта, он задает структуру. CSS – занимается стилизацией страницы: задается цвет, описывается сетка, по которой будут располагаться блоки на страницы, добавляется анимация, пишется адаптация под разные устройства и много другое. Данный процесс называется версткой сайта. Без знания верстки будет трудно, ведь HTML, CSS и JS сильно связаны между собой.

Как используется Javascript на сервере

Кто бы мог подумать, что такой игрушечный на первых порах язык дорастет до возможности его применения на сервере? Причем нужно заметить, применяют его сегодня очень успешно. Почему так получилось? Ответом будет появление на свет Node.js.

Node.js – это платформа для работы с Javascript на сервере посредством движка V8.

Пару слов о движках. Движки необходимы для того, чтобы наш код поняла машина. Движок занимается трансляцией Javasctipt-кода в машинный код. Из популярных сегодня можно отметить V8 (Google Chrome) и SpiderMonkey (Mozilla Firefox). Стоит сказать, что SpiderMonkey – один из самых старых движков: когда-то он был разработан в компании Netscape Бренданом Айком, о котором мы говорили ранее. Таким образом, Node.js позволяет нам выполнять различные действия на стороне сервера.

Почему же произошел взлёт этой технологии? И в чем отличие классического взаимодействия сервера с пользователем от взаимодействия с использованием Node.js?

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

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

Фишка Node.js в ее асинхронности. Объясняя упрощенно, могу можно сказать следующее: представим, что у нас запущено приложение на сервере, и к нему подключаются сразу три пользователя – всем им нужны какие-то сведения из базы данных.

Node.js сразу же хватает информацию из базы с помощью Libuv. Как раз Libuv асинхронен и может создавать свои параллельные, а не последовательные запросы в базу. Далее Libuv помещает информацию в главный поток, который крутит V8. Главный поток обрабатывают эту информацию в обработчиках, мутирует ее каким-то образом и точно такими же способами передает ее пользователю.

Это называется асинхронным вводом-выводом. Вместо того чтобы выделять каждому пользователю по потоку, мы просто выдали им один поток, в котором крутятся все обработчики. Дополнительные потоки создаются только на микрозадачи по вводу и выводу. Они более выгодны, так как всегда находятся в работе и решают полезные задачи в системе. Им всегда выделено фиксированное максимальное число, и никто не простаивает без работы.

Нравится статья? Тогда смотрите наши курсы!

Библиотеки и фреймворки JavaScript

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

Библиотеки Javascript

Библиотека – это своего рода подпрограмма, набор элементов для более быстрой и удобной разработки сайта, приложения. Пожалуй, самой популярной Javasctipt-библиотекой является Jquery. Она появилась на свет в начале далекого 2006 года. По сей день у нее остается множество поклонников, ее используют тысячи людей. Успех заключается в том, что она предоставляет хорошие возможности для взаимодействия с элементами на странице, позволяет удобно обмениваться данными с сервером посредством Ajax и многое другое.

В 2021 году Jquery некоторые люди считают архаизмом, морально устарелой вещью и отказываются от использования данной библиотеки, поскольку есть другие более современные инструменты. Несомненно, на смену старому приходит новое. Спустя какое время она окончательно канет в Лету, сложно сказать.

Фреймфорки Javasctipt

Все разработчики на проекте могут писать совершенно разный код, по-разному решать задачи. Фреймворки помогают писать быстрее, качественнее, а еще они в некоторой степени создают ограничения, тем самым программисты на проекте пишут почти одинаковый код. Это, несомненно, плюс, ведь гораздо лучше, когда есть некие рамки написания кода. Хочется отметить, что это не главное преимущество, а скорее последствия применения. У каждого фреймворка «свой язык», свои конструкции, но они все также имеют под собой базу под названием Javascript.

Более современным, модным, молодежным при разработке является использование одного из 3-х популярных фреймворков: Vue, Angular или React.

React

React был создан компанией Facebook в середине 2013 года. Изначально его разработали для решения внутренних задач компании. Стоит оговориться, что React позиционируется как библиотека, а не фреймворк. React по мере своего развития получил очень много возможностей. С его помощью можно создавать одностраничные SPA (Single Page Application) и мобильные приложения.

Ярким примером SPA является Gmail. Суть заключается в том, что приложение работает в рамках одной страницы, не происходит переход на другие, а различные его элементы подгружаются по мере надобности. У React развитая экосистема, он обладает множеством плагинов, дополнений, которые расширяют его возможности. Например: Redux, Mobx, Next, React Router, Recoil, Zustand, Xstate, React Native.

Angular

Angular – это детище Google inc. Появился на свет в 2009 году. Изначально разрабатывался Мишко Хевери и Адамом Абронсом в Brat Tech LLC как программное обеспечение, но спустя некоторое время Абронс покинул проект. Хевери, работающий в тот момент в Google, продолжил развивать Angular при поддержке своих коллег.

Философия фреймворка заключается в декларативном HTML-first подходе. Смысл HTML-first – в расширении HTML посредством внедрения некоторых конструкций. Таким образом разрабатываются более удобные, интуитивно понятные интерфейсы для пользователей, нежели при императивном подходе, который используется в React.

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

Vue

Vue был написан всего лишь одним разработчиком Эваном Ю. В какой-то момент Эван понял, что весьма затруднительно и почти невозможно быстро сделать прототип сложного интерфейса пользователя в веб-приложении.

В 2013 году React еще только разрабатывался, а Angular и прочие были очень сложными и громоздкими вещами. Для решения возникшей проблемы он приступил к созданию собственного фреймворка. Vue отличается от конкурентов простотой разработки, способностью постепенного внедрения, отличной документацией на различных языках, простотой в изучении.

Vue взял в себя лучшее, что было у других инструментов. К примеру, Vue и React используют технологию Vurtual DOM, которая опирается на корневую библиотеку. Angular и Vue очень похожи по синтаксису, так как оба используют HTML-first подход. Vue на данный момент любимец общества web-разработчиков, на него возлагаются большие надежды.

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

Приложения для компьютера и мобильных устройств

VS Code, Slack, WhatsApp Desktop, Discord, Skype, Twitch, Figma – все эти приложения написаны с использованием Javascript. GitHub – самый крупный веб-сервис для ведения IT проектов, его еще в шутку называют «социальная сеть для IT-разработчиков». Этот сервис разработал и выпустил на свет в 2013 году фреймворк под названием Electron.

Данный фреймворк использует в себе Node.js для работы с серверной частью и Chromium – для отображения визуальной части приложения.

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

Javascript не обходит стороной и мобильную разработку приложений. В данном случае используется кроссплатформенный фреймворк React Native. Он поддерживает Android, Android TV, iOS, macOS и другие платформы. Самое важное заключается в том, что при использовании данного фреймворка автоматически становятся доступными возможности библиотеки React, которая используется в создании сайтов. Примерами написанных приложений могут стать Instagram, Facebook Ads, Uber eats, 2048, Bloomberg и многие другие.

Примеры роста кликов, конверсий, заказов и прибыли:

Итого

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

С помощью Javascript создаются невероятные веб-сайты и веб-приложения. Поэтому если вам необходим красивый, оптимизированный, продающий сайт, то самое время обраться за этим в нашу компанию.

Проекты на JavaScript для ознакомления

Представляю вашему вниманию подборку из 22 проектов на чистом или, как еще говорят, ванильном JavaScript (лично я предпочитаю просто JavaScript).

Для меня это своего рода промежуточный итог в изучении JS.

Код написан в разное время, поэтому выглядит по-разному и имеет разный уровень сложности.

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

Код проектов находится ЗДЕСЬ.

Формат будет следующим: название проекта, его краткое описание, песочница.

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

1. Audio Progress and Visualization

Приложение для воспроизведения и визуализации аудио данных с помощью Web Audio API и Canvas API.

100 JavaScript Project Ideas

Let’s face it, you spend more time thinking about new project ideas than you should. We’ve all been there, whether you try to come up with something to practice a skill, challenge a candidate in an interview, or build the next billion-dollar app, we’ve all spent some time thinking about project ideas.

In this article, I’ve collected 100 of them, so you can have an easier job choosing your next challenge. I’ve included designs for most of the projects so you don’t have to be a UX, and I will leave references to tutorials where appropriate, so you can cheat if you get stuck. I’ve also come up with a set of features that can act as acceptance criteria and listed some key takeaways so you know what can you learn by building each project.

I’ve also created an interactive tool called UI Challenge, where you can randomly generate a challenge for yourself with a random set of tools. Do you have a project idea that you want to be added to the tool? You can do that too. Don’t forget to leave a reference for your bio so we can give you credit.

With that being said, let’s see the 100 JavaScript project ideas, ordered by different types, such as small projects, apps, games, or components. Let’s start with the simple ones.

#1 — Create a To-Do App

By now, it would be a crime to leave out a to-do app from this list, so let’s quickly get this out of the way. The reason todo apps are so great for starter projects is that they have simple features, yet you can create a full-fledge, usable application in a matter of hours, while also learning key concepts in JavaScript. So what can you learn from this?

✨ Features:

• Be able to add new elements to a list
• Be able to remove existing elements from a list
• Be able to rename existing elements in a list
• Be able to see the number of complete and incomplete elements
• Advanced:
  • Be able to create separate lists
  • Be able to tag and group elements
  • Automatically sorting complete and incomplete elements

  �� Takeaways:

  • DOM manipulation
  • Interactions with checkboxes
  • For loops
  • Event listeners

  �� Resources:

  #2 — Create a Counter

  Building a counter is another great way to get started with JavaScript. Just as for the majority of the projects here, you can get familiar with DOM manipulation, as well as event listeners, and basic state management. You don’t need to worry about CSS too much, as we are more interested in the functionality here.

  ✨ Features:

  • Be able to increment and decrement a number
  • Be able to directly input a number
  • Advanced:
    • Animate the number on change

    �� Takeaways:

    • State management
    • Change and click event listeners
    • Animations

    �� Resources:

    #3 — Create a Calculator

    Creating a simple calculator is yet another great way to get exposure to JavaScript. Here we are starting to have more and more functionality, meaning it’s a great starter project for learning how you can structure your code to make it more easily maintainable, scalable, and readable.

    

    ✨ Features:

    • Be able to add, subtract, divide, and multiply numbers together
    • Be able to use decimals
    • Be able to clear the result
    • Advanced:
      • Be able to use the modulus
      • Be able to use exponentiation
      • Be able to store calculation history

      �� Takeaways:

      • Classes and methods
      • Switch statements
      • Arithmetic operators

      �� Resources:

      #4 — Create a Contact Form

      A contact form lets you practice not just client-side JavaScript, but also server-side if you want to opt for the harder route. Of course, you can also create a functional contact form without having to worry about the backend, using only API calls.

      

      ✨ Features:

      • Be able to fill out the contact form
      • Validate that fields are not empty
      • Validate that fields are valid
      • Clear fields upon submission
      • Be able to log the form values as a JSON object to the console
      • Advanced:
        • Be able to send an email with the details using an API call

        �� Takeaways:

        • Fetch API
        • Validating user input
        • Regex, in case the input needs to be verified with a pattern
        • Handling happy and failure paths from a promise

        �� Resources:

        #5 — Create a Landing Page

        We’ve yet to create a full webpage in one go, so as a next project, we can look into building a landing page. We can also integrate the contact form we’ve built previously into the bottom of the page. There’s not so much JavaScript involved with the project, rather it’s about learning how to structure your HTML and layout your elements with CSS. But to get some JavaScript into the mix still, we can add smooth scrolling for anchors.

        

        ✨ Features:

        • Be able to smoothly scroll to other sections of the page with anchors
        • Be able to resize the page without breaking the layout

        �� Takeaways:

        • Semantic HTML
        • Responsive CSS
        • Scroll events

        �� Resources:

        #6 — Create a Toggleable Sidebar

        Let’s take a look at some components now. Components can help you build reusable pieces of code, and they are just the right size in terms of complexity: they are small enough so you can practice key concepts in a short amount of time, but they are just large enough to give you some challenges while doing so. One of these projects is creating a toggleable sidebar.

        

        ✨ Features:

        • Be able to toggle the sidebar on and off
        • Be able to generate the menu items from a JavaScript object
        • Advanced:
          • Be able to navigate to different pages by interacting with the items
          • Retains the selected state if a hash is present in the URL

          �� Takeaways:

          • Manipulating classes
          • Dynamically rendering elements
          • History API
          • Location object

          �� Resources:

          #7 — Create a Tooltip Component

          Another great challenge is to build a tooltip component. Tooltips can let you learn about hover effects, dynamically inserting content, and positioning. They should be positioned above the content. But should they also cover sticky elements, such as a fixed header?

          

          ✨ Features:

          • Be able to create tooltips with a function call
          • Be able to trigger tooltips on hover or on click
          • Be able to close the tooltip on mouse leave or on close button click
          • Be able to set the position of the tooltip anchor

          �� Takeaways:

          • Objects and methods
          • Layers and positioning
          • Dynamically inserting content
          • Mouse events

          �� Resources:

          #8 — Create a Hamburger Menu

          Building a hamburger menu is another great way to hone your JavaScript skills. You can combine this project with a sidebar component that can be toggled on and off using this menu. You can also throw in some animations into the mix if you would like to learn more about CSS too.

          

          ✨ Features:

          • Be able to toggle the state of a hamburger menu on and off
          • The hamburger menu should be automatically closed when a menu item is interacted with

          �� Takeaways:

          • DOM manipulation
          • CSS animations

          �� Resources:

          #9 — Create an Image Slider

          An image slider is heavy in JavaScript, and if you want to make it customizable, then you have to go the extra mile. In this challenge, you’ll learn about transitioning between elements and handling user interaction on desktop, as well as on mobile.

          

          ✨ Features:

          • Be able to navigate between images using dots or arrows
          • Be able to swipe the images on mobile
          • Be able to infinitely swipe to both sides
          • Be able to dynamically define the slides
          • Be able to choose between animations

          �� Takeaways:

          • Animating elements
          • Handling swipes and click events
          • Working with function configurations

          �� Resources:

          #10 — Create an FAQ Component

          Next up, we have an FAQ component. FAQs are usually displayed in accordions which can act as a great base for learning how to toggle states in JavaScript. It’s a simple, but fun project where you can also enhance your HTML and CSS skills.

          

          ✨ Features:

          • Be able to toggle FAQs on and off
          • Be able to automatically close opened sections if another section is toggled on

          �� Takeaways:

          • Handling on and off states
          • DOM Manipulation
          • CSS animations

          �� Resources:

          #11 — Create a Customizable Modal

          Designing and creating a customizable modal is another great way to get yourself in the habit of building reusable, flexible components that you can later take with you to other projects. In this project, you will learn how to work with different layers through z-index , how you can use data attributes to store metadata in the DOM, and how you can use those in JavaScript. If you want to go the extra mile, you can also enable the use of callback functions for the buttons to execute custom events.

          

          ✨ Features:

          • Be able to define a header for the popup
          • Be able to define a text for the popup
          • Be able to define buttons with a callback function for the popup
          • Be able to close the popup if the user clicks outside the popup

          �� Takeaways:

          • Event listeners
          • Custom data properties
          • Handling callback functions
          • Layering through z-index

          �� Resources:

          #12 — Create a Bookmarklet

          If you rather want to improve your workflow while learnings JavaScript instead of building components, a great way to do that is to build a bookmarklet. A bookmarklet is like a bookmark that holds a piece of JavaScript code.

          Once you click the bookmarklet, instead of opening a new page, you execute that code. You can implement various useful scripts this way, from highlighting outgoing links on the page to displaying extra information.

          ✨ Features:

          • Be able to append additional information to the DOM, based on elements on the page

          �� Takeaways:

          • Arrays
          • Querying and manipulating the DOM
          • Understanding how bookmarklets work

          �� Resources:

          #13 — Create Tabs

          Using tabs is a common way to organize, and display data. In this project, you’ll learn about how you can switch out content by interacting with the tabs, and if you want to learn about the drag and drop API, you can also make the tabs draggable. Mixing this with a close button also lets you take a look at how to remove DOM elements completely.

          

          ✨ Features:

          • Be able to navigate between tabs
          • Advanced:
            • Be able to close tabs
            • Be able to order the tabs with drag and drop

            �� Takeaways:

            • DOM manipulation
            • Click events
            • Removing DOM elements
            • Drag and Drop API

            �� Resources:

            #14 — Create a Download Progress Bar

            Giving feedback to the user is one of your main jobs as a frontend developer. A download progress bar lets you do just that. Here you can learn more about promises, the different states they can take, the async/await keywords, and how you can manage different states in order to reflect the current progress of a download or file upload on the UI.

            ✨ Features:

            • Be able to see the progress of a file upload
            • Be able to see the percentage of the progress

            �� Takeaways:

            • Promises
            • Async / Await
            • Axios
            • Managing state

            �� Resources:

            #15 — Create a Form Validator

            Form validation is another common task you will often find yourself dealing with. In this project, you can learn how to validate input fields, and give actionable error messages to users in case something goes wrong. You can also learn about regular expressions here, as they are often used to validate complex patterns. Always remember that you want to validate inputs on the server too.

            

            ✨ Features:

            • Be able to set validation rules for an input
            • Be able to show error state

            �� Takeaways:

            • Handling form submissions
            • Querying the DOM
            • Input validation
            • Working with regex

            �� Resources:

            #16 — Create a Calendar

            Building a calendar can let you learn a lot about how to work with the Date API. Next to that, you can also learn how you can display data in a table, or even store it inside local storage if you want to assign time entries to days.

            The design looks simple, but the implementation can quickly grow in complexity. How about adding different styles to holidays, or handling leap years?

            

            ✨ Features:

            • Be able to navigate between months
            • Be able to see today highlighted
            • Advanced:
              • Be able to set time entries on a day
              • Be able to recall time entries from local storage

              �� Takeaways:

              • Tables and grids
              • Loops
              • Date API
              • Local Storage for storing time entries

              �� Resources:

              #17 — Create a Timeline Component

              Building a timeline is also a great challenge if you want to hone your CSS skills. By building this component, you can learn more about working with arrays and objects, loops, and learn about different array methods.

              

              ✨ Features:

              • Be able to generate a timeline from an array of objects
              • Be able to set the color of a timeline item
              • Be able to set a title and text content for a timeline item

              �� Takeaways:

              • Array methods
              • Working with objects
              • Working with loops

              �� Resources:

              #18 — Create an Event Countdown Component

              Another great challenge you can do that is related to time, is building an event countdown component. With this, you can familiarize yourself with how the date API, and intervals work. If you would like to take the challenge a step further, make sure you are also able to call the timer with hours or minutes.

              

              ✨ Features:

              • Be able to call a function with the number of days that will display a countdown
              • Be able to call the same function with the number of hours
              • Be able to call the same function with the number of minutes

              �� Takeaways:

              • Date API
              • Intervals

              �� Resources:

              #19 — Create a Star-rating Component

              Using a star rating component is a common way to indicate votes or reviews. In this project, you will learn how to generate a number of icons based on an argument, as well as how to handle user interaction with these icons. If you also want to persist the data, you can look into using cookies or the local storage API.

              

              ✨ Features:

              • Be able to interact with the star rating component
              • When a star is clicked, it should retain state even after page reload
              • Advanced:
                • Be able to set a custom icon for the component

                �� Takeaways:

                • Working with loops
                • Persisting state through cookies / local storage API

                �� Resources:

                #20 — Create a Breadcrumbs Menu

                Showing navigation as breadcrumbs is a common way to visualize the relationship between pages. Building this component helps you dive into working with arrays and objects, as well as looking at generating navigation elements based on the JavaScript data.

                

                ✨ Features:

                • Be able to get a breadcrumb menu from an array of objects
                • Be able to navigate to pages using the menu items

                �� Takeaways:

                • Working with arrays and objects
                • Working with loops
                • Generating navigation elements through JavaScript

                �� Resources:

                #21 — Create a Stepper Component

                A stepper, or a multi-step form is a way to indicate the progress of filling out a form through a list of actions. With this project, you can learn how to manage an internal state, and work with object methods to externally update the component and trigger a change in steps.

                

                ✨ Features:

                • Be able to define a list of steps with a name
                • Be able to set a complete state of a step
                • Be able to trigger a state update for the component

                �� Takeaways:

                • Managing state
                • Working with methods
                • DOM manipulation

                �� Resources:

                #22 — Create a Chips Component

                Chips let you quickly assign predefined tags to an input. It works similarly to an autosuggest, but here, the input can take on multiple values. To make the project a little bit more complicated, you can also look into adding a remove button for the chips or let them have different states, eg.: make them clickable, create primary / secondary styles, or adding custom icons to them.

                

                 

                ✨ Features:

                • Be able to add chips to an input field
                • Be able to remove existing chips from the input field
                • Advanced:
                  • Be able to set the chips to be either primary or secondary in style
                  • Be able to set a custom icon for the chips
                  • Be able to attach an onChange event listener to the component

                  �� Takeaways:

                  • Working with input fields
                  • Click events
                  • On change events
                  • Working with loops

                  �� Resources:

                  #23 — Create a Drop Down Menu

                  Using a drop-down menu is a common way to handle multi-level navigation. With this project, you can learn about correct positioning and displaying elements on hover. Want to go a bit more advanced? Try to integrate some sliding animation between navigating sub-menus, and you can also play with recursion if you want to implement a multi-level drop-down menu.

                  

                  ✨ Features:

                  • Be able to see a drop-down menu when a top-level menu item is being hovered
                  • Be able to navigate to different pages when a sub-menu item is clicked
                  • Be able to get a multi-level drop-down menu from an array of JavaScript objects

                  �� Takeaways:

                  • Hover events
                  • Animations
                  • Advanced:
                    • Recursion

                    �� Resources:

                    #24 — Create an Autocomplete Search

                    We’ve looked at working with chips before, but there’s also a similar component we haven’t touched yet. Creating an autocomplete search is a great way to learn more about how you can search through a dataset and filter it based on some user input.

                    With this project, you will learn a lot about array methods, and if you want to add some extra challenge, make sure you add support for keyboard navigation too.

                    

                    ✨ Features:

                    • Be able to filter an array of JavaScript objects based on an input field
                    • Be able to see autosuggestions on the filtered resultset
                    • Be able to select an element from the list of suggestions using the keyboard or mouse

                    �� Takeaways:

                    • Click event listeners
                    • Keyboard event listeners
                    • Searching and filtering data

                    �� Resources:

                    #25 — Create a Pagination Component

                    Dealing with paginations is a common task that you will probably come across at one point in your career. This project can help you understand how can you break down a large set of data into smaller, more digestible pieces. How to offset the displayed elements, and how to set a limit, so only a predefined number of elements are rendered on the page at any given time.

                    

                    ✨ Features:

                    • Be able to break down an array into separate pages
                    • Be able to paginate between the items of the array
                    • Be able to use arrows to navigate to the next and previous page

                    �� Takeaways:

                    • Pagination
                    • Arrays
                    • Working with internal state

                    �� Resources:

                    #26 — Create a Sortable and Filterable Table

                    Building upon the previous project, we can go one step further, and look at building a sortable and filterable table with a pagination component on the bottom. Along the way, you can deepen your knowledge on pagination, and also gain new skills on how to work with tabular data, or sort and filter a resultset.

                    

                    ✨ Features:

                    • Be able to see an array of JavaScript objects displayed in a table
                    • Be able to sort and filter the table
                    • Be able to paginate the data if the table has more than 10 elements
                    • Advanced:
                      • Be able to search the dataset through an input field

                      �� Takeaways:

                      • Array methods
                      • Sorting and filtering
                      • Pagination

                      �� Resources:

                      #27 — Create a Blog From Scratch

                      Building a blog as a side project is a great way to get familiar with a handful of things. With the help of this project, you will be able to learn the basics of navigation, displaying data from an external source, working with grids, and paginating large data sets. It puts together multiple smaller projects into one big challenge you can take on.

                      

                      ✨ Features:

                      • Be able to see a list of posts (their cover image, title, excerpt, and CTA) displayed in a grid that is fetched from an API
                      • Be able to navigate to the articles by clicking on them

                      �� Takeaways:

                      • Routing
                      • Grids
                      • Pagination
                      • Working with APIs

                      �� Resources:

                      #28 — Create a Parallax Effect

                      Let’s take a look at some animations too. A parallax effect is a great way to illustrate the depth of elements on a page. It is triggered by scrolling, and if executed right, it can create a captivating effect. With this project, you can learn more about scroll events, how different layers can work together, and how translations can help you achieve it.

                      ✨ Features:

                      • Be able to see a parallax effect as I scroll down the page

                      �� Takeaways:

                      • Scroll events
                      • Layers and translations
                      • Data attributes

                      �� Resources:

                      #29 — Create an Infinite Scroll Page

                      

                      Just like pagination, infinite scroll works on the same logic, however, here we don’t have to interact with anything. As we scroll down a page, the next page is automatically loaded in after the other, creating the illusion that we can infinitely scroll down.

                      If you didn’t get pagination right for the first time, here you can learn more about it, how to work with scroll event listeners, and how to append elements to the DOM after requesting the next page from an API.

                      ✨ Features:

                      • Be able to infinitely scroll down the page
                      • Be able to see a loading indicator while the next page is fetched
                      • Be able to see a “You’ve reached the end” message at the bottom of the page when there are no more pages to fetch

                      �� Takeaways:

                      • Pagination
                      • Appending elements to the DOM
                      • Scroll event listeners
                      • IntersectionObserver API

                      �� Resources:

                      #30 — Create a Scroll-animated Site

                      While we are talking about scrolling, another fun project to take on is building a site that is animated by the position of your scrollbar. With this project, you can get familiar with the ScrollMagic library that is used for adding animations to your scrolls, and with that, you will be able to create a similar effect to the one below:

                      ✨ Features:

                      • Be able to control the style and position of elements on the page with the position of the scrollbar

                      �� Takeaways:

                      • Scroll event listeners
                      • Animations
                      • Working with the ScrollMagic library

                      �� Resources:

                      #31 — Create a Shopping Cart

                      Are you looking to learn how to build an e-commerce site? Then this project will be for you. A shopping cart is an integral part of any online store that connects your way from browsing products, to checking out. With the project, you can learn how to add and remove products from a cart, and how to display a sum based on the prices and quantity of the products inside the cart.

                      

                      ✨ Features:

                      • Be able to add products to the cart
                      • Be able to remove products from the cart
                      • Be able to see the product’s name, quantity, and price inside the cart
                      • Be able to see the total price of the cart

                      �� Takeaways:

                      • DOM manipulation
                      • Working with objects
                      • State management
                      • Cookies for storing cart information

                      �� Resources:

                      #32 — Create a Color Generator

                      Next up, we have a color generator. Generating random colors in JavaScript can be done in a quick and straightforward manner. But what about generating shades of color, or generating entire color palettes?

                      Here you can learn about how to convert numbers into hexadecimal values, how to deal with random numbers, or how to copy strings to the clipboard for later use.

                      

                      ✨ Features:

                      • Be able to randomly generate a color
                      • Be able to see the hex color code of the generated color
                      • Be able to copy the color code to the clipboard
                      • Advanced:
                        • Be able to generate x number of shades of a color
                        • Be able to generate color palettes

                        �� Takeaways:

                        • Working with Math.random
                        • Converting numbers to hexadecimal values
                        • Copy to clipboard functionality

                        �� Resources:

                        #33 — Create Feature Flags

                        Feature flags let you quickly test out new features in a production environment, and even turn off existing features, without having to deploy additional code changes.

                        With this project, you can learn more about how to work with the local storage API, how to toggle the state of objects on and off, and how to display features based on these states. You will also learn how you can quickly build a bookmarklet — like the one in the image below — that you can share with others to use in order to manage the features through an interface.

                        

                        ✨ Features:

                        • Be able to toggle features on and off from an interface
                        • If a feature is toggled on, it should appear on the page
                        • If the feature is toggled off, it should either render a fallback or nothing

                        �� Takeaways:

                        • Local storage API
                        • Working with toggles
                        • How to create a bookmarklet

                        �� Resources:

                        #34 — Create an Exit-Intent Popup

                        Building an exit-intent popup is a great way to get your audience to subscribe to your mailing list, but it’s also a great way to learn more about mouse and keyboard events. With this project, you will learn how to trigger a popup right when the mouse is about to leave the page, how to close the popup in three different ways, and how to work with cookies in order to prevent the popup from appearing again for every session.

                        ✨ Features:

                        • Be able to trigger a popup on mouse leave
                        • Be able to close the popup with an x icon
                        • Be able to close the popup by clicking away
                        • Be able to close the popup by hitting the escape key
                        • Once the popup is triggered, it should not trigger again for the next 30 consecutive days

                        �� Takeaways:

                        • Mouse event listeners
                        • Key event listeners
                        • Cookies

                        �� Resources:

                        #35 — Create an Animated Day and Night Toggle Switch

                        Do you want to make a dark theme for your app? You can look into implementing a day and night toggle switch for it to create a transition between the two themes using CSS, and some JavaScript for toggling the necessary classes, and creating a similar effect:

                        ✨ Features:

                        • Be able to toggle between a light and dark theme with a ripple effect

                        �� Takeaways:

                        • CSS transitions
                        • Toggling states

                        �� Resources:

                        #36 — Create a Network Status Notification Bar

                        A network status notification bar can help your users see status changes in their network connection. It comes especially useful if your app depends on a saving function, and suddenly the connection is dropped. You can let users know in this case that any changes made during this period are bound to be lost.

                        ✨ Features:

                        • Be able to see a banner when the network status changes to offline
                        • Be able to queue changes while being offline
                        • Be able to sync the queued changes after going online again

                        �� Takeaways:

                        • Detecting changes in network status
                        • Queueing updates when being offline
                        • Syncing with a database when going online

                        �� Resources:

                        #37 — Create a Chrome Extension

                        If you want to look into enhancing your workflow, and a bookmarklet doesn’t suit you, then building a custom Chrome extension might help you with that. With this project, you will learn about the basic structure of a Chrome extension: how to create a custom popup, how to work with permissions and content scripts, and how to test everything.

                        

                        ✨ Features:

                        • Be able to import the ingredients of a recipe from a Tasty recipe page using a Chrome extension
                        • Be able to cross out ingredients from the list
                        • Be able to store the imported recipe in the Chrome extension

                        �� Takeaways:

                        • Chrome extensions
                        • Extension popups
                        • Content scripts
                        • Chrome Permissions

                        �� Resources:

                        #38 — Create a VSCode Extension

                        Rather not want to leave your code editor? Then building a VSCode extension is a good choice too. With this project, you will learn how you can create your own VSCode extension, how to create custom commands for it, and how to deploy it to the extensions marketplace so others can use it too.

                        ✨ Features:

                        • Be able to install the extension through the Extensions tab
                        • Be able to call the extension with a custom command

                        �� Takeaways:

                        • Building a VSCode extension
                        • Creating custom commands
                        • Deploying the extension

                        �� Resources:

                        Now let’s see some game ideas that you can easily (or not so easily) implement in JavaScript.

                        #39 — Create a Tic-Tac-Toe Game

                        Tic-tac-toe is a classic game that can be traced back to ancient Egypt, dating back around 1300 BC. It’s a great starting project to learn about turn-based games, and how to handle game logic. As part of the project, you can also learn how to generate a grid, how to handle turns, and how to define a winning condition.

                        

                        ✨ Features:

                        • Be able to generate a 3×3 grid
                        • Be able to take turns until one player wins (has their marks horizontal, vertical, or diagonal)
                        • Advanced:
                          • Be able to play against the computer

                          �� Takeaways:

                          • Generating grids
                          • Click events
                          • Handling game turns

                          �� Resources:

                          #40 — Create a Rock, Paper, Scissors Game

                          Another classic game, this time, dating back to the Han dynasty around 200 BC is the rock, paper, scissors game. In this project, you will learn about working with random numbers and data attributes. After three turns, a winner should be nominated.

                          

                          ✨ Features:

                          • Be able to draw either rock, paper, or scissors against the computer
                          • Be able to see the scores of each party
                          • Be able to see the outcome of previous turns
                          • A winner should be nominated after 3 turns based on the scores

                          �� Takeaways:

                          • Working with random numbers
                          • Click event listeners
                          • Data attributes

                          �� Resources:

                          #41 — Create a Platformer Game

                          Want to look into a more advanced game? You can take a look at building a platformer, like an infinite side scroller with simple gameplay mechanics, such as Chrome’s jumping dinosaur, or a more complex one such as the famous Mario Bros from Nintendo. With these projects, you will learn a lot about how to build basic games with PhaserJS.

                          ✨ Features:

                          • Be able to control a 2D character on a map
                          • Be able to collect floating coins
                          • Be able to kill enemies by jumping on them
                          • When colliding with enemies from the sides, the game should be over
                          • Be able to win the game by reaching a flag at the end of the map

                          �� Takeaways:

                          • Working with PhaserJS
                          • Working with game objects
                          • Character movement control
                          • Building maps from tilesets
                          • Collision detection
                          • Scoring mechanism

                          �� Resources:

                          #42 — Create a Snake Game

                          You can also build games with JavaScript using only HTML elements. In this project, you will learn how you can build a snake game using nothing more, but checkboxes, and a radio button as an apple.

                          ✨ Features:

                          • Be able to control a checked checkbox using keyboard arrows
                          • Be able to collect an apple represented by a radio button
                          • The size of the snake should increase with each radio button hit
                          • The game should keep track of the score, increasing with each collected radio button
                          • The game should play a game over animation if the snake hits itself

                          �� Takeaways:

                          • Arrays
                          • Keyboard inputs
                          • Playing animations
                          • Working with random numbers

                          �� Resources:

                          #43 — Create Atari’s Breakout

                          Another famous game you can look into implementing is the famous Breakout from Atari. The aim of the game here is to hit every block with a ball, without allowing the ball to fall off. You have 3 lives, and you win the game once all blocks have been destroyed.

                          With this project, you will learn how to handle mouse events in Phaser, as well as how to handle arcade physics, tweens, or how to implement a scoring mechanism.

                          ✨ Features:

                          • Be able to shoot a ball from a paddle towards a grid of blocks
                          • Once a block is hit, it should be destroyed
                          • With each block destroyed, the player gets a score
                          • If the ball falls down, the player loses a health
                          • After losing three health points, the player loses the game
                          • After clearing all blocks from the screen, the player wins

                          �� Takeaways:

                          • Working with Phaser
                          • Mouse events
                          • Collision detection
                          • Tweens

                          �� Resources:

                          #44 — Create a Quiz Game

                          Rather work with HTML than the canvas, but still want to work on a game? Try looking into implementing a quiz game. Here you will learn more about working with an array of objects that describe each question and answer in the quiz, and how to implement a scoring system to see how good you are with a given quiz.

                          

                          ✨ Features:

                          • Be able to choose an answer to a question from a list of available options
                          • Be able to see if the selected answer is correct
                          • Be able to see the number of scores based on correct answers

                          �� Takeaways:

                          • Click events
                          • Array and objects
                          • Scoring system

                          �� Resources:

                          #45 — Create a Hangman

                          Another great game project where you can train your JavaScript skills is building the hangman. We all know how it goes, you have to guess the word before you run out of guesses, and the game is over. In this preview lesson from our JavaScript course, you will learn how to handle game assets, and handle different game states, such as win or lose.

                          

                          ✨ Features:

                          • Be able to see the number of letters a word has that needs to be guessed
                          • Be able to choose letters from the alphabet
                          • If there is a match, the letter should appear in the right place inside the word
                          • If there is no match, a part of the man should be drawn, and you should see the remaining number of wrong guesses
                          • If the word is guessed, you should be greeted by a win state
                          • If the word is not guessed, you should be greeted by a lost state

                          �� Takeaways:

                          • Keyboard events
                          • Handling game states
                          • Validating user inputs

                          �� Resources:

                          #46 — Create a Memory Game

                          Building a memory game can not only improve your JavaScript knowledge but can also help you improve your memory. In this project, your task is to build a grid of cards that can be flipped over. If a match is found, the cards stay flipped, if not, they will turn back. If you run out of time, the game is over, but if you manage to find all matching cards, just like you would in a memory game, then you take the price.

                          

                          ✨ Features:

                          • Be able to flip cards that are displayed inside a grid
                          • When two cards are flipped and there is no match, the cards should turn back
                          • When two cards are flipped and there is a match, the cards should stay turned up
                          • Be able to see the number of flips
                          • When all cards are flipped, the player should get a victory screen
                          • When the time runs out, the player should get a game over screen

                          �� Takeaways:

                          • Click events
                          • Handling game states
                          • Timers
                          • CSS transitions and animations

                          �� Resources:

                          #47 — Create a Minesweeper Game

                          Another fun project to take on is developing the minesweeper game. The task of the player here is to uncover all fields that are free from any mines. If the player hits a mine, then the game is over. With this project, you can learn a lot about working with arrays, grids, and loops. Want to make the game more challenging? Implement a countdown so the game can only be solved under a certain amount of time.

                          

                          ✨ Features:

                          • Be able to click on a cell to uncover it
                          • Be able to flag a cell to indicate a potential mine location
                          • Be able to uncover flagged cells
                          • If a mine is uncovered, the game is over
                          • If all cells are uncovered that doesn’t have a mine, the player wins

                          �� Takeaways:

                          • Arrays
                          • Loops
                          • Grids
                          • Working with random numbers

                          �� Resources:

                          #48 — Create a Word Scramble Game

                          How about building a word scramble game? You can go as wild as on the design below and make them appear in a hexagonal grid, or you can simply switch words one after another with an input field where the user can type in their guesses. We all know the rules, you need to find all words to win the game. You will learn about working with keyboard events, manipulating the DOM, and implementing a scoring mechanism.

                          

                          ✨ Features:

                          • Be able to see words scrambled
                          • Be able to type in the guessed word to an input
                          • Be able to see a score increasing or decreasing based on tries
                          • Be able to see the number of remaining guesses
                          • Be able to advance to the next level with longer words after finding all scrambled words
                          • If the player runs out of guesses, the game is over

                          �� Takeaways:

                          • Keyboard events
                          • DOM manipulation
                          • Implementing a scoring mechanism

                          �� Resources:

                          #49 — Create Fireworks

                          As we are approaching the end of the year, it’s a perfect opportunity to start practicing how particles can be created in JavaScript. With this project, you will be building a mage with a wand that can shoot fireworks to the night sky, all done on a canvas element. You will learn how to handle different mouse events, and how to create physics-simulated particles by utilizing the Math object. This will be the final output of this project:

                          ✨ Features:

                          • Be able to control the rotation of the wand with the cursor
                          • Be able to shoot fireworks at the position of the mouse with clicks

                          �� Takeaways:

                          • Canvas API
                          • Mouse events
                          • Particle effects
                          • requestAnimationFrame
                          • Working with the Math object

                          �� Resources:

                          #50 — Create a 3D Planet

                          If you want to look into 3D instead, then you might want to try out Three.js. It provides all the necessary APIs for you to more easily build 3D projects right inside your browser. In this project, you will be building a 3D replicate of Mars with lightning, textures, depth, and camera movement. Here is the final end result:

                          ✨ Features:

                          • Be able to see a 3D rotating planet on a canvas
                          • Be able to rotate the camera with the mouse

                          �� Takeaways:

                          • Canvas API
                          • Working with ThreeJS

                          �� Resources:

                          #51 — Create a 3D Rubik’s Cube

                          Looking for more challenging work? With the help of Three.js, you can also try building a 3D working Rubik’s cube. With this project, you can learn a lot about rotating objects and mouse events inside the scene. If you would like to go the extra make, try to let the cube auto shuffled, or completed by the computer itself.

                          

                          ✨ Features:

                          • Be able to see a 3D Rubik’s cube rendered on a canvas
                          • Be able to interact with the 3D Rubik’s cube and rotate the sides
                          • Advanced:
                            • Be able to automatically shuffle the Rubik’s cube
                            • Be able to automatically complete the Rubik’s cube

                            �� Takeaways:

                            • Canvas API
                            • Working with 3D objects
                            • Mouse events

                            �� Resources:

                            Want something even more advanced? Let’s see a couple of examples that involve AI/machine learning.

                            #52 — Create an Image Classifier

                            One of the most common use-cases of machine learning is image classification. With this project, you will need to build an image classifier using the TensorFlow library, that should be able to accurately predict images based on a pre-trained model. Here is what we are going to build:

                            ✨ Features:

                            • Be able to drag and drop images to a page
                            • Be able to train a classifier with the dropped images
                            • Be able to predict previously unseen images

                            �� Takeaways:

                            • Working with TensorFlow
                            • Working with a KNN classifier
                            • Training models

                            �� Resources:

                            #53 — Create a Chatbot

                            Want to learn about natural language processing? Then building a chatbot is a great way to get you started. Here you’ll learn about the basics of NLP, how to work with the Natural library, and how to train a model based on a large data set, that will respond to even messages it has never seen before.

                            

                            ✨ Features:

                            • Be able to run the code on CLI with a message, which should respond with an appropriate response from the training data

                            �� Takeaways:

                            • Natural language processing
                            • Working with the Natural library

                            �� Resources:

                            #54 — Create a Face Recognition App

                            Another great machine learning project that involves images is an app that can recognize faces and emotions. Here, we will take a look into how face-api works, and how you can use its models to detect faces on images, draw facial landmarks or even use it for emotion detection.

                            

                            ✨ Features:

                            • Be able to provide an image on which the algorithm detects faces, landmarks, and emotions.

                            �� Takeaways:

                            • Image recognition
                            • Emotion detection
                            • Working with the face-api library

                            �� Resources:

                            If you’re looking for more simple challenges, there are plenty of other app ideas out there you can implement, such as:

                            #55 — Create a Weather App

                            Probably the most common project you will come across is a weather app. The reason for that is that it’s simple even so that it can be built in a matter of hours, but it has all major technical challenges you can come across during your daily work. These include things such as requesting data from an API, displaying it to the user, or be able to search for weather forecasts.

                            

                            ✨ Features:

                            • Be able to see the weekly weather forecast for a city
                            • Be able to see the date
                            • Be able to see weather conditions
                            • Advanced:
                              • Be able to search for a city
                              • Be able to see wind speed and direction

                              �� Takeaways:

                              • Geolocation API
                              • Fetch API
                              • Working with an external weather API

                              �� Resources:

                              #56 — Create a Clone

                              You can also look into implementing one of your favorite services out there. Want to learn about how e-commerce works? Build an Amazon clone. Want to learn how you can build complex search algorithms? Build a Google clone. Want to learn how to build a social network? Build a Facebook clone. You get the idea.

                              In this project, you will learn how to create a basic IMDB clone. You will learn about routing, fetching data from an API, and consuming it to display it in a meaningful way.

                              ✨ Features:

                              • Be able to see a list of movies with their cover, title, and rating
                              • Be able to navigate to individual movies where a description, creator, and actors are listed
                              • Be able to navigate back to the list

                              �� Takeaways:

                              • Routing
                              • Fetch API
                              • Requesting and consuming data from an endpoint

                              �� Resources:

                              #57 — Create a Desktop Application

                              If you want to think outside of the browser, you can also look into building an actual desktop application. With the help of Electron, you can use technologies you are already familiar with: HTML, CSS, and JavaScript.

                              With this project, you will not only learn how to build a desktop app using Electron, but also how to work with cron jobs, and how to work with the native notification API.

                              

                              ✨ Features:

                              • Be able to create notifications in a desktop application
                              • Be able to set the image, title, and description of a notification
                              • Be able to schedule notifications
                              • Be able to edit existing notifications
                              • Be able to remove existing notifications

                              �� Takeaways:

                              • Electron
                              • Cron jobs
                              • Working with the native notification API

                              �� Resources:

                              #58 — Create Bubble Charts

                              If you are into working with visualizing data, then the following two projects might be just for you. Here you will learn how to work with D3.js to build a bubble chart that represents what articles drive the most traffic to your site. You will also learn about creating a tooltip to showcase more data upon hovering a bubble, and you can also interact with them to navigate to different sections on your page.

                              

                              ✨ Features:

                              • Be able to generate a bubble chart from a JSON file
                              • The size of the bubbles should reflect the traffic each entry gets. Entries with higher traffic should be represented by a larger bubble
                              • Be able to interact with the bubbles and see additional information on it
                              • Be able to navigate to a new page by interacting with the tooltip that is shown upon hover of a bubble

                              �� Takeaways:

                              • D3.js
                              • Animations
                              • Working with SVGs

                              �� Resources:

                              #59 — Create Treemaps

                              Another great way to get familiar with D3.js is by building a treemap. Here we will be looking at how to create a treemap from a JSON file. You will be able to visually see which files/folders take up the most space. You will be also able to navigate between different levels, and even change the styles of the treemap. If you ever wanted to learn more about recursions, then this is the right project as we will also look into that.

                              ✨ Features:

                              • Be able to generate a treemap from a JSON file
                              • Be able to navigate to sub-nodes
                              • Be able to navigate back to ancestors
                              • Be able to change the style of the treemap

                              �� Takeaways:

                              • D3.js
                              • Recursion
                              • Working with SVGs

                              �� Resources:

                              #60 — Create a Real-Time Chat App

                              If you want to dive into the realm of real-time, then try building a real-time chat application with the ability to also see who is typing at the moment. In this project, you will learn more about web sockets, working with socket.io, and how you can emit and listen to events to update the UI accordingly.

                              

                              ✨ Features:

                              • Be able to join a chat conversation
                              • Be able to send and receive messages
                              • Be able to see messages appear in real-time
                              • Be able to see if someone is typing

                              �� Takeaways:

                              • Websockets
                              • Working with Socket.IO
                              • Emitting and listening to events

                              �� Resources:

                              #61 — Create a Kanban Board

                              If you would like to learn more about how the drag and drop API works, then building a Kanban board is a great way to do that. Here you will learn about how you can drag and drop cards from one column to the other. If you want to persist the state of the cards after page reload, you can also learn about local storage or working with a database, depending on your use case.

                              

                              ✨ Features:

                              • Be able to drag cards from one column to the other
                              • Advanced:
                                • Be able to persist the state, even after page reload

                                �� Takeaways:

                                • Drag and Drop API
                                • Local storage for persisting state

                                �� Resources:

                                #62 — Create a Retro Board

                                We can also look into creating another kind of board, this time, a retro board. In this project, you will learn about adding, editing, and removing items from columns, as well as giving them likes in the form of claps. The end project will look something similar:

                                

                                ✨ Features:

                                • Be able to add new items for each column
                                • Be able to remove existing items from columns
                                • Be able to edit the text inside the cards
                                • Be able to like cards by clapping them
                                • Be able to see the number of claps on each card

                                �� Takeaways:

                                • Dom manipulation
                                • State management
                                • Editable contents

                                �� Resources:

                                #63 — Create a Reminder App

                                Building a reminder app from scratch can help you learn more about working with cron jobs and scheduling events. In this project, we will look into how you can work with push notifications in order to see reminders popping up on your screen, and we will also see how the whole application can be handled by a single global state.

                                ✨ Features:

                                • Be able to create new notifications
                                • Be able to schedule notifications
                                • Be able to edit existing notifications
                                • Be able to remove existing notifications

                                �� Takeaways:

                                • Push notifications
                                • Cron jobs
                                • Working with global states

                                �� Resources:

                                #64 — Create a Scheduler

                                If you’d rather want to work on your Node skills, and you don’t want to build an entire reminder app, then you can look into building a scheduler that works with the native push notification API. Works in a similar way as the previous project, only this time, without a user interface. As part of this project, you will also learn how you can create cron jobs to send scheduled notifications. By the end of the project, you will get the following behavior:

                                ✨ Features:

                                • Be able to schedule notification
                                • Be able to set a title and a message for the notification
                                • Be able to see the notification triggered at the scheduled time

                                �� Takeaways:

                                • Notification API
                                • Cron jobs
                                • Working with Node

                                �� Resources:

                                #65 — Create a Note-Taking App

                                Next up, we have a note-taking app. With this project, you will learn how to display data using JSON files, work with global states, and implement CRUD operations so that you can create, update, and delete pages as you go. We will also look into integrating a WYSIWYG editor into the mix to make the app more accessible.

                                

                                ✨ Features:

                                • Be able to create new pages
                                • Be able to remove existing pages
                                • Be able to take notes on pages with a WYSIWYG editor

                                �� Takeaways:

                                • CRUD operations
                                • Building navigations
                                • Working with a WYSIWYG editor

                                �� Resources:

                                #66 — Create a Habit Tracker

                                Building new habits, and getting rid of old bad ones is not an easy take, but it is an essential part of becoming a better version of yourself. With this project, your task is to build a habit tracker so you can keep yourself more accountable. You will learn how to create new habits, define a frequency for them, and how to store everything in local storage. If you want to go wild, you can also look into visualizing it on a chart or calendar to see your progress.

                                

                                ✨ Features:

                                • Be able to add new habits
                                • Be able to see the list of habits created
                                • Be able to delete existing habits
                                • Be able to define a frequency for a habit
                                • Be able to store the habits in local storage

                                �� Takeaways:

                                • Arrays and objects
                                • Local storage API

                                �� Resources:

                                #67 — Create a Mobile App

                                Of course, you can not only build apps for the web or desktop with JavaScript but also build mobile applications. With this project, you will learn how you can make a checklist app with React Native with saving and loading functionality. You will also learn how to create list elements, how to handle their state, and how to store everything on your device’s storage.

                                

                                ✨ Features:

                                • Be able to add new checklists on the app
                                • Be able to remove existing checklists from the app
                                • Be able to check items from the checklist
                                • Be able to delete items from the checklist
                                • Advanced:
                                  • Be able to see when the checklist was created
                                  • Be able to see how many remaining items are inside a checklist
                                  • Be able to see the total number of items inside a checklist

                                  �� Takeaways:

                                  • Building mobile applications
                                  • Routing
                                  • Working with states
                                  • Storing data on the device

                                  �� Resources:

                                  #68 — Create a CMS

                                  Looking for something complex, but for the web? Then you might want to take a look into building a content management system. You can start with a simple page and a WYSIWYG editor, and build out more features as you go to make it more complex and useful.

                                  

                                  ✨ Features:

                                  • Be able to create new posts with a WYSIWYG editor
                                  • Be able to edit existing posts
                                  • Be able to delete existing posts
                                  • Be able to request the data through an API

                                  �� Takeaways:

                                  • CRUD operations
                                  • Authentication
                                  • Routing
                                  • Working with data from a database

                                  �� Resources:

                                  #69 — Create a Budget Tracker

                                  Building a budget tracker not only helps you become more aware of your spendings, but also helps you learn key concepts on how to implement CRUD operations in JavaScript, and really deepen your knowledge of arithmetic operators. Want to go a step further? You can also pull in a chart library to visualize the data, or even filter it with a date range.

                                  

                                  ✨ Features:

                                  • Be able to record expenses and income
                                  • Be able to set the date for an entry
                                  • Be able to tag the entries to categorize them
                                  • Be able to see a monthly overview of expenses and income
                                  • Be able to see net worth
                                  • Advanced:
                                    • Be able to visualize the expenses and incomes through graphs
                                    • Be able to select date ranges, eg.: previous month, or year to date

                                    �� Takeaways:

                                    • CRUD operations
                                    • Arithmetic operators
                                    • Charts, if you want to go advanced

                                    �� Resources:

                                    #70 — Create a Pomodoro App

                                    The pomodoro technique helps you break down your tasks into smaller, more manageable chunks, so they become less daunting. Set a timer for 25 minutes, work on the task until the timer rings, then go for a break. You can also do this in cycles and repeat the steps a number of times to extend this to hours.

                                    By building this app, you can learn more about how to handle time in JavaScript, how to work with loops, and how to work with the web audio API.

                                    

                                    ✨ Features:

                                    • Be able to set a timer in minutes
                                    • Be able to set a break in minutes
                                    • Be able to pause and play the timer
                                    • Be able to reset the timer
                                    • Advanced:
                                      • Be able to set a cycle that repeats the pattern a number of times

                                      �� Takeaways:

                                      • Timers
                                      • Loops
                                      • Web Audio API

                                      �� Resources:

                                      #71 — Create a What’s in my Fridge App

                                      It probably happened to you before too that something expired in your fridge. What better way to battle this than building an app to keep track of the food inside?

                                      This project lets you learn about CRUD operations, working with the date API, sorting the items so the food with the soonest expiry date is at the top, and optionally, working with routing if you want to store data in different categories.

                                      

                                      ✨ Features:

                                      • Be able to add items with an expiration date
                                      • Be able to remove existing items
                                      • Be able to see the number of days until expiration
                                      • Advanced:
                                        • Be able to group items into different containers

                                        �� Takeaways:

                                        • CRUD operations
                                        • Date API
                                        • Sorting and filtering
                                        • Optional: routing

                                        �� Resources:

                                        #72 — Create a Recipe App

                                        Going one step further, we can look at creating a recipe app for storing our favorite foods in one place. Again, this can help you deepen your knowledge on CRUD operations, as well as persisting data through either local storage, or an actual database. You will also need to fetch data from an endpoint that you can display to the user, which helps you learn more about the fetch API and how promises work.

                                        

                                        ✨ Features:

                                        • Be able to add new recipes to a list
                                        • Be able to specify a list of ingredients for the recipe
                                        • Be able to specify the difficulty
                                        • Be able to specify a prep time
                                        • Be able to add an image for a recipe

                                        �� Takeaways:

                                        • Navigation between routes (recipes and a single recipe)
                                        • Displaying data from JavaScript through HTML
                                        • Data storage through the Local Storage API, or a database
                                        • Fetching data from a remote data source

                                        �� Resources:

                                        #73 — Create a Flashcard App

                                        If you also want to learn something else while you are learning JavaScript, then you might want to look into building a flashcard application. You can also enhance this app with some gaming elements, such as a scoring system, or achievement board. With this project, you will learn about fetching data from an API and using that to generate the flashcards, as well as handling card states and click events.

                                        

                                        ✨ Features:

                                        • Be able to scroll through a list of flashcards
                                        • Be able to click on a flashcard and see the answer
                                        • Advanced:
                                          • Be able to select an answer from a list of predefined answers
                                          • Be able to see scores based on the correct and incorrect answers

                                          �� Takeaways:

                                          • Fetching data from an API
                                          • Using the data to generate flashcards
                                          • Building components
                                          • Handling card states and click events
                                          • Implementing a scoring system
                                          • Storing scores

                                          �� Resources:

                                          #74 — Create a Meditation App

                                          The earliest records of meditation are found in the ancient Hindu writings called Vedas that are thought to be composed somewhere between 1500-1200 BE. It is an ancient practice that is known to have many positive effects on health, such as reduced stress levels, anxiety, depression, and pain.

                                          So why not try to look into building a meditation app that can help us practice it? With this project, you can learn more about how to work with timers or how to play sounds using the web audio API.

                                          

                                          ✨ Features:

                                          • Be able to set a timer for meditation
                                          • Be able to play a set of meditation songs from a playlist
                                          • Be able to save settings, such as the timer
                                          • Advanced:
                                            • Be able to create custom playlists
                                            • Be able to modify existing playlists

                                            �� Takeaways:

                                            • Timers
                                            • Web Audio API
                                            • Local Storage API for persisting data

                                            �� Resources:

                                            #75 — Create a Book Note-Taking App

                                            Do you have a collection of books that you would like to take notes on? You can take on this project to build a book list, or a book note-taking app. You will be able to create, remove and store books for later use. With this project, you will learn about how to work with classes and persist your data throughout page reloads with the help of local storage.

                                            

                                            ✨ Features:

                                            • Be able to add books to a list
                                            • Be able to remove books from the list
                                            • Be able to store the books in local storage

                                            �� Takeaways:

                                            • Classes
                                            • Event listeners
                                            • Local storage API

                                            �� Resources:

                                            #76 — Create an Activity Tracker

                                            An activity tracker helps you keep track of your activities in order to make you more aware of your everyday habits. Building this project can help you become more familiar with the Date API, and helps you understand how to work with charts and persisting data for later use.

                                            A great tool that is similar to this project is called Webtime Tracker. It can help you discover your browsing habits so you can better understand where you spend the most time.

                                            

                                            ✨ Features:

                                            • Be able to track activities with a key (name), and value, eg.: Steps: 6551
                                            • Be able to visually see the activity with a chart
                                            • Advanced:
                                              • Be able to switch between days, weeks, and months

                                              �� Takeaways:

                                              • Storing data in the browser or on a server
                                              • Date API
                                              • Visualizing data with charts

                                              �� Resources:

                                              #77 — Create a Random JSON Response Generator

                                              Rather want to create a tool that helps other developers or even your own workflow? Probably you will work a lot with JSON responses. Building a random JSON response generator can not only help you learn JavaScript through a project but can also help your own journey along the way.

                                              In this project, you will mostly learn with string interpolation, and getting JavaScript to execute functions based on certain values. Eg.: <> should generate a random name, while <> should generate a random email address.

                                              ✨ Features:

                                              • Be able to generate random JSON responses given a schema
                                              • Be able to download the generated response

                                              �� Takeaways:

                                              • Loops
                                              • String interpolation
                                              • Working with JSON

                                              �� Resources:

                                              #78 — Create a Piano

                                              If you want to learn more about the web audio API, building a piano is a great way to start. With the help of this project, you will learn how to play different sounds through click and keyboard events. If you want to take this project one step further, you can also look into building the entire project out on a canvas.

                                              

                                              ✨ Features:

                                              • Be able to click on the keyboard that plays back the appropriate sound
                                              • Be able to play the piano with your keyboard
                                              • Be able to adjust the volume of the sound

                                              �� Takeaways:

                                              • Web Audio API
                                              • Canvas API, if drawn on Canvas

                                              �� Resources:

                                              #79 — Create an App for Writers

                                              If you are an avid writer, then you may want to also look into a project that helps to improve your writings. Similar to the famous Hemingway app, you can take a look at how to highlight errors, sentences that are hard to read or long, or things like passive voice or fillers that don’t provide any information.

                                              If you choose this project as your next challenge, you can learn a lot about working with a WYSIWYG editor and not to mention natural language processing.

                                              

                                              ✨ Features:

                                              • Be able to use a WYSIWYG editor to write text
                                              • Be able to see the word count
                                              • Be able to see the reading time
                                              • Be able to see the readability
                                              • Advanced:
                                                • Be able to see sentences highlighted in red that are very hard to read
                                                • Be able to see sentences highlighted in yellow that are long and hard to read
                                                • Be able to see words highlighted in purple that have simpler alternatives
                                                • Be able to see empty words highlighted in orange
                                                • Be able to see passive voice highlighted in green

                                                �� Takeaways:

                                                • Working with a WYSIWYG editor
                                                • Natural language processing

                                                �� Resources:

                                                #80 — Create a JSON – CSV Converter

                                                Want to deepen your knowledge of JSON? Try building a JSON to CSV converter that can prove to be useful for other situations as well. In this project, you will need to work with both JSON and CSV files, look at formatting and parsing data, and figuring out how to convert from one to another.

                                                

                                                ✨ Features:

                                                • Be able to convert JSON files to CSV
                                                • Be able to format the JSON
                                                • Be able to convert the CSV back to JSON
                                                • Be able to download the generated file

                                                �� Takeaways:

                                                • Working with JSON
                                                • Working with CSV
                                                • Formatting data
                                                • Parsing data

                                                �� Resources:

                                                #81 — Create a Markdown → HTML Converter

                                                We’ve already looked at JSON to CSV, but you can also have fun with Markdown and HTML. You will learn how to parse Markdown, and based on the generated tokens, you can generate the HTML file. If you would like some more challenges, you can also look into generating HTML files back to Markdown.

                                                

                                                ✨ Features:

                                                • Be able to convert Markdown into HTML
                                                • Be able to preview the generated HTML
                                                • Be able to download the generated HTML
                                                • Advanced:
                                                  • Be able to convert HTML back to Markdown

                                                  �� Takeaways:

                                                  • Working with Markdown
                                                  • Parsing data

                                                  �� Resources:

                                                  #82 — Create an Image Filter App with CSS Filters

                                                  If you would rather work with images, then you might want to take a look into building an image filter app. Here you can learn more about the different CSS filters available, how to work with the Canvas API, and more specifically, how to work with image data.

                                                  

                                                  ✨ Features:

                                                  • Be able to select an image for filtering
                                                  • Be able to select the filter from a list of predefined effects
                                                  • Advanced:
                                                    • Be able to adjust the strength of the filter
                                                    • Be able to download the filtered image

                                                    �� Takeaways:

                                                    • CSS Filters
                                                    • Canvas API
                                                    • Working with image data

                                                    �� Resources:

                                                    #83 — Create a Drawing App

                                                    Talking of canvas, another fun project is about building a drawing application. You can really go wild and implement all sorts of functionality to increase the complexity of this project. How about switching to different colors, or setting brush sizes and hardness? Don’t forget to also add the ability to download the masterpieces!

                                                    

                                                    ✨ Features:

                                                    • Be able to draw on a canvas using a mouse
                                                    • Be able to switch between colors
                                                    • Advanced:
                                                      • Be able to set the size of the brush
                                                      • Be able to set the hardness of the brush (opacity)
                                                      • Be able to download the drawing

                                                      �� Takeaways:

                                                      • Canvas API
                                                      • Event listeners

                                                      �� Resources:

                                                      #84 — Create a Presentation App

                                                      We all used PowerPoint at one point in our life. With this project, we can take a look into how we can achieve the same using Reveal.js that also powers Slides which is built on top of that. With this project, you will learn how you can create slides and transition between them using JavaScript.

                                                      ✨ Features:

                                                      • Be able to create new slides using HTML
                                                      • Be able to transition between slides using mouse and keyboard navigation

                                                      �� Takeaways:

                                                      • Animations
                                                      • Working with Reveal.js

                                                      �� Resources:

                                                      #85 — Create a “Best Places to Go” App

                                                      Want to find out what is the best place to go in your town? You can use Google’s places API to request the data and display it as you like. In the meantime, you will learn about how to work with an external API, request the data you need, then sort and filter the dataset. The places API also returns a subset of the whole data, so you need to do pagination to get everything.

                                                      ✨ Features:

                                                      • Be able to fetch places from the Google Places API
                                                      • Be able to dynamically set a location using latitude and longitude values
                                                      • Be able to dynamically set a radius to use for the location
                                                      • Be able to dynamically set the type of location to fetch, eg.: restaurant, bar, etc.

                                                      �� Takeaways:

                                                      • Google Places API
                                                      • Fetch API
                                                      • Pagination
                                                      • Filtering and sorting
                                                      • Working with latitude and longitude

                                                      �� Resources:

                                                      #86 — Create a Poll App

                                                      If you want to learn a bit about user identification, then you can think about building a poll app where each user can vote only one time. For storing the data, you probably want a server if you would like to make the app usable on every device, but if you are just trying to learn more about JavaScript, then it’s a great start to first implement this app using local storage.

                                                      

                                                      ✨ Features:

                                                      • Be able to generate polls from a JavaScript object
                                                      • Be able to see the distribution of votes in percentage
                                                      • Be able to vote on a single item only
                                                      • Be able to store votes and retrieve them, even after reload
                                                      • Advanced:
                                                        • Be able to prevent users from voting again, based on user identification

                                                        �� Takeaways:

                                                        • Local Storage API
                                                        • Click events
                                                        • User identification
                                                        • Displaying data from JavaScript

                                                        �� Resources:

                                                        #87 — Create an Image Cropper

                                                        If you are looking for more projects that deal with images, then an image cropper might just be the right fit for you. Here you can learn a lot about image manipulation: how to crop images, how to work with aspect ratios, with flips and rotation. Lastly, if you want to keep the result, you can also look into implementing a download functionality for the image.

                                                        

                                                        ✨ Features:

                                                        • Be able to select an image for cropping
                                                        • Be able to select the crop area for the image
                                                        • Be able to select an aspect ratio
                                                        • Advanced:
                                                          • Be able to flip and rotate the image
                                                          • Be able to save the changes to a file

                                                          �� Takeaways:

                                                          • Canvas API
                                                          • Manipulating image data

                                                          �� Resources:

                                                          #88 — Create a Web Scraper

                                                          Web scraping is done when a site doesn’t expose a public API from where we can query data from. It is done by requesting a website and then reading the DOM in order to get the necessary data from there. From this project, you can learn how to work with Cypress to scrape a website for data and collect all the necessary information into an array of objects.

                                                          ✨ Features:

                                                          • Be able to hit a webpage and scrape data from it
                                                          • Be able to collect the data into JavaScript objects
                                                          • Advanced:
                                                            • Be able to convert the collected data into a JSON object that can be downloaded to a JSON file

                                                            �� Takeaways:

                                                            • Cypress
                                                            • Reading and parsing the DOM

                                                            �� Resources:

                                                            #89 — Create a News Aggregator

                                                            By creating a news aggregator, you can see all of the most important news in one feed. With this project, you can learn how to work with the fetch API in order to source and combine data from multiple sources, and display them in a feed.

                                                            ✨ Features:

                                                            • Be able to collect news from multiple sources
                                                            • Be able to see the original source of the article
                                                            • Be able to see the title and a cover image for the story

                                                            �� Takeaways:

                                                            • Fetch API
                                                            • Sourcing data from multiple endpoints

                                                            �� Resources:

                                                            #90 — Create a Password Generator

                                                            Having a hard time coming up with new passwords? Try building a password generator that will let you quickly create a secure one. With this project, you will learn more about working with strings and arrays, how to implement sliders, and finally, how to generate a password based on the provided settings.

                                                            

                                                            ✨ Features:

                                                            • Be able to generate a random password from the letters of the English alphabet
                                                            • Be able to use uppercase letters
                                                            • Be able to use numbers
                                                            • Be able to use symbols
                                                            • Be able to copy the generated passwords to the clipboard
                                                            • Advanced:
                                                              • Be able to set the length of the password

                                                              �� Takeaways:

                                                              • Strings and arrays
                                                              • Sliders
                                                              • Copying text to clipboard

                                                              �� Resources:

                                                              #91 — Create a Resource Network App

                                                              Want to learn more about working with graphs and data visualization? You can look into building a resource network app where each document can be connected, and its connections are visualized by a network graph. Documents that are referenced the most are emphasized so you can easily spot cornerstone content at a glance.

                                                              

                                                              ✨ Features:

                                                              • Be able to create new documents
                                                              • Be able to edit existing documents
                                                              • Be able to remove existing documents
                                                              • Be able to link documents to each other
                                                              • Be able to visualize documents as a network
                                                              • Be able to see connections between documents

                                                              �� Takeaways:

                                                              • CRUD operations
                                                              • Working with D3
                                                              • Working with SVGs

                                                              �� Resources:

                                                              #92 — Create a Journaling App

                                                              A great example of this project is Minidiary, which was also written in JavaScript. Unfortunately, the project is not maintained anymore, but we can try to replicate it ourselves and see what we can learn on the way.

                                                              Namely, you will be closely working with the Date API and a WYSIWYG editor. For keeping data, you can look at either the local storage API for a simple solution or if you want to take it to another level, implement it in Electron to create a desktop experience. This way, you can also learn more about the file system API.

                                                              

                                                              ✨ Features:

                                                              • Be able to create new entries
                                                              • Be able to format the text inside the entries
                                                              • Be able to visually see on the calendar which day contains an entry
                                                              • Be able to search for entries
                                                              • Advanced:
                                                                • Be able to see statistics about total word count, and number of entries
                                                                • Be able to store the data in a file

                                                                �� Takeaways:

                                                                • Date API
                                                                • Working with a text editor
                                                                • Local storage / File system API

                                                                �� Resources:

                                                                #93 — Create a Time Tracker App

                                                                Want to time block your day to manage your time better? Build a time tracker app where you can start tracking activities, and you can see with an overview of what really takes up most of your time in a day. You can also become more mindful of distractions. You will learn about working with timers in this project, and if you want to go the extra mile, you can look into data visualization as well using charts.

                                                                

                                                                ✨ Features:

                                                                • Be able to start a timer
                                                                • Be able to stop the timer
                                                                • Be able to name the time block
                                                                • Be able to see in an ordered list which time block took the most time

                                                                �� Takeaways:

                                                                • Timers
                                                                • Sorting arrays
                                                                • Advanced:
                                                                  • Working with charts

                                                                  �� Resources:

                                                                  #94 — Create a Mind Map

                                                                  A mind map is a great way to visualize your ideas and see where you are now, and where do you want to be. With the help of this project, you can learn more about how to work with D3.js to visualize graphs and make them interactive.

                                                                  

                                                                  ✨ Features:

                                                                  • Be able to generate a dendrogram based on an array of objects
                                                                  • Be able to dynamically add new nodes to the dendrogram
                                                                  • Be able to remove existing nodes from the dendrogram

                                                                  �� Takeaways:

                                                                  • Working with D3.js
                                                                  • Working with SVGs

                                                                  �� Resources:

                                                                  #95 — Create a Code Challenge App

                                                                  If you really want to dive into coding, then one of the best ways to do it is to build an app that challenges you to write functioning code. A similar tool to this is called CodeWars where you have to solve code challenges by following a set of instructions. As part of this project, try to build a similar tool where the user can write code that can be executed and verified.

                                                                  

                                                                  ✨ Features:

                                                                  • Be able to execute written JavaScript code
                                                                  • Be able to evaluate the output of the JavaScript code
                                                                  • If the return value matches the expected value, the solution should get an accepted status
                                                                  • If the return value doesn’t match the expected value, the solution should get an unaccepted status

                                                                  �� Takeaways:

                                                                  • Working with text editors
                                                                  • Executing strings as JavaScript
                                                                  • Evaluating return values

                                                                  �� Resources:

                                                                  #96 — Create a Family Tree App

                                                                  If you are the type of developer who is all into binary trees, then you needed to scroll through all 95 projects in order to get to the one where you can finally work with one.

                                                                  In this project, try to build an interactive family tree where you can create new branches by adding and editing members. You can also look into exporting and importing the data to JSON to make the data portable.

                                                                  

                                                                  ✨ Features:

                                                                  • Be able to create a new tree from scratch
                                                                  • Be able to add members to the tree
                                                                  • Be able to specify an image, a name, and a DOB for each entry
                                                                  • Be able to edit existing members of the tree
                                                                  • Be able to remove branches
                                                                  • Advanced:
                                                                    • Be able to export the data as a JSON file
                                                                    • Be able to import data from a JSON file

                                                                    �� Takeaways:

                                                                    • Binary trees
                                                                    • Storing and managing JSON files

                                                                    �� Resources:

                                                                    #97 — Create a PDF Generator

                                                                    Want to dive deeper into how HTML works? You can look into building a PDF generator that will require you to parse HTML data in order to dynamically build the PDF files. If you want to make the app more accessible and usable by users, then you can also look into integrating a WYSIWYG editor to make the generated PDF editable, like in the screenshot below:

                                                                    

                                                                    ✨ Features:

                                                                    • Be able to fill in an A/4 card with content
                                                                    • Be able to convert the card into a PDF
                                                                    • Be able to download the generated PDF

                                                                    �� Takeaways:

                                                                    • Working with PDF
                                                                    • Working with a text editor
                                                                    • Parsing HTML

                                                                    �� Resources:

                                                                    #98 — Create a Timetable App

                                                                    If you have finished the calendar project, or you have already worked with a calendar before, then this project will feel similar to you. It is an extension of a calendar where you can visually see the different tasks you have throughout the day. By taking on this project, you will become deeply familiar with how the date API works, as well as how to work with tables and grids.

                                                                    

                                                                    ✨ Features:

                                                                    • Be able to create entries on a timetable
                                                                    • Be able to update existing entries inside the calendar
                                                                    • Be able to assign a color to an entry
                                                                    • Be able to delete entries
                                                                    • Be able to navigate the calendar

                                                                    �� Takeaways:

                                                                    • Date API
                                                                    • CRUD operations
                                                                    • Working with tables and grids

                                                                    �� Resources:

                                                                    #99 — Create a Business Card Collector App

                                                                    Keep losing your business cards? Why not keep them in one place digitally? By building this project, you can learn more about CRUD operations, and how to work with the local storage API to keep all of your data in your browser, even after leaving the page. Want to reach it from elsewhere? You can also look into hosting it in the cloud and uploading the data into a database.

                                                                    ✨ Features:

                                                                    • Be able to upload new business cards
                                                                    • Be able to remove existing business cards
                                                                    • Be able to edit existing business cards
                                                                    • Advanced:
                                                                      • Be able to search for business cards

                                                                      �� Takeaways:

                                                                      • CRUD operations
                                                                      • Local storage API

                                                                      �� Resources:

                                                                      #100 — Create a Frontend Project Challenge Generator

                                                                      And we’ve reached the final project idea, an app that generates project ideas just like this list. You can already check out one that was inspired by this article at uichallenge.dev. Creating the app came with its own challenges too. So what are the takeaways?

                                                                      

                                                                      ✨ Features:

                                                                      • Be able to see the number of total projects
                                                                      • Be able to randomly choose a project from a list of projects
                                                                      • Be able to randomly generate technologies and tools to use for the project
                                                                      • Be able to send in new projects via email

                                                                      �� Takeaways:

                                                                      • Routing
                                                                      • Fetching data from a JSON
                                                                      • Working with random numbers

                                                                      �� Resources:

                                                                      Conclusion

                                                                      You can take this list one step further and convert these project ideas from JavaScript to your favorite framework or library, whether be it React, Angular, Vue, or Svelte. For extra difficulty, you can throw in some syntactic sugar with TypeScript, or use GraphQL to source your data.

                                                                      Do you have any project ideas that you think are missing from this page? Let us know in the comments below, or add them on uichallenge.dev! Have you already worked on one of these projects? Share them with us in the comments below! Thank you for taking the time to read through, happy coding!

                                                                      Want to get webtips to your mailbox? ��

                                                                      Subscribe to our newsletter! Unsubscribe anytime.

                                                                      We don't spam. You will only receive information relevant to you.

                                                                      Receive Webtips Please provide a valid email address. You are already subscribed to our newsletter. �� Thank you for subscribing to our newsletter. Check your inbox to confirm your email address.

                                                                      

                                                                      Tired of looking for tutorials?

                                                                      You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

                                                                      Check out our interactive course to master JavaScript in less time.

                                                                      Recommended

                                                                      

                                                                      How to Recreate Tic-Tac-Toe in Vanilla JavaScript

                                                                      Building games in vanilla JavaScript

                                                                      

                                                                      JavaScript vs JSX — What are the Differences?

                                                                      Understanding how JSX works

                                                                      

                                                                      How to Generate TypeScript Types From GraphQL

                                                                      Automatically keeping your types in sync between your frontend and backend

                                                                      

                                                                      report this ad

                                                                      Newsletter

                                                                      

                                                                      report this ad Want to get webtips to your mailbox? ��

                                                                       
                                                                      Похожие публикации:

                                                                      1. Как играть в майнкрафт через radmin vpn
                                                                      2. Как изменить имя в яндекс почте
                                                                      3. Как открыть командный интерфейс в 1с
                                                                      4. Как сделать чтобы вентилятор не крутился