From 86eb54bb5c570cf107a477b61c5b8089cdb0391c Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Mon, 23 Dec 2024 19:39:10 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=B0=D0=BF=D0=B8=D1=81=D0=B0=D0=BB=20fe?= =?UTF-8?q?tch=20=D0=B4=D0=BB=D1=8F=20search?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-desktop.css | 5 ++ assets/js/main.js | 86 +++++++++++++++++++++++++++++++++ index.html | 10 ++-- 3 files changed, 96 insertions(+), 5 deletions(-) diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 54eaf3c..ef918ee 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -269,6 +269,11 @@ background-color: var(--background-grey-hover); border-radius: 4px; + + display: none; +} +.header-menu-search__found.active{ + display: block; } .header-menu-search__error{} .header-menu-search__item{ diff --git a/assets/js/main.js b/assets/js/main.js index c3d090a..7f640b6 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -260,6 +260,92 @@ btnOpenSearchPhone.onclick = function () { searchPhone.classList.toggle('active'); } +// pc +let inputSearchPc = document.querySelector('.header-menu-search__input'), + btnSearchPc = document.querySelector('.header-menu-search__btn'); + +btnSearchPc.onclick = function () { + let value = inputSearchPc.value, + newPost = { + value: value, + }; + + postSearch(newPost, 'pc'); +} + +// phone +let inputSearchPhone = document.querySelector('.phone-search__input'); + +inputSearchPhone.addEventListener('input', function(event) { + let value = event.target.value, + newPost = { + value: value, + }; + + postSearch(newPost, 'phone'); +}); + +function postSearch(newPost, device) { + let contentPc = document.querySelector('.header-menu-search__found'), + contentPhone = document.querySelector('.phone-search__found'); + + fetch('http://jsonplaceholder.typicode.com/posts', { + method: 'POST', + // body: JSON.stringify(newPost), + headers: { + 'Content-type': 'application/json; charset=UTF-8', + }, + }) + .then((data) => { + if (device == 'pc') { + contentPc.innerHTML = ''; + + contentPc.innerHTML = `
+ + +
+

Беговая дорожка механическая DRAXFIT+

+

Артикул: STP1000C

+
+
`; + + contentPc.classList.add('active'); + }else{ + contentPhone.innerHTML = ''; + + contentPhone.innerHTML = `
+ + +
+

Беговая дорожка механическая DRAXFIT+

+

Артикул: STP1000C

+
+
`; + + contentPhone.classList.add('active'); + } + }).catch( + () => { + if (device == 'pc') { + postError(contentPc); + }else{ + postError(contentPhone); + } + } + ) +} + +function postError(divContent) { + divContent.innerHTML = '' + + let p = document.createElement("p"); + p.textContent = "Произошла ошибка" + p.className = "header-menu-search__error text-2"; + + divContent.appendChild(p); +} + + // search end // open-modal diff --git a/index.html b/index.html index 15bf8b5..3159f5a 100644 --- a/index.html +++ b/index.html @@ -228,7 +228,7 @@
-
+ -
+