1

Имеется задачка: Напишите код приложения, интерфейс которого представляет собой 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>

1 ответ 1

0

const btn = document.querySelector('.j-btn');

btn.addEventListener('click', () => {
  const value1 = +document.getElementById('num1').value;
  const value2 = +document.getElementById('num2').value;

  let s = document.getElementById('j-result');
  s.textContent = '';
  if (!(value1 >= 100 && value1 <= 300 && value2 >= 100 && value2 <= 300)) {
    s.textContent = 'одно из чисел вне диапазона от 100 до 300';
    return;
  }
  // Делаем запрос за данными
  fetch(`https://picsum.photos/${value1}/${value2}`)
    .then((response) => {
      document.getElementById('result').src = response.url;
    });

});
.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" value=100> </p>
  <p> <label>Высота</label> <br />
    <input id="num2" class="text" size="20" value=100> </p>
  <p> <button class="btn j-btn">Запрашиваемые данные</button> </p>
</fieldset>
<div id="j-result"></div>
<img id="result"/>

1
  • Спасибо. А как сделать вывод ошибки при неправильном вводе меньше 100 и больше 300? 6 дек 2020 в 15:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.