// Forms
const forms = document.querySelectorAll('form');
const message = {
loading: 'img/original.svg',
success: 'Спасибо! Скоро мы с вами свяжемся',
failure: 'Что-то пошло не так...'
};
forms.forEach(item => {
bindPostData(item);
});
const postData = async (url, data) => {
const res = await fetch(url, {
method: 'POST',
headers: {
'Content-type': 'application/json; charset=utf-8'
},
body: JSON.stringify(object)
});
return await res.json();
};
function bindPostData(form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
let statusMessage = document.createElement('img');
statusMessage.src = message.loading;
statusMessage.style.cssText = `
display: block;
margin: 0 auto;
`;
form.insertAdjacentElement('afterend', statusMessage);
// request.setRequestHeader('Content-type', 'application/json');
const formData = new FormData(form);
const object = {};
formData.forEach(function (value, key) {
object[key] = value;
});
postData('http://localhost:3000/requests', JSON.stringify(object))
.then(data => {
console.log(data);
showThanksModal(message.success);
statusMessage.remove();
})
.catch(() => {
showThanksModal(message.failure);
})
.finally(() => {
form.reset();
});
});
}
function showThanksModal(message) {
const prevModalDialog = document.querySelector('.modal__dialog');
prevModalDialog.classList.add('hide');
openModal();
const thanksModal = document.createElement('div');
thanksModal.classList.add('modal__dialog');
thanksModal.innerHTML = `
<div class="modal__content">
<div class="modal__close" data-close>×</div>
<div class="modal__title">${message}</div>
</div>
`;
document.querySelector('.modal').append(thanksModal);
setTimeout(() => {
thanksModal.remove();
prevModalDialog.classList.add('show');
prevModalDialog.classList.remove('hide');
closeModal();
}, 4000);
}
fetch('db.json')
.then(data => data.json())
.then(res => console.log(res));
});
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 150px;
padding: 0 100px
}
.header__left-block {
display: flex;
justify-content: space-between;
min-width: 550px
}
.header__logo {
max-width: 170px
}
.header__logo img {
width: 100%
}
.header__links {
display: flex;
align-items: center
}
.header__link {
position: relative;
margin-right: 45px;
font-weight: 700;
font-size: 18px;
color: #303030
}
.header__link:after {
content: '';
position: absolute;
display: block;
width: 110%;
left: -5%;
bottom: -1px;
z-index: -1;
height: 8px;
background: #54ed39
}
.header__link:last-child {
margin-right: 0
}
.sidepanel {
position: fixed;
left: 60px;
top: 240px;
height: 400px;
width: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center
}
<header class="header">
<div class="header__left-block">
<div class="header__logo">
<img src="icons/logo.svg" alt="Логотип">
</div>
<nav class="header__links">
<a href="#" class="header__link">Доставка питания</a>
<a href="#" class="header__link">Второй пункт</a>
</nav>
</div>
<div class="header__right-block">
<button class="btn btn_white" data-modal>Связаться с нами</button>
</div>
</header>