Имеется задачка: Напишите код приложения, интерфейс которого представляет собой 2 input и кнопку. В input можно ввести любое число. При клике на кнопку происходит следующее:
Если оба числа не попадают в диапазон от 100 до 300 или введено не число — выводить ниже текст «одно из чисел вне диапазона от 100 до 300»; Если числа попадают в диапазон от 100 до 300 — сделать запрос c помощью fetch по URL https://picsum.photos/200/300, где первое число — ширина картинки, второе — высота. Пример: если пользователь ввёл 150 и 200, то запрос будет вида https://picsum.photos/150/200. После получения данных вывести ниже картинку на экран.
Подсказка: получение данных из input.
const value = document.querySelector('input').value;
Как мне получить результат вывод картинки на html страницу заданного размера, который введён в запрос? Сильно не пеняйте. Я только учусь и могу делать ошибки разного характера. Поэтому и прошу помощи у профессионалов. Вот мой код:
const btn = document.querySelector('.j-btn');
btn.addEventListener('click', () => {
const value1 = document.getElementById('num1').value;
const value2 = document.getElementById('num2').value;
// Делаем запрос за данными
fetch(`https://picsum.photos/${value1}/${value2}`)
.then((response) => {
// Объект ответа на запрос
console.log('response', response);
// Превращаем объект в JSON. Мы не можем его сразу прочитать,
// надо отдать в следующий then
const result = response.json();
console.log('result', result);
return result;
})
.then((data) => {
// Объект результата в формате JSON
console.log(data);
})
.catch(() => {
console.log('error')
});
// console.log(value1, value2);
let s = document.getElementById('j-result');
if ((Number(value1) >= 100 && Number(value1) <= 300) && (Number(value2) >= 100 && Number(value2) <= 300)) {
useRequest(`https://picsum.photos/${value1}/${value2}`);
} else {
// s.innerHTML = '«одно из чисел вне диапазона от 100 до 300»';
}
});
.btn {
padding: 0;
background-color: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
box-shadow: none;
cursor: pointer;
margin: 5px 10px;
padding: 10px 15px;
border-radius: 1px;
font-size: 12px;
line-height: 15px;
text-transform: uppercase;
color: white;
background: #315efb;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, .3);
transform: scale(1.05);
}
<fieldset>
<legend>Размер картинки</legend>
<p> <label>Ширина</label> <br />
<input id="num1" class="text" size="20" /> </p>
<p> <label>Высота</label> <br />
<input id="num2" class="text" size="20"> </p>
<p> <button class="btn j-btn">Запрашиваемые данные</button> </p>
</fieldset>
<div class="j-result"></div>
<div class="j-result"></div>