+
Нужно ещё немного дописать
+
x/max
+
diff --git a/src/Otchinslator/Components/Pages/Statement.razor.js b/src/Otchinslator/Components/Pages/Statement.razor.js
index 64678ee..b726d25 100644
--- a/src/Otchinslator/Components/Pages/Statement.razor.js
+++ b/src/Otchinslator/Components/Pages/Statement.razor.js
@@ -1,6 +1,9 @@
export function onLoad() {
const statementField = document.querySelector('textarea[name="statement"]');
const generateButton = document.querySelector('button[id="gen"]');
+ const symCounter = document.querySelector('p[id="symCounter"]');
+ const needMoreText = document.querySelector('p[id="needMoreText"]');
+ const maxSym = 600;
const optionMapping = {
"Баклан": 1,
@@ -80,8 +83,30 @@ export function onLoad() {
statementField.value = statementField.value.replace(/\s{2,}/g, ' ');
localStorage.setItem('statement', statementField.value);
+
+ if (statementField.value.length <= 100)
+ needMoreText.classList.remove('hidden');
+ else
+ needMoreText.classList.add('hidden');
+
+ let percentage = Math.floor(statementField.value.length / maxSym * 100);
+ if (percentage > 99) {
+ symCounter.classList.add('text-red-500');
+ symCounter.classList.remove('text-gray-500');
+ symCounter.classList.remove('text-yellow-500');
+ } else if (percentage > 85) {
+ symCounter.classList.add('text-yellow-500');
+ symCounter.classList.remove('text-gray-500');
+ symCounter.classList.remove('text-red-500');
+ }
+ else {
+ symCounter.classList.add('text-gray-500');
+ symCounter.classList.remove('text-red-500');
+ symCounter.classList.remove('text-yellow-500');
+ }
+ symCounter.innerText = statementField.value.length + '/' + maxSym;
- if (statementField.value.length > 100) {
+ if (statementField.value.length > 100 && statementField.value.length < maxSym) {
generateButton.classList.remove('btn-disabled');
} else
generateButton.classList.add('btn-disabled');