https://github.com/rvburov/online-product-table-calculator
Таблица товаров с калькулятором и возможностью скачивания
https://github.com/rvburov/online-product-table-calculator
css html javascript
Last synced: 2 months ago
JSON representation
Таблица товаров с калькулятором и возможностью скачивания
- Host: GitHub
- URL: https://github.com/rvburov/online-product-table-calculator
- Owner: rvburov
- Created: 2024-10-13T12:48:08.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-02-09T02:32:14.000Z (3 months ago)
- Last Synced: 2025-02-09T03:25:06.095Z (3 months ago)
- Topics: css, html, javascript
- Language: JavaScript
- Homepage: https://rvburov.github.io/online-product-table-calculator
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Таблица товаров с калькулятором и возможностью скачивания
## Описание проекта
Этот проект представляет собой динамическую таблицу товаров, где можно вводить стоимость и наценку в процентах для каждого товара, и автоматически рассчитывается стоимость с наценкой. Все данные можно редактировать, и в конце работы возможно скачать таблицу в формате CSV.
## Основные функции
- Динамическая таблица с возможностью ввода стоимости и наценки.
- Автоматический пересчет стоимости с наценкой.
- Кнопка для скачивания данных в формате CSV.
- Возможность загружать собственные данные в формате CSV.
## Структура проекта
- `index.html` — основной файл проекта с таблицей и кнопкой для скачивания.
- `styles.css` — стили для страницы, в том числе стили для адаптации под мобильные устройства.
- `script.js` — основной JavaScript файл, который обрабатывает данные и выполняет все действия по расчету и загрузке.
- `data.csv` — файл с данными товаров, который можно изменять по своему усмотрению.
## Требования
- Любой современный браузер (Chrome, Firefox, Safari, Edge и т.д.).
- Веб-сервер для работы с локальными файлами (например, `Live Server` в VSCode или `http-server` в Node.js), чтобы избежать проблем с CORS при загрузке CSV файла.
## Установка и запуск
### 1. Загрузка проекта
Скачайте или клонируйте репозиторий на ваше локальное устройство:
```bash
git clone https://github.com/ваш_репозиторий.git
cd ваш_репозиторий
```
### 2. Подготовка CSV файла
Файл `data.csv` содержит информацию о товарах, которые будут загружены в таблицу. Структура файла выглядит следующим образом:
```csv
Наименование товара,Классификация товара,Категория,Единица измерения,Стоимость,Наценка
Товар1,Классификация1,Категория1,1 шт,100,10
Товар2,Классификация2,Категория2,1 кг,200,15
```
Вы можете изменять этот файл по своему усмотрению, добавляя или удаляя товары. Убедитесь, что структура CSV файла сохраняется.
### 3. Запуск локального сервера
Так как браузеры могут блокировать загрузку локальных файлов по протоколу `file://`, рекомендуется запустить проект через локальный сервер. Есть несколько способов сделать это:
#### Использование Python:
```bash
python3 -m http.server
```
Откройте ваш браузер и перейдите по адресу `http://localhost:8000`.
#### Использование VSCode Live Server:
1. Установите расширение `Live Server` в VSCode.
2. Откройте проект в VSCode и нажмите "Go Live" внизу окна.
#### Использование Node.js (http-server):
1. Установите `http-server`:
```bash
npm install -g http-server
```
2. Запустите сервер:
```bash
http-server
```
3. Откройте `http://localhost:8080` в вашем браузере.
### 4. Использование программы
1. Откройте проект в браузере через локальный сервер.
2. В таблице появятся данные из файла `data.csv`.
3. Введите стоимость и наценку для каждого товара.
4. Программа автоматически рассчитает стоимость с наценкой.
5. После редактирования данных вы можете скачать обновлённую таблицу, нажав на кнопку "Скачать CSV".
6. Файл CSV будет содержать все введённые вами данные и может быть загружен для дальнейшей работы.
### 5. Изменение данных
Чтобы изменить товары в таблице:
1. Отредактируйте файл `data.csv`, добавив или изменив товары.
2. После обновления данных перезагрузите страницу — новые товары появятся в таблице.
### Пример содержимого `data.csv`
```csv
Наименование товара,Классификация товара,Категория,Единица измерения,Стоимость,Наценка
Товар1,Классификация1,Категория1,шт,100,10
Товар2,Классификация2,Категория2,кг,150,5
Товар3,Классификация3,Категория3,л,200,12
```
### Примечание
- Если структура файла CSV нарушена (например, добавлены лишние столбцы или некорректные данные), программа может некорректно работать. Убедитесь, что ваш файл CSV соответствует заданному формату.
## Лицензия
Этот проект распространяется по лицензии MIT.