add package.json

index.html

@@ -12,7 +12,7 @@
         <div class="row">
           <div class="col-md-10 col-lg-8 mx-auto text-white">
             <h1 class="display-3 mb-0">RSS агрегатор</h1>
-            <p class="lead">Начните читать RSS СЕГОДНЯ! Это легко, это красиво.</p>
+            <p class="lead">Начните читать RSS сегодня! Это легко, это красиво.</p>
             <form action class="rss-form text-body">
               <div class="row">
                 <div class="col">
@@ -26,7 +26,7 @@ <h1 class="display-3 mb-0">RSS агрегатор</h1>
                 </div>
               </div>
             </form>
-            <p class="mt-2 mb-0 text-muted">Пример: https://lorem-rss.hexlet.app/feed</p>
+            <p class="mt-2 mb-0 text-body-secondary">Пример: https://lorem-rss.hexlet.app/feed</p>
             <p class="feedback m-0 position-absolute small text-danger"></p>
           </div>
         </div>

package.json

@@ -39,6 +39,7 @@
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
     "i18next": "^23.11.5",
+    "on-change": "^5.0.1",
     "yup": "^1.4.0"
   }
 }

src/app.js

@@ -1,4 +1,4 @@
-import i18next from "i18next";
+import i18next from 'i18next';
 import * as yup from 'yup';
 import axios from 'axios';
 import validate, { proxyObj } from './utils.js';
@@ -15,7 +15,13 @@ export default () => {
   });
 
   const elements = {
+    title: document.querySelector('h1'),
+    subtitle: document.querySelector('.lead'),
     form: document.querySelector('form'),
+    input: document.getElementById('url-input'),
+    label: document.querySelector('[for="url-input"]'),
+    example: document.querySelector('.text-muted'),
+    button: document.querySelector('[type="submit"]'),
   };
 
   const state = {

src/locales/ru.js

@@ -1,9 +1,14 @@
 export default {
   translation: {
+    title: 'RSS агрегатор',
+    subtitle: 'Начните читать RSS сегодня! Это легко, это красиво.',
+    label: 'Ссылка RSS',
+    example: 'Пример: https://ru.hexlet.io/lessons.rss',
+    button: 'Добавить',
     errors: {
       required: 'Заполните это поле',
       existsRss: 'RSS уже существует',
-      invalidRss: 'Ресурс не содержит валидный RSS'
+      invalidRss: 'Ресурс не содержит валидный RSS',
     },
   },
 };

src/utils.js

@@ -6,7 +6,7 @@ const validate = (url, urlFeeds) => {
       .string()
       .trim()
       .required()
-      .notOneOf(urlFeeds, 'Ресурс не содержит валидный RSS'),
+      .notOneOf(urlFeeds),
   });
   return schema.validate({ url });
 };

src/view.js

@@ -4,10 +4,17 @@ export default (elements, i18n, state) => {
   const { t } = i18n;
 
   const watchedState = onChange(state, (path, value) => {
-
+    if (path === 'isValid') {
+      /* empty */
+    } else if (path === 'errors') {
+    // прописать ошибки//
+    }
   });
   const renderForm = () => {
-
+    Object.entries(elements).forEach(([key, value]) => {
+      const element = value;
+      element.textContent = t(`${key}`) ?? '';
+    });
   };
   return {
     watchedState,