Создайте настоящее мини-приложение: доска идей
От страницы к приложению
Всё, что вы делали до сих пор, было страницей: она отлично выглядела, реагировала на клики, но забывала всё в момент обновления. Сегодня это изменится. Вы создаёте своё первое настоящее приложение: данные поступают, данные отображаются и данные запоминаются.
В этом, кстати, весь секрет приложений. Три шага:
- Данные на входе — поле, куда пользователь что-то вводит
- Данные на экране — список, который обновляется
- Данные в памяти — хранилище, чтобы завтра всё было на месте
Когда вы вайб-кодите, вы описываете не проводку, а поток. Вот промпт, из которого рождается сегодняшний проект:
«Поле, куда я ввожу идею, кнопка, которая добавляет её в список ниже, и пусть список останется на месте, когда я вернусь завтра».
Это одно предложение говорит ИИ всё: нужны поле ввода, кнопка со слушателем кликов, список, в который добавляются элементы, и localStorage для части про «завтра». Вы описываете поток — ИИ берёт на себя ввод + список + хранение.
Приложение, которое вы строите, — доска идей: место, куда вы будете записывать каждый момент «стоп, я же могу собрать это с ИИ». Поверьте, после этого курса таких моментов будет много.
Инструкции
Добавьте <input id="idea-input"> с placeholder — сюда будут приходить идеи
Подсказка: Попробуйте: `<input id="idea-input" type="text" placeholder="I could build..." class="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm">`
Добавьте <button id="add-btn"> рядом с полем — триггер, который добавляет идею
Добавьте пустой <ul id="idea-list"> ниже — здесь идеи будут отображаться
В <script> слушайте клики по #add-btn: создайте <li> со значением поля ввода, добавьте его в список, затем очистите поле
Научите его помнить: сохраняйте массив идей в localStorage("vca-ideas") при каждом добавлении, а при открытии страницы загружайте и показывайте сохранённые идеи
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Добавьте <input id="idea-input"> с placeholder — сюда будут приходить идеи