Real fake doors!

index.html

<h1>Real Fake Doors!</h1>
<h2>Click to open</h2>
<svg viewBox="0 0 400 100"></svg>
<button>More doors...</button>

real-fake-doors.markdown

Real fake doors!

A Pen by stuwilmur on CodePen.

License.

script.js

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

function f() {
  var svg = d3.select("svg");

  d3.selectAll("svg > *").remove();
  
  let doors = ["https://images.unsplash.com/photo-1503898362-59e068e7f9d8?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","https://images.unsplash.com/photo-1510266988780-b681a96dca2a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","https://images.unsplash.com/photo-1617307074423-6344f18d357f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
              "https://plus.unsplash.com/premium_photo-1664264356930-112191283752?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1676574222520-960226cd4100?q=80&w=1928&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1615931547680-fe81bd75b713?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1656970563771-04c466ef2ede?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1546728682-0b16cf85b8de?q=80&w=2131&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1500914724580-7c312c0d0f59?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1517086822157-2b0358e7684a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1513399896330-5673699bf2d8?q=80&w=1958&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",];

  for (let i = 0; i < 4; i++) {
    const randomDoor = doors[Math.floor(Math.random() * doors.length)];
    var myimage = svg
      .append("image")
      .attr(
        "xlink:href",
        randomDoor
      )
      .attr("width", 50)
      .attr("height",100)
      .attr("x", 50 * i)
      .on("click", () => {
        svg
          .append("text")
          .text("Doesn't open!")
          .attr("x", 50 * i)
          .attr("y", 25);
      });
  }
}

f();

d3.select("button").on("click", (e, i) => {
  f();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>

style.css

svg{
  border:1px none;
  font-size:50%;
  font-family:Helvetica;
  fill:white;
}

body{font-family:Helvetica}