/checklist

This project is a circular progress indicator built with SVG and CSS (LESS). The component dynamically displays the percentage of task completion based on the total number of tasks and the number of tasks completed. The project includes environment setup, code quality checks, and automated build using various tools.

Primary LanguageLess

Тестовое задание от компании Stworka

HTML5 Less Webpack

Данный проект представляет собой круговой компоненто прогресса, реализованный с использованием SVG и CSS (LESS). Компонент отображает процент выполнения задач, основываясь на общем количестве задач и количестве выполненных задач. Проект включает настройку окружения для разработки, проверку качества кода и автоматическую сборку проекта с помощью различных инструментов.

Содержание

Используемые технологии

  • HTML: для создания структуры компонента.
  • LESS: для стилизации и динамических вычислений.
  • HTMLLinter: для проверки HTML-кода на соответствие общепринятым стандартам.
  • Prettier: для автоматического форматирования кода.
  • StyleLint: инструмент для линтинга таблиц стилей.
  • CommitLint: для проверки сообщений коммитов на соответствие общепринятым стандартам.
  • Husky: для управления git-хуками.
  • Webpack: для сборки и обслуживания проекта.

Инструкция по установке

Для локальной настройки проекта выполните следующие шаги:

  1. Клонируйте репозиторий:
git clone https://github.com/NotACat1/checklist.git
  1. Установите зависимости:
npm install
  1. Установите Husky:
npx husky install

Работа с проектом

Скрипты для работы с проектом

Запуск проекта:

npm start

Запускает сервер разработки Webpack и автоматически открывает проект в браузере.

Сборка проекта для разработки:

npm run build

Выполняет сборку проекта в режиме разработки.

Сборка проекта для продакшн:

npm run production

Выполняет сборку проекта в режиме продакшн.

Линтинг LESS-файлов:

npm run lint:less

Проверяет файлы LESS на соответствие стандартам стилей.

Линтинг HTML-файлов:

npm run lint:html

Проверяет HTML-файл на соответствие стандартам.

Форматирование кода:

npm run format

Форматирует код с помощью Prettier.

Деплой на GitHub Pages:

npm run deploy

Сначала выполняет сборку проекта для продакшн, затем деплоит собранный проект на GitHub Pages.

Предварительный деплой:

npm run predeploy

Сценарий для предварительного деплоя, выполняет сборку проекта для продакшн.

Предварительный коммит:

npx lint-staged

Выполняет линтинг и форматирование файлов перед коммитом.

Редактирование проекта

Для настройки значений общего количества задач и выполненных задач отредактируйте файл component.less:

// ./src/blocks/component.less

@total-tasks: 7; // Общее количество задач
@completed-tasks: 3; // Выполненные задачи

Переменные @total-tasks и @completed-tasks используются для вычисления процента выполнения, который отображается в центре круга прогресса.