Imgur Random

Random Imgur images

by MegaScience

HTML

<div id="header"><h1>Random Imgur Wall (old id5)</h1><span id="imgurProgressText">Waiting to start...</span> [<span id="currentImgurID"></span>]
<progress id='imgurProgressBar' value='0' max="50"></progress></div>
<div id="galleryParent"></div>

CSS

body {
  color: white;
  font-family: sans-serif;
  background-color: black;
}

h1 {
  margin-bottom: 20px;
}

span#imgurProgressText[data-current-number]::after {
  content: " (" attr(data-current-number) "/" attr(data-max-number) ")";
}

#galleryParent {
  --image-gap: 3px;
  --min-dimensions: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-dimensions), 1fr));
  gap: var(--image-gap);
  padding: var(--image-gap);
  overflow-y: auto;
  a {
    display: block;
    aspect-ratio: 1 / 1;
    min-width: var(--min-dimensions);
    min-height: var(--min-dimensions);
    overflow: hidden;
    text-decoration: none;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }
}

JavaScript

class imgurElementHandler {
    createGalleryEntry(imgurURL) {
        const a = document.createElement('a')
        a.setAttribute('target', '_blank')
        a.href = imgurURL

        const i = document.createElement('img')
        i.src = imgurURL

        a.appendChild(i)
        return a
    }

    appendGalleryImages(arr) {
        this.galleryParent.append(...arr)
    }

    setProgressMaxNumber(val) {
        this.progressText.dataset.maxNumber = val
    }

    setProgressCurrentNumber(val) {
        this.progressText.dataset.currentNumber = val
    }

    setProgressText(txt) {
        this.progressText.innerText = txt
    }

    setProgressBar(val) {
        this.progressBar.value = val
    }

    setCurrentID(currentID) {
        this.currentID.innerText = currentID
    }

    constructor() {
        this.progressText = document.getElementById('imgurProgressText')
        this.progressBar = document.getElementById('imgurProgressBar')
        this.currentID = document.getElementById('currentImgurID')
        this.galleryParent = document.getElementById('galleryParent')
    }
}

class imgurController {
    static isInIFrame = window.self !== window.top && (window.innerWidth <= 516 && window.innerHeight <= 288)

    static elementHandler = new imgurElementHandler()

    static randomImgurID = (range => {
        const length = range.length
        return len => [...crypto.getRandomValues(new Uint8Array(len))].map(n => range[n % length]).join('')
    })('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')

    static async getImgurImage() {
        const imgurID = this.randomImgurID(5)
        const imgurURL = `https://i.imgur.com/${imgurID}.jpg`
        this.elementHandler.setCurrentID(imgurID)
        try {
            const res = await fetch(imgurURL, { method: 'HEAD' })
            return res.ok && res.redirected === false && !res.url.includes('/removed.png') ? imgurURL : null
...