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 @@
-
+ -
+