10 идей для вайб-кодинга на пару свободных часов

Есть кодинг по задаче. А есть — по вайбу.

Вайб-кодинг — это когда вы садитесь за ноут не потому, что надо, а потому что хочется. Без целей, дедлайнов и фич-реквестов. Просто чтобы почувствовать, как работает браузер, как оживает DOM, как строчка за строчкой рождается нечто, чего не было.

Это может быть бесполезно с точки зрения результата, но не бессмысленно. Хороший вайб-проект — это миниатюрная лаборатория, где вы пробуете новые подходы, фреймворки, библиотеки. Или наоборот — возвращаетесь к HTML и CSS, чтобы снова почувствовать радость простоты.

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

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

1. Мини-трекер задач, который не бесит

Вам не нужен ещё один Trello. Вам нужно просто: добавил задачу, перетащил, сделал.

Что это: минималистичная канбан-доска, без регистрации, смс и коллабораций. Просто доска с тремя колонками: To Do, In Progress, Done. Всё хранится локально. Работает быстро, ничего не забывает.

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

Основные функции:

• Сетка колонок — обычный CSS Grid или Flex.
• Карточки — div, таскаются с помощью drag & drop API или Sortable.js.
• Новая задача — через prompt() или инпут снизу.
• Данные сохраняются в localStorage, ничего не теряется после перезагрузки. \

С чего начать: how to build a draggable kanban board with HTML CSS JavaScript and save state in localStorage

2. Pomodoro-таймер, который не отвлекает

*25 минут работы, 5 минут перерыва. Всё. *

Что это: фокус-таймер по методу Pomodoro, без лишнего. Большие цифры, чёткий звук в конце сессии, автоматический переход на перерыв. И счётчик помидорок за день.

Чем полезно: прокачивает дисциплину и концентрацию. Отличный инструмент, чтобы не залипать в задачах бесконечно.

Основные функции:

• Таймер через setInterval, с отображением оставшегося времени.
• Разные режимы: работа / короткий перерыв / длинный перерыв.
• Переключение состояний — по кнопке или автоматически.
• Прогресс — через эмоджи 🟥🟥🟥.

С чего начать: vanilla JavaScript pomodoro timer with start stop reset and automatic breaks logic

3. Трекер привычек с простым календарём

Пить воду. Делать зарядку. Читать 5 страниц. Тыкай клеточку — фиксируй момент.

Что это: календарь на 7 или 30 дней, где вы можете отметить выполнение действия. Цветовая шкала — чем больше подряд, тем ярче. Можно вести несколько привычек.

Чем полезно: даёт ощущение прогресса. Очень просто заводится, а значит, велика вероятность, что вы реально будете этим пользоваться.

Основные функции:

• Сетка — HTML-таблица или CSS Grid.
• По клику по ячейке — сохраняется выполнение (меняется цвет, ставится галочка)/
• Подсчёт стриков: сколько дней подряд.
• Данные — в localStorage.

С чего начать: javascript habit tracker with streak logic and color heatmap stored in localStorage

4. Генератор паролей с настройками

Не надо страдать, придумывая пароли. Пусть браузер страдает.

Что это: программка для генерации надёжных паролей: по длине, с цифрами, спецсимволами, большими и маленькими буквами. Одно нажатие — и в буфер.

Чем полезно: быстро, безопасно, удобно. Особенно если нужно сгенерировать пароль родителям или зарегистрироваться на подозрительном сайте.

Основные функции:

• Чекбоксы: цифры, буквы, спецсимволы.
• Ползунок для длины.
• Генерация — по массивам символов и Math.random().
• Кнопка «Скопировать» — через navigator.clipboard.

С чего начать: build secure password generator in JavaScript with options and clipboard support

5. Трекер времени по задачам

Хотите понять, куда уходит день? Засекайте прямо по задачам.

Что это: мини-приложение, где вы создаёте задачу и запускаете на неё таймер. Таймеры можно ставить на паузу, завершать, удалять. Всё — локально и понятно.

Чем полезно: подходит для фрилансеров, студентов и всех, кто хочет начать осознанно тратить своё время.

Основные функции:

