const choose = options => { const weight_sum = options.reduce((a, b) => a + b.weight, 0); let choice = Math.floor(Math.random() * weight_sum); for (const option of options) { if (choice < option.weight) { return option; } else { choice -= option.weight; } } } const images = [ { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/1/1f/Hiking_Trail_at_Mew_Lake_Campground%2C_Algonquin_Park_%2829950322654%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Hiking_Trail_at_Mew_Lake_Campground,_Algonquin_Park_(29950322654).jpg#Licensing', }, { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Butterfly_Garden_NBG_3_LR.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Butterfly_Garden_NBG_3_LR.jpg#Licensing', }, { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Wandelen_over_de_Planken_Wambuis_vanuit_Mossel_069_A.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Wandelen_over_de_Planken_Wambuis_vanuit_Mossel_069_A.jpg#Licensing', }, { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/f/ff/Ilsenburg%2C_Ilsetal_--_2017_--_0163.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Ilsenburg,_Ilsetal_--_2017_--_0163.jpg#Licensing', }, { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/6/66/Wood_anemones_and_tree_shadows_in_Gullmarsskogen_4.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Wood_anemones_and_tree_shadows_in_Gullmarsskogen_4.jpg#Licensing', }, { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/e/e8/Window_into_the_overgrown_Aulne_Abbey_%28DSC_0119%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Window_into_the_overgrown_Aulne_Abbey_(DSC_0119).jpg#Licensing', }, { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/0/09/20170815_Zalipie_5497_DxO.jpg', credit: 'https://commons.wikimedia.org/wiki/File:20170815_Zalipie_5497_DxO.jpg#Licensing', }, { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Maria_Saal_Freilichtmuseum_Steinerkasten_Ost-Ansicht_13092016_4233.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Maria_Saal_Freilichtmuseum_Steinerkasten_Ost-Ansicht_13092016_4233.jpg#Licensing', }, { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/3/34/M%C3%BCnster%2C_Boniburger_Wald_--_2019_--_4246.jpg', credit: 'https://commons.wikimedia.org/wiki/File:M%C3%BCnster,_Boniburger_Wald_--_2019_--_4246.jpg#Licensing', }, { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/a/a1/Schnepfau_Wendelinkapelle_01.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Schnepfau_Wendelinkapelle_01.jpg#Licensing', }, { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Caba%C3%B1a_de_la_Isla_del_Pato%2C_Parque_San_Jaime%2C_Londres%2C_Inglaterra%2C_2014-08-07%2C_DD_012.JPG', credit: 'https://commons.wikimedia.org/wiki/File:Caba%C3%B1a_de_la_Isla_del_Pato,_Parque_San_Jaime,_Londres,_Inglaterra,_2014-08-07,_DD_012.JPG#Licensing', }, { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Forest_road_Slavne_2016_G1.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Forest_road_Slavne_2016_G1.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/c/c8/Doorgang_in_muur._Locatie%2C_Chinese_tuin_Het_Verborgen_Rijk_van_Ming._Locatie._Hortus_Haren_01.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Doorgang_in_muur._Locatie,_Chinese_tuin_Het_Verborgen_Rijk_van_Ming._Locatie._Hortus_Haren_01.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/8/81/Japanese_Tea_Garden_San_Francisco_December_2016_001.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Japanese_Tea_Garden_San_Francisco_December_2016_001.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/6/61/Wooden_gate_in_Okochi_Sanso_Garden%2C_Kyoto%2C_Japan_%282%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Wooden_gate_in_Okochi_Sanso_Garden,_Kyoto,_Japan_(2).jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Nationaal_Park_Weerribben-Wieden._Bemoste_boomstronken.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Nationaal_Park_Weerribben-Wieden._Bemoste_boomstronken.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/e/e9/Ritsurin_Garden%2C_Kagawa_Prefecture%3B_November_2019_%2804%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Ritsurin_Garden,_Kagawa_Prefecture;_November_2019_(04).jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/0/01/14-09-02-oslo-RalfR-280.jpg', credit: 'https://commons.wikimedia.org/wiki/File:14-09-02-oslo-RalfR-280.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/6/61/Hut_in_Utsjoki_parish_village_in_Utsjoki%2C_Lapland%2C_Finland%2C_2021_September_-_3.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Hut_in_Utsjoki_parish_village_in_Utsjoki,_Lapland,_Finland,_2021_September_-_3.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Hut_in_Utsjoki_parish_village_in_Utsjoki%2C_Lapland%2C_Finland%2C_2021_September_-_2.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Hut_in_Utsjoki_parish_village_in_Utsjoki,_Lapland,_Finland,_2021_September_-_2.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/1/18/Langenlois_Weinweg_Weingartenh%C3%BCtte-8283.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Langenlois_Weinweg_Weingartenh%C3%BCtte-8283.jpg#Licensing', }, { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/9/93/Steuerberg_Hinterwachsenberg_3_Brentlerstuben_07042015_1537.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Steuerberg_Hinterwachsenberg_3_Brentlerstuben_07042015_1537.jpg#Licensing', }, { weight: 1, src: 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Sir_Walter_Buffalo_Grass.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Sir_Walter_Buffalo_Grass.jpg#Licensing', }, ]; const image_choice = choose(images); const html = document.querySelector('html'); const body = document.querySelector('body'); let img = new Image(); img.src = image_choice.src; const credit = document.createElement('a'); credit.textContent = 'Image credit'; credit.className = 'image-credit'; credit.target = '_blank'; credit.href = image_choice.credit; img.addEventListener('load', () => { html.style.backgroundImage = `url(${img.src})`; html.classList.add('loaded'); document.querySelector('header').appendChild(credit); document.querySelector('main').appendChild(credit.cloneNode(true)); });