<!DOCTYPE html> taro.na

<style>

    html, body {
        margin: 0;
        box-sizing: border-box;
    }

    body {
        margin: 1rem;
    }

    #spread {
        display: flex;
        flex-direction: row;

        margin: 1rem 0;
        gap: 1rem;
    }

    #spread img {
        max-height: 92vh;
    }

</style>

<form action="" method="get">
    <select name="set" id="set">
        <option value="etteilla-iii-grande-jeu-de-l-oracle-des-dames-circa-1865">Etteilla III Grande Jeu de l’Oracle des Dames</option>
        <option value="raider-white">Raider White</option>
        <option value="suzanne-treister-s-hexen-2-0">Suzanne Treister's Hexen 2.0</option>
        <option value="suzanne-treister-s-hexen-5-0">Suzanne Treister's Hexen 5.0</option>
        <option value="the-golden-dawn-8_ujyzt6yd4">The Golden Dawn</option>
    </select>
    <input type="number" min="1" max="9" value="1" name="card_count" id="card_count">
    <button type="button" id="draw_btn">Draw</button>
</form>

<div id="spread"></div>

<script>

    let set, card_count;

    document.addEventListener('DOMContentLoaded', () => {

        set         = document.querySelector('#set')
        card_count  = document.querySelector('#card_count')

        document.querySelector('#draw_btn').addEventListener('click', draw_cards)
    })

    function draw_cards() {

        let selected_set    = set.value,
            selected_count  = card_count.value,
            cards           = [];

        let url = `https://api.are.na/v2/channels/${selected_set}/contents?per=78`

        fetch(url)
            .then(  response => response.json())
            .then(  cards    => spread_cards(cards, selected_count))
            .catch( error    => console.log(error))

    }

    function spread_cards(cards, count) {

        console.log(cards)

        let drawn_cards = []

        for (let index = 0; index < count; index++) {
            drawn_cards.push(
                cards.contents[Math.floor(Math.random() * cards.contents.length)]
            )
        }

        spread.innerHTML = '';

        drawn_cards.forEach(c => {
            let card_holder    = document.createElement('a') 
                card           = document.createElement('img');

            card_holder.href   = `https://www.are.na/block/${c.id}`
            card_holder.target = '_blank'
            card.src           = c.image.display.url

            card_holder.appendChild(card)
            spread.appendChild(card_holder)
        })
    }

</script>