Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 16, 2022. It is now read-only.

Commit 6121223

Browse files
feat(food-delivery): page server interaction functions added (#41)
1 parent 8fbae6e commit 6121223

File tree

2 files changed

+132
-5
lines changed

2 files changed

+132
-5
lines changed
Lines changed: 52 additions & 0 deletions
Loading[フレーム]

‎practice/food-delivery/src/index.ts‎

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
document.addEventListener('DOMContentLoaded', () => {
2-
const menuParent: HTMLElement = document.querySelector('.tabheader__items')
2+
const menuParent: HTMLElement = document.querySelector('.slideheader__items')
33
const menuImage: NodeListOf<Element> = document.querySelectorAll('.slidecontent')
44
const menuItems: NodeListOf<Element> = document.querySelectorAll('.slideheader__item')
55

@@ -22,7 +22,7 @@ document.addEventListener('DOMContentLoaded', () => {
2222
hideContent()
2323
showContent()
2424

25-
menuParent.addEventListener('click', (evt): void => {
25+
menuParent.addEventListener('click', (evt) => {
2626
const { target } = evt
2727
if (target && (target as HTMLElement).classList.contains('slideheader__item')) {
2828
menuItems.forEach((item: HTMLElement, i: number) => {
@@ -80,7 +80,6 @@ document.addEventListener('DOMContentLoaded', () => {
8080
/* Modal Window */
8181
const modalTrigger: NodeListOf<Element> = document.querySelectorAll('[data-modal]')
8282
const modalWindow: HTMLElement = document.querySelector('.modal')
83-
const modalCloseButton: HTMLElement = document.querySelector('[data-close]')
8483

8584
modalTrigger.forEach((button) => {
8685
button.addEventListener('click', openModal)
@@ -95,9 +94,12 @@ document.addEventListener('DOMContentLoaded', () => {
9594
modalWindow.classList.remove('hide')
9695
document.body.style.overflow = 'hidden'
9796
}
98-
modalCloseButton.addEventListener('click',closeModal)
97+
9998
modalWindow.addEventListener('click', (event) => {
100-
if (event.target === modalWindow) {
99+
if (
100+
event.target === modalWindow ||
101+
(event.target as HTMLElement).getAttribute('data-close') === ''
102+
) {
101103
closeModal()
102104
}
103105
})
@@ -161,6 +163,7 @@ document.addEventListener('DOMContentLoaded', () => {
161163
this.parentSelector.append(element)
162164
}
163165
}
166+
164167
new MenuCard(
165168
'../src/assets/img/tabs/vegy.jpg',
166169
'fitness',
@@ -172,6 +175,7 @@ document.addEventListener('DOMContentLoaded', () => {
172175
'.menu .container',
173176
'menu__item'
174177
).render()
178+
175179
new MenuCard(
176180
'../src/assets/img/tabs/elite.jpg',
177181
'premium',
@@ -194,4 +198,75 @@ document.addEventListener('DOMContentLoaded', () => {
194198
'.menu .container',
195199
'menu__item'
196200
).render()
201+
202+
const forms: NodeListOf<HTMLFormElement> = document.querySelectorAll('form')
203+
const serverMessage = {
204+
loading: '../src/assets/img/spinner.svg',
205+
success: 'Спасибо! Скоро мы с вами свяжемся',
206+
error: 'Что-то пошло не так...',
207+
}
208+
209+
forms.forEach((item: HTMLFormElement) => {
210+
postData(item)
211+
})
212+
213+
function postData(form: HTMLFormElement) {
214+
form.addEventListener('submit', (event) => {
215+
event.preventDefault()
216+
217+
const statusMessage: HTMLImageElement = document.createElement('img')
218+
statusMessage.src = serverMessage.loading
219+
statusMessage.style.cssText = `
220+
display: block;
221+
margin: 0 auto;
222+
`
223+
form.insertAdjacentElement('afterend', statusMessage)
224+
225+
const request: XMLHttpRequest = new XMLHttpRequest()
226+
request.open('POST', 'https://jsonplaceholder.typicode.com/users')
227+
request.setRequestHeader('Content-type', 'application/json')
228+
const formData: FormData = new FormData(form)
229+
230+
const rawFormData: Object = {}
231+
formData.forEach((value, key) => {
232+
rawFormData[key] = value
233+
})
234+
const toJSON: string = JSON.stringify(rawFormData)
235+
236+
request.send(toJSON)
237+
238+
request.addEventListener('load', () => {
239+
if (request.status === 201) {
240+
showThanksModal(serverMessage.success)
241+
statusMessage.remove()
242+
form.reset()
243+
} else {
244+
showThanksModal(serverMessage.error)
245+
}
246+
})
247+
})
248+
}
249+
250+
function showThanksModal(thanksMessage: string) {
251+
const previousModalDialog = document.querySelector('.modal__dialog')
252+
253+
previousModalDialog.classList.add('hide')
254+
openModal()
255+
256+
const thanksModal = document.createElement('div')
257+
thanksModal.classList.add('modal__dialog')
258+
thanksModal.innerHTML = `
259+
<div class="modal__content">
260+
<div class="modal__close" data-close&g×ばつ</div>
261+
<div class="modal__title">${thanksMessage}</div>
262+
</div>
263+
`
264+
document.querySelector('.modal').append(thanksModal)
265+
setTimeout(() => {
266+
thanksModal.remove()
267+
previousModalDialog.classList.add('show')
268+
previousModalDialog.classList.remove('hide')
269+
closeModal()
270+
}, 4000)
271+
}
197272
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /