diff --git a/JS/main.js b/JS/main.js index b60d9b1..3c62d37 100644 --- a/JS/main.js +++ b/JS/main.js @@ -1,8 +1,16 @@ +// Обработчик событий при нажатии на кнопку 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); @@ -10,12 +18,10 @@ document.getElementById('search-btn').addEventListener('click', function() { 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 => { @@ -23,15 +29,30 @@ document.getElementById('search-btn').addEventListener('click', function() { }); }); + 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 = 'Ничего не найдено. Попробуйте изменить запрос.'; @@ -39,6 +60,8 @@ function displayResults(results) { } + + /* Фильтр ключевых слов */ const filteredData = data.filter(item => item.keywords.toLowerCase().includes(searchValue) || diff --git a/Style/main.css b/Style/main.css index d898461..6b64a1d 100644 --- a/Style/main.css +++ b/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; } diff --git a/data.json b/data.json index 728e452..5668c6d 100644 --- a/data.json +++ b/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" } ]