title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>A prototype</title> <link href='css/main.css' rel='stylesheet'> <script src='js/main.js' defer></script> </head> <body> <div class="box"> <img src="folder/1.jpg" alt="" /> </div> <div class="box"> <img src="folder/1.jpg" alt="" /> </div> <div class="box"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Red_Panda_%2824986761703%29.jpg/1200px-Red_Panda_%2824986761703%29.jpg" alt="" /> </div> <div class="box"> <img src="folder/1.jpg" alt="" /> </div> </body> </html>
*{box-sizing: border-box;} body{ margin:0; display:flex; flex-wrap:wrap; overflow:hidden; } .box{ width:50vw; height:50vh; background:purple; border:1px solid red; } .box img{ object-fit:cover; width:100%; height:100%; }
d = document b = d.body let boxes = d.querySelectorAll(".box") boxes.forEach(box => { box.onclick = function(){ let rand = Math.round(Math.random() * 39) let image = this.querySelector('img') image.setAttribute('src',"folder/"+rand+".jpg") } });
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code