Учебная коллекция мини-проектов на чистом JavaScript для практики работы с DOM, событиями и основными концепциями языка.
| № | Проект | Описание | Ссылка |
|---|---|---|---|
| 1 | Простой счетчик | Простой счетчик ++i и --i | Ссылка |
| 2 | Светофор | Переключается свет по нажатию кнопки или через промежуток времени | Ссылка |
| 3 | Генератор случайных чисел | Генерация случайного целого числа между двумя задаными | Ссылка |
| 4 | TODO List | Список задач с возможностями добавления, редактирования, удаления | Ссылка |
| 5 | Timer | Таймер для засекания времени и обратного отсчета | Ссылка |
| 6 | Quiz | Квиз | Ссылка |
| 7 | Weather app | приложение для поиска погоды | Ссылка |
| ... больше в процессе! |
Этот репозиторий создан для:
- Практики основ JavaScript (ES6+).
- Изучения работы с DOM (создание, изменение, удаление элементов).
- Обработки событий (клики, ввод, таймеры и т.д.).
- Создания простых и интерактивных веб-интерфейсов.
- Систематизации учебных проектов в одном месте.
- HTML5
- CSS3 (Flexbox, Grid, анимации)
- Vanilla JavaScript (нативный JS без фреймворков)
- Склонируйте репозиторий:
git clone https://github.com/your-username/js-mini-projects.git
- Перейдите в папку проекта:
cd js-mini-projects - Откройте файл
index.htmlв вашем браузере, чтобы увидеть список всех проектов. - Переходите по ссылкам к конкретным проектам и изучайте их код.
js-mini-projects/
│
├── 📄 index.html # Главная страница со списком всех проектов
├── 🎨 style.css # Общие стили для главной страницы
├── 📖 README.md # Этот файл
│
└── 📁 projects/ # Папка со всеми проектами
│
├── 📁 counter/ # Проект 1: Счётчик
│ ├── 📄 index.html
│ ├── 🎨 style.css
│ └── ⚙️ script.js
│
├── 📁 traffic-light/ # Проект 2: Светофор
│ ├── 📄 index.html
│ ├── 🎨 style.css
│ └── ⚙️ script.js
│
├── 📁 todo-list/ # Проект 3: Список дел
│ ├── 📄 index.html
│ ├── 🎨 style.css
│ └── ⚙️ script.js
│
└── ... # Папки для будущих проектов
- Создайте новую папку внутри директории
projects/(например,calculator). - Внутри этой папки создайте стандартные файлы:
index.html,style.css,script.js. - Реализуйте функционал вашего мини-проекта.
- Не забудьте добавить ссылку на ваш новый проект в общий список на главной странице (
index.htmlв корне) и в этот README.md.
Этот репозиторий предназначен для учебных целей. Используйте код свободно.