Создайте страницу, содержащую элемент canvas. С этим элементом должны быть связаны функция «рисования» квадратов, работающая следующим образом. Если нажать клавишу мыши на элементе, затем продвинуть мышь в сторону и отпустить, должен быть нарисован квадрат с центром в первой точке (точке нажатия клавиши мыши) и углом во второй точке (точке, где клавиша мыши была отпущена). Предполагается, что первая и вторая точки не находятся на одной горизонтали или вертикали.
![](https://private-user-images.githubusercontent.com/83861300/291096307-28012cfe-cfc4-4183-a614-8c39b244ce58.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDI3OTYsIm5iZiI6MTcyNjE0MjQ5NiwicGF0aCI6Ii84Mzg2MTMwMC8yOTEwOTYzMDctMjgwMTJjZmUtY2ZjNC00MTgzLWE2MTQtOGMzOWIyNDRjZTU4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDEyMDEzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThiODc2ZjUwMTU1Y2ZjYzBmM2Y5MzFmZTNkZWQwNDJkY2IxMTZjOWI0YWUwY2MwNjkyYTQ0MzBmOGZhNzZjNzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LbXbByVmgG8tTAW4aJs975RHmdS4R6nZeqLBMnFZfF8)
Разработать веб-приложение, позволяющее контролировать процесс выдачи книг в библиотеке. Работа пользователя начинается со страницы, на которой он может искать нужные ему книги в библиотечном фонде. Каждая книга в нашей библиотеке представлена следующими реквизитами:
- Код ISBN
- Список авторов (автор представляется фамилией и инициалами)
- Код издания
- Издательство
- Наименование книги
Данные о библиотечном фонде должны загружаться в систему из файлов формата JSON (формат разработать самостоятельно). Одной и той же книги в библиотеке может быть несколько экземпляров. Пользователь должен иметь возможность осуществить поиск книги по любому из этих реквизитов. В случае, если поиск был успешен, система выводит список всех книг, удовлетворяющих критерию поиска с указанием текущего количества экземпляров, которое ест в библиотеке. Если все экземпляры данной книги на руках, будет выведена строка с указанием 0 в качестве количества доступных экземпляров. Пользователь выбирает нужную ему книгу (считаем, что пользователь не может взять более одной книги за раз) и получает ее (количество доступных экземпляров при этом уменьшается). При этом в системе фиксируется дата взятия книги пользователем и дата, когда пользователь должен книгу вернуть (в нашей библиотеке мы выдаем книги максимум на 20 календарных дней). В момент, когда пользователь возвращает книгу, он заходит на соответствующую страницу приложения и выбирает среди списка не сданных книг ту книгу, которую он сдает. В этот момент количество доступных экземпляров увеличивается. Дополнительно: добавить возможность авторизации пользователей и наличие «личного кабинета», в котором читатель видит свои книги, которые находятся у него на руках, и при сдаче выбирает их. Кроме того, на первой странице системы выводится «антирейтинг» читателей – тех, кто чаще всего не вовремя сдает книги.
![](https://private-user-images.githubusercontent.com/83861300/291095964-2962fb44-0023-46ec-b302-fa426118cc90.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDI3OTYsIm5iZiI6MTcyNjE0MjQ5NiwicGF0aCI6Ii84Mzg2MTMwMC8yOTEwOTU5NjQtMjk2MmZiNDQtMDAyMy00NmVjLWIzMDItZmE0MjYxMThjYzkwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDEyMDEzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE2NTQ2OWU4NjdiODY1ODU1ZDY3OWZlMWJkMmVjZjc5YzU5NTdmNTQyNWQwZGY0MTQ1NGFkNWRhYjM1YWZhYTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kIEz_OJNux5sfb2Up9Z6sEwEby25Fu981rfavBKCFTk)
![](https://private-user-images.githubusercontent.com/83861300/291095996-5ed003f1-bfaa-4b42-ae0e-ea86fdf6fdef.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDI3OTYsIm5iZiI6MTcyNjE0MjQ5NiwicGF0aCI6Ii84Mzg2MTMwMC8yOTEwOTU5OTYtNWVkMDAzZjEtYmZhYS00YjQyLWFlMGUtZWE4NmZkZjZmZGVmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDEyMDEzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY4OGM4ZTU3MTViMTU4YzBmMDQwMTAwYWQ5OTY1Mzk3NTIzNDY3ZjhlYmI2YWExZmZjMDhjZTg0ZWE1ZTFlZjImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.axfSU8JprOGDU-VkdZmnZUPb-sAJWuMYq8kyD1oGv6g)
![](https://private-user-images.githubusercontent.com/83861300/291096023-b2d2ff64-dc7a-4f7d-9c25-56c009a598a9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDI3OTYsIm5iZiI6MTcyNjE0MjQ5NiwicGF0aCI6Ii84Mzg2MTMwMC8yOTEwOTYwMjMtYjJkMmZmNjQtZGM3YS00ZjdkLTljMjUtNTZjMDA5YTU5OGE5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDEyMDEzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThiN2Y4MTAxZDkzYzlmNzY0MTU1YTJiNzRmYjA2NTYwMjViMGRkZmRjMDA2OTJhODljZGY5NmNkMTBhMGRhYzkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ezaIYVnRLxm1cMRmF4jNkTbUV3LMf5ulYM0iLETX310)