AJAX (HW-04)

Написать код приложения, интерфейс которого состоит из двух input и кнопки. В input можно ввести любое число.

• Заголовок первого input — «номер страницы».
• Заголовок второго input — «лимит».
• Заголовок кнопки — «запрос». Веб-навигация.

При клике на кнопку происходит следующее:

1. Если число в первом input не попадает в диапазон от 1 до 10 или не является числом — выводится ниже текст «Номер страницы вне диапазона от 1 до 10»;
2. Если число во втором input не попадает в диапазон от 1 до 10 или не является числом — выводится ниже текст «Лимит вне диапазона от 1 до 10»;
3. Если и первый, и второй input не в диапазонах или не являются числами — выводится ниже текст «Номер страницы и лимит вне диапазона от 1 до 10»;
4. Если числа попадают в диапазон от 1 до 10 — сделать запрос по URL https://picsum.photos/v2/list?page=1&limit=10, где GET-параметр page — это число из первого input, а GET-параметр limit — это введённое число второго input.

*** Пример: если пользователь ввёл 5 и 7, то запрос будет вида https://picsum.photos/v2/list?page=5&limit=7. ***

В итоге:

• После получения данных вывести список картинок на экран;
• Если пользователь перезагрузил страницу, то ему должны показываться картинки из последнего успешно выполненного запроса (использовать localStorage).

Комментарии к решению:

Валидация входных данных:

• Добавлена проверка обоих полей на корректность одновременно
• Отдельная проверка для случая, когда оба поля неверны
• Последовательная проверка каждого поля

Обработка ошибок:

• Централизованное управление сообщениями об ошибках
• Очистка предыдущего контента перед новой загрузкой
• Обработка ошибок при загрузке изображений

Работа с локальным хранилищем:

• Сохранение последних параметров запроса
• Автоматическое восстановление состояния при перезагрузке
• Оптимизация хранения данных

Особенности реализации:

• Асинхронная загрузка данных
• Использование современного синтаксиса (стрелочные функции)
• Обработка ошибок через try-catch
• Использование DOM-манипуляций

Функции и логика:

makeRequest():

Получение значений из input => Валидация входных данных => Отправка запроса на сервер => Обработка ответа => Сохранение данных => Отображение результатов

displayImages():

• Создание и добавление изображений на страницу
• Применение стилей к каждому изображению

isValidNumber():

• Проверка на числовой тип
• Проверка диапазона значений
• Возврат логического результата