jakobrs · January 29, 2022 12:20
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
    <style>
      h1 {
        font-family: "Verdana", sans-serif;
        font-weight: normal;
        font-size: 8em;
        text-align: center;
        margin-top: 25vh;
        display: inline-block;
        width: 100%;
      }

      html, body {
        height: 100%;
      }

      body {
        background-color: #eee;
        margin: 0;
      }

      input {
        font-size: inherit;
        font-family: inherit;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <form id="form">
      <h1 id="header"></h1>
    </form>
    
    <script>
      let title = document.querySelector("title");
      let form = document.getElementById("form");
      let header = document.getElementById("header");
      let input_field;

      let params = new URLSearchParams(window.location.search);
      let content = params.get("text") || "Hi.";
      title.innerText = content;
      header.innerText = content;

      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      ctx.font = getComputedStyle(header).font;

      function set_input_field_width() {
        input_field.style.width = ctx.measureText(input_field.value).width + "px";
      }

      function key_pressed() {
        setTimeout(set_input_field_width, 0);
      }

      function freeze() {
        form.submit();
      }

      function on_submit(evt) {
        if (input_field.value == "") {
          evt.preventDefault();
          window.location.reload();
        }

        if (input_field.value == "Hi.") {
          input_field.remove();
        }
      }

      function replace_with_text_field() {
        input_field = document.createElement("input");
        input_field.type = "text";
        input_field.value = header.innerText;
        input_field.name = "text";

        set_input_field_width();

        header.textContent = "";
        header.appendChild(input_field);

        input_field.addEventListener("keypress", key_pressed);
        input_field.addEventListener("keydown", key_pressed);

        input_field.addEventListener("focusout", freeze);

        input_field.focus();
        input_field.select();

        header.removeEventListener("click", replace_with_text_field);

        form.addEventListener("submit", on_submit);
      }

      header.addEventListener("click", replace_with_text_field);
    </script>
  </body>
 </style>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title></title>
	<meta charset="utf-8">
	<style>
	h1 {
	font-family: "Verdana", sans-serif;
	font-weight: normal;
	font-size: 8em;
	text-align: center;
	margin-top: 25vh;
	display: inline-block;
	width: 100%;
	}

	html, body {
	height: 100%;
	}

	body {
	background-color: #eee;
	margin: 0;
	}

	input {
	font-size: inherit;
	font-family: inherit;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<form id="form">
	<h1 id="header"></h1>
	</form>

	<script>
	let title = document.querySelector("title");
	let form = document.getElementById("form");
	let header = document.getElementById("header");
	let input_field;

	let params = new URLSearchParams(window.location.search);
	let content = params.get("text") \|\| "Hi.";
	title.innerText = content;
	header.innerText = content;

	let canvas = document.createElement("canvas");
	let ctx = canvas.getContext("2d");
	ctx.font = getComputedStyle(header).font;

	function set_input_field_width() {
	input_field.style.width = ctx.measureText(input_field.value).width + "px";
	}

	function key_pressed() {
	setTimeout(set_input_field_width, 0);
	}

	function freeze() {
	form.submit();
	}

	function on_submit(evt) {
	if (input_field.value == "") {
	evt.preventDefault();
	window.location.reload();
	}

	if (input_field.value == "Hi.") {
	input_field.remove();
	}
	}

	function replace_with_text_field() {
	input_field = document.createElement("input");
	input_field.type = "text";
	input_field.value = header.innerText;
	input_field.name = "text";

	set_input_field_width();

	header.textContent = "";
	header.appendChild(input_field);

	input_field.addEventListener("keypress", key_pressed);
	input_field.addEventListener("keydown", key_pressed);

	input_field.addEventListener("focusout", freeze);

	input_field.focus();
	input_field.select();

	header.removeEventListener("click", replace_with_text_field);

	form.addEventListener("submit", on_submit);
	}

	header.addEventListener("click", replace_with_text_field);
	</script>
	</body>
	</style>