├── .gitignore ├── README.md ├── index.html ├── index.js └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Coding Challenge #1 2 | 3 | Шаблон задания на реализацию нативного JS плагина 4 | 5 | ## Условия решения задачи: 6 | 1. Должен быть точно такой же функционал с такими же анимациями 7 | 2. Данные должны быть получены асинхронно по https://vladilen-dev.firebaseio.com/technologies.json 8 | 3. Нельзя использовать JavaScript библиотеки и CSS UI библиотеки, только нативные инструменты 9 | 4. Шаблон в HTML должен быть пустой div, остальное должно генерироваться с помощью JavaScript 10 | 11 | ## Результаты: 12 | Ссылку на github репозиторий или zip архив кидайте мне в ВК: https://vk.com/vladilen.minin \ 13 | Если задача будет реализована до 17 мая 2019 года (не включительно), то на каждое решение вы получите отзыв с комментарием о вашей работе, а победитель получит 1 час моих консультаций -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Select 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |

Действия

15 | 35 | 36 |

37 |
38 | 39 |
40 | 41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | class Select {} 2 | 3 | const select = new Select({ 4 | selector: '#select', 5 | label: 'Выберите технологию', 6 | url: 'https://vladilen-dev.firebaseio.com/technologies.json', 7 | onSelect(selectedItem) {} 8 | }) -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Roboto', sans-serif; 6 | } 7 | 8 | .wrap { 9 | height: 100vh; 10 | display: flex; 11 | justify-content: space-around; 12 | padding-top: 5rem; 13 | margin: 0 auto; 14 | max-width: 800px; 15 | } 16 | 17 | .settings { 18 | border-right: 1px dashed #ccc; 19 | width: 350px; 20 | } 21 | 22 | .settings h2 { 23 | margin-bottom: 1rem; 24 | } 25 | 26 | .settings ul { 27 | list-style: none; 28 | margin: 0; 29 | padding: 0; 30 | margin-bottom: 1rem; 31 | } --------------------------------------------------------------------------------