JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<h1>
Image Getter
</h1>

<p>
Instructions:
</p>

<ol>
  <li>Place the image URLs below.</li>
  <li>(optional) add a suffix</li>
  <li>Open Devtools > Network</li>
  <li>Clean the network session</li>
  <li>Hit the button</li>
  <li>Measure</li>
</ol>
<div>
<textarea id="images" placeholder="Place all image URLs here, one per line"></textarea>

</div>

<input type="text" placeholder="URL Suffix" id="suffix" />
<button id="download">
Download Images
</button>

<h2>
Result
</h2>

<div id="result">

</div>

CSS

#result {
  background-color: black;
}

#result img {
  max-width: 100px;
  height: auto;
  border: 1px solid white;
}

textarea {
  width: 100%;
  min-height: 200px;
}

JavaScript

const imageField = document.getElementById('images');
const result = document.getElementById('result');
const suffix = document.getElementById('suffix');
const download = document.getElementById('download');

const fetchImage = (url) => {
  const img = new Image();
  img.src = url;
  img.setAttribute("title", "url");
  result.appendChild(img);
}


const fetchImages = (images) => {
  const suffixText = suffix.value || '';
  images.forEach((url) => {
    fetchImage(url + suffixText);
  });
};

const getAllImageUrls = () => {
  return imageField.value.split("\n").filter(Boolean);
}

download.addEventListener('click', () => {
	const images = getAllImageUrls();
  fetchImages(images);
  result.scrollIntoView();
});