Веб-додаток для обрахунку витрат за продукти

[roman_ternopil]

Бажаю поділитись із піплом своїм, так би мовити, "продуктом". Це веб-аплікація, яка дає змогу сформувати список продуктів із зазначенням ціни за одиницю та кількості або загальної вартості, а також підрахувати їх загальну вартість. Особисто я завжди користуюсь цією штуковиною, коли йду на ринок або на точку з овочами-фруктами, і дуже допомагає відстежувати витрати (раніше ніколи не міг за всім вслідкувати). Тому, подумав, можливо, ще комусь вона буде корисною.
Із основних можливостей:

• вибір режиму додавання продукту (приблизний обрахунок кількості при вказуванні загальної вартості та ціни продукту; обрахунок вартості продукту за кількістю та ціною; можливість вказати лише загальну вартість);
• кожен елемент списку підлягає редагуванню / вилученню (вікно редагування на клік по рядку списку);
• автоматичний обрахунок загальної вартості всіх продуктів (при додаванні / вилученні / редагуванні продукту);
• можливість скопіювати весь список у буфер обміну в один клік, щоб потім запейстити його куди завгодно (наприклад, зберегти в нотатках);
• стійкість до перезавантажень, закриття та нового відкриття владки, виходу із браузера (всі дані зберігаються у браузері в localStorage і парсяться при відкриванні/перезавантаженні сторінки);
• підказки при введенні назв продуктів (список підказок складає користувач);
• можливість задавати назву валюти та одиниць вимірювання кількості товару;
• підтримка української, російської та англійської мов;
• можливість бекапити налаштування разом зі списком підказок у файл.

Адаптовано в основному під мобільний браузер Google Chrome та інші мобільні браузера на Chromium (Kiwi, Opera, Bromite тощо).
P.S. Брався за цей проект ще кілька місяців тому, буквально через кілька тижнів після того, як почав освоювати JavaScript. Ще через деякий час дещо пофіксив, додав нові опції, і все працює зовсім адекватно (принаймні я користуюсь регулярно, і все гаразд, не глючить і не вилітає). Але, щоб ще розширити можливості, там багато чого треба буде переробити. Товариство, як гадаєте: чи цікавий цей проект і чи варто його розвивати?

 

[roman_ternopil]

В браузере Vivaldi для андроид не открывается совсем. Судя по скриншотам, нет русского языка.

хм, дивно. Щойно спеціально встановлював Vivaldi, і все працює (телефон – Redmi 5 Plus):

Судя по скриншотам, нет русского языка.

Так, наразі ще російської не додав (але планую). Думаю, буду переробляти і доробляти за кілька місяців (на той час вже підівчу Vue і, наприклад, Bootstrap), бо на чистих JavaScript, HTML, CSS працювати вже набридло: і довше, ніж було б на фреймворку, і нічого нового не навчаюсь))
Ще із функцій, які планую додати: вибір валюти, активація/деактивація підказок назв продуктів, формування користувацьких списків для підказок, вибір режиму додавання продукту за замовчуванням.

 

[Себастьян Перейро]

... Судя по скриншотам, нет русского языка.

и китайского походу нет

 

[roman_ternopil]

и китайского походу нет

Нема і не буде! Можливо, ще додам англомовну версію, якщо натхнення буде.

 

[x-shader]

expEnses?

 

[roman_ternopil]

expEnses?

Відредагував лінк, дякую.

 

[Серёжка]

expEnses?

Відредагував лінк, дякую.

Готошоп - хороший додаток

 

[roman_ternopil]

Випустив оновлення. Зміни:
- повністю переробив логіку та дизайн (із використанням Vue 3 та Bootstrap 5);
Додано:
- багатомовність (доступні мови: Українська, Русский, English);
- можливість складати власний список підказок назв товарів;
- можливість змінювати стандартну валюту, одиниці вимірювання кількості товару та текст заголовку;
- можливість бекапити налаштування та список підказок у файл .json, із якого за потреби відновлювати вказані дані.

