102 lines
7.1 KiB
Markdown
102 lines
7.1 KiB
Markdown
<p align="center">
|
||
<img src="Resources/gitPreviews.png" width="100%" alt="Banner">
|
||
</p>
|
||
<p align="center">
|
||
<a href="http://freelancerothe.ucoz.ru/"><img src="https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=F70000&background=FF000000&width=435&lines=%D0%98%D0%BD%D0%BE%D0%B3%D0%B4%D0%B0+%D1%81%D0%BC%D1%8B%D1%81%D0%BB+%D0%B8%D0%B3%D1%80%D1%8B+%D0%B2+%D1%87%D0%B8%D1%82%D0%B5%D1%80%D1%81%D1%82%D0%B2%D0%B5+%3A)" alt="Typing SVG" /></a>
|
||
</p>
|
||
<p align="center">
|
||
<a href="https://sites.google.com/view/dvurechensky" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Dvurechensky-N-blue"></a>
|
||
<img src="https://img.shields.io/badge/Csharp-VS2022-blue?logo=csharp&logoColor=FFFF00">
|
||
</p>
|
||
<!-- Social icons section -->
|
||
<p align="center">
|
||
<a href="https://www.youtube.com/@DvurechenskyMedia"><img width="32px" alt="Youtube" title="Youtube" src="https://i.imgur.com/qiXu7b2.png"/></a>
|
||
     
|
||
<a href="https://discord.gg/d4TAqs8j" alt="Discord" title="Dvurechensky Pro"><img width="32px" src="https://i.imgur.com/OViZO8J.png"/></a>
|
||
     
|
||
<a href="https://sites.google.com/view/dvurechensky"><img width="32px" alt="Free Stuff" title="Free gifts for you" src="https://i.imgur.com/0uVwkoZ.png"/></a>
|
||
</p>
|
||
|
||
# <g-emoji class="g-emoji" alias="crystal_ball" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f52e.png">🔮</g-emoji> Тестовое задание компании Стратегия Рийска (Владикавказ)
|
||
**🎯SCAM вакансия**
|
||
|
||
> https://hh.ru/vacancy/83142848?from=share_ios
|
||
|
||
- 🚀 Требования системы для запуска:
|
||
1. Visual Studio 2022
|
||
|
||
- 🚀 Требования системы для разработки:
|
||
> для функционирования встроенного Grunt в проекте
|
||
1. Выгрузить папку node_modules из проекта
|
||
2. В PowerShell в корне проекта ввести команду
|
||
```bash
|
||
cmd /c mklink /D node_modules node_modules
|
||
```
|
||
3. Перезапустить проект
|
||
|
||
## ✨Требования задания
|
||
|
||
> The text in the "Company Name" column should be a link that opens "Details" for its
|
||
object
|
||
1. Текст в столбце «Название компании» должен быть ссылкой, которая открывает «Подробности» компании
|
||
> Use EntityFramework, store data in memory (add a code that creates initial data at
|
||
application startup)
|
||
2. Используйте EntityFramework, храните данные в памяти (добавьте код, создающий исходные данные в
|
||
запуск приложения)
|
||
> Set a fixed width for groups in "Details"
|
||
3. Установите фиксированную ширину для групп в разделе «Подробности».
|
||
> Use CSS Flex to align groups in "Details", there should be 1 column of groups if browser
|
||
window is narrow
|
||
4. Используйте CSS Flex для выравнивания групп в разделе "Подробности", должен быть 1 столбец групп, если окно браузера узкое
|
||
> Use CSS Grid to align items in groups in "Details"
|
||
5. Используйте CSS Grid для выравнивания элементов в группах в разделе «Подробности».
|
||
> Avoid duplication of CSS and HTML markup code that generates "Details" in C#/markup
|
||
code (each group should have the same layout for the 'caption', 'toolbar' and 'content'
|
||
items)
|
||
6. Избегайте дублирования кода разметки CSS и HTML, который генерирует «Подробности» в C#/разметке.
|
||
код (каждая группа должна иметь одинаковый макет для объектов «заголовка», «панели инструментов» и «контента»)
|
||
> Implement behavior for 'Refresh' button: reload data from the server and recreate DOM
|
||
in browser
|
||
7. Реализовать поведение кнопки «Обновить»: перезагрузить данные с сервера и заново создать DOM.
|
||
в браузере
|
||
> Adjust the "Employees" group to be nearly twice wider than other groups, keep vertical
|
||
groups alignment
|
||
8. Отрегулируйте группу "Сотрудники", чтобы она была почти в два раза шире, чем другие группы, сохраняя вертикальность
|
||
выравнивание групп
|
||
> Don't render grids on the server side. Instead, render an empty grid and perform a new
|
||
'fetch' request when a page is loaded and build grid rows in javascript code, in browser.
|
||
Implement necessary server side API to load data for grids
|
||
7. Не визуализируйте сетки на стороне сервера. Вместо этого визуализируйте пустую сетку и выполните новую
|
||
запрос «выборки» при загрузке страницы и построение строк сетки в коде javascript в браузере.
|
||
Реализовать необходимый API на стороне сервера для загрузки данных для сеток.
|
||
|
||
## 🤖 Результат выполнения
|
||
|
||
<p align="center">
|
||
<h1 align="center">👨🏽💻 Версия на ПК</h1>
|
||
<h5 align="center">💫 Main 💫</h5>
|
||
<img src="Info/1.png" width="100%">
|
||
<h5 align="center">💫 Details 💫</h5>
|
||
<img src="Info/2.png" width="100%">
|
||
<h1 align="center">👨🏽💻 Для заполнения групп создано REST API</h1>
|
||
<img src="Info/3.png" width="100%">
|
||
<h1 align="center">👨🏽💻 Пример заполненной версии 💫Details💫</h1>
|
||
<img src="Info/4.png" width="100%">
|
||
<h1 align="center">👨🏽💻 Пример мобильной версии 💫Details💫</h1>
|
||
<h5 align="center">💫 870px 💫</h5>
|
||
<p align="center">
|
||
<img src="Info/5.png" width="65%">
|
||
</p>
|
||
<h5 align="center">💫 500px 💫</h5>
|
||
<p align="center">
|
||
<img src="Info/6.png" width="35%">
|
||
</p>
|
||
</p>
|
||
|
||
## 👾 Важно отметить
|
||
|
||
- В задаче не была описана логика работы кнопок редактирования и поведение кнопки добавления
|
||
- В задаче не затрагивались вопросы ограничения по стеку технологий применяемых для ускорения разработки
|
||
- В задаче нету пунктов о сложности или простоте исполнения, конкретного формата выполнения работы не указано
|
||
- Бонусом в задаче реализована поддержка TypeScript и автоматическая генерация JavaScript и CSS сразу в минимизированный формат
|
||
- Бонусом в задаче сделано API способное принимать пачки данных на обработку |