├── LICENSE ├── README.md ├── calculator ├── index.html └── main.js ├── demo-1 ├── calculator │ ├── index.html │ └── main.js └── html │ └── index.html ├── exchange └── index.html ├── json ├── index.js └── package.json ├── live-game--draw-cell--react ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── game.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js └── yarn.lock ├── live-game ├── __tests__ │ └── live-game.test.js ├── live-game.js ├── package-lock.json └── package.json ├── modules ├── car.js ├── index.html ├── user.1.js └── user.js ├── nextjs ├── package-lock.json ├── package.json └── pages │ ├── blog.js │ └── index.js ├── node-1 ├── index.js ├── package-lock.json ├── package.json ├── txt.1 └── txt.txt ├── observer ├── component.js └── index.html ├── papka └── index.html ├── popcorn-react ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── index.js │ ├── popcorn │ │ ├── App.css │ │ ├── App.js │ │ └── App.test.js │ └── serviceWorker.js └── yarn.lock ├── popcorn └── index.html ├── redux ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── __tests__ │ │ └── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ ├── setupTests.js │ └── store │ │ ├── __tests__ │ │ └── store.test.js │ │ ├── index.js │ │ ├── math │ │ ├── actions.js │ │ ├── constants.js │ │ └── reducer.js │ │ └── state.json └── yarn.lock ├── roll ├── bundle.js ├── index.html ├── main.js └── package.json ├── router ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── routers │ │ ├── Details.js │ │ ├── Error.js │ │ ├── Home │ │ │ ├── Home.js │ │ │ ├── Home1.js │ │ │ └── HomeRouter.js │ │ └── Login.js │ └── serviceWorker.js └── yarn.lock ├── slider └── index.html └── todo ├── index.html └── mvc-sample.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Minsk JSON 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Полезные материалы по JS и воообще 2 | 3 | ## Задачки для ДЗ 4 | https://github.com/vvscode/js--base-course 5 | 6 | 7 | ## Перед тем как начать двигаться в IT: 8 | https://www.youtube.com/watch?v=uLXFz2na4SY 9 | 10 | ## Что почитать: 11 | 12 | поверхносто почитать https://oz.by/books/more1015206.html - там много всего базового описанно. Для понимания того как работают языки программирования под капотом. Ну и есть базовые принципы организации кода. От которых можно отталкиваться. 13 | 14 | https://www.ozon.ru/context/detail/id/139296295/?utm_source=google&utm_medium=cpc&utm_campaign=RF_Regstore_Product_DSA_NewClients&gclid=Cj0KCQiA3Y-ABhCnARIsAKYDH7vud98DyahIgZSvlnru9N_iTMJbEEDmBu37lvJm8AP7aE5FXUhxDSAaAv0XEALw_wcB - без алгоритмов никуда к ним надо както подступиться. Алгоритмы это по сути правила работы с наборами данных, вы же не будете заново изобретать подходты от программы к программе. Если хорошо разберетесь со всеми базовыми алогритмами легко пройдете собеседование в белорусский яндекс https://yandex.ru/jobs/?cities=157 15 | 16 | https://www.e-reading.club/book.php?book=82825 - больше про организацию кода в командах, разделение ответственностей. Если пойдете в большую компанию работать, там так или иначе вас этому научат. Ну или со временем сами дойдете :D 17 | 18 | ## По js: 19 | https://learn.javascript.ru/ 20 | https://medium.com/@amel_true 21 | 22 | вот еще сайт для самых маленьких, ребята на украине делают 23 | 24 | https://frontender.info/ 25 | https://medium.com/devschacht 26 | 27 | ## Изучить штуки (хотя бы базовое понимание): 28 | 1. Git; 29 | 2. Terminal; - лучше всего сразу в линуксе или osx; 30 | 3. Структуры данных и алгоритмы; 31 | 4. SOLID, KISS, YAGNI; 32 | 5. Github; 33 | 6. Различия в open source лицензиях; 34 | 7. Semantic Versioning; 35 | 8. SSH; 36 | 9. HTTP, HTTPS, разные типы API (WebSockets, REST, GraphQL, …) 37 | 10. Design Patterns; 38 | 11. Кодировки и тп; 39 | 12. Что такое JSON, XML; 40 | 41 | ## Общие штуки 42 | https://github.com/elsewhencode/project-guidelines/blob/master/README-ru.md 43 | 44 | ## В общем случае: 45 | 46 | 1. Изучение основ, что такое Functional Programming, OOP, принципы SOLID, и тп. 47 | 2. После изучения основ - взяться за паттерны проектирования - советую эту книжку так как тут в схемах и картинках быстро можно понять что к чему - https://www.ozon.ru/context/detail/id/20216992/ 48 | 3. Можно изучить и попрактиковаться самому в написании паттернов и алгоритмов https://github.com/trekhleb/javascript-algorithms 49 | 4. Можно дополнительно понять как алгоритм работает визуально https://github.com/algorithm-visualizer/algorithm-visualizer что бы проще было запомнить. 50 | 5. Изучить принципы работы интернета - протоколы связи, TCP-IP, HTTP, HTTPS, что такое CDN, как загружается сайт. Как работает браузер. 51 | 6. После изучения паттернов взяться за фрэймворки. На каждом языке есть фрэймворки. Это набор решений для типовых ошибок, собранных в одном месте. Для JS сейчас самый популярный это https://reactjs.org/, для ruby - ruby on rails и тп. Не так важно какой фрэймворк изучать они все +- одинаковы. 52 | 7. Погружаясь в фрэймворк - главное понять возможнтсти, что с помощью него можно сделать, я вот начинал вот с таких штук https://www.youtube.com/playlist?list=PLB86E02CE3735E3B6, потом начал изучать http://railscasts.com/, но сейчас можно на русском например тут https://www.youtube.com/watch?v=LvcK-ZF6dhI&list=PL9LUlh0qu464FPCHUrH3VkR1nQIlnIxR2 . Язык сам по себе не так важен, как что с помощью него можно сделать, вот примеры лучше всего смотреть а не читать. 53 | 8. Когда ты понимаешь что же можно сделать с помощью того или иного фрэймворка. Самое время начать самому пытаться либо повторить. Либо что лучше изменить чужое. Ищишь на этом сайте любой проект который тебе нравится устанавливаешь себе и пытаешься менять или улучшать это. https://github.com/search?q=react . Разбираясь в чужом коде учишься в 3-и миллиона раза быстреею 54 | 9. Читаешь про тесты и учишься тестировать свой код тестами. https://facebook.github.io/jest/ 55 | 10. Читаешь про agile и процессы в командах. https://ru.wikipedia.org/wiki/%D0%93%D0%B8%D0%B1%D0%BA%D0%B0%D1%8F_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8 впринципе все что надо знать тут http://www.full-stackagile.com/2016/02/14/team-organisation-squads-chapters-tribes-and-guilds/ 56 | 11. Читаешь книгу типо https://oz.by/books/more10120181.html, что бы понимать как самоорганизоваться. 57 | 58 | 12. Читаешь лучшие практики по Node.js https://bestofjs.org/projects/nodejs-best-practices и вкуриваешь их без всяких фрэймворков. 59 | 60 | И все ты готов к собеседованию на должность среднего разработчика. Обычно примерно такой уровень занний выносят за 3-4 года вуза в БГУИР. 61 | 62 | ...а вообще самое главное в IT это ходить на собеседование. И не боятся написать рекрутеру 63 | 64 | вот тут парень оч подробно рассказывает 65 | 66 | https://vimeo.com/255927491/8a65b0cb04 67 | работает вообще по любым специальностям в it 68 | -------------------------------------------------------------------------------- /calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 22 | 25 | 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /calculator/main.js: -------------------------------------------------------------------------------- 1 | function Calculator() { 2 | let x = 0; 3 | let methods; 4 | 5 | function set(a) { 6 | x = a; 7 | return methods; 8 | } 9 | 10 | function get() { 11 | return x; 12 | } 13 | 14 | function add(b) { 15 | x += b; 16 | return methods; 17 | } 18 | 19 | function divide(b) { 20 | x /= b; 21 | return methods; 22 | } 23 | 24 | methods = { 25 | add, 26 | divide, 27 | set, 28 | get 29 | } 30 | 31 | return methods; 32 | }; 33 | 34 | const calc = new Calculator(); 35 | 36 | // calc 37 | // .set(5) 38 | // .add(3) 39 | // .divide(2); 40 | 41 | (()=> { 42 | // actions 43 | const setAction = document.querySelector('#set'); 44 | const addAction = document.querySelector('#add'); 45 | const divideAction = document.querySelector('#divide'); 46 | 47 | // input 48 | const input = document.querySelector('#input'); 49 | 50 | // result 51 | const result = document.querySelector('#calc'); 52 | 53 | function render() { 54 | result.innerHTML = calc.get(); 55 | } 56 | 57 | setAction.addEventListener('click', ()=> { 58 | calc.set(parseFloat(input.value)); 59 | render(); 60 | }); 61 | 62 | addAction.addEventListener('click', ()=> { 63 | calc.add(parseFloat(input.value)); 64 | render(); 65 | }); 66 | 67 | divideAction.addEventListener('click', ()=> { 68 | calc.divide(parseFloat(input.value)); 69 | render(); 70 | }); 71 | })() 72 | -------------------------------------------------------------------------------- /demo-1/calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 22 | 25 | 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /demo-1/calculator/main.js: -------------------------------------------------------------------------------- 1 | function Calculator() { 2 | let x = 0; 3 | let methods; 4 | 5 | function set(a) { 6 | x = a; 7 | return methods; 8 | } 9 | 10 | function get() { 11 | return x; 12 | } 13 | 14 | function add(b) { 15 | x += b; 16 | return methods; 17 | } 18 | 19 | function divide(b) { 20 | x /= b; 21 | return methods; 22 | } 23 | 24 | methods = { 25 | add, 26 | divide, 27 | set, 28 | get 29 | } 30 | 31 | return methods; 32 | }; 33 | 34 | const calc = new Calculator(); 35 | 36 | // calc 37 | // .set(5) 38 | // .add(3) 39 | // .divide(2); 40 | 41 | (()=> { 42 | // actions 43 | const setAction = document.querySelector('#set'); 44 | const addAction = document.querySelector('#add'); 45 | const divideAction = document.querySelector('#divide'); 46 | 47 | // input 48 | const input = document.querySelector('#input'); 49 | 50 | // result 51 | const result = document.querySelector('#calc'); 52 | 53 | function render() { 54 | result.innerHTML = calc.get(); 55 | } 56 | 57 | setAction.addEventListener('click', ()=> { 58 | calc.set(parseFloat(input.value)); 59 | render(); 60 | }); 61 | 62 | addAction.addEventListener('click', ()=> { 63 | calc.add(parseFloat(input.value)); 64 | render(); 65 | }); 66 | 67 | divideAction.addEventListener('click', ()=> { 68 | calc.divide(parseFloat(input.value)); 69 | render(); 70 | }); 71 | })() 72 | -------------------------------------------------------------------------------- /demo-1/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 17 | 18 | 19 |
20 |
21 | sakjdasdg 22 | (2) 23 |
24 |
aksdhgjhasdg
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /exchange/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 18 | 22 |
23 |
24 | 29 | 33 |
34 | 35 |
36 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /json/index.js: -------------------------------------------------------------------------------- 1 | const x = {"products":[{"id":972670,"key":"vivoactivehr","name":"Vivoactive HR","full_name":"Garmin Vivoactive HR","name_prefix":"Фитнес-браслет","extended_name":"Garmin Vivoactive HR","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/ce6851ba5f686b89ed084fce7666cc51.jpeg","icon":null},"description":"фитнес-браслет, поддержка Android\/iOS, экран TFT 0.86" (148x205, сенсорный), шагомер, пульсометр, время работы: 1 неделя 1 сутки","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/garmin\/vivoactivehr","reviews":{"rating":35,"count":8,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/garmin\/vivoactivehr\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/vivoactivehr\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/vivoactivehr","prices":{"min":3990000,"price_min":{"amount":"399.00","currency":"BYN","converted":{"BYN":{"amount":"399.00","currency":"BYN"},"BYR":{"amount":"3990000","currency":"BYR"}}},"max":3990000,"price_max":{"amount":"399.00","currency":"BYN","converted":{"BYN":{"amount":"399.00","currency":"BYN"},"BYR":{"amount":"3990000","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":1}},"offers":{"count":1},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/garmin\/vivoactivehr\/prices","url":"https:\/\/shop.api.onliner.by\/products\/vivoactivehr\/positions"},"second":{"offers_count":0,"min_price":null},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":1373644,"key":"xmiband3ww","name":"Mi Band 3 международная версия (черный)","full_name":"Xiaomi Mi Band 3 международная версия (черный)","name_prefix":"Фитнес-браслет","extended_name":"Xiaomi Mi Band 3 международная версия (черный)","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/9cd1e657a21739efab75b3947637c13a.jpeg","icon":null},"description":"фитнес-браслет, поддержка Android\/iOS, экран OLED 0.79" (128x80, сенсорный), шагомер, пульсометр, время работы: 2 недели 6 суток","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/xiaomi\/xmiband3ww","reviews":{"rating":45,"count":87,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/xiaomi\/xmiband3ww\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/xmiband3ww\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/xmiband3ww","prices":{"min":750000,"price_min":{"amount":"75.00","currency":"BYN","converted":{"BYN":{"amount":"75.00","currency":"BYN"},"BYR":{"amount":"750000","currency":"BYR"}}},"max":850000,"price_max":{"amount":"85.00","currency":"BYN","converted":{"BYN":{"amount":"85.00","currency":"BYN"},"BYR":{"amount":"850000","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":24}},"offers":{"count":24},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/xiaomi\/xmiband3ww\/prices","url":"https:\/\/shop.api.onliner.by\/products\/xmiband3ww\/positions"},"second":{"offers_count":2,"min_price":{"amount":"46.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":1355297,"key":"ss050053000","name":"3 Fitness (золотистый\/белый)","full_name":"Suunto 3 Fitness (золотистый\/белый)","name_prefix":"Умные часы","extended_name":"Suunto 3 Fitness (золотистый\/белый)","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/4f3e6739132b0238ecdde416ace843cc.jpeg","icon":null},"description":"фитнес-часы, поддержка Android\/iOS, шагомер, пульсометр, время работы: 1 неделя 3 суток","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/suunto\/ss050053000","reviews":{"rating":0,"count":0,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/suunto\/ss050053000\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/ss050053000\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/ss050053000","prices":{"min":5990000,"price_min":{"amount":"599.00","currency":"BYN","converted":{"BYN":{"amount":"599.00","currency":"BYN"},"BYR":{"amount":"5990000","currency":"BYR"}}},"max":5990000,"price_max":{"amount":"599.00","currency":"BYN","converted":{"BYN":{"amount":"599.00","currency":"BYN"},"BYR":{"amount":"5990000","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":1}},"offers":{"count":1},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/suunto\/ss050053000\/prices","url":"https:\/\/shop.api.onliner.by\/products\/ss050053000\/positions"},"second":{"offers_count":0,"min_price":null},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":1381042,"key":"smr800nzsaser","name":"Galaxy Watch 46мм (серебристая сталь)","full_name":"Samsung Galaxy Watch 46мм (серебристая сталь)","name_prefix":"Умные часы","extended_name":"Samsung Galaxy Watch 46мм (серебристая сталь)","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/6a00926cf9b9366f1a27bfe626880fc0.jpeg","icon":null},"description":"часы-компаньон, поддержка Android\/iOS, экран AMOLED 1.3" (360x360, сенсорный), шагомер, пульсометр, время работы: 1 неделя","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr800nzsaser","reviews":{"rating":45,"count":22,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr800nzsaser\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/smr800nzsaser\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/smr800nzsaser","prices":{"min":6850000,"price_min":{"amount":"685.00","currency":"BYN","converted":{"BYN":{"amount":"685.00","currency":"BYN"},"BYR":{"amount":"6850000","currency":"BYR"}}},"max":8460700,"price_max":{"amount":"846.07","currency":"BYN","converted":{"BYN":{"amount":"846.07","currency":"BYN"},"BYR":{"amount":"8460700","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":26}},"offers":{"count":26},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr800nzsaser\/prices","url":"https:\/\/shop.api.onliner.by\/products\/smr800nzsaser\/positions"},"second":{"offers_count":2,"min_price":{"amount":"600.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":1381231,"key":"mu6d2","name":"Watch Series 4 44 мм (алюминий серый космос\/черный)","full_name":"Apple Watch Series 4 44 мм (алюминий серый космос\/черный)","name_prefix":"Умные часы","extended_name":"Apple Watch Series 4 44 мм (алюминий серый космос\/черный)","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/781f60df15f1f144cd6f899d4f3b3b9c.jpeg","icon":null},"description":"часы-компаньон, поддержка iOS, экран AMOLED 1.78" (368x448, сенсорный), шагомер, пульсометр, время работы: 18 часов","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/apple\/mu6d2","reviews":{"rating":50,"count":5,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/apple\/mu6d2\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/mu6d2\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/mu6d2","prices":{"min":10900000,"price_min":{"amount":"1090.00","currency":"BYN","converted":{"BYN":{"amount":"1090.00","currency":"BYN"},"BYR":{"amount":"10900000","currency":"BYR"}}},"max":13616900,"price_max":{"amount":"1361.69","currency":"BYN","converted":{"BYN":{"amount":"1361.69","currency":"BYN"},"BYR":{"amount":"13616900","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":17}},"offers":{"count":17},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/apple\/mu6d2\/prices","url":"https:\/\/shop.api.onliner.by\/products\/mu6d2\/positions"},"second":{"offers_count":1,"min_price":{"amount":"1000.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":902341,"key":"xmiband2","name":"Mi Band 2","full_name":"Xiaomi Mi Band 2","name_prefix":"Фитнес-браслет","extended_name":"Xiaomi Mi Band 2","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/7cfaa80229ff08b28fafea0f4d1137a4.jpg","icon":null},"description":"фитнес-браслет, поддержка Android\/iOS, шагомер, пульсометр","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/xiaomi\/xmiband2","reviews":{"rating":40,"count":179,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/xiaomi\/xmiband2\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/xmiband2\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/xmiband2","prices":{"min":430000,"price_min":{"amount":"43.00","currency":"BYN","converted":{"BYN":{"amount":"43.00","currency":"BYN"},"BYR":{"amount":"430000","currency":"BYR"}}},"max":699000,"price_max":{"amount":"69.90","currency":"BYN","converted":{"BYN":{"amount":"69.90","currency":"BYN"},"BYR":{"amount":"699000","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":25}},"offers":{"count":25},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/xiaomi\/xmiband2\/prices","url":"https:\/\/shop.api.onliner.by\/products\/xmiband2\/positions"},"second":{"offers_count":5,"min_price":{"amount":"20.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":987996,"key":"smr760","name":"Gear S3 frontier [SM-R760]","full_name":"Samsung Gear S3 frontier [SM-R760]","name_prefix":"Умные часы","extended_name":"Samsung Gear S3 frontier [SM-R760]","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/d11f775c6b4fd1c36a21977ff6522753.jpeg","icon":null},"description":"часы-компаньон, поддержка Android\/iOS, экран AMOLED 1.3" (360x360, сенсорный), шагомер, пульсометр, время работы: 3 суток","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr760","reviews":{"rating":45,"count":42,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr760\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/smr760\/reviews"},"review_url":"https:\/\/tech.onliner.by\/2016\/11\/23\/smart-watch-2","url":"https:\/\/catalog.api.onliner.by\/products\/smr760","prices":{"min":5350000,"price_min":{"amount":"535.00","currency":"BYN","converted":{"BYN":{"amount":"535.00","currency":"BYN"},"BYR":{"amount":"5350000","currency":"BYR"}}},"max":9325700,"price_max":{"amount":"932.57","currency":"BYN","converted":{"BYN":{"amount":"932.57","currency":"BYN"},"BYR":{"amount":"9325700","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":25}},"offers":{"count":25},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr760\/prices","url":"https:\/\/shop.api.onliner.by\/products\/smr760\/positions"},"second":{"offers_count":7,"min_price":{"amount":"350.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":1173714,"key":"amazfitbipblk","name":"Bip (черный)","full_name":"Amazfit Bip (черный)","name_prefix":"Умные часы","extended_name":"Amazfit Bip (черный)","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/60eb2a10ee02f9487f215791379ea14e.jpeg","icon":null},"description":"фитнес-часы, поддержка Android\/iOS, шагомер, пульсометр, время работы: 16 недель","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/huami\/amazfitbipblk","reviews":{"rating":45,"count":66,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/huami\/amazfitbipblk\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/amazfitbipblk\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/amazfitbipblk","prices":{"min":1450000,"price_min":{"amount":"145.00","currency":"BYN","converted":{"BYN":{"amount":"145.00","currency":"BYN"},"BYR":{"amount":"1450000","currency":"BYR"}}},"max":1990000,"price_max":{"amount":"199.00","currency":"BYN","converted":{"BYN":{"amount":"199.00","currency":"BYN"},"BYR":{"amount":"1990000","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":29}},"offers":{"count":29},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/huami\/amazfitbipblk\/prices","url":"https:\/\/shop.api.onliner.by\/products\/amazfitbipblk\/positions"},"second":{"offers_count":1,"min_price":{"amount":"135.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":1432104,"key":"band4black","name":"Band 4 (черный)","full_name":"Honor Band 4 (черный)","name_prefix":"Фитнес-браслет","extended_name":"Honor Band 4 (черный)","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/84e91e6c932b395d4f91c85327480450.jpeg","icon":null},"description":"фитнес-браслет, поддержка Android\/iOS, экран AMOLED 0.95" (120x240, сенсорный), шагомер, пульсометр, время работы: 2 недели","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/honor\/band4black","reviews":{"rating":45,"count":6,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/honor\/band4black\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/band4black\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/band4black","prices":{"min":1390000,"price_min":{"amount":"139.00","currency":"BYN","converted":{"BYN":{"amount":"139.00","currency":"BYN"},"BYR":{"amount":"1390000","currency":"BYR"}}},"max":1890000,"price_max":{"amount":"189.00","currency":"BYN","converted":{"BYN":{"amount":"189.00","currency":"BYN"},"BYR":{"amount":"1890000","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":3}},"offers":{"count":3},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/honor\/band4black\/prices","url":"https:\/\/shop.api.onliner.by\/products\/band4black\/positions"},"second":{"offers_count":4,"min_price":{"amount":"85.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"},{"id":1380726,"key":"smr810nzkaser","name":"Galaxy Watch 42мм (глубокий черный)","full_name":"Samsung Galaxy Watch 42мм (глубокий черный)","name_prefix":"Умные часы","extended_name":"Samsung Galaxy Watch 42мм (глубокий черный)","status":"active","images":{"header":"\/\/content2.onliner.by\/catalog\/device\/header\/9e75e03c260716bff9407e2ae6b5655d.jpeg","icon":null},"description":"часы-компаньон, поддержка Android\/iOS, экран AMOLED 1.2" (360x360, сенсорный), шагомер, пульсометр, время работы: 5 суток","html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr810nzkaser","reviews":{"rating":45,"count":14,"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr810nzkaser\/reviews","url":"https:\/\/catalog.api.onliner.by\/products\/smr810nzkaser\/reviews"},"review_url":null,"url":"https:\/\/catalog.api.onliner.by\/products\/smr810nzkaser","prices":{"min":5880000,"price_min":{"amount":"588.00","currency":"BYN","converted":{"BYN":{"amount":"588.00","currency":"BYN"},"BYR":{"amount":"5880000","currency":"BYR"}}},"max":6847300,"price_max":{"amount":"684.73","currency":"BYN","converted":{"BYN":{"amount":"684.73","currency":"BYN"},"BYR":{"amount":"6847300","currency":"BYR"}}},"currency_sign":"руб.","towns":{"minsk":{"count":22}},"offers":{"count":22},"html_url":"https:\/\/catalog.onliner.by\/smartwatch\/samsung\/smr810nzkaser\/prices","url":"https:\/\/shop.api.onliner.by\/products\/smr810nzkaser\/positions"},"second":{"offers_count":2,"min_price":{"amount":"500.00","currency":"BYN"}},"is_tender_enabled":false,"tender_disability_reason":"Не участвует в тендерах"}],"total":34373,"page":{"limit":10,"items":10,"current":1,"last":3438}} 2 | 3 | // массивы 4 | 5 | function operationFunc(x) { 6 | const newProducts = x.products 7 | .map((element, index, array) =>{ 8 | const price = parseInt(element.prices.price_max.amount); 9 | if (price > 400) { 10 | return { 11 | index: index, 12 | price: price, 13 | category: price % 2 ? 'огурцы' : 'орехи', 14 | name: element.name, 15 | namePrice: `$ ${Math.round(price)}` 16 | } 17 | } 18 | }).filter(e => e); 19 | 20 | const totalPrice = newProducts.reduce((result, element) => result += element.price, 0); 21 | 22 | const map = newProducts.reduce((result, element) => { 23 | result[element.category] = result[element.category] || []; 24 | result[element.category].push(element); 25 | return result; 26 | }, {}); 27 | 28 | // objects 29 | 30 | const tranformedObj = Object.keys(map).map(key => 31 | ({name: key, value: map[key]})); 32 | 33 | let account = { 34 | name: 'Василий', 35 | details: 'Повар', 36 | } 37 | 38 | function Auth(auth) { 39 | return { 40 | token: 'askjdgjahsdgjkasd', 41 | role: 'админ', 42 | } 43 | } 44 | 45 | const creds = Auth({login: 'X'}); 46 | 47 | account = Object.assign(account, creds, {name: null, details: null}); 48 | 49 | return newProducts; 50 | } 51 | 52 | const memo = (func) => { 53 | let __data; 54 | let __x; 55 | return (x) => { 56 | if (x !== __x) { 57 | __data = func(x); 58 | __x = x; 59 | } 60 | 61 | return __data; 62 | } 63 | } 64 | 65 | const calcData = memo(operationFunc); 66 | 67 | const oldProducts = calcData(x); 68 | const newProducts = calcData(x); 69 | 70 | const result = oldProducts === newProducts 71 | 72 | Array.from() 73 | 74 | 75 | 76 | 77 | document.addEventListener('click', (e) => x.func()) 78 | 79 | 80 | Date.now() 81 | 82 | 83 | debugger; 84 | -------------------------------------------------------------------------------- /json/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "json", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "nodemon ./index.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "nodemon": "^1.18.9" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "draw-cell", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-scripts": "2.1.5" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinskJson/js--base/346aafdef2f27fe9e40495c922c449cc6e07c77d/live-game--draw-cell--react/public/favicon.ico -------------------------------------------------------------------------------- /live-game--draw-cell--react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/App.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --active: #ccc; 3 | --empty: white; 4 | --border: 1px solid var(--active); 5 | } 6 | 7 | .game-cell { 8 | display: flex; 9 | width: 12px; 10 | height: 12px; 11 | align-items: center; 12 | justify-content: center; 13 | color: transparent; 14 | border: var(--border); 15 | } 16 | 17 | .game-cell--1 { 18 | background: var(--active); 19 | } 20 | 21 | .game-cell--0 { 22 | background: var(--empty); 23 | } 24 | 25 | .game-row { 26 | display: flex; 27 | } 28 | 29 | .game { 30 | clear: both; 31 | border: var(--border); 32 | margin: auto; 33 | float: left; 34 | } -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Game } from './game'; 3 | 4 | import './App.css'; 5 | 6 | const GameRow = ({row, y, onClick}) => { 7 | return
{ 8 | row.map((number, index) => ) 9 | }
10 | } 11 | 12 | const Cell = ({col, onClick, x, y}) => { 13 | return onClick && onClick(x, y)}>{col}; 14 | } 15 | 16 | const GameComponent = ({arr, onCellClick}) => { 17 | return
18 | { 19 | arr.map((row, index) => ) 20 | } 21 |
22 | } 23 | 24 | class App extends Component { 25 | state = { 26 | x: 0, 27 | y: 0, 28 | arr: [], 29 | isPlaying: false, 30 | } 31 | 32 | onXInputChange = (e) => { 33 | this.setState({ 34 | x: parseInt(e.target.value), 35 | arr: this.createArray(parseInt(e.target.value), this.state.y), 36 | }) 37 | } 38 | 39 | onYInputChange = (e) => { 40 | this.setState({ 41 | y: parseInt(e.target.value), 42 | arr: this.createArray(this.state.x, parseInt(e.target.value)), 43 | }); 44 | } 45 | 46 | createArray(x, y) { 47 | const xLvlArr = new Array(x).fill(0); 48 | const yLvlArr = new Array(y).fill(0).map(() => xLvlArr.slice()); 49 | 50 | return yLvlArr; 51 | } 52 | 53 | onCellClick = (x, y) => { 54 | const { arr } = this.state; 55 | arr[y][x] = arr[y][x] === 0 ? 1 : 0; 56 | 57 | const newArr = arr.map(e => e.slice()); 58 | 59 | this.setState({ 60 | arr: newArr, 61 | }) 62 | } 63 | 64 | onPlay = () => { 65 | const { arr } = this.state; 66 | this.game = new Game(arr); 67 | 68 | this.setState({ 69 | isPlaying: true 70 | }) 71 | 72 | setInterval(() => { 73 | this.game.step(); 74 | const newArr = this.game.getArena().map(e => e.slice()); 75 | 76 | this.setState({ 77 | arr: newArr, 78 | }); 79 | }, 1000); 80 | } 81 | 82 | render() { 83 | const{ x, y, arr, isPlaying } = this.state; 84 | 85 | 86 | return (
87 | 91 | 95 |
96 | 97 |
98 |
99 | 100 |
101 |
102 | ); 103 | } 104 | } 105 | 106 | export default App; 107 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/game.js: -------------------------------------------------------------------------------- 1 | class Game { 2 | constructor(arena) { 3 | /** 4 | * Y 5 | * [ 6 | * X[] 7 | * ] 8 | */ 9 | this.__arena = arena; 10 | } 11 | 12 | getArena() { 13 | return this.__arena; 14 | } 15 | 16 | step() { 17 | let newArena = []; 18 | 19 | this.__arena.forEach((osX, y) => { 20 | newArena[y] = newArena[y] || [].concat(osX); 21 | 22 | osX.forEach((val, x) => { 23 | const life = this.lifeCellCount(x, y); 24 | const isLive = this.isLive(x, y); 25 | 26 | if (isLive && (life === 2 || life === 3)) { 27 | newArena[y][x] = 1; 28 | } 29 | 30 | if (isLive && (life < 2 || life > 3)) { 31 | newArena[y][x] = 0; 32 | } 33 | 34 | if (!isLive && life === 3) { 35 | newArena[y][x] = 1; 36 | } 37 | }); 38 | }); 39 | 40 | this.__arena = newArena; 41 | } 42 | 43 | isEnded() { 44 | const count = this.__arena.reduce((result, val, y) => { 45 | return val.reduce((result, val, x) => { 46 | if (this.isLive(x, y)) { 47 | result += 1; 48 | } 49 | return result; 50 | }, 0); 51 | }); 52 | 53 | return count === 0; 54 | } 55 | 56 | isLive(x, y) { 57 | if (y === this.__arena.length || y < 0) return false; 58 | if (x === this.__arena[y].length || x < 0) return false; 59 | 60 | return this.__arena[y][x] === 1; 61 | } 62 | 63 | lifeCellCount(x, y) { 64 | const osY = [y - 1, y, y + 1]; 65 | const osX = [x - 1, x, x + 1]; 66 | return osY.reduce((result, y) => { 67 | return osX.reduce((result, x) => { 68 | if (this.isLive(x, y)) { 69 | result += 1; 70 | } 71 | return result; 72 | }, result); 73 | }, this.isLive(x, y) ? -1 : 0); 74 | } 75 | } 76 | 77 | export { 78 | Game, 79 | } -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /live-game--draw-cell--react/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /live-game/__tests__/live-game.test.js: -------------------------------------------------------------------------------- 1 | const {Game} = require("../live-game.js"); 2 | let game; 3 | describe("game", () => { 4 | beforeEach(() => { 5 | game = new Game([ 6 | [0, 0, 0, 0], 7 | [0, 1, 1, 0], 8 | [0, 1, 0, 0], 9 | [0, 1, 0, 0], 10 | ]); 11 | }); 12 | 13 | it(`в пустой (мёртвой) клетке, рядом с которой ровно три живые клетки, 14 | зарождается жизнь;`, () => { 15 | const x = 0; 16 | const y = 2; 17 | const life = game.lifeCellCount(x, y); 18 | let isLive = game.isLive(x, y); 19 | 20 | expect(life).toBe(3); 21 | expect(isLive).toBe(false); 22 | 23 | game.step(); 24 | 25 | isLive = game.isLive(x, y); 26 | expect(isLive).toBe(true); 27 | }); 28 | 29 | it(`если у живой клетки есть две или три живые соседки, 30 | то эта клетка продолжает жить;`, () => { 31 | const x = 1; 32 | const y = 1; 33 | let isLive = game.isLive(x, y); 34 | const life = game.lifeCellCount(x, y); 35 | 36 | expect(isLive).toBe(true); 37 | expect(life).toBe(2); 38 | 39 | game.step(); 40 | 41 | isLive = game.isLive(x, y); 42 | expect(isLive).toBe(true); 43 | }); 44 | 45 | it(`если соседей меньше двух или больше трёх, клетка умирает 46 | («от одиночества» или «от перенаселённости»)`, () => { 47 | const x = 1; 48 | const y = 3; 49 | let isLive = game.isLive(x, y); 50 | const life = game.lifeCellCount(x, y); 51 | 52 | expect(isLive).toBe(true); 53 | expect(life).toBe(1); 54 | 55 | game.step(); 56 | 57 | isLive = game.isLive(x, y); 58 | expect(isLive).toBe(false); 59 | }); 60 | 61 | it(`заканчивается если - на поле не останется ни одной «живой» клетки`, () => { 62 | let simpleGame = new Game([ 63 | [0, 0, 0, 0], 64 | [0, 1, 1, 0], 65 | [0, 1, 0, 0], 66 | [0, 1, 0, 0], 67 | ]); 68 | 69 | let isEnded = simpleGame.isEnded(); 70 | expect(isEnded).toBe(false); 71 | 72 | simpleGame.step(); 73 | 74 | isEnded = simpleGame.isEnded(); 75 | expect(isEnded).toBe(true); 76 | }); 77 | }); 78 | -------------------------------------------------------------------------------- /live-game/live-game.js: -------------------------------------------------------------------------------- 1 | class Game { 2 | constructor(arena) { 3 | /** 4 | * Y 5 | * [ 6 | * X[] 7 | * ] 8 | */ 9 | this.__arena = arena; 10 | } 11 | 12 | step() { 13 | let newArena = []; 14 | 15 | this.__arena.forEach((osX, y) => { 16 | newArena[y] = newArena[y] || [].concat(osX); 17 | 18 | osX.forEach((val, x) => { 19 | const life = this.lifeCellCount(x, y); 20 | const isLive = this.isLive(x, y); 21 | 22 | if (isLive && (life === 2 || life === 3)) { 23 | newArena[y][x] = 1; 24 | } 25 | 26 | if (isLive && (life < 2 || life > 3)) { 27 | newArena[y][x] = 0; 28 | } 29 | 30 | if (!isLive && life === 3) { 31 | newArena[y][x] = 1; 32 | } 33 | }); 34 | }); 35 | 36 | this.__arena = newArena; 37 | } 38 | 39 | isEnded() { 40 | const count = this.__arena.reduce((result, val, y) => { 41 | return val.reduce((result, val, x) => { 42 | if (this.isLive(x, y)) { 43 | result += 1; 44 | } 45 | return result; 46 | }, 0); 47 | }); 48 | 49 | return count === 0; 50 | } 51 | 52 | isLive(x, y) { 53 | if (y === this.__arena.length || y < 0) return false; 54 | if (x === this.__arena[y].length || x < 0) return false; 55 | 56 | return this.__arena[y][x] === 1; 57 | } 58 | 59 | lifeCellCount(x, y) { 60 | const osY = [y - 1, y, y + 1]; 61 | const osX = [x - 1, x, x + 1]; 62 | return osY.reduce((result, y) => { 63 | return osX.reduce((result, x) => { 64 | if (this.isLive(x, y)) { 65 | result += 1; 66 | } 67 | return result; 68 | }, result); 69 | }, this.isLive(x, y) ? -1 : 0); 70 | } 71 | } 72 | 73 | module.exports.Game = Game; -------------------------------------------------------------------------------- /live-game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "live-game", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jest": "^24.1.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /modules/car.js: -------------------------------------------------------------------------------- 1 | // import axios from 'https://unpkg.com/axios/dist/axios.min.js'; 2 | 3 | console.log(axios); 4 | export function move() { 5 | console.log('move'); 6 | } 7 | 8 | export function jump() { 9 | console.log('jump'); 10 | } 11 | -------------------------------------------------------------------------------- /modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /modules/user.1.js: -------------------------------------------------------------------------------- 1 | import {move} from './car.js'; 2 | 3 | move(); 4 | -------------------------------------------------------------------------------- /modules/user.js: -------------------------------------------------------------------------------- 1 | import {jump} from './car.js'; 2 | 3 | jump(); 4 | 5 | export default {}; 6 | -------------------------------------------------------------------------------- /nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "next", 8 | "build": "next build", 9 | "start": "next start" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "next": "^7.0.2", 15 | "react": "^16.8.0", 16 | "react-dom": "^16.8.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /nextjs/pages/blog.js: -------------------------------------------------------------------------------- 1 | export default () =>
Blog
2 | -------------------------------------------------------------------------------- /nextjs/pages/index.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | 3 | if (window) { 4 | console.log('asdjkhasdh') 5 | } 6 | export default () =>
7 | asdlhakdjh 8 |
9 | Welcome to next.js! 10 |
11 |
12 | -------------------------------------------------------------------------------- /node-1/index.js: -------------------------------------------------------------------------------- 1 | // fs 2 | const fs = require('fs'); 3 | const path = require('path'); 4 | 5 | function x(params) { 6 | // let filePath = path.join(__dirname, './txt.1'); 7 | 8 | // if (fs.existsSync(filePath)){ 9 | // fs.readFile(filePath, (err, data) => { 10 | // if (err) { 11 | // console.log(err); 12 | // } 13 | // else { 14 | // let obj = data.toString(); 15 | // console.log(obj); 16 | // } 17 | // }); 18 | // } else { 19 | // fs.writeFile(filePath, 'hello world', () => {}); 20 | // } 21 | 22 | } 23 | 24 | // http 25 | // const http = require('http'); 26 | 27 | // // Create an HTTP tunneling proxy 28 | // const server = http.createServer((req, res) => { 29 | // console.log(req, res); 30 | // res.writeHead(200, { 'Content-Type': 'text/html' }); 31 | // res.end('oke'); 32 | // }); 33 | 34 | // server.listen(1337, '127.0.0.1'); 35 | 36 | var express = require('express'); 37 | var app = express(); 38 | var bodyParser = require('body-parser'); 39 | var axios = require('axios'); 40 | const cheerio = require('cheerio') 41 | 42 | app.use(bodyParser.raw()); // to support JSON-encoded bodies 43 | app.use(bodyParser.urlencoded({ // to support URL-encoded bodies 44 | extended: true 45 | })); 46 | 47 | app.get('/user/*/joe', function (req, res) { 48 | axios.get('https://people.onliner.by/2019/02/06/cardio').then(response => { 49 | console.log(response.data); 50 | const $ = cheerio.load(response.data); 51 | res.writeHead(200, { 'Content-Type': 'text/html' }); 52 | const items = $('.news-media.news-media_condensed').html(); 53 | res.end(items); 54 | }) 55 | }); 56 | 57 | function y() { 58 | // app 59 | const userRoute = app.post('/user'); 60 | 61 | // user-routes.js 62 | userRoute.post('/:id/joe/:password', manageUser); 63 | 64 | // user-controller.js 65 | const manageUser = function (req, res) { 66 | console.log(req.params); 67 | if (req.params) { 68 | returnres.json({name: 'joe', boe: 'name'}); 69 | } 70 | 71 | res.status(404); 72 | res.end(); 73 | }; 74 | } 75 | 76 | app.listen(3000, function () { 77 | console.log('Example app listening on port 3000!'); 78 | }); 79 | -------------------------------------------------------------------------------- /node-1/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@types/node": { 8 | "version": "10.12.21", 9 | "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.21.tgz", 10 | "integrity": "sha512-CBgLNk4o3XMnqMc0rhb6lc77IwShMEglz05deDcn2lQxyXEZivfwgYJu7SMha9V5XcrP6qZuevTHV/QrN2vjKQ==" 11 | }, 12 | "accepts": { 13 | "version": "1.3.5", 14 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 15 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 16 | "requires": { 17 | "mime-types": "~2.1.18", 18 | "negotiator": "0.6.1" 19 | } 20 | }, 21 | "array-flatten": { 22 | "version": "1.1.1", 23 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 24 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 25 | }, 26 | "axios": { 27 | "version": "0.18.0", 28 | "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", 29 | "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", 30 | "requires": { 31 | "follow-redirects": "^1.3.0", 32 | "is-buffer": "^1.1.5" 33 | } 34 | }, 35 | "body-parser": { 36 | "version": "1.18.3", 37 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz", 38 | "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=", 39 | "requires": { 40 | "bytes": "3.0.0", 41 | "content-type": "~1.0.4", 42 | "debug": "2.6.9", 43 | "depd": "~1.1.2", 44 | "http-errors": "~1.6.3", 45 | "iconv-lite": "0.4.23", 46 | "on-finished": "~2.3.0", 47 | "qs": "6.5.2", 48 | "raw-body": "2.3.3", 49 | "type-is": "~1.6.16" 50 | } 51 | }, 52 | "boolbase": { 53 | "version": "1.0.0", 54 | "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", 55 | "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" 56 | }, 57 | "bytes": { 58 | "version": "3.0.0", 59 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 60 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 61 | }, 62 | "cheerio": { 63 | "version": "1.0.0-rc.2", 64 | "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz", 65 | "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=", 66 | "requires": { 67 | "css-select": "~1.2.0", 68 | "dom-serializer": "~0.1.0", 69 | "entities": "~1.1.1", 70 | "htmlparser2": "^3.9.1", 71 | "lodash": "^4.15.0", 72 | "parse5": "^3.0.1" 73 | } 74 | }, 75 | "content-disposition": { 76 | "version": "0.5.2", 77 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 78 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 79 | }, 80 | "content-type": { 81 | "version": "1.0.4", 82 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 83 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 84 | }, 85 | "cookie": { 86 | "version": "0.3.1", 87 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 88 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 89 | }, 90 | "cookie-signature": { 91 | "version": "1.0.6", 92 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 93 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 94 | }, 95 | "css-select": { 96 | "version": "1.2.0", 97 | "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", 98 | "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", 99 | "requires": { 100 | "boolbase": "~1.0.0", 101 | "css-what": "2.1", 102 | "domutils": "1.5.1", 103 | "nth-check": "~1.0.1" 104 | } 105 | }, 106 | "css-what": { 107 | "version": "2.1.2", 108 | "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz", 109 | "integrity": "sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==" 110 | }, 111 | "debug": { 112 | "version": "2.6.9", 113 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 114 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 115 | "requires": { 116 | "ms": "2.0.0" 117 | } 118 | }, 119 | "depd": { 120 | "version": "1.1.2", 121 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 122 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 123 | }, 124 | "destroy": { 125 | "version": "1.0.4", 126 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 127 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 128 | }, 129 | "dom-serializer": { 130 | "version": "0.1.0", 131 | "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz", 132 | "integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=", 133 | "requires": { 134 | "domelementtype": "~1.1.1", 135 | "entities": "~1.1.1" 136 | }, 137 | "dependencies": { 138 | "domelementtype": { 139 | "version": "1.1.3", 140 | "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz", 141 | "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=" 142 | } 143 | } 144 | }, 145 | "domelementtype": { 146 | "version": "1.3.1", 147 | "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", 148 | "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==" 149 | }, 150 | "domhandler": { 151 | "version": "2.4.2", 152 | "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", 153 | "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", 154 | "requires": { 155 | "domelementtype": "1" 156 | } 157 | }, 158 | "domutils": { 159 | "version": "1.5.1", 160 | "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz", 161 | "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=", 162 | "requires": { 163 | "dom-serializer": "0", 164 | "domelementtype": "1" 165 | } 166 | }, 167 | "ee-first": { 168 | "version": "1.1.1", 169 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 170 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 171 | }, 172 | "encodeurl": { 173 | "version": "1.0.2", 174 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 175 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 176 | }, 177 | "entities": { 178 | "version": "1.1.2", 179 | "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", 180 | "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" 181 | }, 182 | "escape-html": { 183 | "version": "1.0.3", 184 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 185 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 186 | }, 187 | "etag": { 188 | "version": "1.8.1", 189 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 190 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 191 | }, 192 | "express": { 193 | "version": "4.16.4", 194 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz", 195 | "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==", 196 | "requires": { 197 | "accepts": "~1.3.5", 198 | "array-flatten": "1.1.1", 199 | "body-parser": "1.18.3", 200 | "content-disposition": "0.5.2", 201 | "content-type": "~1.0.4", 202 | "cookie": "0.3.1", 203 | "cookie-signature": "1.0.6", 204 | "debug": "2.6.9", 205 | "depd": "~1.1.2", 206 | "encodeurl": "~1.0.2", 207 | "escape-html": "~1.0.3", 208 | "etag": "~1.8.1", 209 | "finalhandler": "1.1.1", 210 | "fresh": "0.5.2", 211 | "merge-descriptors": "1.0.1", 212 | "methods": "~1.1.2", 213 | "on-finished": "~2.3.0", 214 | "parseurl": "~1.3.2", 215 | "path-to-regexp": "0.1.7", 216 | "proxy-addr": "~2.0.4", 217 | "qs": "6.5.2", 218 | "range-parser": "~1.2.0", 219 | "safe-buffer": "5.1.2", 220 | "send": "0.16.2", 221 | "serve-static": "1.13.2", 222 | "setprototypeof": "1.1.0", 223 | "statuses": "~1.4.0", 224 | "type-is": "~1.6.16", 225 | "utils-merge": "1.0.1", 226 | "vary": "~1.1.2" 227 | } 228 | }, 229 | "finalhandler": { 230 | "version": "1.1.1", 231 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 232 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 233 | "requires": { 234 | "debug": "2.6.9", 235 | "encodeurl": "~1.0.2", 236 | "escape-html": "~1.0.3", 237 | "on-finished": "~2.3.0", 238 | "parseurl": "~1.3.2", 239 | "statuses": "~1.4.0", 240 | "unpipe": "~1.0.0" 241 | } 242 | }, 243 | "follow-redirects": { 244 | "version": "1.6.1", 245 | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.6.1.tgz", 246 | "integrity": "sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ==", 247 | "requires": { 248 | "debug": "=3.1.0" 249 | }, 250 | "dependencies": { 251 | "debug": { 252 | "version": "3.1.0", 253 | "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", 254 | "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", 255 | "requires": { 256 | "ms": "2.0.0" 257 | } 258 | } 259 | } 260 | }, 261 | "forwarded": { 262 | "version": "0.1.2", 263 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 264 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 265 | }, 266 | "fresh": { 267 | "version": "0.5.2", 268 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 269 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 270 | }, 271 | "htmlparser2": { 272 | "version": "3.10.0", 273 | "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.0.tgz", 274 | "integrity": "sha512-J1nEUGv+MkXS0weHNWVKJJ+UrLfePxRWpN3C9bEi9fLxL2+ggW94DQvgYVXsaT30PGwYRIZKNZXuyMhp3Di4bQ==", 275 | "requires": { 276 | "domelementtype": "^1.3.0", 277 | "domhandler": "^2.3.0", 278 | "domutils": "^1.5.1", 279 | "entities": "^1.1.1", 280 | "inherits": "^2.0.1", 281 | "readable-stream": "^3.0.6" 282 | } 283 | }, 284 | "http-errors": { 285 | "version": "1.6.3", 286 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 287 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 288 | "requires": { 289 | "depd": "~1.1.2", 290 | "inherits": "2.0.3", 291 | "setprototypeof": "1.1.0", 292 | "statuses": ">= 1.4.0 < 2" 293 | } 294 | }, 295 | "iconv-lite": { 296 | "version": "0.4.23", 297 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", 298 | "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", 299 | "requires": { 300 | "safer-buffer": ">= 2.1.2 < 3" 301 | } 302 | }, 303 | "inherits": { 304 | "version": "2.0.3", 305 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 306 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 307 | }, 308 | "ipaddr.js": { 309 | "version": "1.8.0", 310 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz", 311 | "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=" 312 | }, 313 | "is-buffer": { 314 | "version": "1.1.6", 315 | "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", 316 | "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" 317 | }, 318 | "lodash": { 319 | "version": "4.17.11", 320 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", 321 | "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" 322 | }, 323 | "media-typer": { 324 | "version": "0.3.0", 325 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 326 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 327 | }, 328 | "merge-descriptors": { 329 | "version": "1.0.1", 330 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 331 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 332 | }, 333 | "methods": { 334 | "version": "1.1.2", 335 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 336 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 337 | }, 338 | "mime": { 339 | "version": "1.4.1", 340 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 341 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 342 | }, 343 | "mime-db": { 344 | "version": "1.37.0", 345 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", 346 | "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==" 347 | }, 348 | "mime-types": { 349 | "version": "2.1.21", 350 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz", 351 | "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==", 352 | "requires": { 353 | "mime-db": "~1.37.0" 354 | } 355 | }, 356 | "ms": { 357 | "version": "2.0.0", 358 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 359 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 360 | }, 361 | "negotiator": { 362 | "version": "0.6.1", 363 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", 364 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 365 | }, 366 | "nth-check": { 367 | "version": "1.0.2", 368 | "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz", 369 | "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==", 370 | "requires": { 371 | "boolbase": "~1.0.0" 372 | } 373 | }, 374 | "on-finished": { 375 | "version": "2.3.0", 376 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 377 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 378 | "requires": { 379 | "ee-first": "1.1.1" 380 | } 381 | }, 382 | "parse5": { 383 | "version": "3.0.3", 384 | "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", 385 | "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", 386 | "requires": { 387 | "@types/node": "*" 388 | } 389 | }, 390 | "parseurl": { 391 | "version": "1.3.2", 392 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", 393 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 394 | }, 395 | "path-to-regexp": { 396 | "version": "0.1.7", 397 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 398 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 399 | }, 400 | "proxy-addr": { 401 | "version": "2.0.4", 402 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", 403 | "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==", 404 | "requires": { 405 | "forwarded": "~0.1.2", 406 | "ipaddr.js": "1.8.0" 407 | } 408 | }, 409 | "qs": { 410 | "version": "6.5.2", 411 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", 412 | "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" 413 | }, 414 | "range-parser": { 415 | "version": "1.2.0", 416 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", 417 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 418 | }, 419 | "raw-body": { 420 | "version": "2.3.3", 421 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz", 422 | "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==", 423 | "requires": { 424 | "bytes": "3.0.0", 425 | "http-errors": "1.6.3", 426 | "iconv-lite": "0.4.23", 427 | "unpipe": "1.0.0" 428 | } 429 | }, 430 | "readable-stream": { 431 | "version": "3.1.1", 432 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz", 433 | "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==", 434 | "requires": { 435 | "inherits": "^2.0.3", 436 | "string_decoder": "^1.1.1", 437 | "util-deprecate": "^1.0.1" 438 | } 439 | }, 440 | "safe-buffer": { 441 | "version": "5.1.2", 442 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 443 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" 444 | }, 445 | "safer-buffer": { 446 | "version": "2.1.2", 447 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 448 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 449 | }, 450 | "send": { 451 | "version": "0.16.2", 452 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 453 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 454 | "requires": { 455 | "debug": "2.6.9", 456 | "depd": "~1.1.2", 457 | "destroy": "~1.0.4", 458 | "encodeurl": "~1.0.2", 459 | "escape-html": "~1.0.3", 460 | "etag": "~1.8.1", 461 | "fresh": "0.5.2", 462 | "http-errors": "~1.6.2", 463 | "mime": "1.4.1", 464 | "ms": "2.0.0", 465 | "on-finished": "~2.3.0", 466 | "range-parser": "~1.2.0", 467 | "statuses": "~1.4.0" 468 | } 469 | }, 470 | "serve-static": { 471 | "version": "1.13.2", 472 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 473 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 474 | "requires": { 475 | "encodeurl": "~1.0.2", 476 | "escape-html": "~1.0.3", 477 | "parseurl": "~1.3.2", 478 | "send": "0.16.2" 479 | } 480 | }, 481 | "setprototypeof": { 482 | "version": "1.1.0", 483 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 484 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 485 | }, 486 | "statuses": { 487 | "version": "1.4.0", 488 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 489 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 490 | }, 491 | "string_decoder": { 492 | "version": "1.2.0", 493 | "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz", 494 | "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==", 495 | "requires": { 496 | "safe-buffer": "~5.1.0" 497 | } 498 | }, 499 | "type-is": { 500 | "version": "1.6.16", 501 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", 502 | "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", 503 | "requires": { 504 | "media-typer": "0.3.0", 505 | "mime-types": "~2.1.18" 506 | } 507 | }, 508 | "unpipe": { 509 | "version": "1.0.0", 510 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 511 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 512 | }, 513 | "util-deprecate": { 514 | "version": "1.0.2", 515 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 516 | "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" 517 | }, 518 | "utils-merge": { 519 | "version": "1.0.1", 520 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 521 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 522 | }, 523 | "vary": { 524 | "version": "1.1.2", 525 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 526 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 527 | } 528 | } 529 | } 530 | -------------------------------------------------------------------------------- /node-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node ./index.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "axios": "^0.18.0", 13 | "body-parser": "^1.18.3", 14 | "cheerio": "^1.0.0-rc.2", 15 | "express": "^4.16.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /node-1/txt.1: -------------------------------------------------------------------------------- 1 | hello world -------------------------------------------------------------------------------- /node-1/txt.txt: -------------------------------------------------------------------------------- 1 | hasgdjhagsdjhasgd 2 | -------------------------------------------------------------------------------- /observer/component.js: -------------------------------------------------------------------------------- 1 | // const Observer = (obj, name, func) => { 2 | // let value = null; 3 | // Object.defineProperty(obj, name, { 4 | // get: function() { return value; }, 5 | // set: function(newValue) { 6 | // value = newValue; 7 | 8 | // func && func(); 9 | 10 | // return value; 11 | // }, 12 | // }); 13 | // } 14 | 15 | class Component { 16 | __renderChildren(el, children) { 17 | if (el.children) { 18 | Array.from(this.el.children).forEach(e => e.remove()); 19 | } 20 | 21 | children.forEach(e => { 22 | el.appendChild(e.render()); 23 | }); 24 | 25 | return el; 26 | } 27 | } 28 | 29 | class Framework { 30 | static attachElement(selector, component) { 31 | const el = document.querySelector(selector); 32 | el.appendChild(component.render()); 33 | } 34 | } 35 | 36 | Framework.Component = Component; 37 | 38 | class Text extends Framework.Component { 39 | constructor(text) { 40 | super(); 41 | this.fragment = document.createElement("fragmet"); 42 | this.text = text; 43 | } 44 | 45 | render() { 46 | this.fragment.innerText = this.text; 47 | return this.fragment; 48 | } 49 | } 50 | 51 | class Element extends Framework.Component { 52 | constructor(name, description) { 53 | super(); 54 | 55 | this.el = document.createElement("div"); 56 | // this.render = () => { 57 | // const children = [ 58 | // new Text(this.name), 59 | // this.description && new Text(this.description[0].description) 60 | // ].filter(e => e); 61 | 62 | // return this.__renderChildren(this.el, children); 63 | // } 64 | 65 | // Observer(this, 'name', this.render); 66 | this.state = { 67 | name: name, 68 | description: description, 69 | } 70 | } 71 | 72 | setState(obj) { 73 | Object.assign(this.state, obj); 74 | this.render(); 75 | } 76 | 77 | render() { 78 | const {name, description} = this.state; 79 | const children = [ 80 | new Text(name), 81 | description && new Text(description[0].description) 82 | ].filter(e => e); 83 | 84 | return this.__renderChildren(this.el, children); 85 | } 86 | } 87 | 88 | let arr = [{description: 'X'}]; 89 | const app = new Element("joe", arr); 90 | Framework.attachElement("#app", app); 91 | 92 | let num = 1; 93 | 94 | setInterval(() => { 95 | arr[0].description += 1; 96 | app.setState({ 97 | // name: 'Joe' + num, 98 | description: arr 99 | }) 100 | 101 | num++; 102 | }, 500); 103 | 104 | -------------------------------------------------------------------------------- /observer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /papka/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 16 | 17 |
18 | 26 | 31 |
32 | 35 |
36 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /popcorn-react/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /popcorn-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "popcorn-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.18.0", 7 | "memoize-one": "^5.0.0", 8 | "react": "^16.7.0", 9 | "react-dom": "^16.7.0", 10 | "react-scripts": "2.1.3" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /popcorn-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinskJson/js--base/346aafdef2f27fe9e40495c922c449cc6e07c77d/popcorn-react/public/favicon.ico -------------------------------------------------------------------------------- /popcorn-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /popcorn-react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /popcorn-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './popcorn/App'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: http://bit.ly/CRA-PWA 11 | serviceWorker.unregister(); 12 | -------------------------------------------------------------------------------- /popcorn-react/src/popcorn/App.css: -------------------------------------------------------------------------------- 1 | /* button */ 2 | .button { 3 | /* action bg: */ 4 | background: #E53935; 5 | box-shadow: 0 8px 30px 0 rgba(229,57,53,0.31); 6 | border-radius: 6px; 7 | /* Action: */ 8 | font-family: Helvetica; 9 | font-size: 13px; 10 | color: #FFFFFF; 11 | letter-spacing: 0; 12 | text-align: center; 13 | height: 40px; 14 | width: 100px; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | /* list-item */ 20 | .list-item { 21 | /* card_base: */ 22 | background: #FFFFFF; 23 | box-shadow: 0 8px 30px 0 rgba(227,227,227,0.37); 24 | border-radius: 10px; 25 | padding: 15px 12px; 26 | display: flex; 27 | max-height: 112px; 28 | margin-top: 56px; 29 | } 30 | 31 | .list-item__block + .list-item__block { 32 | margin-left: 20px; 33 | } 34 | 35 | .list-item__img-wr { 36 | margin-top: -42px; 37 | } 38 | .list-item__img-wr, .list-item__img-wr img { 39 | /* Mask: */ 40 | background: #D8D8D8; 41 | border-radius: 10px; 42 | width: 108px; 43 | height: 123px; 44 | object-fit: cover; 45 | /* doctor strange 1: */ 46 | /* paddington-2-et00057858-30-05-2017-03-52-01: */ 47 | } 48 | 49 | .list-item__title { 50 | /* Star Wars: The Last: */ 51 | font-family: Helvetica; 52 | font-size: 16px; 53 | color: #000000; 54 | letter-spacing: 0; 55 | margin-bottom: 4px; 56 | } 57 | 58 | .list-item__sub-title { 59 | /* Action | Science fic: */ 60 | font-family: Helvetica; 61 | font-size: 12px; 62 | color: #A6A6A6; 63 | margin-bottom: 7px; 64 | letter-spacing: 0; 65 | } 66 | 67 | .list-item__rate { 68 | /* IMDB: */ 69 | font-family: Helvetica; 70 | font-size: 12px; 71 | color: #A6A6A6; 72 | letter-spacing: 0; 73 | } 74 | 75 | .list-item__rate b{ 76 | /* 7.5: */ 77 | font-family: Helvetica; 78 | font-size: 12px; 79 | color: #000000; 80 | letter-spacing: 0; 81 | } 82 | -------------------------------------------------------------------------------- /popcorn-react/src/popcorn/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | import memo from 'memoize-one'; 4 | import './App.css'; 5 | 6 | class ListItem extends Component { 7 | onPug = () => { 8 | const {item, onPug} = this.props; 9 | onPug && onPug(item); 10 | } 11 | 12 | render() { 13 | const {item} = this.props; 14 | const {img, title, subTitle, rate} = item; 15 | 16 | return
17 |
18 | 19 |
20 | 21 |
22 |
{title}
23 |
{subTitle}
24 |
25 | Rate 26 | {rate} 27 |
28 |
29 |
30 | } 31 | } 32 | 33 | class Item extends Component { 34 | onClick = () => { 35 | const {item, onClick} = this.props; 36 | onClick && onClick(item); 37 | } 38 | 39 | render() { 40 | const {item} = this.props; 41 | const {img, title, subTitle, rate} = item; 42 | 43 | return
44 |
45 | 46 |
47 | 48 |
49 |
{title}
50 |
{subTitle}
51 |
52 | Rate 53 | {rate} 54 |
55 |
56 |
57 | } 58 | } 59 | 60 | class LoadData extends Component { 61 | state = { 62 | isLoading: true, 63 | data: [], 64 | } 65 | 66 | componentDidMount() { 67 | const url = 'https://catalog.api.onliner.by/search/products?query=%D0%BF%D0%B5%D1%87%D0%B8'; 68 | 69 | axios.get(url) 70 | .then((response) => { 71 | const data = response.data; 72 | if (data) { 73 | this.setState({ 74 | isLoading: false, 75 | data: data.products.map(e => { 76 | return { 77 | key: e.key, 78 | img: e.images.header, 79 | title: e.full_name, 80 | subTitle: e.description, 81 | rate: e.reviews.rating 82 | } 83 | })}); 84 | } 85 | }) 86 | } 87 | 88 | 89 | render() { 90 | const { children } = this.props; 91 | return children(this.state); 92 | } 93 | } 94 | 95 | class App extends Component { 96 | state = { 97 | query: '', 98 | item: null, 99 | }; 100 | 101 | onInput = (e) => { 102 | this.setState({ 103 | qeury: e.target.value 104 | }); 105 | } 106 | 107 | onRef = (ref) => { 108 | console.log(ref); 109 | this.input = ref; 110 | } 111 | 112 | filterItems = memo((qeury, arr) => { 113 | return qeury ? arr.filter(e=> e.title && e.title.includes(qeury)) : arr; 114 | }); 115 | 116 | setCurrentItem = (item) => { 117 | console.log(item); 118 | 119 | this.setState({ 120 | item 121 | }) 122 | } 123 | 124 | removeItem = () => { 125 | this.setState({ 126 | item: null 127 | }) 128 | } 129 | 130 | render() { 131 | const { qeury, item } = this.state; 132 | 133 | if (item) { 134 | return 135 | } 136 | 137 | // if (data.length === 0) { 138 | // return
Loading...
; 139 | // } 140 | 141 | 142 | 143 | return
144 |
Hello
145 | 146 | 147 | 148 | {({isLoading, data})=> { 149 | if (isLoading) { 150 | return
Is Loading...
151 | } 152 | const filterdData = this.filterItems(qeury, data); 153 | return filterdData.map(item => ) 154 | }} 155 | 156 |
157 | } 158 | } 159 | 160 | export default App; 161 | -------------------------------------------------------------------------------- /popcorn-react/src/popcorn/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /popcorn-react/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /popcorn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 91 | 92 | 93 |
Hello
94 | 95 |
96 |
97 |
98 | 99 |
100 |
101 |
Star Wars: The Last Jedi (3D)
102 |
Action | Science fiction - 2h 33m
103 |
104 | IMDB: 105 | 7.5 106 |
107 |
108 |
109 |
110 |
111 | 112 |
113 |
114 |
Star Wars: The Last Jedi (3D)
115 |
Action | Science fiction - 2h 33m
116 |
117 | IMDB: 118 | 7.5 119 |
120 |
121 |
122 |
123 |
124 | 125 |
126 |
127 |
Star Wars: The Last Jedi (3D)
128 |
Action | Science fiction - 2h 33m
129 |
130 | IMDB: 131 | 7.5 132 |
133 |
134 |
135 |
136 |
137 | 138 |
139 |
140 |
Star Wars: The Last Jedi (3D)
141 |
Action | Science fiction - 2h 33m
142 |
143 | IMDB: 144 | 7.5 145 |
146 |
147 |
148 |
149 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /redux/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "enzyme": "^3.9.0", 7 | "enzyme-adapter-react-15": "^1.3.0", 8 | "enzyme-adapter-react-16": "^1.9.1", 9 | "react": "^16.8.2", 10 | "react-dom": "^16.8.2", 11 | "react-redux": "^6.0.1", 12 | "react-scripts": "2.1.5", 13 | "redux": "^4.0.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinskJson/js--base/346aafdef2f27fe9e40495c922c449cc6e07c77d/redux/public/favicon.ico -------------------------------------------------------------------------------- /redux/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /redux/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /redux/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import {store} from './store'; 4 | import * as actions from './store/math/actions'; 5 | import { Provider, connect } from 'react-redux'; 6 | 7 | class App extends Component { 8 | onClick = () => { 9 | const {onPlus} = this.props; 10 | onPlus && onPlus(5); 11 | } 12 | 13 | render() { 14 | const {math} = this.props; 15 | 16 | return ( 17 |
18 | {math && math.number} 19 |
20 | ); 21 | } 22 | } 23 | 24 | const AppWithState = connect( 25 | (state)=> ({ 26 | math: state.math, 27 | }), 28 | (dispatch) => ({ 29 | onPlus: (number) => dispatch(actions.mathPlus(number)), 30 | }))(App); 31 | 32 | class Wrapper extends Component { 33 | render() { 34 | return 35 | 36 | 37 | } 38 | } 39 | 40 | export default Wrapper; 41 | -------------------------------------------------------------------------------- /redux/src/__tests__/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {mount} from 'enzyme'; 4 | import App from '../App'; 5 | import {store} from '../store'; 6 | import * as actions from '../store/math/actions'; 7 | 8 | describe('store -> math reducer', () => { 9 | beforeEach(() => { 10 | store.dispatch(actions.mathSetNumber(0)); 11 | }); 12 | 13 | it('renders without crashing', () => { 14 | const div = document.createElement('div'); 15 | ReactDOM.render(, div); 16 | ReactDOM.unmountComponentAtNode(div); 17 | }); 18 | 19 | it('render component', () => { 20 | const wrapper = mount(); 21 | const onClick = () => 22 | expect(wrapper.contains(
{0}
)).toEqual(true); 23 | }); 24 | 25 | it('render store binded', () => { 26 | store.dispatch(actions.mathPlus(5)); 27 | const wrapper = mount(); 28 | const onClick = () => 29 | expect(wrapper.contains(
{5}
)).toEqual(true); 30 | }); 31 | 32 | it('render store change', () => { 33 | const wrapper = mount(); 34 | wrapper.find('.App').simulate('click'); 35 | const onClick = () => 36 | wrapper.find('.App').simulate('click'); 37 | wrapper.find('.App').simulate('click'); 38 | expect(wrapper.contains(
{15}
)).toEqual(true); 39 | }); 40 | }); -------------------------------------------------------------------------------- /redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /redux/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /redux/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /redux/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // https://github.com/airbnb/enzyme/issues/1265 2 | 3 | const Enzyme = require('enzyme'); 4 | const EnzymeAdapter = require('enzyme-adapter-react-16'); 5 | 6 | // Setup enzyme's react adapter 7 | Enzyme.configure({ adapter: new EnzymeAdapter() }); -------------------------------------------------------------------------------- /redux/src/store/__tests__/store.test.js: -------------------------------------------------------------------------------- 1 | import { store } from '../index'; 2 | import * as actions from '../math/actions'; 3 | 4 | describe('store -> math reducer', ()=> { 5 | it('store exists', () => { 6 | let state = store.getState(); 7 | 8 | expect(state).toBeDefined(); 9 | }); 10 | 11 | it('reducer math', () => { 12 | let state = store.getState(); 13 | 14 | expect(state.math).toBeDefined(); 15 | expect(state.math.number).toBeDefined(); 16 | expect(state.math.number).toBe(0); 17 | 18 | expect(actions).toBeDefined(); 19 | expect(actions.mathPlus).toBeDefined(); 20 | expect(actions.mathMinus).toBeDefined(); 21 | }); 22 | 23 | it('action mathPlus', () => { 24 | let state = store.getState(); 25 | 26 | const prevMath = state.math; 27 | 28 | store.dispatch(actions.mathPlus(5)); 29 | 30 | state = store.getState(); 31 | 32 | expect(state.math.number).toBe(5); 33 | expect(state.math).not.toBe(prevMath); 34 | }); 35 | 36 | it('action mathPlus', () => { 37 | let state = store.getState(); 38 | 39 | const prevMath = state.math; 40 | 41 | store.dispatch(actions.mathMinus(3)); 42 | 43 | state = store.getState(); 44 | 45 | expect(state.math.number).toBe(2); 46 | expect(state.math).not.toBe(prevMath); 47 | }); 48 | }); -------------------------------------------------------------------------------- /redux/src/store/index.js: -------------------------------------------------------------------------------- 1 | import {createStore, combineReducers} from 'redux'; 2 | import { mathReducer } from './math/reducer'; 3 | import { MINUS } from './math/constants'; 4 | 5 | const reducer = combineReducers({ 6 | math: mathReducer 7 | }); 8 | 9 | const store = createStore( 10 | reducer, 11 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 12 | ); 13 | 14 | export { 15 | store 16 | }; -------------------------------------------------------------------------------- /redux/src/store/math/actions.js: -------------------------------------------------------------------------------- 1 | import { MINUS, PLUS } from "./constants"; 2 | 3 | export function mathPlus(number) { 4 | return { 5 | type: PLUS, 6 | payload: number, 7 | } 8 | } 9 | 10 | export function mathMinus(number) { 11 | return { 12 | type: MINUS, 13 | payload: number, 14 | } 15 | } 16 | 17 | export function mathSetNumber(number) { 18 | return { 19 | type: 'SET', 20 | payload: number, 21 | } 22 | } -------------------------------------------------------------------------------- /redux/src/store/math/constants.js: -------------------------------------------------------------------------------- 1 | export const PLUS = 'PLUS'; 2 | export const MINUS = 'MINUS'; -------------------------------------------------------------------------------- /redux/src/store/math/reducer.js: -------------------------------------------------------------------------------- 1 | import { PLUS, MINUS } from "./constants"; 2 | 3 | const defaultState = { 4 | number: 0, 5 | }; 6 | 7 | export function mathReducer(state = defaultState, action) { 8 | if (action.type === PLUS) { 9 | return Object.assign({}, { 10 | number: state.number + action.payload 11 | }); 12 | } 13 | 14 | if (action.type === MINUS) { 15 | 16 | return { 17 | number: state.number - action.payload 18 | }; 19 | } 20 | 21 | if (action.type === 'SET') { 22 | return { 23 | number: action.payload 24 | }; 25 | } 26 | 27 | return state; 28 | }; -------------------------------------------------------------------------------- /redux/src/store/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "payload": "[]", 3 | "preloadedState": "{\"math\":{\"number\":55}}" 4 | } -------------------------------------------------------------------------------- /roll/bundle.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | const numeral = require('numeral'); 5 | 6 | var number = numeral(1000.3123); 7 | 8 | console.log(number.format('0,0.[00]')); 9 | 10 | }()); 11 | -------------------------------------------------------------------------------- /roll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /roll/main.js: -------------------------------------------------------------------------------- 1 | const numeral = require('numeral'); 2 | 3 | var number = numeral(1000.3123); 4 | 5 | console.log(number.format('0,0.[00]')); 6 | -------------------------------------------------------------------------------- /roll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "roll", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "build": "rollup main.js -f cjs -d dist", 8 | "start": "node main.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "numeral": "^2.0.6", 14 | "numeraljs": "^1.5.6", 15 | "rollup": "^1.1.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /router/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "router", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-loadable": "^5.5.0", 9 | "react-router": "^4.3.1", 10 | "react-router-dom": "^4.3.1", 11 | "react-scripts": "2.1.5" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /router/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinskJson/js--base/346aafdef2f27fe9e40495c922c449cc6e07c77d/router/public/favicon.ico -------------------------------------------------------------------------------- /router/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /router/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /router/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /router/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { HashRouter, Route, Switch, Redirect } from "react-router-dom"; 3 | import Loadable from 'react-loadable'; 4 | 5 | import './App.css'; 6 | import { Login } from './routers/Login'; 7 | import { Details } from './routers/Details'; 8 | import { ErrorComponent } from './routers/Error'; 9 | 10 | // import { HomeRouter } from './routers/Home/HomeRouter'; 11 | // const Comp = ({children}) => children; 12 | 13 | const HomeRouter = Loadable({ 14 | loader: () => import('./routers/Home/HomeRouter').then(e => new Promise(res => setTimeout(() => { 15 | res(e); 16 | }, 1000))).then(e => e.HomeRouter), 17 | loading: () =>
Loading...
, 18 | }); 19 | 20 | class App extends Component { 21 | render() { 22 | return 23 |
24 | Hello 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | } 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /router/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /router/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /router/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /router/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /router/src/routers/Details.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import {Link, withRouter} from 'react-router-dom'; 3 | 4 | export class SubDetails extends PureComponent { 5 | componentDidMount() { 6 | const { history, match } = this.props; 7 | if (match.params.userId !== '1') { 8 | history.replace('/login'); 9 | } 10 | } 11 | onBtnClick = () => { 12 | const { history } = this.props; 13 | 14 | history.push('/login'); 15 | } 16 | 17 | render() { 18 | return ( 19 |
20 | Details 21 | Home 1 link 22 | 25 |
26 | ) 27 | } 28 | } 29 | 30 | const SubDetailsWithRouter = withRouter(SubDetails); 31 | 32 | export class Details extends PureComponent { 33 | render() { 34 | return 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /router/src/routers/Error.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | 3 | export function ErrorComponent() { 4 | const [count, setCount] = useState(0); 5 | const [userName, setUserName] = useState(''); 6 | 7 | return ( 8 |
9 | Error {count} 10 | setUserName(e.target.value)} /> 11 | {userName} 12 | 13 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /router/src/routers/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export function Home() { 4 | return ( 5 |
6 | Home 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /router/src/routers/Home/Home1.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Home1() { 4 | return ( 5 |
6 | Home1; 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /router/src/routers/Home/HomeRouter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Switch, Redirect } from "react-router-dom"; 3 | import { Home } from './Home'; 4 | import Home1 from './Home1'; 5 | 6 | export function HomeRouter({match}) { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /router/src/routers/Login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export function Login() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /router/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 38 | 39 | 40 |
41 |
42 |
43 |
44 | 45 | 46 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 70 | 71 | 72 | 73 |
74 |
75 | 76 |
77 |
78 | 81 |
82 |
83 |
84 | 85 |
86 |
87 |
88 | 5 items 89 |
90 |
91 | 95 | 99 | 103 |
104 |
105 | 106 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /todo/mvc-sample.js: -------------------------------------------------------------------------------- 1 | const todoItemComponent = { 2 | view: function(name) { 3 | const fragment = document.createElement('fragmet'); 4 | fragment.innerHTML = 5 | ` 6 | 16 | `; 17 | 18 | // способ 1 на удаление 19 | // fragment 20 | // .querySelector('.todo-item__remove') 21 | // .addEventListener('click', (e) => { 22 | // fragment.remove(); 23 | // }); 24 | 25 | return fragment; 26 | }, 27 | 28 | add(str) { 29 | const list = document.querySelector('.todo-list'); 30 | list.appendChild(todoItem(str)); 31 | 32 | render(); 33 | }, 34 | 35 | remove(element) { 36 | element.remove(); 37 | 38 | render(); 39 | } 40 | } 41 | 42 | const todoComponent = { 43 | render: function () { 44 | const count = document.querySelector('.todo-footer__count'); 45 | const list = document.querySelector('.todo-list'); 46 | 47 | count.innerText = list.children.length; 48 | 49 | const filter = document.querySelector('[type="radio"]:checked'); 50 | 51 | let items = Array.from(document.querySelectorAll('.todo-item')); 52 | 53 | // не выполняем код ниже 54 | if (items.length === 0) return; 55 | 56 | items.forEach(el => { 57 | el.classList.remove('todo-item--hidden'); 58 | }); 59 | 60 | switch (filter.value) { 61 | case 'complite': { 62 | let items = Array.from(document.querySelectorAll('.todo-item__check:not(:checked)')); 63 | items.forEach(el => { 64 | el.closest('.todo-item').classList.add('todo-item--hidden'); 65 | }); 66 | break; 67 | } 68 | case 'active': { 69 | let items = Array.from(document.querySelectorAll('.todo-item__check:checked')); 70 | items.forEach(el => { 71 | el.closest('.todo-item').classList.add('todo-item--hidden'); 72 | }); 73 | break; 74 | } 75 | } 76 | }, 77 | create() { 78 | const list = document.querySelector('.todo-list'); 79 | list.addEventListener('click', (e) => { 80 | if (e.target.matches('.todo-item__remove')) { 81 | remove(e.target.closest('fragmet')); 82 | } 83 | 84 | render(); 85 | }); 86 | 87 | const filterActions = document.querySelector('.todo-footer__actions'); 88 | filterActions.addEventListener('click', (e) => { 89 | render(); 90 | }); 91 | 92 | const form = document.querySelector('.todo-form'); 93 | form.addEventListener('submit', (e) => { 94 | const tagForm = e.target; 95 | const tagInput = tagForm.checkName; 96 | 97 | add(tagInput.value); 98 | tagInput.value = ''; 99 | 100 | e.preventDefault(); 101 | }); 102 | 103 | render(); 104 | } 105 | } 106 | 107 | todoComponent.create(); 108 | --------------------------------------------------------------------------------