render errors

Author: daria-z

src/index.html

@@ -51,7 +51,7 @@ <h1 class="display-3 mb-0">RSS агрегатор</h1>
             </form>
             <p class="mt-2 mb-0 text-muted">Пример:
               https://lorem-rss.hexlet.app/feed</p>
-            <p class="feedback m-0 position-absolute small text-danger"></p>
+            <p id="feedback" class="feedback m-0 position-absolute small text-danger"></p>
           </div>
         </div>
       </section>

src/js/main.js

@@ -1,4 +1,5 @@
-import { updateInputValue, addRssFeed } from "./model";
+import { updateInputValue, addRssFeed, getErrors, getRssFeed } from "./model";
+import { renderErrors, removeErrors } from "./view";
 
 const input = document.querySelector("#url-input");
 const form = document.querySelector("#rss-form");
@@ -10,10 +11,15 @@ input.addEventListener('input', (e) => {
 form.addEventListener('submit', (e) => {
   e.preventDefault();
   addRssFeed();
+  renderErrors(getErrors());
 });
 
 
 
 
 
 
+
+
+
+

src/js/model.js

@@ -13,9 +13,12 @@ const state = onChange(object, (path, value) => {
 
 const schema = yup
   .string()
-  .url()
-  .required('Обязательное поле')
-  .test('no-duplicate', 'Эта лента уже добавлена', (value) => !state.rssFeed.includes(value));
+  .url("Ссылка должна быть валидным URL")
+  .required("Обязательное поле")
+  .test(
+    "Эта лента уже добавлена",
+    (value) => !state.rssFeed.includes(value)
+  );
 
 const validateInput = (value) => {
   try {
@@ -45,6 +48,9 @@ export const addRssFeed = () => {
   }
 };
 
+export const getErrors = () => {
+  return state.errors;
+};
 
 
 

src/js/view.js

@@ -0,0 +1,23 @@
+const input = document.querySelector("input");
+const feedback = document.querySelector("#feedback");
+
+export const removeErrors = () => {
+  input.classList.remove("is-invalid");
+  feedback.textContent = '';
+}
+
+export const renderErrors = (errors) => {
+  input.classList.add("is-invalid");
+
+  if (errors === null) {
+    removeErrors();
+  } else {
+    errors.map((error) => {
+      feedback.textContent = error;
+    });
+  }
+};
+
+
+
+