• Каждая задача — объект с названием и временем.
• Таймер — через setInterval, с учётом паузы и возобновления.
• Вывод списка задач с потраченным временем.
• Сохранение в localStorage.

С чего начать: javascript task time tracker with start pause resume and persistent storage

6. Конвертер валют с автообновлением

100 долларов — это сколько сейчас? Два клика — и вы знаете.

Что это: мини-приложение, которое показывает текущий курс между двумя валютами и сразу пересчитывает введённую сумму. Работает на бесплатном API, можно выбирать пары, менять местами, обновлять вручную.

Чем полезно: нужно купить что-то в другой валюте — открыли, посмотрели. Работаете с зарубежными заказами — быстро посчитали оплату.

Основные функции:

• Два выпадающих списка с валютами (например, USD и RUB).
• Поле ввода суммы.
• Запрос к API.
• Автоматическое пересчитывание при любом изменении.
• Кнопка «Обновить курс».

С чего начать: create a currency converter using JavaScript and exchangerate.host API with dropdown selection and live update

7. Редактор заметок в браузере

Вспомнил идею — записал. Не переключаясь. Не забывая.

Что это: простой Markdown-блокнот с превью и локальным хранилищем. Подходит для всего: от рецептов до мыслей во время созвона. Всё сохраняется прямо в браузере.

Чем полезно: универсальный инструмент. Быстро зафиксировали мысль — потом вернулись. Не надо искать файлы или переключаться в Notion.

Основные функции:

• Текстовая область для ввода Markdown.
• Отображение отрендеренного текста рядом (через marked.js).
• Кнопка «Сохранить» — сохраняет в localStorage.
• Кнопка «Новая заметка» — создаёт пустую.
• Можно сделать список всех заметок. \

С чего начать: build a markdown notes app in JavaScript with live preview and localStorage

8. Трекер расходов — куда уходят деньги

Купил кофе, ещё один — и где твои деньги? Этот трекер покажет.

Что это: мини-приложение для учёта трат. Поля: сумма, категория, описание. Список всех расходов, общая сумма, фильтрация по категориям.

Чем полезно: понимание, на что уходят деньги. Особенно помогает в начале месяца — или перед отпуском.

Основные функции:

• Поля ввода: сумма, категория, комментарий.
• Таблица трат.
• Расчёт общей суммы и по категориям.
• Сохранение в localStorage.
• Бонус: график на canvas или через Chart.js.

С чего начать: create personal expense tracker using HTML CSS JavaScript and localStorage with category filters and total calculation

9. Планер питания на неделю

Чтобы каждый день не было «что приготовить». Всё уже спланировано когда-нибудь там ещё.

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

Чем полезно: экономит кучу времени. Один раз сели, заполнили на неделю — и больше не думаете каждый вечер «что поесть».

Основные функции:

• Таблица: 7 строк (дни) и 3 столбца (завтрак, обед, ужин).
• Ячейки редактируются по клику.
• Сохранение в localStorage.
• Кнопка «очистить» и/или «распечатать» (window.print()).

С чего начать:
build editable weekly meal planner table using JavaScript and localStorage with print support

10. Калькулятор дедлайнов

Узнать, сколько осталось до экзамена, дедлайна или дня рождения кота.

Что это: добавляете важные даты — видите, сколько дней/часов до события. Можно использовать для работы, учёбы или жизни.

Чем полезно: держит в фокусе важное. Отлично работает как мотивация и как способ не забыть.

Основные функции:

• Поле ввода события и даты.
• Расчёт разницы в днях/часах (Date.now() vs new Date()).
• Список событий, отсортированный по дате.
• Цветовое выделение: срочные / не срочные.
• Сохранение в localStorage.

С чего начать: javascript countdown app for multiple events with date input and localStorage storage

Вывод

Вайб-кодинг — это когда вы входите в поток, не чтобы сделать что-то красивое, а чтобы сделать что-то полезное, при этом развлечься и провести время за любимым хобби. Без продакшна, без таск-трекера, без продакта и проджекта, который «а можно ещё одно уточнение?..». Просто посидеть с нейросетью, даже если никогда ничего не программировали.

Но если в результате появляется мини-приложение, которое экономит вам время, деньги или мозг — это уже не просто вайб. Это — прокачка.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.