Браузери для Андроїд, на яких стовідсотково працює програма: Chrome, Bromite, Opera, Firefox (перевірено на Redmi 5 Plus). Браузер, на якому наразі користуватись неможливо: Kiwi (причина – не працюють модальні вікна Bootstrap 5. Це по ходу якийсь трабл із сумісністю, бо в Ківі не відкриваються модали навіть на офіційному сайті Бутстрап. Вже подав у Ківі баг репорт – можливо, розглянуть).

 

[Maxxx]

Випустив оновлення.

Не працює на ios ні в Хром, ні в Сафарі, тільки тло є. Попередня працювала.

 

[roman_ternopil]

Не працює на ios ні в Хром, ні в Сафарі, тільки тло є. Попередня працювала.

Дякую за інфу.
Дивно: знайомий на iPhone 6 відкривав, все працювало. На жаль, сам не маю змоги перевірити, бо не маю жодного пристрою нa iOs. На всяк випадок, створив альтернативний лінк, де стара версія аплікації.

 

[Maxxx]

rvk220, стара відкривається, нова - ніт.

знайомий на iPhone 6 відкривав

Може, тому що там несвіжа версія ios?

 

[roman_ternopil]

Maxxx, можливо і таке. Але, скоріш за все, це залежить виключно від особливостей конкретного браузера.
---
Зробив цю штуку як пет-проджект для резюме. Якщо і справді це глобальна проблема із пристроями на айос, то залишається молитись, щоб там ніхто його з яблука не відкрив
Справді дивно, чого так, бо у браузерах як на Віндовс, так і на Андроїд функціонує добре.

 

[x-shader]

залишається молитись, щоб там ніхто його з яблука не відкрив

Якщо для резюме - є сенс постаратися і доробити. Заодно на співбесіді буде що розказати. Були ж сервіси, які рендерять сайт під різні платформи і екрани. Не обов'язково мати реальний девайс.
В тих веб-студіях, що бачив, - техніка apple у кожного першого.

 

[roman_ternopil]

Не працює на ios ні в Хром, ні в Сафарі, тільки тло є.

А зараз нова версія на iPhone працює? Щойно пофіксив одну штуку, яка, найімовірніше, і була причиною траблів у браузерах на iOS.

Спойлер: про фікс

Забрав із коду регулярний вираз типу "lookbehind", яким я перевіряв формат введення ціни, вартості та кількості товару (замінив на перевірку іншим способом). Як виявилося, такі регулярні вирази не дружать із браузерами на айос: тиць, тиць.

 

[Maxxx]

rvk220, так, зараз працює.

 

[roman_ternopil]

Maxxx, дуже вдячний за баг репорт! До речі, не перший раз мене виручаєш)

 

[roman_ternopil]

Хотів би почути вашу думку, чи варто розвивати проект? Хтось із тутешніх користується? Що планую втілити в найближчі мцсяці (якщо з'явиться час):
* темна тема;
* карусель покупок (можливість розбити покупку на менші покупки зі своєю проміжною сумою, перехід між якими по свайпу вліво-вправо);
* структурна переробка з метою оптимізацій та розширення налаштувань.

 

[Maxxx]

rvk220, класна штука, користувався би, якщо б я, лінива жопа, міг себе організувати вести той список, просто йду й накидую що згадаю.. Темна тема - обов'язково має бути, бо з переходом на oled/amoled темна тема на девайсах рулить.

 

[plebis]

Это классический пример того, как делать не надо - слушать пожелания нецелевой аудитории.

 

[roman_ternopil]

plebis, перш за все, це некомерційний проект, за який я на початку взявся виключно для покращення власних скілів і наповнення портфоліо. Хоч ця мотивація вже не актуальна для мене, бо на роботі маю справу зі значно складнішими комірційними проектами, які, безумовно, корисніші для мого професійного розвитку.
Але користуюсь цією штукою сам регулярно для відстеження витрат, і суто для мене це корисно. І думаю в основному під себе ще додати якісь фічі, ну і хотів ще почути поради інших у цьому плані. Можливо, хтось помітить якісь косяки (якщо глянете вище – мені вже раз тут суттєво допомогли). Ну а якщо порад не буде – то і не розчаруюсь.