add app

Tatyana-js · May 30, 2024 · 240cf29 · 240cf29
1 parent b94c6b7
commit 240cf29
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   </head>
   <body class="d-flex flex-column min-vh-100">
     <main class="flex-grow-1">
-      <section class="'container-fluid bg-dark p-5">
+      <section class="container-fluid bg-dark p-5">
         <div class="row">
           <div class="col-md-10 col-lg-8 mx-auto text-white">
             <h1 class="display-3 mb-0">RSS агрегатор</h1>
@@ -42,7 +42,7 @@ <h1 class="display-3 mb-0">RSS агрегатор</h1>
       <div class="container-xl">
         <div class="text-center">
            created by 
-          <a href="https://ru.hexlet.io/professions/frontend/projects/11" target="_blank">Hexlet</a>
+          <a href="https://github.com/Tatyana-js" target="_blank">Tatyana</a>
         </div>
       </div>
     </footer>

diff --git a/src/app.js b/src/app.js
@@ -10,11 +10,12 @@ const elements = {
     title: document.querySelector('h1'),
     subtitle: document.querySelector('.lead'),
     label: document.querySelector('[for="url-input"]'),
-    example: document.querySelector('p.mt-2.mb-0.text-secondary'),
+    example: document.querySelector('p.mt-2.mb-0.text-body-secondary'),
     button: document.querySelector('[type="submit"]'),
   },
   form: document.querySelector('form'),
   input: document.getElementById('url-input'),
+  errorElement: document.querySelector('.feedback'),
 };
 
 const state = {
@@ -40,7 +41,6 @@ yup.setLocale({
     url: () => ({ key: 'errors.invalidRss' }),
   },
   mixed: {
-    required: () => ({ key: 'errors.required' }),
     notoneOf: () => ({ key: 'errors.existsRss' }),
   },
 });

diff --git a/src/locales/ru.js b/src/locales/ru.js
@@ -6,7 +6,6 @@ export default {
     example: 'Пример: https://ru.hexlet.io/lessons.rss',
     button: 'Добавить',
     errors: {
-      required: 'Заполните это поле',
       existsRss: 'RSS уже существует',
       invalidRss: 'Ресурс не содержит валидный RSS',
     },

diff --git a/src/view.js b/src/view.js
@@ -1,17 +1,31 @@
 import onChange from 'on-change';
 
 export default (elements, i18n, state) => {
+  // eslint-disable-next-line no-restricted-globals
+  focus();
   const { t } = i18n;
+
+  const renderValid = () => {
+  };
+
   const renderForm = () => {
     Object.entries(elements.staticEl).forEach(([key, value]) => {
       const element = value;
       element.textContent = t(`${key}`);
     });
   };
-  const watchedState = onChange(state, (path) => {
-    // eslint-disable-next-line default-case
+  const watchedState = onChange(state, (path, value, prevValue) => {
+    const { errorElement } = elements;
     switch (path) {
       case 'form.isValid':
+        renderValid();
+        break;
+      case 'form.errors':
+        errorElement.classList.remove('text-success');
+        errorElement.classList.add('text-danger');
+        errorElement.textContent = t('invalidRss');
+        break;
+      default:
     }
   });
   return {