update main.js

JS/main.js

@@ -1,44 +1,67 @@
+// Обработчик событий при нажатии на кнопку
 document.getElementById('search-btn').addEventListener('click', function() {
     const searchValue = document.getElementById('search-input').value.toLowerCase();
-    console.log("Начало поиска: ", searchValue); // Для отладки
+    if (!searchValue.trim()) {
+        // Если поле поиска пустое, отображаем сообщение об ошибке
+        alert("Поле пусто");
+        return; // Останавливаем дальнейшую обработку функции
+    }
+
+    // Проверяем, что введенное значение не является только годом
+    const isYearQuery = searchValue.endsWith('гг.') || searchValue.endsWith('г.') || searchValue.endsWith('г') || searchValue.endsWith('.');
 
-    fetch('data.json') // Проверка на правильность пути
+    fetch('data.json')
         .then(response => {
             if (!response.ok) {
                 throw new Error('Network response was not ok: ' + response.statusText);
             }
             return response.json();
         })
         .then(data => {
-            console.log("Данные получены: ", data); // Для отладки
-            const filteredData = data.filter(item =>
-                item.keywords.toLowerCase().includes(searchValue) ||
-                item.date.includes(searchValue)
+            // Если запрос не содержит только год, фильтруем данные
+            const filteredData = isYearQuery ? [] : data.filter(item =>
+                item.keywords.toLowerCase().includes(searchValue)
             );
-            console.log("Фильтрованные данные: ", filteredData); // Для отладки
             displayResults(filteredData);
         })
         .catch(error => {
             console.error('Произошла ошибка при загрузке data.json: ', error);
         });
 });
 
+
 function displayResults(results) {
     const resultsContainer = document.getElementById('results');
     resultsContainer.innerHTML = '';
 
     if (results.length > 0) {
         results.forEach(item => {
-            const div = document.createElement('div');
-            div.textContent = `${item.date}: ${item.event}`;
-            resultsContainer.appendChild(div);
+            // Создаем обертку для каждого результата
+            const resultWrapper = document.createElement('div');
+            resultWrapper.className = 'result-wrapper';
+
+            // Создаем и стилизуем элемент даты
+            const dateBadge = document.createElement('div');
+            dateBadge.textContent = item.date;
+            dateBadge.className = 'date-badge';
+            resultWrapper.appendChild(dateBadge);
+
+            // Создаем и добавляем описание события
+            const eventDescription = document.createElement('div');
+            eventDescription.textContent = item.event;
+            resultWrapper.appendChild(eventDescription);
+
+            // Добавляем обертку с датой и описанием в контейнер результатов
+            resultsContainer.appendChild(resultWrapper);
         });
     } else {
         resultsContainer.textContent = 'Ничего не найдено. Попробуйте изменить запрос.';
     }
 }
 
 
+
+
 /* Фильтр ключевых слов */
 const filteredData = data.filter(item =>
     item.keywords.toLowerCase().includes(searchValue) ||

Style/main.css

@@ -75,7 +75,26 @@ header {
     text-align: center;
 }
 #results div {
-    margin-bottom: 10px; /* Добавляет отступ снизу для каждого div с результатом */
+    margin-bottom: 10px; 
+
+}
+/*===== Дата =====*/
+.date-text {
+    color: red;
+}
+/* Стиль для закругленного фона даты */
+.date-badge {
+    display: inline-block;
+    padding: 5px 10px;
+    border-radius: 15px; 
+    background-color: red;
+    color: white;
+    margin-bottom: 5px; 
+}
+/* Стиль для обертки результатов */
+.result-wrapper {
+    text-align: center; 
+    margin-bottom: 15px; 
 }
 
 

data.json

@@ -1,52 +1,82 @@
 [
     {
-        "date": "862",
+        "date": "862 г.",
         "event": "Основание Новгорода",
         "keywords": "основание, новгород, Основание, Новгород, 862"
     },
     {
-        "date": "862",
+        "date": "862 г.",
         "event": "Первая столица Руси - Ладога",
         "keywords": "основание, первая, столица, русь, руси, ладога, 862"
     },
     {
-        "date": "862-879",
-        "event": "Создание славянской письменности Кириллом и Мефодием",
-        "keywords": "славяне, создание, Кирилл, кирилл, Мефодий, мефодий, 862, 879"
+        "date": "863 г.",
+        "event": "Создание славянской письменности Кириллом и Мефодием (Глаголица)",
+        "keywords": "славяне, создание, Письменность, письменность, Кирилл, кирилл, Мефодий, мефодий, 862, 879, Глаголица, глаголица"
     }, 
     {
-        "date": "863",
+        "date": "862-879 гг.",
+        "event": "Правление князя Рюрика",
+        "keywords": "Правление, правление, Князь, князь, славяне, создание, Рюрик, рюрик, 862, 879"
+    }, 
+    {
+        "date": "863 г.",
         "event": "Правление князя Рюрика",
         "keywords": "рюрик, Рюрик, князь, правление, Князь, Правление, 863"
     },
     {
-        "date": "988",
+        "date": "879-912 гг.",
+        "event": "Правление князя Вещего Олега",
+        "keywords": "Князь, князь, Вещий Олег, вещий олег, Олег, олег, Вещий, вещий, Правление, правление"
+    },
+    {
+        "date": "882 г.",
+        "event": "Поход князя Олега из Новгорода на Киев. Киев становится столицей древнерусского государства Рюриковичей. Убийство князей Аскольда и Дира",
+        "keywords": "Князь, князь, Вещий Олег, вещий олег, Олег, олег, Вещий, вещий, Правление, правление, Киев, киев, Столица, солица, Киев столица, киев столица, Киев - Столица, киев - столица "
+    },
+    {
+        "date": "882-912 гг.",
+        "event": "Правление князя Вещего Олега в Киевской Руси.",
+        "keywords": "Князь, князь, Вещий Олег, вещий олег, Олег, олег, Вещий, вещий, Правление, правление, Киевская Русь, киевская русь, киевская Русь, Киевская русь"
+    },
+    {
+        "date": "883 г.",
+        "event": "Подчинение древлян князю Вещему Олегу.",
+        "keywords": "Подчинение, подчинение, Олег, олег, Вещий, вещий, Вещий олег, Вещий Олег, вещий Олег, вещий олег"
+    },
+    {
+        "date": "",
+        "event": "",
+        "keywords": ""
+    },
+    {
+        "date": "988 г.",
         "event": "Крещение Руси",
         "keywords": "крещение, Крещение, русь, Русь, 988"
     },
     {
-        "date": "972",
+        "date": "972 г.",
         "event": "Убийство Святослава печенегами у днепровских порогов",
         "keywords": "убийство, святослав, печенеги, Убийство, Святослав, Печенеги, 972"
     },
     {
-        "date": "980",
+        "date": "980 г.",
         "event": "Учреждение общерусского пантеона языческих богов",
         "keywords": "язычество, пантеон, Язычество, Пантеон, боги, Боги, 980"
     },
     {
-        "date": "988",
+        "date": "988 г.",
         "event": "Поход Владимира на Полоцк, убийство Рогволода",
         "keywords": "владимир, полоцк, рогволод, Владимир, Полоцк, Рогволод, убийство, Убийство, 988"
     },
     {
-        "date": "1015-1024",
+        "date": "1015-1024 гг.",
         "event": "междоусобные войны сыновей Владимира I.",
-        "keywords": "владимир, полоцк, рогволод, сыновья, 1015, 1024"
+        "keywords": "владимир, полоцк, рогволод, сыновья, Владимир, Полоцк, Рогволод, Сыновья, 1015, 1024, 15, 24"
     },
     {
-        "date": "1019",
+        "date": "1019 г.",
         "event": "Вокняжение Ярослава Мудрого в Киеве (до 1054). В эти годы составлена «Правда Ярослава» — древнейшая часть «Русской Правды».",
-        "keywords": "княжение, Ярослав, Мудрый, Ярослав Мудрый, ярослав, мудрый, ярослав мудрый, Киев, киев, 1019"
+        "keywords": "княжение, Ярослав, Мудрый, Ярослав Мудрый, ярослав, мудрый, ярослав мудрый, Киев, киев, 1019, 19"
     }
 ]