darrenwiens/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Gourdle</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <style>
      body {
        margin: 10;
        padding: 10;
      }
      canvas {
        border: 1px solid #555;
      }
      img {
        position: absolute;
        top: 0;
        left: 0;
      }
      p,
      ol,
      select {
        font-family: "Lucida Console", "Courier New", monospace;
      }
      .p1 {
        text-align: center;
        font-size: 30px;
      }
      div {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div><p class="p1">GOURDLE</p></div>
    <canvas width="300" height="300" id="cv"></canvas>
    <img id="img" />
    <div id="guesses">
      <ol id="ol">
        <li>
          <select id="selectNumber">
            <option>Choose a gourd</option>
          </select>
        </li>
      </ol>
    </div>
    <script>
      let cv = document.getElementById("cv");
      ctx = cv.getContext("2d");

      let img = document.getElementById("img");

      function check_answer(answer) {
        return answer == "Butternut squash" ? 1 : 0;
      }

      function draw_gourd() {
        let w = 1200 / 4;
        let h = 800 / 4;
        cv.width = w;
        cv.height = h;

        let guess_number =
          document.getElementById("ol").getElementsByTagName("li").length || 1;
        let blur = 15 - guess_number * 3;
        cv.style.width = w + "px";
        cv.style.height = h + "px";
        ctx.clearRect(0, 0, w, h);
        ctx.filter = `blur(${blur}px)`;
        ctx.drawImage(img, 0, 0, w, h);
      }

      img.onload = function () {
        draw_gourd();
      };

      img.src = "./butternut.jpeg";
      img.style.visibility = "hidden";

      let select = document.getElementById("selectNumber");
      let options = [
        "Aehobak",
        "Crookneck squash",
        "Gem squash",
        "Pattypan squash",
        "Straightneck squash",
        "Tromboncino",
        "Zucchini",
        "Acorn squash",
        "Big Max",
        "Butternut squash",
        "Calabaza",
        "Connecticut field pumpkin",
        "Cushaw squash",
        "Delicata squash",
        "Giant pumpkin",
        "Honeynut squash",
        "Kabocha",
        "Marrow",
        "Red kuri squash",
        "Spaghetti squash",
        "Turban squash",
      ];

      for (let i = 0; i < options.length; i++) {
        let opt = options[i];
        let el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
      }

      select.onchange = function () {
        let li = select.parentElement;
        let isCorrect = check_answer(select.value);
        let result = isCorrect ? " (CORRECT!)" : " (WRONG!)";
        li.innerHTML = select.value + result;
        select.remove(select.selectedIndex);

        if (!isCorrect) {
          let ol = document
            .getElementById("ol")
            .appendChild(document.createElement("li"))
            .appendChild(select);
        }

        draw_gourd();
      };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Gourdle</title>
	<meta
	name="viewport"
	content="initial-scale=1,maximum-scale=1,user-scalable=no"
	/>
	<style>
	body {
	margin: 10;
	padding: 10;
	}
	canvas {
	border: 1px solid #555;
	}
	img {
	position: absolute;
	top: 0;
	left: 0;
	}
	p,
	ol,
	select {
	font-family: "Lucida Console", "Courier New", monospace;
	}
	.p1 {
	text-align: center;
	font-size: 30px;
	}
	div {
	width: 300px;
	}
	</style>
	</head>
	<body>
	<div><p class="p1">GOURDLE</p></div>
	<canvas width="300" height="300" id="cv"></canvas>
	<img id="img" />
	<div id="guesses">
	<ol id="ol">
	<li>
	<select id="selectNumber">
	<option>Choose a gourd</option>
	</select>
	</li>
	</ol>
	</div>
	<script>
	let cv = document.getElementById("cv");
	ctx = cv.getContext("2d");

	let img = document.getElementById("img");

	function check_answer(answer) {
	return answer == "Butternut squash" ? 1 : 0;
	}

	function draw_gourd() {
	let w = 1200 / 4;
	let h = 800 / 4;
	cv.width = w;
	cv.height = h;

	let guess_number =
	document.getElementById("ol").getElementsByTagName("li").length \|\| 1;
	let blur = 15 - guess_number * 3;
	cv.style.width = w + "px";
	cv.style.height = h + "px";
	ctx.clearRect(0, 0, w, h);
	ctx.filter = `blur(${blur}px)`;
	ctx.drawImage(img, 0, 0, w, h);
	}

	img.onload = function () {
	draw_gourd();
	};

	img.src = "./butternut.jpeg";
	img.style.visibility = "hidden";

	let select = document.getElementById("selectNumber");
	let options = [
	"Aehobak",
	"Crookneck squash",
	"Gem squash",
	"Pattypan squash",
	"Straightneck squash",
	"Tromboncino",
	"Zucchini",
	"Acorn squash",
	"Big Max",
	"Butternut squash",
	"Calabaza",
	"Connecticut field pumpkin",
	"Cushaw squash",
	"Delicata squash",
	"Giant pumpkin",
	"Honeynut squash",
	"Kabocha",
	"Marrow",
	"Red kuri squash",
	"Spaghetti squash",
	"Turban squash",
	];

	for (let i = 0; i < options.length; i++) {
	let opt = options[i];
	let el = document.createElement("option");
	el.textContent = opt;
	el.value = opt;
	select.appendChild(el);
	}

	select.onchange = function () {
	let li = select.parentElement;
	let isCorrect = check_answer(select.value);
	let result = isCorrect ? " (CORRECT!)" : " (WRONG!)";
	li.innerHTML = select.value + result;
	select.remove(select.selectedIndex);

	if (!isCorrect) {
	let ol = document
	.getElementById("ol")
	.appendChild(document.createElement("li"))
	.appendChild(select);
	}

	draw_gourd();
	};
	</script>
	</body>
	</html>