├── icons ├── logo.png ├── salad.png ├── pepper.png ├── right.svg ├── left.svg ├── switch.svg ├── facebook.svg ├── veg.svg ├── instagram.svg ├── logo.svg └── Group 5.svg ├── img ├── tabs │ ├── post.jpg │ ├── vegy.jpg │ ├── elite.jpg │ └── hamburger.jpg ├── slider │ ├── food-12.jpg │ ├── paprika.jpg │ ├── pepper.jpg │ └── olive-oil.jpg └── form │ └── spinner.svg ├── server.php ├── video └── screen-capture.mp4 ├── js ├── index.html ├── services │ └── services.js ├── script.js ├── modules │ ├── tabs.js │ ├── timer.js │ ├── modal.js │ ├── cards.js │ ├── forms.js │ ├── chat.js │ ├── calculator.js │ └── slider.js └── bundle.js ├── .jshintrc ├── README.md ├── package.json ├── webpack.config.js ├── .gitignore ├── db.json ├── index.html └── css └── style.css /icons/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/icons/logo.png -------------------------------------------------------------------------------- /icons/salad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/icons/salad.png -------------------------------------------------------------------------------- /icons/pepper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/icons/pepper.png -------------------------------------------------------------------------------- /img/tabs/post.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/tabs/post.jpg -------------------------------------------------------------------------------- /img/tabs/vegy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/tabs/vegy.jpg -------------------------------------------------------------------------------- /img/tabs/elite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/tabs/elite.jpg -------------------------------------------------------------------------------- /img/slider/food-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/slider/food-12.jpg -------------------------------------------------------------------------------- /img/slider/paprika.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/slider/paprika.jpg -------------------------------------------------------------------------------- /img/slider/pepper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/slider/pepper.jpg -------------------------------------------------------------------------------- /img/tabs/hamburger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/tabs/hamburger.jpg -------------------------------------------------------------------------------- /img/slider/olive-oil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnastasiaLunina/JS_Food_App/HEAD/img/slider/olive-oil.jpg -------------------------------------------------------------------------------- /server.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Webpack App 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "camelcase" : true, 3 | "indent": 2, 4 | "undef": true, 5 | "quotmark": false, 6 | "maxlen": 120, 7 | "trailing": true, 8 | "curly": true, 9 | "strict": false, 10 | "browser": true, 11 | "devel": true, 12 | "jquery": true, 13 | "esversion": 9, 14 | "node": true 15 | } -------------------------------------------------------------------------------- /icons/left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/switch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Web application for ordering food for a week 2 | [⭐ See here front end](https://anastasialunina.github.io/JS_Food_App/) 3 | ### App for healthy food services. API, Slider, calculator, modal, countdown, chat bot 4 | 5 | https://user-images.githubusercontent.com/94207798/187539803-38308c48-b71b-44d4-9841-137435a510c5.mp4 6 | 7 |
8 | To see fully functioning app open it on the local server (e.g. MAMP) and run:
9 | `npx webpack`
10 | `npx json-server db.json` 11 | -------------------------------------------------------------------------------- /js/services/services.js: -------------------------------------------------------------------------------- 1 | const postData = async (url, data) => { 2 | let res = await fetch(url, { 3 | method: "POST", 4 | headers: { 5 | 'Content-Type': 'application/json' 6 | }, 7 | body: data 8 | }); 9 | 10 | return await res.json(); 11 | }; 12 | 13 | async function getResource(url) { 14 | let res = await fetch(url); 15 | 16 | if (!res.ok) { 17 | throw new Error(`Could not fetch ${url}, status: ${res.status}`); 18 | } 19 | 20 | return await res.json(); 21 | } 22 | 23 | export {postData}; 24 | export {getResource}; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "food", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/AnastasiaLunina/JS_Food_App.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "browserslist": [ 16 | "> 1%", 17 | "not dead" 18 | ], 19 | "bugs": { 20 | "url": "https://github.com/AnastasiaLunina/JS_Food_App/issues" 21 | }, 22 | "homepage": "https://github.com/AnastasiaLunina/JS_Food_App#readme", 23 | "devDependencies": { 24 | "@babel/cli": "^7.18.10", 25 | "@babel/core": "^7.18.10", 26 | "@babel/preset-env": "^7.18.10", 27 | "babel-loader": "^8.2.5", 28 | "css-loader": "^6.7.1", 29 | "json-server": "^0.17.0", 30 | "webpack": "^5.74.0", 31 | "webpack-cli": "^4.10.0" 32 | }, 33 | "dependencies": { 34 | "es6-promise": "^4.2.8", 35 | "html-webpack-plugin": "^5.5.0", 36 | "mini-css-extract-plugin": "^2.6.1" 37 | }, 38 | "overrides": { 39 | "got": "^12.1.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const path = require('path'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | 6 | module.exports = { 7 | mode: 'development', 8 | entry: './js/script.js', 9 | output: { 10 | filename: 'bundle.js', 11 | path: __dirname + '/js' 12 | }, 13 | watch: true, 14 | 15 | devtool: "source-map", 16 | 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.css$/, 21 | use: [ 22 | MiniCssExtractPlugin.loader, 23 | 'css-loader', 24 | ] 25 | }, 26 | { 27 | test: /\.m?js$/, 28 | exclude: /(node_modules|bower_components)/, 29 | use: { 30 | loader: 'babel-loader', 31 | options: { 32 | presets: [['@babel/preset-env', { 33 | debug: true, 34 | corejs: 3, 35 | useBuiltIns: "usage" 36 | }]] 37 | } 38 | } 39 | } 40 | ] 41 | }, 42 | plugins: [ 43 | new HtmlWebpackPlugin(), 44 | new MiniCssExtractPlugin() 45 | ] 46 | }; -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | require('es6-promise').polyfill(); 2 | import tabs from './modules/tabs'; 3 | import calculator from './modules/calculator'; 4 | import cards from './modules/cards'; 5 | import forms from './modules/forms'; 6 | import modal from './modules/modal'; 7 | import timer from './modules/timer'; 8 | import slider from './modules/slider'; 9 | import {openModal} from './modules/modal'; 10 | 11 | window.addEventListener('DOMContentLoaded', function() { 12 | 13 | const modalTimerId = setTimeout(() => openModal('.modal', modalTimerId)); 14 | 15 | tabs('.tabheader__item', '.tabcontent', '.tabheader__items', 'tabheader__item_active'); 16 | calculator(); 17 | cards(); 18 | forms('form', modalTimerId); 19 | modal('[data-modal]', '.modal', modalTimerId); 20 | timer('.timer', '2023-05-24'); 21 | slider({ 22 | container: '.offer__slider', 23 | nextArrow: '.offer__slider-next', 24 | previousArrow: '.offer__slider-prev', 25 | totalCounter: '#total', 26 | currentCounter: '#current', 27 | slide: '.offer__slide', 28 | wrapper: '.offer__slider-wrapper', 29 | field: '.offer__slider-inner' 30 | }); 31 | 32 | }); -------------------------------------------------------------------------------- /js/modules/tabs.js: -------------------------------------------------------------------------------- 1 | function tabs(tabsSelector, tabsContentSelector, tabsParentSelector, activeClass) { 2 | // Tabs 3 | 4 | let tabs = document.querySelectorAll(tabsSelector), 5 | tabsContent = document.querySelectorAll(tabsContentSelector), 6 | tabsParent = document.querySelector(tabsParentSelector); 7 | 8 | function hideTabContent() { 9 | 10 | tabsContent.forEach(item => { 11 | item.classList.add('hide'); 12 | item.classList.remove('show', 'fade'); 13 | }); 14 | 15 | tabs.forEach(item => { 16 | item.classList.remove(activeClass); 17 | }); 18 | } 19 | 20 | function showTabContent(i = 0) { 21 | tabsContent[i].classList.add('show', 'fade'); 22 | tabsContent[i].classList.remove('hide'); 23 | tabs[i].classList.add(activeClass); 24 | } 25 | 26 | hideTabContent(); 27 | showTabContent(); 28 | 29 | tabsParent.addEventListener('click', function(event) { 30 | const target = event.target; 31 | if(target && target.classList.contains(tabsSelector.slice(1))) { 32 | tabs.forEach((item, i) => { 33 | if (target == item) { 34 | hideTabContent(); 35 | showTabContent(i); 36 | } 37 | }); 38 | } 39 | }); 40 | } 41 | 42 | export default tabs; -------------------------------------------------------------------------------- /icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 16 | 18 | image/svg+xml 19 | 21 | 22 | 23 | 24 | 26 | 29 | 33 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /js/modules/timer.js: -------------------------------------------------------------------------------- 1 | function timer(id, deadline) { 2 | // Timer 3 | 4 | function getTimeRemaining(endtime) { 5 | const t = Date.parse(endtime) - Date.parse(new Date()), 6 | days = Math.floor( (t/(1000*60*60*24)) ), 7 | seconds = Math.floor( (t/1000) % 60 ), 8 | minutes = Math.floor( (t/1000/60) % 60 ), 9 | hours = Math.floor( (t/(1000*60*60) % 24) ); 10 | 11 | return { 12 | 'total': t, 13 | 'days': days, 14 | 'hours': hours, 15 | 'minutes': minutes, 16 | 'seconds': seconds 17 | }; 18 | } 19 | 20 | function getZero(num){ 21 | if (num >= 0 && num < 10) { 22 | return '0' + num; 23 | } else { 24 | return num; 25 | } 26 | } 27 | 28 | function setClock(selector, endtime) { 29 | 30 | const timer = document.querySelector(selector), 31 | days = timer.querySelector("#days"), 32 | hours = timer.querySelector('#hours'), 33 | minutes = timer.querySelector('#minutes'), 34 | seconds = timer.querySelector('#seconds'), 35 | timeInterval = setInterval(updateClock, 1000); 36 | 37 | updateClock(); 38 | 39 | function updateClock() { 40 | const t = getTimeRemaining(endtime); 41 | 42 | days.innerHTML = getZero(t.days); 43 | hours.innerHTML = getZero(t.hours); 44 | minutes.innerHTML = getZero(t.minutes); 45 | seconds.innerHTML = getZero(t.seconds); 46 | 47 | if (t.total <= 0) { 48 | clearInterval(timeInterval); 49 | } 50 | } 51 | } 52 | 53 | setClock(id, deadline); 54 | 55 | } 56 | 57 | export default timer; -------------------------------------------------------------------------------- /js/modules/modal.js: -------------------------------------------------------------------------------- 1 | function closeModal(modalSelector) { 2 | const modal = document.querySelector(modalSelector); 3 | 4 | modal.classList.add('hide'); 5 | modal.classList.remove('show'); 6 | document.body.style.overflow = ''; 7 | } 8 | 9 | function openModal(modalSelector, modalTimerId) { 10 | const modal = document.querySelector(modalSelector); 11 | 12 | modal.classList.add('show'); 13 | modal.classList.remove('hide'); 14 | document.body.style.overflow = 'hidden'; 15 | 16 | if (modalTimerId) { 17 | clearInterval(modalTimerId); 18 | } 19 | } 20 | 21 | function modal(triggerSelector, modalSelector, modalTimerId) { 22 | // Modal 23 | 24 | const modalTrigger = document.querySelectorAll(triggerSelector), 25 | modal = document.querySelector(modalSelector); 26 | 27 | modalTrigger.forEach(btn => { 28 | btn.addEventListener('click', () => openModal(modalSelector, modalTimerId)); 29 | }); 30 | 31 | modal.addEventListener('click', (e) => { 32 | if (e.target === modal || e.target.getAttribute('data-close') == "") { 33 | closeModal(modalSelector); 34 | } 35 | }); 36 | 37 | document.addEventListener('keydown', (e) => { 38 | if (e.code === "Escape" && modal.classList.contains('show')) { 39 | closeModal(modalSelector); 40 | } 41 | }); 42 | 43 | function showModalByScroll() { 44 | if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) { 45 | openModal(modalSelector, modalTimerId); 46 | window.removeEventListener('scroll', showModalByScroll); 47 | } 48 | } 49 | window.addEventListener('scroll', showModalByScroll); 50 | 51 | 52 | } 53 | 54 | export default modal; 55 | export {closeModal}; 56 | export {openModal}; -------------------------------------------------------------------------------- /js/modules/cards.js: -------------------------------------------------------------------------------- 1 | import {getResource} from '../services/services'; 2 | function cards() { 3 | class MenuCard { 4 | constructor(src, alt, title, descr, price, parentSelector, ...classes) { 5 | this.src = src; 6 | this.alt = alt; 7 | this.title = title; 8 | this.descr = descr; 9 | this.price = price; 10 | this.classes = classes; 11 | this.parent = document.querySelector(parentSelector); 12 | // this.transfer = 27; 13 | // this.changeToUAH(); 14 | } 15 | 16 | // changeToUAH() { 17 | // this.price = this.price * this.transfer; 18 | // } 19 | 20 | render() { 21 | const element = document.createElement('div'); 22 | 23 | if (this.classes.length === 0) { 24 | this.classes = "menu__item"; 25 | element.classList.add(this.classes); 26 | } else { 27 | this.classes.forEach(className => element.classList.add(className)); 28 | } 29 | 30 | element.innerHTML = ` 31 | ${this.alt} 32 |

${this.title}

33 |
${this.descr}
34 |
35 |
36 |
Price:
37 |
$${this.price}/week
38 |
39 | `; 40 | this.parent.append(element); 41 | } 42 | } 43 | 44 | getResource('http://localhost:3000/menu') 45 | .then(data => { 46 | data.forEach(({img, altimg, title, descr, price}) => { 47 | new MenuCard(img, altimg, title, descr, price, ".menu .container").render(); 48 | }); 49 | }); 50 | } 51 | 52 | export default cards; -------------------------------------------------------------------------------- /icons/veg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /js/modules/forms.js: -------------------------------------------------------------------------------- 1 | import {closeModal, openModal} from './modal'; 2 | import {postData} from '../services/services'; 3 | function forms(formsSelector, modalTimerId) { 4 | const forms = document.querySelectorAll(formsSelector); 5 | const message = { 6 | loading: 'img/form/spinner.svg', 7 | success: 'Thank you! We will contact you soon!', 8 | failure: 'Something goes wrong...' 9 | }; 10 | 11 | forms.forEach(item => { 12 | bindPostData(item); 13 | }); 14 | 15 | function bindPostData(form) { 16 | form.addEventListener('submit', (e) => { 17 | e.preventDefault(); 18 | 19 | let statusMessage = document.createElement('img'); 20 | statusMessage.src = message.loading; 21 | statusMessage.style.cssText = ` 22 | display: block; 23 | margin: 0 auto; 24 | `; 25 | form.insertAdjacentElement('afterend', statusMessage); 26 | 27 | const formData = new FormData(form); 28 | 29 | const json = JSON.stringify(Object.fromEntries(formData.entries())); 30 | 31 | postData('http://localhost:3000/requests', json) 32 | .then(data => { 33 | console.log(data); 34 | showThanksModal(message.success); 35 | statusMessage.remove(); 36 | }).catch(() => { 37 | showThanksModal(message.failure); 38 | }).finally(() => { 39 | form.reset(); 40 | }); 41 | }); 42 | } 43 | 44 | function showThanksModal(message) { 45 | const prevModalDialog = document.querySelector('.modal__dialog'); 46 | 47 | prevModalDialog.classList.add('hide'); 48 | openModal('.modal', modalTimerId); 49 | 50 | const thanksModal = document.createElement('div'); 51 | thanksModal.classList.add('modal__dialog'); 52 | thanksModal.innerHTML = ` 53 |
54 |
×
55 |
${message}
56 |
57 | `; 58 | document.querySelector('.modal').append(thanksModal); 59 | setTimeout(() => { 60 | thanksModal.remove(); 61 | prevModalDialog.classList.add('show'); 62 | prevModalDialog.classList.remove('hide'); 63 | closeModal('.modal'); 64 | }, 4000); 65 | } 66 | } 67 | 68 | export default forms; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* -------------------------------------------------------------------------------- /js/modules/chat.js: -------------------------------------------------------------------------------- 1 | const chatWidget = document.querySelector('.chat-widget'); 2 | const inputField = document.querySelector('.chat-widget__input'); 3 | const messages = document.querySelector( '.chat-widget__messages' ); 4 | const messageText = document.querySelector( '.message__text' ); 5 | const messageClient = document.querySelector( '.message_client' ); 6 | const enter = 13; 7 | let timer; 8 | 9 | const botReplies = ['Hi there, how can we help you today?', 10 | 'Thanks so much for reaching out! What brings you in today?', 11 | 'Hey! I’ve got a 20% off deal today!', 12 | 'Try our healthy menu today', 13 | 'This was made specifically for you!', 14 | 'I am here to help you!', 15 | 'I am not really helpful, but choose happy. Live the moment. Take it easy', 16 | 'Remember: first, we eat. Then, we do everything else.', 17 | 'Try our new seafood diet - I see food, I eat it.', 18 | ]; 19 | 20 | chatWidget.addEventListener('click', getChatWidget); 21 | 22 | inputField.addEventListener('keydown', function(e) { 23 | if (e.keyCode === enter) { 24 | userSendMessage(); 25 | setTimeout(botReplyMessage, 1000); 26 | } 27 | }); 28 | 29 | function startTimer() { 30 | return timer == setTimeout(askQuestion, 30000); 31 | } 32 | 33 | function stopTimer() { 34 | return clearTimeout(timer); 35 | } 36 | 37 | function askQuestion() { 38 | if (chatWidget.classList.contains('chat-widget_active')){ 39 | messages.innerHTML += ` 40 |
41 |
${getTime()}
42 |
Are you still here?
43 |
44 | `; 45 | messages.scrollIntoView(false); 46 | } 47 | } 48 | 49 | function getChatWidget() { 50 | chatWidget.classList.add('chat-widget_active'); 51 | messageText.style.display = 'none'; 52 | messageClient.style.display = 'none'; 53 | } 54 | 55 | // function getInput() { 56 | // return inputField.value; 57 | // } 58 | 59 | function getRandomReply() { 60 | let randomReply = botReplies[Math.floor(Math.random() * botReplies.length)]; 61 | messageText.textContent = randomReply; 62 | return messageText.textContent; 63 | } 64 | 65 | function getTime() { 66 | return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); 67 | } 68 | 69 | function userSendMessage() { 70 | startTimer(); 71 | messages.innerHTML += ` 72 |
73 |
${getTime()}
74 |
${inputField.value}
75 |
76 | `; 77 | inputField.value = ''; 78 | messages.scrollIntoView(false); 79 | stopTimer(); 80 | } 81 | 82 | function botReplyMessage() { 83 | messages.innerHTML += ` 84 |
85 |
${getTime()}
86 |
${getRandomReply()}
87 |
88 | `; 89 | messages.scrollIntoView(false); 90 | } -------------------------------------------------------------------------------- /img/form/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /js/modules/calculator.js: -------------------------------------------------------------------------------- 1 | function calculator() { 2 | // Calculator 3 | 4 | const result = document.querySelector('.calculating__result span'); 5 | 6 | let sex, height, weight, age, ratio; 7 | 8 | if (localStorage.getItem('sex')) { 9 | sex = localStorage.getItem('sex'); 10 | } else { 11 | sex = 'female'; 12 | localStorage.setItem('sex', 'female'); 13 | } 14 | 15 | if (localStorage.getItem('ratio')) { 16 | ratio = localStorage.getItem('ratio'); 17 | } else { 18 | ratio = 1.375; 19 | localStorage.setItem('ratio', 'female'); 20 | } 21 | 22 | function initLocalSettings(selector, activeClass) { 23 | const elements = document.querySelectorAll(selector); 24 | 25 | elements.forEach(elem => { 26 | elem.classList.remove(activeClass); 27 | if (elem.getAttribute('id') === localStorage.getItem('sex')) { 28 | elem.classList.add(activeClass); 29 | } 30 | 31 | if (elem.getAttribute('data-ratio') === localStorage.getItem('ratio')) { 32 | elem.classList.add(activeClass); 33 | } 34 | }); 35 | } 36 | 37 | initLocalSettings('#gender div', 'calculating__choose-item_active'); 38 | initLocalSettings('.calculating__choose_big div', 'calculating__choose-item_active'); 39 | 40 | function calcTotal() { 41 | if (!sex || !height || !weight || !age || !ratio) { 42 | result.textContent = '____'; 43 | return; 44 | } 45 | if (sex === 'female') { 46 | result.textContent = Math.round((447.6 + (9.2 * weight) + (3.1 * height) - (4.3 * age)) * ratio); 47 | } else { 48 | result.textContent = Math.round((88.36 + (13.4 * weight) + (4.8 * height) - (5.7 * age)) * ratio); 49 | } 50 | } 51 | 52 | calcTotal(); 53 | 54 | function getStaticInformation(selector, activeClass) { 55 | const elements = document.querySelectorAll(selector); 56 | 57 | elements.forEach(elem => { 58 | elem.addEventListener('click', (e) => { 59 | if (e.target.getAttribute('data-ratio')) { 60 | ratio = +e.target.getAttribute('data-ratio'); 61 | localStorage.setItem('ratio', +e.target.getAttribute('data-ratio')); 62 | } else { 63 | sex = e.target.getAttribute('id'); 64 | localStorage.setItem('sex', e.target.getAttribute('id')); 65 | } 66 | 67 | elements.forEach(elem => { 68 | elem.classList.remove(activeClass); 69 | }); 70 | 71 | e.target.classList.add(activeClass); 72 | 73 | calcTotal(); 74 | }); 75 | }); 76 | } 77 | 78 | getStaticInformation('#gender div', 'calculating__choose-item_active'); 79 | getStaticInformation('.calculating__choose_big div', 'calculating__choose-item_active'); 80 | 81 | function getDynamicInformation(selector) { 82 | const input = document.querySelector(selector); 83 | 84 | input.addEventListener('input', () => { 85 | // If input value is not digits 86 | if (input.value.match(/\D/g)) { 87 | input.style.border = "1px solid red"; 88 | } else { 89 | input.style.border = 'none'; 90 | } 91 | 92 | switch(input.getAttribute('id')) { 93 | case "height": 94 | height = +input.value; 95 | break; 96 | case "weight": 97 | weight = +input.value; 98 | break; 99 | case "age": 100 | age = +input.value; 101 | break; 102 | } 103 | 104 | calcTotal(); 105 | }); 106 | } 107 | 108 | getDynamicInformation('#height'); 109 | getDynamicInformation('#weight'); 110 | getDynamicInformation('#age'); 111 | 112 | } 113 | 114 | export default calculator; -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | { 2 | "menu": [ 3 | { 4 | "img": "img/tabs/vegy.jpg", 5 | "altimg": "vegy", 6 | "title": "Menu 'Fitness'", 7 | "descr": "Menu 'Fitness' - innovative approach for food preparation: rich in fruits and vegetables has been scientifically proven to provide numerous health benefits, such as reducing your risk of several chronic diseases and keeping your body healthy.", 8 | "price": 255 9 | }, 10 | { 11 | "img": "img/tabs/post.jpg", 12 | "altimg": "post", 13 | "title": "Menu 'Non-diary", 14 | "descr": "Menu 'Non-diary' - This entire menu plan is completely dairy free. It’s also optionally egg-free, gluten-free, tree nut-free, peanut-free, and soy-free. Note that eggs are recommended for a couple of the gluten-free options. ", 15 | "price": 215 16 | }, 17 | { 18 | "img": "img/tabs/elite.jpg", 19 | "altimg": "elite", 20 | "title": "Menu 'Premium'", 21 | "descr": "Menu 'Premium' - Emphasizes fruits, vegetables, whole grains, and fat-free or low-fat milk and milk products. Includes a variety of protein foods such as seafood, lean meats and poultry, eggs, beans and peas, nuts, and seeds. Is low in added sugars, sodium, saturated fats, trans fats, and cholesterol. ", 22 | "price": 285 23 | } 24 | ], 25 | "requests": [ 26 | { 27 | "name": "g", 28 | "phone": "5", 29 | "id": 1 30 | }, 31 | { 32 | "name": "A", 33 | "phone": "34", 34 | "id": 2 35 | }, 36 | { 37 | "name": "о", 38 | "phone": "7", 39 | "id": 3 40 | }, 41 | { 42 | "name": "U", 43 | "phone": "8", 44 | "id": 4 45 | }, 46 | { 47 | "name": "Anastasia", 48 | "phone": "1234567", 49 | "id": 5 50 | }, 51 | { 52 | "name": "Anastasia", 53 | "phone": "78", 54 | "id": 6 55 | }, 56 | { 57 | "name": "j", 58 | "phone": "78", 59 | "id": 7 60 | }, 61 | { 62 | "name": "K", 63 | "phone": "67", 64 | "id": 8 65 | }, 66 | { 67 | "name": "h", 68 | "phone": "89", 69 | "id": 9 70 | }, 71 | { 72 | "name": "u", 73 | "phone": "7", 74 | "id": 10 75 | }, 76 | { 77 | "name": "Nancy", 78 | "phone": "123", 79 | "id": 11 80 | }, 81 | { 82 | "name": "hj", 83 | "phone": "67", 84 | "id": 12 85 | }, 86 | { 87 | "name": "jrko", 88 | "phone": "34", 89 | "id": 13 90 | }, 91 | { 92 | "name": "Anastasia", 93 | "phone": "123456789", 94 | "id": 14 95 | }, 96 | { 97 | "name": "hjk", 98 | "phone": "23", 99 | "id": 15 100 | }, 101 | { 102 | "name": "hj", 103 | "phone": "56", 104 | "id": 16 105 | }, 106 | { 107 | "name": "tyu", 108 | "phone": "678", 109 | "id": 17 110 | }, 111 | { 112 | "name": "jkl", 113 | "phone": "67", 114 | "id": 18 115 | }, 116 | { 117 | "name": "ui", 118 | "phone": "78", 119 | "id": 19 120 | }, 121 | { 122 | "name": "io", 123 | "phone": "78", 124 | "id": 20 125 | }, 126 | { 127 | "name": "jkk", 128 | "phone": "90", 129 | "id": 21 130 | }, 131 | { 132 | "name": "Anastasia", 133 | "phone": "789", 134 | "id": 22 135 | }, 136 | { 137 | "name": "h", 138 | "phone": "5", 139 | "id": 23 140 | }, 141 | { 142 | "name": "f", 143 | "phone": "6", 144 | "id": 24 145 | }, 146 | { 147 | "name": "5", 148 | "phone": "6", 149 | "id": 25 150 | }, 151 | { 152 | "name": "Anastasia", 153 | "phone": "123", 154 | "id": 26 155 | }, 156 | { 157 | "name": "Anastasia ", 158 | "phone": "987", 159 | "id": 27 160 | }, 161 | { 162 | "name": "Anastasia", 163 | "phone": "123", 164 | "id": 28 165 | }, 166 | { 167 | "name": "Victoria", 168 | "phone": "12345", 169 | "id": 29 170 | }, 171 | { 172 | "name": "aaa", 173 | "phone": "123", 174 | "id": 30 175 | }, 176 | { 177 | "name": "d", 178 | "phone": "3", 179 | "id": 31 180 | } 181 | ] 182 | } -------------------------------------------------------------------------------- /js/modules/slider.js: -------------------------------------------------------------------------------- 1 | function slider({container, slide, nextArrow, previousArrow, totalCounter, currentCounter, wrapper, field}) { 2 | // Slider 3 | 4 | const slides = document.querySelectorAll(slide); 5 | const previous = document.querySelector(previousArrow); 6 | const next = document.querySelector(nextArrow); 7 | const total = document.querySelector(totalCounter); 8 | const current = document.querySelector(currentCounter); 9 | const slidesWrapper = document.querySelector(wrapper); 10 | const slidesField = document.querySelector(field); 11 | const width = window.getComputedStyle(slidesWrapper).width; 12 | const slider = document.querySelector(container); 13 | 14 | let slideIndex = 1; 15 | let offset = 0; 16 | 17 | if (slides.length < 10) { 18 | total.textContent = `0${slides.length}`; 19 | current.textContent = `0${slideIndex}`; 20 | } else { 21 | total.textContent = slides.length; 22 | current.textContent = slideIndex; 23 | } 24 | 25 | slidesField.style.width = 100 * slides.length + '%'; 26 | slidesField.style.display = 'flex'; 27 | slidesField.style.transition = '0.5s all'; 28 | 29 | slidesWrapper.style.overflow = 'hidden'; 30 | 31 | slides.forEach(slide => { 32 | slide.style.width = width; 33 | }); 34 | 35 | slider.style.position = 'relative'; 36 | 37 | const indicators = document.createElement('ol'); 38 | const dots = []; 39 | 40 | indicators.classList.add('carousel-indicators'); 41 | indicators.style.cssText = ` 42 | position: absolute; 43 | right: 0; 44 | bottom: 0; 45 | left: 0; 46 | z-index: 15; 47 | display: flex; 48 | justify-content: center; 49 | margin-right: 15%; 50 | margin-left: 15%; 51 | list-style: none; 52 | `; 53 | 54 | slider.append(indicators); 55 | 56 | for (let i = 0; i < slides.length; i++) { 57 | const dot = document.createElement('li'); 58 | dot.setAttribute('data-slide-to', i + 1); 59 | dot.style.cssText = ` 60 | box-sizing: content-box; 61 | flex: 0 1 auto; 62 | width: 30px; 63 | height: 6px; 64 | margin-right: 3px; 65 | margin-left: 3px; 66 | cursor: pointer; 67 | background-color: #fff; 68 | background-clip: padding-box; 69 | border-top: 10px solid transparent; 70 | border-bottom: 10px solid transparent; 71 | opacity: .5; 72 | transition: opacity .6s ease; 73 | `; 74 | if (i == 0) { 75 | dot.style.opacity = 1; 76 | } 77 | indicators.append(dot); 78 | dots.push(dot); 79 | } 80 | 81 | function showActiveDot() { 82 | dots.forEach(dot => dot.style.opacity = ".5"); 83 | dots[slideIndex-1].style.opacity = 1; 84 | } 85 | 86 | function showSlideNumber() { 87 | if (slides.length < 10) { 88 | current.textContent = `0${slideIndex}`; 89 | } else { 90 | current.textContent = slideIndex; 91 | } 92 | } 93 | 94 | function deleteNotDigits(str) { 95 | return +str.replace(/\D/g, ''); 96 | } 97 | 98 | next.addEventListener('click', () => { 99 | // using RegExp for extracting pixels. Change everithing, that is not a number for an empty string 100 | if (offset == deleteNotDigits(width) * (slides.length - 1)) { 101 | offset = 0; 102 | } else { 103 | offset += deleteNotDigits(width); 104 | } 105 | 106 | slidesField.style.transform = `translateX(-${offset}px)`; 107 | 108 | if (slideIndex == slides.length) { 109 | slideIndex = 1; 110 | } else { 111 | slideIndex++; 112 | } 113 | 114 | showSlideNumber(); 115 | showActiveDot(); 116 | }); 117 | 118 | previous.addEventListener('click', () => { 119 | if (offset == 0) { 120 | offset = deleteNotDigits(width) * (slides.length - 1); 121 | } else { 122 | offset -= deleteNotDigits(width); 123 | } 124 | 125 | slidesField.style.transform = `translateX(-${offset}px)`; 126 | 127 | if (slideIndex == 1) { 128 | slideIndex = slides.length; 129 | } else { 130 | slideIndex--; 131 | } 132 | 133 | showSlideNumber(); 134 | showActiveDot(); 135 | }); 136 | 137 | dots.forEach(dot => { 138 | dot.addEventListener('click', (e) => { 139 | const slideTo = e.target.getAttribute('data-slide-to'); 140 | 141 | slideIndex = slideTo; 142 | offset = deleteNotDigits(width) * (slideTo - 1); 143 | 144 | slidesField.style.transform = `translateX(-${offset}px)`; 145 | 146 | showSlideNumber(); 147 | showActiveDot(); 148 | }); 149 | }); 150 | 151 | 152 | // Simple slides 153 | 154 | // showSlides(slideIndex); 155 | 156 | // if (slides.length < 10) { 157 | // total.textContent = `0${slides.length}`; 158 | // } else { 159 | // total.textContent = slides.length; 160 | // } 161 | 162 | // function showSlides(n) { 163 | // if (n > slides.length) { 164 | // slideIndex = 1; 165 | // } 166 | 167 | // if (n < 1) { 168 | // slideIndex = slides.length; 169 | // } 170 | 171 | // slides.forEach(item => item.style.display = 'none'); 172 | // slides[slideIndex - 1].style.display = 'block'; 173 | 174 | // if (slides.length < 10) { 175 | // current.textContent = `0${slideIndex}`; 176 | // } else { 177 | // current.textContent = slideIndex; 178 | // } 179 | // } 180 | 181 | // function plusSlides(n) { 182 | // showSlides(slideIndex += n); 183 | // } 184 | 185 | // previous.addEventListener('click', function() { 186 | // plusSlides(-1); 187 | // }); 188 | 189 | // next.addEventListener('click', function() { 190 | // plusSlides(1); 191 | // }); 192 | 193 | } 194 | 195 | export default slider; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Foodie 7 | 8 | 9 | 10 | 11 |
12 |
13 | 16 | 20 |
21 |
22 | 23 |
24 |
25 |
26 |
Social media
27 |
28 | 29 | instagram 30 | 31 | 32 | facebook 33 | 34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 | vegy 42 |
43 | Menu "Fitness" - innovative approach for food preparation: rich in fruits and vegetables has been scientifically proven to provide numerous health benefits, such as reducing your risk of several chronic diseases and keeping your body healthy. 44 |
45 |
46 |
47 | elite 48 |
49 | Menu “Premium” - Emphasizes fruits, vegetables, whole grains, and fat-free or low-fat milk and milk products. Includes a variety of protein foods such as seafood, lean meats and poultry, eggs, beans and peas, nuts, and seeds. Is low in added sugars, sodium, saturated fats, trans fats, and cholesterol. 50 |
51 |
52 |
53 | post 54 |
55 | Menu "Non-diary" - This entire menu plan is completely dairy free. It’s also optionally egg-free, gluten-free, tree nut-free, peanut-free, and soy-free. Note that eggs are recommended for a couple of the gluten-free options. 56 |
57 |
58 |
59 | vegy 60 |
61 | Menu "Balanced" - Whole and intact grains—whole wheat, barley, wheat berries, quinoa, oats, brown rice, and foods made with them, such as whole wheat pasta—have a milder effect on blood sugar and insulin than white bread, white rice, and other refined grains. 62 |
63 |
64 |
65 |

Choose your food style

66 |
67 |
Fitness
68 |
Premium
69 |
Non-diary
70 |
Balanced
71 |
72 |
73 |
74 |
Live your best life!
75 |
76 |
77 | 78 |
79 | 80 |
81 |
82 |
83 |
84 |

What we can offer?

85 |
86 | Our main idea is proper nutrition. It can be delicious. We are not just a delivery, we are a service! We took care of all the calculations of proteins, fats, carbohydrates, calories, portion sizes and other important but subtle aspects. All you have left is healthy, satisfying and proper food, which we bring right to your door. 87 |
88 |
89 |
90 | 91 |
92 |
93 |
94 |
95 |

Quick and healthy

96 |
97 | Cooking at home takes a lot of effort, time and nerves. We bring food for the whole day at once, and you can act as you like, without adjusting to anyone and being confident in the quality of the product! 98 |
99 |

Right products

100 |
101 | We have developed a special menu that takes into account all the nuances of proper nutrition, from the balance of BJU to their preparation and splitting the diet. 102 |
103 |
104 |
105 |
106 |
107 | prev 108 |
109 | 03 110 | / 111 | 04 112 |
113 | next 114 |
115 |
116 |
117 |
118 |
119 | pepper 120 |
121 |
122 | food 123 |
124 |
125 | oil 126 |
127 |
128 | paprika 129 |
130 |
131 |
132 |
133 |
134 |
135 | 136 |
137 | 138 |
139 |
140 |

Let's calculate your daily calorage 141 |

142 |
143 |
144 | Your gender 145 |
146 |
147 |
Woman
148 |
Man
149 |
150 | 151 |
152 | Your body type 153 |
154 |
155 | 156 | 157 | 158 |
159 | 160 |
161 | How intense is your daily activity? 162 |
163 |
164 |
Extra low activity
165 |
Low activity
166 |
Average activity
167 |
High activity
168 |
169 | 170 |
171 | 172 |
173 |
174 | Your daily calorage: 175 |
176 |
177 | 2700 calories 178 |
179 |
180 |
181 |
182 |
183 | 184 |
185 | 186 |
187 |

Our daily menu

188 | 189 |
190 |
191 |
192 |
193 |
194 | 195 |
196 |
197 |
Order free trial now
198 |
199 | 200 | 201 | right 202 | 203 |
204 |
205 |
206 | 207 |
208 | 209 |
210 |
211 |
212 |
213 |
Promotion for our new clients.
214 |
215 | We value every client and offer you to become one of them on very favorable terms. 216 | Anyone who orders food delivery for a week will receive a discount of 20%! 217 |

218 | 219 |
220 |
221 |
222 |
Unill the end of promotion:
223 |
224 |
225 | 12 226 | days 227 |
228 |
229 | 20 230 | hours 231 |
232 |
233 | 56 234 | minutes 235 |
236 |
237 | 20 238 | seconds 239 |
240 |
241 |
242 |
243 |
244 | 245 |
246 |
247 |
248 |
249 | 250 | 251 |
252 |
253 |
254 |
255 | 256 |
257 |
258 |
259 |
260 | 261 |
262 |
263 | 264 |
265 |
266 |
267 | Chat with us! We are online 268 |
269 |
270 |
271 | 272 | 273 | 290 | 291 |
292 |
293 |
294 |
295 |
×
296 |
We will contact you soon!
297 | 298 | 299 | 300 |
301 |
302 |
303 |
304 | 305 | 306 | 307 | 308 | -------------------------------------------------------------------------------- /icons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext); 2 | * { 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | font-family: Roboto, sans-serif; 7 | } 8 | :root { 9 | --main-color: #59CE8F; 10 | } 11 | a { 12 | text-decoration: none; 13 | } 14 | .btn { 15 | width: 220px; 16 | height: 65px; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | background-color: #fff; 21 | font-size: 18px; 22 | font-weight: 700; 23 | border: 1px solid rgba(0, 0, 0, .2); 24 | box-shadow: 0 4px 15px rgba(0, 0, 0, .2); 25 | cursor: pointer; 26 | transition: .3s all; 27 | outline: 0; 28 | } 29 | .btn_white { 30 | background-color: #fff; 31 | } 32 | .btn_dark { 33 | background-color: #303030; 34 | color: #fff; 35 | border: none; 36 | } 37 | .btn_min { 38 | height: 50px; 39 | } 40 | .btn:hover { 41 | box-shadow: 0 4px 30px rgba(0, 0, 0, .3); 42 | } 43 | .container { 44 | max-width: 1200px; 45 | margin: 0 auto; 46 | } 47 | .divider { 48 | width: 330px; 49 | height: 1px; 50 | margin: 0 auto; 51 | background-color: rgba(0, 0, 0, .5); 52 | } 53 | .title { 54 | font-size: 36px; 55 | font-weight: 400; 56 | } 57 | .header { 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | height: 150px; 62 | padding: 0 100px; 63 | } 64 | .header__left-block { 65 | display: flex; 66 | justify-content: space-between; 67 | min-width: 550px; 68 | } 69 | .header__logo { 70 | max-width: 170px; 71 | } 72 | .header__logo img { 73 | width: 100%} 74 | .header__links { 75 | display: flex; 76 | align-items: center; 77 | } 78 | .header__link { 79 | position: relative; 80 | margin-right: 45px; 81 | font-weight: 700; 82 | font-size: 18px; 83 | color: #303030; 84 | } 85 | .header__link:after { 86 | content: ''; 87 | position: absolute; 88 | display: block; 89 | width: 110%; 90 | left: -5%; 91 | bottom: -1px; 92 | z-index: -1; 93 | height: 8px; 94 | background: var(--main-color); 95 | } 96 | .header__link:last-child { 97 | margin-right: 0; 98 | } 99 | .sidepanel { 100 | position: fixed; 101 | left: 60px; 102 | top: 240px; 103 | height: 400px; 104 | width: 25px; 105 | display: flex; 106 | flex-direction: column; 107 | justify-content: space-between; 108 | align-items: center; 109 | } 110 | .sidepanel__text { 111 | width: 120px; 112 | height: 120px; 113 | font-size: 14px; 114 | } 115 | .sidepanel__text span { 116 | display: flex; 117 | transform: rotate(-90deg) translateX(-50px); 118 | } 119 | .sidepanel__divider { 120 | width: 1px; 121 | height: 165px; 122 | background-color: #000; 123 | } 124 | .sidepanel__icon { 125 | width: 24px; 126 | height: 24px; 127 | } 128 | .sidepanel__icon img { 129 | width: 100%} 130 | .preview { 131 | padding: 28px 0 100px 0; 132 | position: relative; 133 | } 134 | .preview__life { 135 | font-weight: 700; 136 | font-size: 20px; 137 | margin-left: 35px; 138 | margin-top: 35px; 139 | } 140 | .bgc_blue { 141 | position: absolute; 142 | right: 0; 143 | top: -155px; 144 | width: 50vw; 145 | height: 900px; 146 | background: rgba(146, 242, 255, .15); 147 | z-index: -1; 148 | } 149 | .tabcontainer { 150 | display: flex; 151 | width: 1130px; 152 | margin: 0 auto; 153 | box-shadow: 0 4px 30px rgba(0, 0, 0, .25); 154 | } 155 | .tabcontent { 156 | width: 850px; 157 | position: relative; 158 | } 159 | .tabcontent img { 160 | width: 100%; 161 | height: 100%; 162 | object-fit: cover; 163 | } 164 | .tabcontent__descr { 165 | position: absolute; 166 | top: 300px; 167 | right: -177px; 168 | width: 550px; 169 | height: 359px; 170 | background: #FCF8E8; 171 | padding: 50px; 172 | font-size: 24px; 173 | font-weight: 300; 174 | line-height: 36px; 175 | color: rgba(0, 0, 0, .7); 176 | } 177 | .tabheader { 178 | width: 280px; 179 | padding: 35px 30px; 180 | background-color: #fff; 181 | } 182 | .tabheader h3 { 183 | font-weight: 700; 184 | font-size: 16px; 185 | } 186 | .tabheader__items { 187 | margin-top: 35px; 188 | padding-left: 26px; 189 | border-left: 1px solid #000; 190 | } 191 | .tabheader__item { 192 | font-weight: 700; 193 | font-size: 18px; 194 | font-weight: 300; 195 | margin-top: 10px; 196 | color: rgba(0, 0, 0, .6); 197 | cursor: pointer; 198 | transition: .3s all; 199 | } 200 | .tabheader__item_active { 201 | color: #000; 202 | font-size: 22px; 203 | font-weight: 700; 204 | } 205 | .offer { 206 | padding: 70px 0 100px 0; 207 | position: relative; 208 | } 209 | .offer .container { 210 | display: flex; 211 | justify-content: space-between; 212 | } 213 | .offer .bgc_y { 214 | position: absolute; 215 | width: 1109px; 216 | height: 780px; 217 | background: rgba(243, 255, 222, .45); 218 | z-index: -1; 219 | top: 50px; 220 | } 221 | .offer__text { 222 | width: 580px; 223 | } 224 | .offer__descr { 225 | font-size: 18px; 226 | margin-top: 30px; 227 | font-weight: 300; 228 | line-height: 24px; 229 | } 230 | .offer__action { 231 | display: flex; 232 | align-items: center; 233 | justify-content: flex-end; 234 | } 235 | .offer__advantages { 236 | width: 330px; 237 | margin-top: 50px; 238 | } 239 | .offer__advantages h2 { 240 | font-weight: 700; 241 | font-size: 20px; 242 | margin-top: 20px; 243 | } 244 | .offer__advantages h2:first-child { 245 | margin-top: 70px; 246 | } 247 | .offer__advantages-text { 248 | margin-top: 20px; 249 | font-size: 18px; 250 | font-weight: 300; 251 | line-height: 21px; 252 | } 253 | .offer__slider { 254 | width: 650px; 255 | margin-top: 50px; 256 | display: flex; 257 | flex-direction: column; 258 | align-items: flex-end; 259 | } 260 | .offer__slider-counter { 261 | display: flex; 262 | width: 180px; 263 | align-items: center; 264 | font-size: 24px; 265 | color: rgba(0, 0, 0, .5); 266 | } 267 | .offer__slider-wrapper { 268 | width: 100%; 269 | margin-top: 15px; 270 | box-shadow: 0 4px 30px rgba(0, 0, 0, .25); 271 | } 272 | .offer__slider-prev { 273 | margin-right: 10px; 274 | cursor: pointer; 275 | } 276 | .offer__slider-next { 277 | margin-left: 10px; 278 | cursor: pointer; 279 | } 280 | .offer__slider #current { 281 | font-size: 48px; 282 | font-weight: 700; 283 | color: #000; 284 | } 285 | .offer__slide { 286 | width: 100%; 287 | height: 390px; 288 | } 289 | .offer__slide img { 290 | width: 100%; 291 | height: 100%; 292 | object-fit: cover; 293 | } 294 | .calculating { 295 | padding: 50px 0; 296 | } 297 | .calculating .title { 298 | text-align: center; 299 | } 300 | .calculating__field { 301 | width: 100%; 302 | margin-top: 50px; 303 | background: rgba(146, 242, 255, .15); 304 | padding: 30px 0 40px 0; 305 | } 306 | .calculating__subtitle { 307 | text-align: center; 308 | font-size: 18px; 309 | font-weight: 700; 310 | margin-top: 30px; 311 | } 312 | .calculating__subtitle:first-child { 313 | margin-top: 0; 314 | } 315 | .calculating #gender:after { 316 | content: ''; 317 | position: absolute; 318 | top: 50%; 319 | transform: translateY(-50%); 320 | display: block; 321 | width: 16px; 322 | height: 16px; 323 | background: url(../icons/switch.svg) center center/cover no-repeat; 324 | } 325 | .calculating__choose { 326 | position: relative; 327 | display: flex; 328 | margin-top: 30px; 329 | justify-content: center; 330 | } 331 | .calculating__choose-item { 332 | display: flex; 333 | align-items: center; 334 | justify-content: center; 335 | width: 170px; 336 | height: 50px; 337 | padding: 0 10px; 338 | background: #fff; 339 | box-shadow: 0 4px 15px rgba(0, 0, 0, .2); 340 | border: none; 341 | text-align: center; 342 | font-size: 14px; 343 | cursor: pointer; 344 | outline: 0; 345 | transition: .3s all; 346 | } 347 | .calculating__choose-item_active { 348 | color: #fff; 349 | background-color: var(--main-color); 350 | } 351 | .calculating__choose_medium { 352 | width: 743px; 353 | justify-content: space-between; 354 | margin: 30px auto 0 auto; 355 | } 356 | .calculating__choose_big { 357 | width: 930px; 358 | justify-content: space-between; 359 | margin: 30px auto 0 auto; 360 | } 361 | .calculating__choose_big .calculating__choose-item { 362 | width: 200px; 363 | } 364 | .calculating__divider { 365 | width: 490px; 366 | height: 1px; 367 | margin: 40px auto; 368 | background-color: rgba(0, 0, 0, .2); 369 | } 370 | .calculating__total { 371 | width: 490px; 372 | margin: 0 auto; 373 | display: flex; 374 | justify-content: space-between; 375 | align-items: center; 376 | } 377 | .calculating__result { 378 | font-size: 18px; 379 | font-weight: 700; 380 | } 381 | .calculating__result span { 382 | font-size: 42px; 383 | } 384 | .menu { 385 | padding: 40px 0 50px 0; 386 | } 387 | .menu .container { 388 | display: flex; 389 | justify-content: space-between; 390 | align-items: flex-start; 391 | } 392 | .menu .title { 393 | text-align: center; 394 | } 395 | .menu__field { 396 | margin-top: 50px; 397 | padding: 50px 0; 398 | width: 100%; 399 | background: rgba(249, 254, 126, .25); 400 | } 401 | .menu__item { 402 | width: 320px; 403 | min-height: 450px; 404 | background: #fff; 405 | box-shadow: 0 4px 25px rgba(0, 0, 0, .25); 406 | font-size: 16px; 407 | font-weight: 300; 408 | } 409 | .menu__item img { 410 | width: 100%; 411 | height: 200px; 412 | object-fit: cover; 413 | } 414 | .menu__item-subtitle { 415 | font-weight: 700; 416 | font-size: 18px; 417 | padding: 0 20px; 418 | margin-top: 20px; 419 | } 420 | .menu__item-descr { 421 | margin-top: 20px; 422 | padding: 0 20px; 423 | } 424 | .menu__item-divider { 425 | width: 100%; 426 | height: 1px; 427 | background-color: rgba(0, 0, 0, .25); 428 | margin-top: 40px; 429 | } 430 | .menu__item-price { 431 | display: flex; 432 | justify-content: space-between; 433 | align-items: center; 434 | padding: 10px 20px; 435 | } 436 | .menu__item-price span { 437 | font-size: 24px; 438 | font-weight: 700; 439 | } 440 | .order { 441 | padding-bottom: 80px; 442 | } 443 | .order .title { 444 | text-align: center; 445 | } 446 | .order__form { 447 | margin-top: 70px; 448 | padding: 0 100px; 449 | display: flex; 450 | justify-content: space-between; 451 | align-items: center; 452 | } 453 | .order__form img { 454 | transform: scale(1.5); 455 | } 456 | .order__input { 457 | width: 280px; 458 | height: 50px; 459 | background: #fff; 460 | box-shadow: 0 4px 15px rgba(0, 0, 0, .2); 461 | border: none; 462 | font-size: 18px; 463 | text-align: center; 464 | padding: 0 20px; 465 | outline: 0; 466 | } 467 | .promotion { 468 | padding: 70px 0 240px 0; 469 | position: relative; 470 | } 471 | .promotion .container { 472 | display: flex; 473 | } 474 | .promotion .bgc_y { 475 | position: absolute; 476 | width: 50%; 477 | height: 499px; 478 | background: rgba(243, 255, 222, .35); 479 | z-index: -1; 480 | top: -50px; 481 | left: 0; 482 | } 483 | .promotion__text { 484 | width: 50%} 485 | .promotion__descr { 486 | margin-top: 40px; 487 | font-size: 20px; 488 | line-height: 24px; 489 | font-weight: 300; 490 | } 491 | .promotion__descr span { 492 | font-weight: 700; 493 | font-size: 26px; 494 | } 495 | .promotion__timer { 496 | width: 50%} 497 | .promotion__timer .title { 498 | text-align: right; 499 | } 500 | .promotion__timer .timer { 501 | margin-top: 60px; 502 | padding-left: 95px; 503 | display: flex; 504 | justify-content: space-between; 505 | align-items: center; 506 | } 507 | .promotion__timer .timer__block { 508 | width: 102px; 509 | height: 120px; 510 | background: #fff; 511 | box-shadow: 0 4px 20px rgba(0, 0, 0, .25); 512 | font-size: 16px; 513 | font-weight: 300; 514 | text-align: center; 515 | } 516 | .promotion__timer .timer__block span { 517 | display: block; 518 | margin-top: 20px; 519 | margin-bottom: 5px; 520 | font-size: 56px; 521 | font-weight: 700; 522 | } 523 | .footer { 524 | min-height: 180px; 525 | background-color: #303030; 526 | padding: 45px 0 50px 0; 527 | color: #fff; 528 | } 529 | .footer .container { 530 | height: 100%; 531 | display: flex; 532 | justify-content: space-between; 533 | align-items: flex-end; 534 | } 535 | .footer .subtitle { 536 | font-size: 20px; 537 | } 538 | .footer .link { 539 | display: block; 540 | margin-top: 15px; 541 | font-size: 16px; 542 | color: #fff; 543 | } 544 | .footer .call { 545 | text-align: right; 546 | } 547 | .modal { 548 | position: fixed; 549 | top: 0; 550 | left: 0; 551 | z-index: 1050; 552 | display: none; 553 | width: 100%; 554 | height: 100%; 555 | overflow: hidden; 556 | background-color: rgba(0, 0, 0, .5); 557 | } 558 | .modal__dialog { 559 | max-width: 500px; 560 | margin: 40px auto; 561 | } 562 | .modal__content { 563 | position: relative; 564 | width: 100%; 565 | padding: 40px; 566 | background-color: #fff; 567 | border: 1px solid rgba(0, 0, 0, .2); 568 | border-radius: 4px; 569 | max-height: 80vh; 570 | overflow-y: auto; 571 | } 572 | .modal__close { 573 | position: absolute; 574 | top: 8px; 575 | right: 14px; 576 | font-size: 30px; 577 | color: #000; 578 | opacity: .5; 579 | font-weight: 700; 580 | border: none; 581 | background-color: transparent; 582 | cursor: pointer; 583 | } 584 | .modal__title { 585 | text-align: center; 586 | font-size: 22px; 587 | text-transform: uppercase; 588 | } 589 | .modal__input { 590 | display: block; 591 | margin: 20px auto 20px auto; 592 | width: 280px; 593 | height: 50px; 594 | background: #fff; 595 | box-shadow: 0 4px 15px rgba(0, 0, 0, .2); 596 | border: none; 597 | font-size: 18px; 598 | text-align: center; 599 | padding: 0 20px; 600 | outline: 0; 601 | } 602 | .modal .btn { 603 | display: block; 604 | width: 280px; 605 | margin: 0 auto; 606 | } 607 | 608 | .hide { 609 | display: none; 610 | } 611 | 612 | .show { 613 | display: block; 614 | } 615 | 616 | .fade { 617 | animation-name: fade; 618 | animation-duration: 1.5s; 619 | } 620 | 621 | @keyframes fade{ 622 | from{ 623 | opacity: 0.1; 624 | } 625 | to { 626 | opacity: 1; 627 | } 628 | } 629 | 630 | .carousel-indicators { 631 | position: absolute; 632 | right: 0; 633 | bottom: 0; 634 | left: 0; 635 | z-index: 15; 636 | display: flex; 637 | justify-content: center; 638 | margin-right: 15%; 639 | margin-left: 15%; 640 | list-style: none; 641 | } 642 | 643 | .dot { 644 | box-sizing: content-box; 645 | flex: 0 1 auto; 646 | width: 30px; 647 | height: 6px; 648 | margin-right: 3px; 649 | margin-left: 3px; 650 | cursor: pointer; 651 | background-color: #fff; 652 | background-clip: padding-box; 653 | border-top: 10px solid transparent; 654 | border-bottom: 10px solid transparent; 655 | opacity: .5; 656 | transition: opacity .6s ease; 657 | } 658 | 659 | /* Chat */ 660 | .chat-widget { 661 | position: fixed; 662 | bottom: 0; 663 | right: 0; 664 | cursor: pointer; 665 | } 666 | .chat-widget__area { 667 | display: none; 668 | width: 300px; 669 | height: 300px; 670 | border: 2px solid green; 671 | border-width: 1px 0 0 1px; 672 | border-radius: 20px 0 0 0; 673 | background: #f0ffea; 674 | flex-direction: column; 675 | padding: 20px 5px 0 5px; 676 | box-sizing: border-box; 677 | } 678 | 679 | .chat-widget_active .chat-widget__side { 680 | display: none; 681 | } 682 | 683 | .chat-widget_active .chat-widget__area { 684 | display: flex; 685 | } 686 | 687 | .chat-widget__messages-container { 688 | flex-grow: 1; 689 | overflow-y: auto; 690 | } 691 | 692 | .chat-widget__side { 693 | position: relative; 694 | width: 50px; 695 | height: 250px; 696 | background: red; 697 | border-radius: 20px 0 0 0; 698 | } 699 | 700 | 701 | .message { 702 | margin-bottom: 10px; 703 | display: flex; 704 | align-items: center; 705 | } 706 | 707 | .message__time { 708 | display: inline-block; 709 | } 710 | 711 | .message_client { 712 | justify-content: flex-end; 713 | text-align: right; 714 | } 715 | 716 | .message__time { 717 | margin-right: 5px; 718 | font-size: 10px; 719 | } 720 | .message_client .message__time { 721 | order: 2; 722 | margin-right: 0;; 723 | margin-left: 5px; 724 | } 725 | .message__text { 726 | order: 1; 727 | display: inline-block; 728 | padding: 5px; 729 | background: green; 730 | color: #fff; 731 | border-radius: 4px; 732 | } 733 | 734 | .message .message__text { 735 | background: red; 736 | } 737 | 738 | .message_client .message__text { 739 | background: green; 740 | } 741 | 742 | .chat-widget__input { 743 | border: 1px solid gray; 744 | padding: 10px; 745 | } 746 | 747 | .chat-widget__side-text { 748 | font-family: Arial; 749 | color: #fff; 750 | transform: rotate(-90deg); 751 | position: absolute; 752 | top: 100px; 753 | left: -100px; 754 | width: 250px; 755 | height: 50px; 756 | line-height: 45px; 757 | padding: 5px 20px; 758 | box-sizing: border-box; 759 | letter-spacing: 1px; 760 | font-size: 13px; 761 | } -------------------------------------------------------------------------------- /icons/Group 5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /js/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (() => { // webpackBootstrap 2 | /******/ var __webpack_modules__ = ({ 3 | 4 | /***/ "./js/modules/calculator.js": 5 | /*!**********************************!*\ 6 | !*** ./js/modules/calculator.js ***! 7 | \**********************************/ 8 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 9 | 10 | "use strict"; 11 | __webpack_require__.r(__webpack_exports__); 12 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 13 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 14 | /* harmony export */ }); 15 | function calculator() { 16 | // Calculator 17 | const result = document.querySelector('.calculating__result span'); 18 | let sex, height, weight, age, ratio; 19 | 20 | if (localStorage.getItem('sex')) { 21 | sex = localStorage.getItem('sex'); 22 | } else { 23 | sex = 'female'; 24 | localStorage.setItem('sex', 'female'); 25 | } 26 | 27 | if (localStorage.getItem('ratio')) { 28 | ratio = localStorage.getItem('ratio'); 29 | } else { 30 | ratio = 1.375; 31 | localStorage.setItem('ratio', 'female'); 32 | } 33 | 34 | function initLocalSettings(selector, activeClass) { 35 | const elements = document.querySelectorAll(selector); 36 | elements.forEach(elem => { 37 | elem.classList.remove(activeClass); 38 | 39 | if (elem.getAttribute('id') === localStorage.getItem('sex')) { 40 | elem.classList.add(activeClass); 41 | } 42 | 43 | if (elem.getAttribute('data-ratio') === localStorage.getItem('ratio')) { 44 | elem.classList.add(activeClass); 45 | } 46 | }); 47 | } 48 | 49 | initLocalSettings('#gender div', 'calculating__choose-item_active'); 50 | initLocalSettings('.calculating__choose_big div', 'calculating__choose-item_active'); 51 | 52 | function calcTotal() { 53 | if (!sex || !height || !weight || !age || !ratio) { 54 | result.textContent = '____'; 55 | return; 56 | } 57 | 58 | if (sex === 'female') { 59 | result.textContent = Math.round((447.6 + 9.2 * weight + 3.1 * height - 4.3 * age) * ratio); 60 | } else { 61 | result.textContent = Math.round((88.36 + 13.4 * weight + 4.8 * height - 5.7 * age) * ratio); 62 | } 63 | } 64 | 65 | calcTotal(); 66 | 67 | function getStaticInformation(selector, activeClass) { 68 | const elements = document.querySelectorAll(selector); 69 | elements.forEach(elem => { 70 | elem.addEventListener('click', e => { 71 | if (e.target.getAttribute('data-ratio')) { 72 | ratio = +e.target.getAttribute('data-ratio'); 73 | localStorage.setItem('ratio', +e.target.getAttribute('data-ratio')); 74 | } else { 75 | sex = e.target.getAttribute('id'); 76 | localStorage.setItem('sex', e.target.getAttribute('id')); 77 | } 78 | 79 | elements.forEach(elem => { 80 | elem.classList.remove(activeClass); 81 | }); 82 | e.target.classList.add(activeClass); 83 | calcTotal(); 84 | }); 85 | }); 86 | } 87 | 88 | getStaticInformation('#gender div', 'calculating__choose-item_active'); 89 | getStaticInformation('.calculating__choose_big div', 'calculating__choose-item_active'); 90 | 91 | function getDynamicInformation(selector) { 92 | const input = document.querySelector(selector); 93 | input.addEventListener('input', () => { 94 | // If input value is not digits 95 | if (input.value.match(/\D/g)) { 96 | input.style.border = "1px solid red"; 97 | } else { 98 | input.style.border = 'none'; 99 | } 100 | 101 | switch (input.getAttribute('id')) { 102 | case "height": 103 | height = +input.value; 104 | break; 105 | 106 | case "weight": 107 | weight = +input.value; 108 | break; 109 | 110 | case "age": 111 | age = +input.value; 112 | break; 113 | } 114 | 115 | calcTotal(); 116 | }); 117 | } 118 | 119 | getDynamicInformation('#height'); 120 | getDynamicInformation('#weight'); 121 | getDynamicInformation('#age'); 122 | } 123 | 124 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (calculator); 125 | 126 | /***/ }), 127 | 128 | /***/ "./js/modules/cards.js": 129 | /*!*****************************!*\ 130 | !*** ./js/modules/cards.js ***! 131 | \*****************************/ 132 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 133 | 134 | "use strict"; 135 | __webpack_require__.r(__webpack_exports__); 136 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 137 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 138 | /* harmony export */ }); 139 | /* harmony import */ var _services_services__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../services/services */ "./js/services/services.js"); 140 | 141 | 142 | function cards() { 143 | class MenuCard { 144 | constructor(src, alt, title, descr, price, parentSelector) { 145 | this.src = src; 146 | this.alt = alt; 147 | this.title = title; 148 | this.descr = descr; 149 | this.price = price; 150 | 151 | for (var _len = arguments.length, classes = new Array(_len > 6 ? _len - 6 : 0), _key = 6; _key < _len; _key++) { 152 | classes[_key - 6] = arguments[_key]; 153 | } 154 | 155 | this.classes = classes; 156 | this.parent = document.querySelector(parentSelector); // this.transfer = 27; 157 | // this.changeToUAH(); 158 | } // changeToUAH() { 159 | // this.price = this.price * this.transfer; 160 | // } 161 | 162 | 163 | render() { 164 | const element = document.createElement('div'); 165 | 166 | if (this.classes.length === 0) { 167 | this.classes = "menu__item"; 168 | element.classList.add(this.classes); 169 | } else { 170 | this.classes.forEach(className => element.classList.add(className)); 171 | } 172 | 173 | element.innerHTML = ` 174 | ${this.alt} 175 |

${this.title}

176 |
${this.descr}
177 |
178 |
179 |
Price:
180 |
$${this.price}/week
181 |
182 | `; 183 | this.parent.append(element); 184 | } 185 | 186 | } 187 | 188 | (0,_services_services__WEBPACK_IMPORTED_MODULE_0__.getResource)('http://localhost:3000/menu').then(data => { 189 | data.forEach(_ref => { 190 | let { 191 | img, 192 | altimg, 193 | title, 194 | descr, 195 | price 196 | } = _ref; 197 | new MenuCard(img, altimg, title, descr, price, ".menu .container").render(); 198 | }); 199 | }); 200 | } 201 | 202 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (cards); 203 | 204 | /***/ }), 205 | 206 | /***/ "./js/modules/forms.js": 207 | /*!*****************************!*\ 208 | !*** ./js/modules/forms.js ***! 209 | \*****************************/ 210 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 211 | 212 | "use strict"; 213 | __webpack_require__.r(__webpack_exports__); 214 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 215 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 216 | /* harmony export */ }); 217 | /* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modal */ "./js/modules/modal.js"); 218 | /* harmony import */ var _services_services__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/services */ "./js/services/services.js"); 219 | 220 | 221 | 222 | function forms(formsSelector, modalTimerId) { 223 | const forms = document.querySelectorAll(formsSelector); 224 | const message = { 225 | loading: 'img/form/spinner.svg', 226 | success: 'Thank you! We will contact you soon!', 227 | failure: 'Something goes wrong...' 228 | }; 229 | forms.forEach(item => { 230 | bindPostData(item); 231 | }); 232 | 233 | function bindPostData(form) { 234 | form.addEventListener('submit', e => { 235 | e.preventDefault(); 236 | let statusMessage = document.createElement('img'); 237 | statusMessage.src = message.loading; 238 | statusMessage.style.cssText = ` 239 | display: block; 240 | margin: 0 auto; 241 | `; 242 | form.insertAdjacentElement('afterend', statusMessage); 243 | const formData = new FormData(form); 244 | const json = JSON.stringify(Object.fromEntries(formData.entries())); 245 | (0,_services_services__WEBPACK_IMPORTED_MODULE_1__.postData)('http://localhost:3000/requests', json).then(data => { 246 | console.log(data); 247 | showThanksModal(message.success); 248 | statusMessage.remove(); 249 | }).catch(() => { 250 | showThanksModal(message.failure); 251 | }).finally(() => { 252 | form.reset(); 253 | }); 254 | }); 255 | } 256 | 257 | function showThanksModal(message) { 258 | const prevModalDialog = document.querySelector('.modal__dialog'); 259 | prevModalDialog.classList.add('hide'); 260 | (0,_modal__WEBPACK_IMPORTED_MODULE_0__.openModal)('.modal', modalTimerId); 261 | const thanksModal = document.createElement('div'); 262 | thanksModal.classList.add('modal__dialog'); 263 | thanksModal.innerHTML = ` 264 |
265 |
×
266 |
${message}
267 |
268 | `; 269 | document.querySelector('.modal').append(thanksModal); 270 | setTimeout(() => { 271 | thanksModal.remove(); 272 | prevModalDialog.classList.add('show'); 273 | prevModalDialog.classList.remove('hide'); 274 | (0,_modal__WEBPACK_IMPORTED_MODULE_0__.closeModal)('.modal'); 275 | }, 4000); 276 | } 277 | } 278 | 279 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (forms); 280 | 281 | /***/ }), 282 | 283 | /***/ "./js/modules/modal.js": 284 | /*!*****************************!*\ 285 | !*** ./js/modules/modal.js ***! 286 | \*****************************/ 287 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 288 | 289 | "use strict"; 290 | __webpack_require__.r(__webpack_exports__); 291 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 292 | /* harmony export */ "closeModal": () => (/* binding */ closeModal), 293 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__), 294 | /* harmony export */ "openModal": () => (/* binding */ openModal) 295 | /* harmony export */ }); 296 | function closeModal(modalSelector) { 297 | const modal = document.querySelector(modalSelector); 298 | modal.classList.add('hide'); 299 | modal.classList.remove('show'); 300 | document.body.style.overflow = ''; 301 | } 302 | 303 | function openModal(modalSelector, modalTimerId) { 304 | const modal = document.querySelector(modalSelector); 305 | modal.classList.add('show'); 306 | modal.classList.remove('hide'); 307 | document.body.style.overflow = 'hidden'; 308 | 309 | if (modalTimerId) { 310 | clearInterval(modalTimerId); 311 | } 312 | } 313 | 314 | function modal(triggerSelector, modalSelector, modalTimerId) { 315 | // Modal 316 | const modalTrigger = document.querySelectorAll(triggerSelector), 317 | modal = document.querySelector(modalSelector); 318 | modalTrigger.forEach(btn => { 319 | btn.addEventListener('click', () => openModal(modalSelector, modalTimerId)); 320 | }); 321 | modal.addEventListener('click', e => { 322 | if (e.target === modal || e.target.getAttribute('data-close') == "") { 323 | closeModal(modalSelector); 324 | } 325 | }); 326 | document.addEventListener('keydown', e => { 327 | if (e.code === "Escape" && modal.classList.contains('show')) { 328 | closeModal(modalSelector); 329 | } 330 | }); 331 | 332 | function showModalByScroll() { 333 | if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) { 334 | openModal(modalSelector, modalTimerId); 335 | window.removeEventListener('scroll', showModalByScroll); 336 | } 337 | } 338 | 339 | window.addEventListener('scroll', showModalByScroll); 340 | } 341 | 342 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (modal); 343 | 344 | 345 | 346 | /***/ }), 347 | 348 | /***/ "./js/modules/slider.js": 349 | /*!******************************!*\ 350 | !*** ./js/modules/slider.js ***! 351 | \******************************/ 352 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 353 | 354 | "use strict"; 355 | __webpack_require__.r(__webpack_exports__); 356 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 357 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 358 | /* harmony export */ }); 359 | function slider(_ref) { 360 | let { 361 | container, 362 | slide, 363 | nextArrow, 364 | previousArrow, 365 | totalCounter, 366 | currentCounter, 367 | wrapper, 368 | field 369 | } = _ref; 370 | // Slider 371 | const slides = document.querySelectorAll(slide); 372 | const previous = document.querySelector(previousArrow); 373 | const next = document.querySelector(nextArrow); 374 | const total = document.querySelector(totalCounter); 375 | const current = document.querySelector(currentCounter); 376 | const slidesWrapper = document.querySelector(wrapper); 377 | const slidesField = document.querySelector(field); 378 | const width = window.getComputedStyle(slidesWrapper).width; 379 | const slider = document.querySelector(container); 380 | let slideIndex = 1; 381 | let offset = 0; 382 | 383 | if (slides.length < 10) { 384 | total.textContent = `0${slides.length}`; 385 | current.textContent = `0${slideIndex}`; 386 | } else { 387 | total.textContent = slides.length; 388 | current.textContent = slideIndex; 389 | } 390 | 391 | slidesField.style.width = 100 * slides.length + '%'; 392 | slidesField.style.display = 'flex'; 393 | slidesField.style.transition = '0.5s all'; 394 | slidesWrapper.style.overflow = 'hidden'; 395 | slides.forEach(slide => { 396 | slide.style.width = width; 397 | }); 398 | slider.style.position = 'relative'; 399 | const indicators = document.createElement('ol'); 400 | const dots = []; 401 | indicators.classList.add('carousel-indicators'); 402 | indicators.style.cssText = ` 403 | position: absolute; 404 | right: 0; 405 | bottom: 0; 406 | left: 0; 407 | z-index: 15; 408 | display: flex; 409 | justify-content: center; 410 | margin-right: 15%; 411 | margin-left: 15%; 412 | list-style: none; 413 | `; 414 | slider.append(indicators); 415 | 416 | for (let i = 0; i < slides.length; i++) { 417 | const dot = document.createElement('li'); 418 | dot.setAttribute('data-slide-to', i + 1); 419 | dot.style.cssText = ` 420 | box-sizing: content-box; 421 | flex: 0 1 auto; 422 | width: 30px; 423 | height: 6px; 424 | margin-right: 3px; 425 | margin-left: 3px; 426 | cursor: pointer; 427 | background-color: #fff; 428 | background-clip: padding-box; 429 | border-top: 10px solid transparent; 430 | border-bottom: 10px solid transparent; 431 | opacity: .5; 432 | transition: opacity .6s ease; 433 | `; 434 | 435 | if (i == 0) { 436 | dot.style.opacity = 1; 437 | } 438 | 439 | indicators.append(dot); 440 | dots.push(dot); 441 | } 442 | 443 | function showActiveDot() { 444 | dots.forEach(dot => dot.style.opacity = ".5"); 445 | dots[slideIndex - 1].style.opacity = 1; 446 | } 447 | 448 | function showSlideNumber() { 449 | if (slides.length < 10) { 450 | current.textContent = `0${slideIndex}`; 451 | } else { 452 | current.textContent = slideIndex; 453 | } 454 | } 455 | 456 | function deleteNotDigits(str) { 457 | return +str.replace(/\D/g, ''); 458 | } 459 | 460 | next.addEventListener('click', () => { 461 | // using RegExp for extracting pixels. Change everithing, that is not a number for an empty string 462 | if (offset == deleteNotDigits(width) * (slides.length - 1)) { 463 | offset = 0; 464 | } else { 465 | offset += deleteNotDigits(width); 466 | } 467 | 468 | slidesField.style.transform = `translateX(-${offset}px)`; 469 | 470 | if (slideIndex == slides.length) { 471 | slideIndex = 1; 472 | } else { 473 | slideIndex++; 474 | } 475 | 476 | showSlideNumber(); 477 | showActiveDot(); 478 | }); 479 | previous.addEventListener('click', () => { 480 | if (offset == 0) { 481 | offset = deleteNotDigits(width) * (slides.length - 1); 482 | } else { 483 | offset -= deleteNotDigits(width); 484 | } 485 | 486 | slidesField.style.transform = `translateX(-${offset}px)`; 487 | 488 | if (slideIndex == 1) { 489 | slideIndex = slides.length; 490 | } else { 491 | slideIndex--; 492 | } 493 | 494 | showSlideNumber(); 495 | showActiveDot(); 496 | }); 497 | dots.forEach(dot => { 498 | dot.addEventListener('click', e => { 499 | const slideTo = e.target.getAttribute('data-slide-to'); 500 | slideIndex = slideTo; 501 | offset = deleteNotDigits(width) * (slideTo - 1); 502 | slidesField.style.transform = `translateX(-${offset}px)`; 503 | showSlideNumber(); 504 | showActiveDot(); 505 | }); 506 | }); // Simple slides 507 | // showSlides(slideIndex); 508 | // if (slides.length < 10) { 509 | // total.textContent = `0${slides.length}`; 510 | // } else { 511 | // total.textContent = slides.length; 512 | // } 513 | // function showSlides(n) { 514 | // if (n > slides.length) { 515 | // slideIndex = 1; 516 | // } 517 | // if (n < 1) { 518 | // slideIndex = slides.length; 519 | // } 520 | // slides.forEach(item => item.style.display = 'none'); 521 | // slides[slideIndex - 1].style.display = 'block'; 522 | // if (slides.length < 10) { 523 | // current.textContent = `0${slideIndex}`; 524 | // } else { 525 | // current.textContent = slideIndex; 526 | // } 527 | // } 528 | // function plusSlides(n) { 529 | // showSlides(slideIndex += n); 530 | // } 531 | // previous.addEventListener('click', function() { 532 | // plusSlides(-1); 533 | // }); 534 | // next.addEventListener('click', function() { 535 | // plusSlides(1); 536 | // }); 537 | } 538 | 539 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (slider); 540 | 541 | /***/ }), 542 | 543 | /***/ "./js/modules/tabs.js": 544 | /*!****************************!*\ 545 | !*** ./js/modules/tabs.js ***! 546 | \****************************/ 547 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 548 | 549 | "use strict"; 550 | __webpack_require__.r(__webpack_exports__); 551 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 552 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 553 | /* harmony export */ }); 554 | function tabs(tabsSelector, tabsContentSelector, tabsParentSelector, activeClass) { 555 | // Tabs 556 | let tabs = document.querySelectorAll(tabsSelector), 557 | tabsContent = document.querySelectorAll(tabsContentSelector), 558 | tabsParent = document.querySelector(tabsParentSelector); 559 | 560 | function hideTabContent() { 561 | tabsContent.forEach(item => { 562 | item.classList.add('hide'); 563 | item.classList.remove('show', 'fade'); 564 | }); 565 | tabs.forEach(item => { 566 | item.classList.remove(activeClass); 567 | }); 568 | } 569 | 570 | function showTabContent() { 571 | let i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; 572 | tabsContent[i].classList.add('show', 'fade'); 573 | tabsContent[i].classList.remove('hide'); 574 | tabs[i].classList.add(activeClass); 575 | } 576 | 577 | hideTabContent(); 578 | showTabContent(); 579 | tabsParent.addEventListener('click', function (event) { 580 | const target = event.target; 581 | 582 | if (target && target.classList.contains(tabsSelector.slice(1))) { 583 | tabs.forEach((item, i) => { 584 | if (target == item) { 585 | hideTabContent(); 586 | showTabContent(i); 587 | } 588 | }); 589 | } 590 | }); 591 | } 592 | 593 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (tabs); 594 | 595 | /***/ }), 596 | 597 | /***/ "./js/modules/timer.js": 598 | /*!*****************************!*\ 599 | !*** ./js/modules/timer.js ***! 600 | \*****************************/ 601 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 602 | 603 | "use strict"; 604 | __webpack_require__.r(__webpack_exports__); 605 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 606 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 607 | /* harmony export */ }); 608 | function timer(id, deadline) { 609 | // Timer 610 | function getTimeRemaining(endtime) { 611 | const t = Date.parse(endtime) - Date.parse(new Date()), 612 | days = Math.floor(t / (1000 * 60 * 60 * 24)), 613 | seconds = Math.floor(t / 1000 % 60), 614 | minutes = Math.floor(t / 1000 / 60 % 60), 615 | hours = Math.floor(t / (1000 * 60 * 60) % 24); 616 | return { 617 | 'total': t, 618 | 'days': days, 619 | 'hours': hours, 620 | 'minutes': minutes, 621 | 'seconds': seconds 622 | }; 623 | } 624 | 625 | function getZero(num) { 626 | if (num >= 0 && num < 10) { 627 | return '0' + num; 628 | } else { 629 | return num; 630 | } 631 | } 632 | 633 | function setClock(selector, endtime) { 634 | const timer = document.querySelector(selector), 635 | days = timer.querySelector("#days"), 636 | hours = timer.querySelector('#hours'), 637 | minutes = timer.querySelector('#minutes'), 638 | seconds = timer.querySelector('#seconds'), 639 | timeInterval = setInterval(updateClock, 1000); 640 | updateClock(); 641 | 642 | function updateClock() { 643 | const t = getTimeRemaining(endtime); 644 | days.innerHTML = getZero(t.days); 645 | hours.innerHTML = getZero(t.hours); 646 | minutes.innerHTML = getZero(t.minutes); 647 | seconds.innerHTML = getZero(t.seconds); 648 | 649 | if (t.total <= 0) { 650 | clearInterval(timeInterval); 651 | } 652 | } 653 | } 654 | 655 | setClock(id, deadline); 656 | } 657 | 658 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (timer); 659 | 660 | /***/ }), 661 | 662 | /***/ "./js/services/services.js": 663 | /*!*********************************!*\ 664 | !*** ./js/services/services.js ***! 665 | \*********************************/ 666 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 667 | 668 | "use strict"; 669 | __webpack_require__.r(__webpack_exports__); 670 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 671 | /* harmony export */ "getResource": () => (/* binding */ getResource), 672 | /* harmony export */ "postData": () => (/* binding */ postData) 673 | /* harmony export */ }); 674 | const postData = async (url, data) => { 675 | let res = await fetch(url, { 676 | method: "POST", 677 | headers: { 678 | 'Content-Type': 'application/json' 679 | }, 680 | body: data 681 | }); 682 | return await res.json(); 683 | }; 684 | 685 | async function getResource(url) { 686 | let res = await fetch(url); 687 | 688 | if (!res.ok) { 689 | throw new Error(`Could not fetch ${url}, status: ${res.status}`); 690 | } 691 | 692 | return await res.json(); 693 | } 694 | 695 | 696 | 697 | 698 | /***/ }), 699 | 700 | /***/ "./node_modules/es6-promise/dist/es6-promise.js": 701 | /*!******************************************************!*\ 702 | !*** ./node_modules/es6-promise/dist/es6-promise.js ***! 703 | \******************************************************/ 704 | /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 705 | 706 | /*! 707 | * @overview es6-promise - a tiny implementation of Promises/A+. 708 | * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald) 709 | * @license Licensed under MIT license 710 | * See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE 711 | * @version v4.2.8+1e68dce6 712 | */ 713 | 714 | (function (global, factory) { 715 | true ? module.exports = factory() : 716 | 0; 717 | }(this, (function () { 'use strict'; 718 | 719 | function objectOrFunction(x) { 720 | var type = typeof x; 721 | return x !== null && (type === 'object' || type === 'function'); 722 | } 723 | 724 | function isFunction(x) { 725 | return typeof x === 'function'; 726 | } 727 | 728 | 729 | 730 | var _isArray = void 0; 731 | if (Array.isArray) { 732 | _isArray = Array.isArray; 733 | } else { 734 | _isArray = function (x) { 735 | return Object.prototype.toString.call(x) === '[object Array]'; 736 | }; 737 | } 738 | 739 | var isArray = _isArray; 740 | 741 | var len = 0; 742 | var vertxNext = void 0; 743 | var customSchedulerFn = void 0; 744 | 745 | var asap = function asap(callback, arg) { 746 | queue[len] = callback; 747 | queue[len + 1] = arg; 748 | len += 2; 749 | if (len === 2) { 750 | // If len is 2, that means that we need to schedule an async flush. 751 | // If additional callbacks are queued before the queue is flushed, they 752 | // will be processed by this flush that we are scheduling. 753 | if (customSchedulerFn) { 754 | customSchedulerFn(flush); 755 | } else { 756 | scheduleFlush(); 757 | } 758 | } 759 | }; 760 | 761 | function setScheduler(scheduleFn) { 762 | customSchedulerFn = scheduleFn; 763 | } 764 | 765 | function setAsap(asapFn) { 766 | asap = asapFn; 767 | } 768 | 769 | var browserWindow = typeof window !== 'undefined' ? window : undefined; 770 | var browserGlobal = browserWindow || {}; 771 | var BrowserMutationObserver = browserGlobal.MutationObserver || browserGlobal.WebKitMutationObserver; 772 | var isNode = typeof self === 'undefined' && typeof process !== 'undefined' && {}.toString.call(process) === '[object process]'; 773 | 774 | // test for web worker but not in IE10 775 | var isWorker = typeof Uint8ClampedArray !== 'undefined' && typeof importScripts !== 'undefined' && typeof MessageChannel !== 'undefined'; 776 | 777 | // node 778 | function useNextTick() { 779 | // node version 0.10.x displays a deprecation warning when nextTick is used recursively 780 | // see https://github.com/cujojs/when/issues/410 for details 781 | return function () { 782 | return process.nextTick(flush); 783 | }; 784 | } 785 | 786 | // vertx 787 | function useVertxTimer() { 788 | if (typeof vertxNext !== 'undefined') { 789 | return function () { 790 | vertxNext(flush); 791 | }; 792 | } 793 | 794 | return useSetTimeout(); 795 | } 796 | 797 | function useMutationObserver() { 798 | var iterations = 0; 799 | var observer = new BrowserMutationObserver(flush); 800 | var node = document.createTextNode(''); 801 | observer.observe(node, { characterData: true }); 802 | 803 | return function () { 804 | node.data = iterations = ++iterations % 2; 805 | }; 806 | } 807 | 808 | // web worker 809 | function useMessageChannel() { 810 | var channel = new MessageChannel(); 811 | channel.port1.onmessage = flush; 812 | return function () { 813 | return channel.port2.postMessage(0); 814 | }; 815 | } 816 | 817 | function useSetTimeout() { 818 | // Store setTimeout reference so es6-promise will be unaffected by 819 | // other code modifying setTimeout (like sinon.useFakeTimers()) 820 | var globalSetTimeout = setTimeout; 821 | return function () { 822 | return globalSetTimeout(flush, 1); 823 | }; 824 | } 825 | 826 | var queue = new Array(1000); 827 | function flush() { 828 | for (var i = 0; i < len; i += 2) { 829 | var callback = queue[i]; 830 | var arg = queue[i + 1]; 831 | 832 | callback(arg); 833 | 834 | queue[i] = undefined; 835 | queue[i + 1] = undefined; 836 | } 837 | 838 | len = 0; 839 | } 840 | 841 | function attemptVertx() { 842 | try { 843 | var vertx = Function('return this')().require('vertx'); 844 | vertxNext = vertx.runOnLoop || vertx.runOnContext; 845 | return useVertxTimer(); 846 | } catch (e) { 847 | return useSetTimeout(); 848 | } 849 | } 850 | 851 | var scheduleFlush = void 0; 852 | // Decide what async method to use to triggering processing of queued callbacks: 853 | if (isNode) { 854 | scheduleFlush = useNextTick(); 855 | } else if (BrowserMutationObserver) { 856 | scheduleFlush = useMutationObserver(); 857 | } else if (isWorker) { 858 | scheduleFlush = useMessageChannel(); 859 | } else if (browserWindow === undefined && "function" === 'function') { 860 | scheduleFlush = attemptVertx(); 861 | } else { 862 | scheduleFlush = useSetTimeout(); 863 | } 864 | 865 | function then(onFulfillment, onRejection) { 866 | var parent = this; 867 | 868 | var child = new this.constructor(noop); 869 | 870 | if (child[PROMISE_ID] === undefined) { 871 | makePromise(child); 872 | } 873 | 874 | var _state = parent._state; 875 | 876 | 877 | if (_state) { 878 | var callback = arguments[_state - 1]; 879 | asap(function () { 880 | return invokeCallback(_state, child, callback, parent._result); 881 | }); 882 | } else { 883 | subscribe(parent, child, onFulfillment, onRejection); 884 | } 885 | 886 | return child; 887 | } 888 | 889 | /** 890 | `Promise.resolve` returns a promise that will become resolved with the 891 | passed `value`. It is shorthand for the following: 892 | 893 | ```javascript 894 | let promise = new Promise(function(resolve, reject){ 895 | resolve(1); 896 | }); 897 | 898 | promise.then(function(value){ 899 | // value === 1 900 | }); 901 | ``` 902 | 903 | Instead of writing the above, your code now simply becomes the following: 904 | 905 | ```javascript 906 | let promise = Promise.resolve(1); 907 | 908 | promise.then(function(value){ 909 | // value === 1 910 | }); 911 | ``` 912 | 913 | @method resolve 914 | @static 915 | @param {Any} value value that the returned promise will be resolved with 916 | Useful for tooling. 917 | @return {Promise} a promise that will become fulfilled with the given 918 | `value` 919 | */ 920 | function resolve$1(object) { 921 | /*jshint validthis:true */ 922 | var Constructor = this; 923 | 924 | if (object && typeof object === 'object' && object.constructor === Constructor) { 925 | return object; 926 | } 927 | 928 | var promise = new Constructor(noop); 929 | resolve(promise, object); 930 | return promise; 931 | } 932 | 933 | var PROMISE_ID = Math.random().toString(36).substring(2); 934 | 935 | function noop() {} 936 | 937 | var PENDING = void 0; 938 | var FULFILLED = 1; 939 | var REJECTED = 2; 940 | 941 | function selfFulfillment() { 942 | return new TypeError("You cannot resolve a promise with itself"); 943 | } 944 | 945 | function cannotReturnOwn() { 946 | return new TypeError('A promises callback cannot return that same promise.'); 947 | } 948 | 949 | function tryThen(then$$1, value, fulfillmentHandler, rejectionHandler) { 950 | try { 951 | then$$1.call(value, fulfillmentHandler, rejectionHandler); 952 | } catch (e) { 953 | return e; 954 | } 955 | } 956 | 957 | function handleForeignThenable(promise, thenable, then$$1) { 958 | asap(function (promise) { 959 | var sealed = false; 960 | var error = tryThen(then$$1, thenable, function (value) { 961 | if (sealed) { 962 | return; 963 | } 964 | sealed = true; 965 | if (thenable !== value) { 966 | resolve(promise, value); 967 | } else { 968 | fulfill(promise, value); 969 | } 970 | }, function (reason) { 971 | if (sealed) { 972 | return; 973 | } 974 | sealed = true; 975 | 976 | reject(promise, reason); 977 | }, 'Settle: ' + (promise._label || ' unknown promise')); 978 | 979 | if (!sealed && error) { 980 | sealed = true; 981 | reject(promise, error); 982 | } 983 | }, promise); 984 | } 985 | 986 | function handleOwnThenable(promise, thenable) { 987 | if (thenable._state === FULFILLED) { 988 | fulfill(promise, thenable._result); 989 | } else if (thenable._state === REJECTED) { 990 | reject(promise, thenable._result); 991 | } else { 992 | subscribe(thenable, undefined, function (value) { 993 | return resolve(promise, value); 994 | }, function (reason) { 995 | return reject(promise, reason); 996 | }); 997 | } 998 | } 999 | 1000 | function handleMaybeThenable(promise, maybeThenable, then$$1) { 1001 | if (maybeThenable.constructor === promise.constructor && then$$1 === then && maybeThenable.constructor.resolve === resolve$1) { 1002 | handleOwnThenable(promise, maybeThenable); 1003 | } else { 1004 | if (then$$1 === undefined) { 1005 | fulfill(promise, maybeThenable); 1006 | } else if (isFunction(then$$1)) { 1007 | handleForeignThenable(promise, maybeThenable, then$$1); 1008 | } else { 1009 | fulfill(promise, maybeThenable); 1010 | } 1011 | } 1012 | } 1013 | 1014 | function resolve(promise, value) { 1015 | if (promise === value) { 1016 | reject(promise, selfFulfillment()); 1017 | } else if (objectOrFunction(value)) { 1018 | var then$$1 = void 0; 1019 | try { 1020 | then$$1 = value.then; 1021 | } catch (error) { 1022 | reject(promise, error); 1023 | return; 1024 | } 1025 | handleMaybeThenable(promise, value, then$$1); 1026 | } else { 1027 | fulfill(promise, value); 1028 | } 1029 | } 1030 | 1031 | function publishRejection(promise) { 1032 | if (promise._onerror) { 1033 | promise._onerror(promise._result); 1034 | } 1035 | 1036 | publish(promise); 1037 | } 1038 | 1039 | function fulfill(promise, value) { 1040 | if (promise._state !== PENDING) { 1041 | return; 1042 | } 1043 | 1044 | promise._result = value; 1045 | promise._state = FULFILLED; 1046 | 1047 | if (promise._subscribers.length !== 0) { 1048 | asap(publish, promise); 1049 | } 1050 | } 1051 | 1052 | function reject(promise, reason) { 1053 | if (promise._state !== PENDING) { 1054 | return; 1055 | } 1056 | promise._state = REJECTED; 1057 | promise._result = reason; 1058 | 1059 | asap(publishRejection, promise); 1060 | } 1061 | 1062 | function subscribe(parent, child, onFulfillment, onRejection) { 1063 | var _subscribers = parent._subscribers; 1064 | var length = _subscribers.length; 1065 | 1066 | 1067 | parent._onerror = null; 1068 | 1069 | _subscribers[length] = child; 1070 | _subscribers[length + FULFILLED] = onFulfillment; 1071 | _subscribers[length + REJECTED] = onRejection; 1072 | 1073 | if (length === 0 && parent._state) { 1074 | asap(publish, parent); 1075 | } 1076 | } 1077 | 1078 | function publish(promise) { 1079 | var subscribers = promise._subscribers; 1080 | var settled = promise._state; 1081 | 1082 | if (subscribers.length === 0) { 1083 | return; 1084 | } 1085 | 1086 | var child = void 0, 1087 | callback = void 0, 1088 | detail = promise._result; 1089 | 1090 | for (var i = 0; i < subscribers.length; i += 3) { 1091 | child = subscribers[i]; 1092 | callback = subscribers[i + settled]; 1093 | 1094 | if (child) { 1095 | invokeCallback(settled, child, callback, detail); 1096 | } else { 1097 | callback(detail); 1098 | } 1099 | } 1100 | 1101 | promise._subscribers.length = 0; 1102 | } 1103 | 1104 | function invokeCallback(settled, promise, callback, detail) { 1105 | var hasCallback = isFunction(callback), 1106 | value = void 0, 1107 | error = void 0, 1108 | succeeded = true; 1109 | 1110 | if (hasCallback) { 1111 | try { 1112 | value = callback(detail); 1113 | } catch (e) { 1114 | succeeded = false; 1115 | error = e; 1116 | } 1117 | 1118 | if (promise === value) { 1119 | reject(promise, cannotReturnOwn()); 1120 | return; 1121 | } 1122 | } else { 1123 | value = detail; 1124 | } 1125 | 1126 | if (promise._state !== PENDING) { 1127 | // noop 1128 | } else if (hasCallback && succeeded) { 1129 | resolve(promise, value); 1130 | } else if (succeeded === false) { 1131 | reject(promise, error); 1132 | } else if (settled === FULFILLED) { 1133 | fulfill(promise, value); 1134 | } else if (settled === REJECTED) { 1135 | reject(promise, value); 1136 | } 1137 | } 1138 | 1139 | function initializePromise(promise, resolver) { 1140 | try { 1141 | resolver(function resolvePromise(value) { 1142 | resolve(promise, value); 1143 | }, function rejectPromise(reason) { 1144 | reject(promise, reason); 1145 | }); 1146 | } catch (e) { 1147 | reject(promise, e); 1148 | } 1149 | } 1150 | 1151 | var id = 0; 1152 | function nextId() { 1153 | return id++; 1154 | } 1155 | 1156 | function makePromise(promise) { 1157 | promise[PROMISE_ID] = id++; 1158 | promise._state = undefined; 1159 | promise._result = undefined; 1160 | promise._subscribers = []; 1161 | } 1162 | 1163 | function validationError() { 1164 | return new Error('Array Methods must be provided an Array'); 1165 | } 1166 | 1167 | var Enumerator = function () { 1168 | function Enumerator(Constructor, input) { 1169 | this._instanceConstructor = Constructor; 1170 | this.promise = new Constructor(noop); 1171 | 1172 | if (!this.promise[PROMISE_ID]) { 1173 | makePromise(this.promise); 1174 | } 1175 | 1176 | if (isArray(input)) { 1177 | this.length = input.length; 1178 | this._remaining = input.length; 1179 | 1180 | this._result = new Array(this.length); 1181 | 1182 | if (this.length === 0) { 1183 | fulfill(this.promise, this._result); 1184 | } else { 1185 | this.length = this.length || 0; 1186 | this._enumerate(input); 1187 | if (this._remaining === 0) { 1188 | fulfill(this.promise, this._result); 1189 | } 1190 | } 1191 | } else { 1192 | reject(this.promise, validationError()); 1193 | } 1194 | } 1195 | 1196 | Enumerator.prototype._enumerate = function _enumerate(input) { 1197 | for (var i = 0; this._state === PENDING && i < input.length; i++) { 1198 | this._eachEntry(input[i], i); 1199 | } 1200 | }; 1201 | 1202 | Enumerator.prototype._eachEntry = function _eachEntry(entry, i) { 1203 | var c = this._instanceConstructor; 1204 | var resolve$$1 = c.resolve; 1205 | 1206 | 1207 | if (resolve$$1 === resolve$1) { 1208 | var _then = void 0; 1209 | var error = void 0; 1210 | var didError = false; 1211 | try { 1212 | _then = entry.then; 1213 | } catch (e) { 1214 | didError = true; 1215 | error = e; 1216 | } 1217 | 1218 | if (_then === then && entry._state !== PENDING) { 1219 | this._settledAt(entry._state, i, entry._result); 1220 | } else if (typeof _then !== 'function') { 1221 | this._remaining--; 1222 | this._result[i] = entry; 1223 | } else if (c === Promise$1) { 1224 | var promise = new c(noop); 1225 | if (didError) { 1226 | reject(promise, error); 1227 | } else { 1228 | handleMaybeThenable(promise, entry, _then); 1229 | } 1230 | this._willSettleAt(promise, i); 1231 | } else { 1232 | this._willSettleAt(new c(function (resolve$$1) { 1233 | return resolve$$1(entry); 1234 | }), i); 1235 | } 1236 | } else { 1237 | this._willSettleAt(resolve$$1(entry), i); 1238 | } 1239 | }; 1240 | 1241 | Enumerator.prototype._settledAt = function _settledAt(state, i, value) { 1242 | var promise = this.promise; 1243 | 1244 | 1245 | if (promise._state === PENDING) { 1246 | this._remaining--; 1247 | 1248 | if (state === REJECTED) { 1249 | reject(promise, value); 1250 | } else { 1251 | this._result[i] = value; 1252 | } 1253 | } 1254 | 1255 | if (this._remaining === 0) { 1256 | fulfill(promise, this._result); 1257 | } 1258 | }; 1259 | 1260 | Enumerator.prototype._willSettleAt = function _willSettleAt(promise, i) { 1261 | var enumerator = this; 1262 | 1263 | subscribe(promise, undefined, function (value) { 1264 | return enumerator._settledAt(FULFILLED, i, value); 1265 | }, function (reason) { 1266 | return enumerator._settledAt(REJECTED, i, reason); 1267 | }); 1268 | }; 1269 | 1270 | return Enumerator; 1271 | }(); 1272 | 1273 | /** 1274 | `Promise.all` accepts an array of promises, and returns a new promise which 1275 | is fulfilled with an array of fulfillment values for the passed promises, or 1276 | rejected with the reason of the first passed promise to be rejected. It casts all 1277 | elements of the passed iterable to promises as it runs this algorithm. 1278 | 1279 | Example: 1280 | 1281 | ```javascript 1282 | let promise1 = resolve(1); 1283 | let promise2 = resolve(2); 1284 | let promise3 = resolve(3); 1285 | let promises = [ promise1, promise2, promise3 ]; 1286 | 1287 | Promise.all(promises).then(function(array){ 1288 | // The array here would be [ 1, 2, 3 ]; 1289 | }); 1290 | ``` 1291 | 1292 | If any of the `promises` given to `all` are rejected, the first promise 1293 | that is rejected will be given as an argument to the returned promises's 1294 | rejection handler. For example: 1295 | 1296 | Example: 1297 | 1298 | ```javascript 1299 | let promise1 = resolve(1); 1300 | let promise2 = reject(new Error("2")); 1301 | let promise3 = reject(new Error("3")); 1302 | let promises = [ promise1, promise2, promise3 ]; 1303 | 1304 | Promise.all(promises).then(function(array){ 1305 | // Code here never runs because there are rejected promises! 1306 | }, function(error) { 1307 | // error.message === "2" 1308 | }); 1309 | ``` 1310 | 1311 | @method all 1312 | @static 1313 | @param {Array} entries array of promises 1314 | @param {String} label optional string for labeling the promise. 1315 | Useful for tooling. 1316 | @return {Promise} promise that is fulfilled when all `promises` have been 1317 | fulfilled, or rejected if any of them become rejected. 1318 | @static 1319 | */ 1320 | function all(entries) { 1321 | return new Enumerator(this, entries).promise; 1322 | } 1323 | 1324 | /** 1325 | `Promise.race` returns a new promise which is settled in the same way as the 1326 | first passed promise to settle. 1327 | 1328 | Example: 1329 | 1330 | ```javascript 1331 | let promise1 = new Promise(function(resolve, reject){ 1332 | setTimeout(function(){ 1333 | resolve('promise 1'); 1334 | }, 200); 1335 | }); 1336 | 1337 | let promise2 = new Promise(function(resolve, reject){ 1338 | setTimeout(function(){ 1339 | resolve('promise 2'); 1340 | }, 100); 1341 | }); 1342 | 1343 | Promise.race([promise1, promise2]).then(function(result){ 1344 | // result === 'promise 2' because it was resolved before promise1 1345 | // was resolved. 1346 | }); 1347 | ``` 1348 | 1349 | `Promise.race` is deterministic in that only the state of the first 1350 | settled promise matters. For example, even if other promises given to the 1351 | `promises` array argument are resolved, but the first settled promise has 1352 | become rejected before the other promises became fulfilled, the returned 1353 | promise will become rejected: 1354 | 1355 | ```javascript 1356 | let promise1 = new Promise(function(resolve, reject){ 1357 | setTimeout(function(){ 1358 | resolve('promise 1'); 1359 | }, 200); 1360 | }); 1361 | 1362 | let promise2 = new Promise(function(resolve, reject){ 1363 | setTimeout(function(){ 1364 | reject(new Error('promise 2')); 1365 | }, 100); 1366 | }); 1367 | 1368 | Promise.race([promise1, promise2]).then(function(result){ 1369 | // Code here never runs 1370 | }, function(reason){ 1371 | // reason.message === 'promise 2' because promise 2 became rejected before 1372 | // promise 1 became fulfilled 1373 | }); 1374 | ``` 1375 | 1376 | An example real-world use case is implementing timeouts: 1377 | 1378 | ```javascript 1379 | Promise.race([ajax('foo.json'), timeout(5000)]) 1380 | ``` 1381 | 1382 | @method race 1383 | @static 1384 | @param {Array} promises array of promises to observe 1385 | Useful for tooling. 1386 | @return {Promise} a promise which settles in the same way as the first passed 1387 | promise to settle. 1388 | */ 1389 | function race(entries) { 1390 | /*jshint validthis:true */ 1391 | var Constructor = this; 1392 | 1393 | if (!isArray(entries)) { 1394 | return new Constructor(function (_, reject) { 1395 | return reject(new TypeError('You must pass an array to race.')); 1396 | }); 1397 | } else { 1398 | return new Constructor(function (resolve, reject) { 1399 | var length = entries.length; 1400 | for (var i = 0; i < length; i++) { 1401 | Constructor.resolve(entries[i]).then(resolve, reject); 1402 | } 1403 | }); 1404 | } 1405 | } 1406 | 1407 | /** 1408 | `Promise.reject` returns a promise rejected with the passed `reason`. 1409 | It is shorthand for the following: 1410 | 1411 | ```javascript 1412 | let promise = new Promise(function(resolve, reject){ 1413 | reject(new Error('WHOOPS')); 1414 | }); 1415 | 1416 | promise.then(function(value){ 1417 | // Code here doesn't run because the promise is rejected! 1418 | }, function(reason){ 1419 | // reason.message === 'WHOOPS' 1420 | }); 1421 | ``` 1422 | 1423 | Instead of writing the above, your code now simply becomes the following: 1424 | 1425 | ```javascript 1426 | let promise = Promise.reject(new Error('WHOOPS')); 1427 | 1428 | promise.then(function(value){ 1429 | // Code here doesn't run because the promise is rejected! 1430 | }, function(reason){ 1431 | // reason.message === 'WHOOPS' 1432 | }); 1433 | ``` 1434 | 1435 | @method reject 1436 | @static 1437 | @param {Any} reason value that the returned promise will be rejected with. 1438 | Useful for tooling. 1439 | @return {Promise} a promise rejected with the given `reason`. 1440 | */ 1441 | function reject$1(reason) { 1442 | /*jshint validthis:true */ 1443 | var Constructor = this; 1444 | var promise = new Constructor(noop); 1445 | reject(promise, reason); 1446 | return promise; 1447 | } 1448 | 1449 | function needsResolver() { 1450 | throw new TypeError('You must pass a resolver function as the first argument to the promise constructor'); 1451 | } 1452 | 1453 | function needsNew() { 1454 | throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function."); 1455 | } 1456 | 1457 | /** 1458 | Promise objects represent the eventual result of an asynchronous operation. The 1459 | primary way of interacting with a promise is through its `then` method, which 1460 | registers callbacks to receive either a promise's eventual value or the reason 1461 | why the promise cannot be fulfilled. 1462 | 1463 | Terminology 1464 | ----------- 1465 | 1466 | - `promise` is an object or function with a `then` method whose behavior conforms to this specification. 1467 | - `thenable` is an object or function that defines a `then` method. 1468 | - `value` is any legal JavaScript value (including undefined, a thenable, or a promise). 1469 | - `exception` is a value that is thrown using the throw statement. 1470 | - `reason` is a value that indicates why a promise was rejected. 1471 | - `settled` the final resting state of a promise, fulfilled or rejected. 1472 | 1473 | A promise can be in one of three states: pending, fulfilled, or rejected. 1474 | 1475 | Promises that are fulfilled have a fulfillment value and are in the fulfilled 1476 | state. Promises that are rejected have a rejection reason and are in the 1477 | rejected state. A fulfillment value is never a thenable. 1478 | 1479 | Promises can also be said to *resolve* a value. If this value is also a 1480 | promise, then the original promise's settled state will match the value's 1481 | settled state. So a promise that *resolves* a promise that rejects will 1482 | itself reject, and a promise that *resolves* a promise that fulfills will 1483 | itself fulfill. 1484 | 1485 | 1486 | Basic Usage: 1487 | ------------ 1488 | 1489 | ```js 1490 | let promise = new Promise(function(resolve, reject) { 1491 | // on success 1492 | resolve(value); 1493 | 1494 | // on failure 1495 | reject(reason); 1496 | }); 1497 | 1498 | promise.then(function(value) { 1499 | // on fulfillment 1500 | }, function(reason) { 1501 | // on rejection 1502 | }); 1503 | ``` 1504 | 1505 | Advanced Usage: 1506 | --------------- 1507 | 1508 | Promises shine when abstracting away asynchronous interactions such as 1509 | `XMLHttpRequest`s. 1510 | 1511 | ```js 1512 | function getJSON(url) { 1513 | return new Promise(function(resolve, reject){ 1514 | let xhr = new XMLHttpRequest(); 1515 | 1516 | xhr.open('GET', url); 1517 | xhr.onreadystatechange = handler; 1518 | xhr.responseType = 'json'; 1519 | xhr.setRequestHeader('Accept', 'application/json'); 1520 | xhr.send(); 1521 | 1522 | function handler() { 1523 | if (this.readyState === this.DONE) { 1524 | if (this.status === 200) { 1525 | resolve(this.response); 1526 | } else { 1527 | reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']')); 1528 | } 1529 | } 1530 | }; 1531 | }); 1532 | } 1533 | 1534 | getJSON('/posts.json').then(function(json) { 1535 | // on fulfillment 1536 | }, function(reason) { 1537 | // on rejection 1538 | }); 1539 | ``` 1540 | 1541 | Unlike callbacks, promises are great composable primitives. 1542 | 1543 | ```js 1544 | Promise.all([ 1545 | getJSON('/posts'), 1546 | getJSON('/comments') 1547 | ]).then(function(values){ 1548 | values[0] // => postsJSON 1549 | values[1] // => commentsJSON 1550 | 1551 | return values; 1552 | }); 1553 | ``` 1554 | 1555 | @class Promise 1556 | @param {Function} resolver 1557 | Useful for tooling. 1558 | @constructor 1559 | */ 1560 | 1561 | var Promise$1 = function () { 1562 | function Promise(resolver) { 1563 | this[PROMISE_ID] = nextId(); 1564 | this._result = this._state = undefined; 1565 | this._subscribers = []; 1566 | 1567 | if (noop !== resolver) { 1568 | typeof resolver !== 'function' && needsResolver(); 1569 | this instanceof Promise ? initializePromise(this, resolver) : needsNew(); 1570 | } 1571 | } 1572 | 1573 | /** 1574 | The primary way of interacting with a promise is through its `then` method, 1575 | which registers callbacks to receive either a promise's eventual value or the 1576 | reason why the promise cannot be fulfilled. 1577 | ```js 1578 | findUser().then(function(user){ 1579 | // user is available 1580 | }, function(reason){ 1581 | // user is unavailable, and you are given the reason why 1582 | }); 1583 | ``` 1584 | Chaining 1585 | -------- 1586 | The return value of `then` is itself a promise. This second, 'downstream' 1587 | promise is resolved with the return value of the first promise's fulfillment 1588 | or rejection handler, or rejected if the handler throws an exception. 1589 | ```js 1590 | findUser().then(function (user) { 1591 | return user.name; 1592 | }, function (reason) { 1593 | return 'default name'; 1594 | }).then(function (userName) { 1595 | // If `findUser` fulfilled, `userName` will be the user's name, otherwise it 1596 | // will be `'default name'` 1597 | }); 1598 | findUser().then(function (user) { 1599 | throw new Error('Found user, but still unhappy'); 1600 | }, function (reason) { 1601 | throw new Error('`findUser` rejected and we're unhappy'); 1602 | }).then(function (value) { 1603 | // never reached 1604 | }, function (reason) { 1605 | // if `findUser` fulfilled, `reason` will be 'Found user, but still unhappy'. 1606 | // If `findUser` rejected, `reason` will be '`findUser` rejected and we're unhappy'. 1607 | }); 1608 | ``` 1609 | If the downstream promise does not specify a rejection handler, rejection reasons will be propagated further downstream. 1610 | ```js 1611 | findUser().then(function (user) { 1612 | throw new PedagogicalException('Upstream error'); 1613 | }).then(function (value) { 1614 | // never reached 1615 | }).then(function (value) { 1616 | // never reached 1617 | }, function (reason) { 1618 | // The `PedgagocialException` is propagated all the way down to here 1619 | }); 1620 | ``` 1621 | Assimilation 1622 | ------------ 1623 | Sometimes the value you want to propagate to a downstream promise can only be 1624 | retrieved asynchronously. This can be achieved by returning a promise in the 1625 | fulfillment or rejection handler. The downstream promise will then be pending 1626 | until the returned promise is settled. This is called *assimilation*. 1627 | ```js 1628 | findUser().then(function (user) { 1629 | return findCommentsByAuthor(user); 1630 | }).then(function (comments) { 1631 | // The user's comments are now available 1632 | }); 1633 | ``` 1634 | If the assimliated promise rejects, then the downstream promise will also reject. 1635 | ```js 1636 | findUser().then(function (user) { 1637 | return findCommentsByAuthor(user); 1638 | }).then(function (comments) { 1639 | // If `findCommentsByAuthor` fulfills, we'll have the value here 1640 | }, function (reason) { 1641 | // If `findCommentsByAuthor` rejects, we'll have the reason here 1642 | }); 1643 | ``` 1644 | Simple Example 1645 | -------------- 1646 | Synchronous Example 1647 | ```javascript 1648 | let result; 1649 | try { 1650 | result = findResult(); 1651 | // success 1652 | } catch(reason) { 1653 | // failure 1654 | } 1655 | ``` 1656 | Errback Example 1657 | ```js 1658 | findResult(function(result, err){ 1659 | if (err) { 1660 | // failure 1661 | } else { 1662 | // success 1663 | } 1664 | }); 1665 | ``` 1666 | Promise Example; 1667 | ```javascript 1668 | findResult().then(function(result){ 1669 | // success 1670 | }, function(reason){ 1671 | // failure 1672 | }); 1673 | ``` 1674 | Advanced Example 1675 | -------------- 1676 | Synchronous Example 1677 | ```javascript 1678 | let author, books; 1679 | try { 1680 | author = findAuthor(); 1681 | books = findBooksByAuthor(author); 1682 | // success 1683 | } catch(reason) { 1684 | // failure 1685 | } 1686 | ``` 1687 | Errback Example 1688 | ```js 1689 | function foundBooks(books) { 1690 | } 1691 | function failure(reason) { 1692 | } 1693 | findAuthor(function(author, err){ 1694 | if (err) { 1695 | failure(err); 1696 | // failure 1697 | } else { 1698 | try { 1699 | findBoooksByAuthor(author, function(books, err) { 1700 | if (err) { 1701 | failure(err); 1702 | } else { 1703 | try { 1704 | foundBooks(books); 1705 | } catch(reason) { 1706 | failure(reason); 1707 | } 1708 | } 1709 | }); 1710 | } catch(error) { 1711 | failure(err); 1712 | } 1713 | // success 1714 | } 1715 | }); 1716 | ``` 1717 | Promise Example; 1718 | ```javascript 1719 | findAuthor(). 1720 | then(findBooksByAuthor). 1721 | then(function(books){ 1722 | // found books 1723 | }).catch(function(reason){ 1724 | // something went wrong 1725 | }); 1726 | ``` 1727 | @method then 1728 | @param {Function} onFulfilled 1729 | @param {Function} onRejected 1730 | Useful for tooling. 1731 | @return {Promise} 1732 | */ 1733 | 1734 | /** 1735 | `catch` is simply sugar for `then(undefined, onRejection)` which makes it the same 1736 | as the catch block of a try/catch statement. 1737 | ```js 1738 | function findAuthor(){ 1739 | throw new Error('couldn't find that author'); 1740 | } 1741 | // synchronous 1742 | try { 1743 | findAuthor(); 1744 | } catch(reason) { 1745 | // something went wrong 1746 | } 1747 | // async with promises 1748 | findAuthor().catch(function(reason){ 1749 | // something went wrong 1750 | }); 1751 | ``` 1752 | @method catch 1753 | @param {Function} onRejection 1754 | Useful for tooling. 1755 | @return {Promise} 1756 | */ 1757 | 1758 | 1759 | Promise.prototype.catch = function _catch(onRejection) { 1760 | return this.then(null, onRejection); 1761 | }; 1762 | 1763 | /** 1764 | `finally` will be invoked regardless of the promise's fate just as native 1765 | try/catch/finally behaves 1766 | 1767 | Synchronous example: 1768 | 1769 | ```js 1770 | findAuthor() { 1771 | if (Math.random() > 0.5) { 1772 | throw new Error(); 1773 | } 1774 | return new Author(); 1775 | } 1776 | 1777 | try { 1778 | return findAuthor(); // succeed or fail 1779 | } catch(error) { 1780 | return findOtherAuther(); 1781 | } finally { 1782 | // always runs 1783 | // doesn't affect the return value 1784 | } 1785 | ``` 1786 | 1787 | Asynchronous example: 1788 | 1789 | ```js 1790 | findAuthor().catch(function(reason){ 1791 | return findOtherAuther(); 1792 | }).finally(function(){ 1793 | // author was either found, or not 1794 | }); 1795 | ``` 1796 | 1797 | @method finally 1798 | @param {Function} callback 1799 | @return {Promise} 1800 | */ 1801 | 1802 | 1803 | Promise.prototype.finally = function _finally(callback) { 1804 | var promise = this; 1805 | var constructor = promise.constructor; 1806 | 1807 | if (isFunction(callback)) { 1808 | return promise.then(function (value) { 1809 | return constructor.resolve(callback()).then(function () { 1810 | return value; 1811 | }); 1812 | }, function (reason) { 1813 | return constructor.resolve(callback()).then(function () { 1814 | throw reason; 1815 | }); 1816 | }); 1817 | } 1818 | 1819 | return promise.then(callback, callback); 1820 | }; 1821 | 1822 | return Promise; 1823 | }(); 1824 | 1825 | Promise$1.prototype.then = then; 1826 | Promise$1.all = all; 1827 | Promise$1.race = race; 1828 | Promise$1.resolve = resolve$1; 1829 | Promise$1.reject = reject$1; 1830 | Promise$1._setScheduler = setScheduler; 1831 | Promise$1._setAsap = setAsap; 1832 | Promise$1._asap = asap; 1833 | 1834 | /*global self*/ 1835 | function polyfill() { 1836 | var local = void 0; 1837 | 1838 | if (typeof __webpack_require__.g !== 'undefined') { 1839 | local = __webpack_require__.g; 1840 | } else if (typeof self !== 'undefined') { 1841 | local = self; 1842 | } else { 1843 | try { 1844 | local = Function('return this')(); 1845 | } catch (e) { 1846 | throw new Error('polyfill failed because global object is unavailable in this environment'); 1847 | } 1848 | } 1849 | 1850 | var P = local.Promise; 1851 | 1852 | if (P) { 1853 | var promiseToString = null; 1854 | try { 1855 | promiseToString = Object.prototype.toString.call(P.resolve()); 1856 | } catch (e) { 1857 | // silently ignored 1858 | } 1859 | 1860 | if (promiseToString === '[object Promise]' && !P.cast) { 1861 | return; 1862 | } 1863 | } 1864 | 1865 | local.Promise = Promise$1; 1866 | } 1867 | 1868 | // Strange compat.. 1869 | Promise$1.polyfill = polyfill; 1870 | Promise$1.Promise = Promise$1; 1871 | 1872 | return Promise$1; 1873 | 1874 | }))); 1875 | 1876 | 1877 | 1878 | //# sourceMappingURL=es6-promise.map 1879 | 1880 | 1881 | /***/ }) 1882 | 1883 | /******/ }); 1884 | /************************************************************************/ 1885 | /******/ // The module cache 1886 | /******/ var __webpack_module_cache__ = {}; 1887 | /******/ 1888 | /******/ // The require function 1889 | /******/ function __webpack_require__(moduleId) { 1890 | /******/ // Check if module is in cache 1891 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 1892 | /******/ if (cachedModule !== undefined) { 1893 | /******/ return cachedModule.exports; 1894 | /******/ } 1895 | /******/ // Create a new module (and put it into the cache) 1896 | /******/ var module = __webpack_module_cache__[moduleId] = { 1897 | /******/ // no module.id needed 1898 | /******/ // no module.loaded needed 1899 | /******/ exports: {} 1900 | /******/ }; 1901 | /******/ 1902 | /******/ // Execute the module function 1903 | /******/ __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__); 1904 | /******/ 1905 | /******/ // Return the exports of the module 1906 | /******/ return module.exports; 1907 | /******/ } 1908 | /******/ 1909 | /************************************************************************/ 1910 | /******/ /* webpack/runtime/define property getters */ 1911 | /******/ (() => { 1912 | /******/ // define getter functions for harmony exports 1913 | /******/ __webpack_require__.d = (exports, definition) => { 1914 | /******/ for(var key in definition) { 1915 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 1916 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 1917 | /******/ } 1918 | /******/ } 1919 | /******/ }; 1920 | /******/ })(); 1921 | /******/ 1922 | /******/ /* webpack/runtime/global */ 1923 | /******/ (() => { 1924 | /******/ __webpack_require__.g = (function() { 1925 | /******/ if (typeof globalThis === 'object') return globalThis; 1926 | /******/ try { 1927 | /******/ return this || new Function('return this')(); 1928 | /******/ } catch (e) { 1929 | /******/ if (typeof window === 'object') return window; 1930 | /******/ } 1931 | /******/ })(); 1932 | /******/ })(); 1933 | /******/ 1934 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 1935 | /******/ (() => { 1936 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 1937 | /******/ })(); 1938 | /******/ 1939 | /******/ /* webpack/runtime/make namespace object */ 1940 | /******/ (() => { 1941 | /******/ // define __esModule on exports 1942 | /******/ __webpack_require__.r = (exports) => { 1943 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 1944 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 1945 | /******/ } 1946 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 1947 | /******/ }; 1948 | /******/ })(); 1949 | /******/ 1950 | /************************************************************************/ 1951 | var __webpack_exports__ = {}; 1952 | // This entry need to be wrapped in an IIFE because it need to be in strict mode. 1953 | (() => { 1954 | "use strict"; 1955 | /*!**********************!*\ 1956 | !*** ./js/script.js ***! 1957 | \**********************/ 1958 | __webpack_require__.r(__webpack_exports__); 1959 | /* harmony import */ var _modules_tabs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/tabs */ "./js/modules/tabs.js"); 1960 | /* harmony import */ var _modules_calculator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/calculator */ "./js/modules/calculator.js"); 1961 | /* harmony import */ var _modules_cards__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/cards */ "./js/modules/cards.js"); 1962 | /* harmony import */ var _modules_forms__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/forms */ "./js/modules/forms.js"); 1963 | /* harmony import */ var _modules_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/modal */ "./js/modules/modal.js"); 1964 | /* harmony import */ var _modules_timer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/timer */ "./js/modules/timer.js"); 1965 | /* harmony import */ var _modules_slider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./modules/slider */ "./js/modules/slider.js"); 1966 | (__webpack_require__(/*! es6-promise */ "./node_modules/es6-promise/dist/es6-promise.js").polyfill)(); 1967 | 1968 | 1969 | 1970 | 1971 | 1972 | 1973 | 1974 | 1975 | 1976 | window.addEventListener('DOMContentLoaded', function () { 1977 | const modalTimerId = setTimeout(() => (0,_modules_modal__WEBPACK_IMPORTED_MODULE_4__.openModal)('.modal', modalTimerId)); 1978 | (0,_modules_tabs__WEBPACK_IMPORTED_MODULE_0__["default"])('.tabheader__item', '.tabcontent', '.tabheader__items', 'tabheader__item_active'); 1979 | (0,_modules_calculator__WEBPACK_IMPORTED_MODULE_1__["default"])(); 1980 | (0,_modules_cards__WEBPACK_IMPORTED_MODULE_2__["default"])(); 1981 | (0,_modules_forms__WEBPACK_IMPORTED_MODULE_3__["default"])('form', modalTimerId); 1982 | (0,_modules_modal__WEBPACK_IMPORTED_MODULE_4__["default"])('[data-modal]', '.modal', modalTimerId); 1983 | (0,_modules_timer__WEBPACK_IMPORTED_MODULE_5__["default"])('.timer', '2023-05-24'); 1984 | (0,_modules_slider__WEBPACK_IMPORTED_MODULE_6__["default"])({ 1985 | container: '.offer__slider', 1986 | nextArrow: '.offer__slider-next', 1987 | previousArrow: '.offer__slider-prev', 1988 | totalCounter: '#total', 1989 | currentCounter: '#current', 1990 | slide: '.offer__slide', 1991 | wrapper: '.offer__slider-wrapper', 1992 | field: '.offer__slider-inner' 1993 | }); 1994 | }); 1995 | })(); 1996 | 1997 | /******/ })() 1998 | ; 1999 | //# sourceMappingURL=bundle.js.map --------------------------------------------------------------------------------