no more dot in warning message

HelgiMagic · Aug 19, 2023 · 19008c9 · 19008c9
1 parent 4f27d8a
commit 19008c9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -33,7 +33,8 @@ <h3>Начните читать RSS сегодня! Это легко, это к
           <button type="submit" class="btn btn-primary submit-button">Добавить</button>
         </form>
         <p class="mt-2 mb-0 text-muted"></p>
-        <p class="warning invisible">.</p>
+        <div class="warning-container"><p class="warning"></p></div>
+
       </section>
       <section class="content d-flex">
         <div class="posts invisible">

diff --git a/public/style.scss b/public/style.scss
@@ -17,8 +17,14 @@
   align-items: start;
   color: white;
 
+
+  .warning-container {
+    height: 50px;
+  }
+
   .warning {
     color: #dc3545;
+    position: absolute;
   }
 }
 
@@ -44,7 +50,7 @@
   }
 
   #url-input {
-    border-radius: 10px;
+    border-radius: 5px;
     flex-grow: 8;
 
     font-size: 15px;
@@ -53,6 +59,7 @@
 
   .submit-button {
     flex-grow: 2;
+    border-radius: 5px;
 
     margin-left: 20px;
   }

diff --git a/src/render/formRendering.js b/src/render/formRendering.js
@@ -3,8 +3,7 @@ const renderForm = (elements, globalState, i18, inputValue) => {
     elements.form.reset();
     elements.formInput.focus();
 
-    elements.warningMessage.classList.add('invisible');
-    elements.warningMessage.textContent = '.';
+    elements.warningMessage.textContent = '';
   }
 
   if (globalState.form.status === 'success') {
@@ -13,9 +12,8 @@ const renderForm = (elements, globalState, i18, inputValue) => {
     elements.formButton.removeAttribute('disabled');
     elements.formInput.classList.remove('is-invalid');
 
-    elements.warningMessage.classList.remove('invisible');
     elements.warningMessage.textContent = i18.t(globalState.form.message);
-    elements.warningMessage.setAttribute('style', 'color: green');
+    elements.warningMessage.setAttribute('style', 'color: rgba(25,135,84)');
   } else elements.warningMessage.removeAttribute('style');
 
   if (globalState.form.status === 'invalid') {
@@ -27,7 +25,6 @@ const renderForm = (elements, globalState, i18, inputValue) => {
     elements.formInput.value = inputValue;
 
     elements.warningMessage.textContent = i18.t(globalState.form.message);
-    elements.warningMessage.classList.remove('invisible');
   }
 
   if (globalState.form.status === 'sending') {
@@ -37,8 +34,7 @@ const renderForm = (elements, globalState, i18, inputValue) => {
     elements.formInput.value = inputValue;
     elements.formInput.classList.remove('is-invalid');
     elements.formButton.setAttribute('disabled', '');
-    elements.warningMessage.classList.add('invisible');
-    elements.warningMessage.textContent = '.';
+    elements.warningMessage.textContent = '';
   }
 };