<header>
  <h1>HTML Tags Memory Test</h1>
  <p>How many HTML tags can you remember? <span id="remain" role="status" aria-live="polite">113</span> to recall&hellip;</p>
</header>
<main>
  <noscript>You need to enable JavaScript to make guesses.</noscript>
  <form id="form">
    <label for="guess">Tag:</label>
    <input id="guess" type="text" placeholder="tag" autofocus autocomplete="off" autocapitalize="none" title="Enter a valid tag">
    <button id="button" type="submit" aria-controls="remain guessed">Guess</button>
  </form>
  <ol id="guessed" role="status" aria-live="polite" aria-atomic="false"></ol>
</main>
<footer>
  <p><small>HTML Tags Memory Test by <a href="https://codepen.io/plfstr" target="_top">plfstr</a></small></p>
</footer>
body {
  margin: 0 auto;
  padding: 1em;
  max-width: 600px;
  font: normal 100%/1.5 monospace;
  text-align: start;
  background: mediumblue;
  color: white;
}

h1 {
  line-height: 1;
}

a,
p {
  color: yellow;
}

form {
  position: sticky;
  top: 0;
  z-index: 88;
  display: flex;
  flex-flow: row wrap;
  padding: 0.5em;
  background-color: turquoise;
  border: 2px outset turquoise;
  margin: auto -0.5em;
}

label,
input,
button {
  font: inherit;
  margin: 0 auto 0.5em;
  padding: 0.25em;
  flex: 1;
}

form,
input {
  color: blue;
}

input {
  flex: 2 1 auto;
  max-width: 100%;
  border: 3px solid blue;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  caret-color: blue;
}

button {
  border: 3px outset blue;
  color: white;
  background-color: blue;
  -webkit-appearance: none;
  appearance: none;
}

button:active,
button:focus {
  background-color: white;
  color: blue;
}

ol {
  padding: 0;
  list-style-position: inside;
  font-size: smaller;
  color: yellow;
}

li {
  padding: 0.125em 0.75em;
}

li:before,
li:after {
  color: turquoise;
}

li:before {
  content: "<";
}

li:after {
  content: ">";
}

li:nth-child(odd) {
  background-color: blue;
}

@media only screen and (prefers-color-scheme: dark) {
  body {
    background-color: darkblue;
  }

  p,
  form,
  ol,
  a {
    color: whitesmoke;
  }

  li:before,
  li:after {
    color: darkcyan;
  }

  form {
    background-color: darkcyan;
  }

  li:nth-child(odd) {
    background-color: mediumblue;
  }
}

:focus-visible {
  isolation: isolate;
}
const elements = [
"html",
"body",
"head",
"link",
"meta",
"marquee",
"script",
"style",
"blogroll",
"constructionsign",
"guestbook",
"webring"
];
// The above array was a decoy. You weren’t peeking at the array were you? 
// Now the real array with all elements via https://developer.mozilla.org/en-US/docs/Web/HTML/Element
const Els = [
"html",
"base",
"head",
"link",
"meta",
"script",
"style",
"title",
"body",
"address",
"article",
"aside",
"footer",
"header",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hgroup",
"main",
"nav",
"section",
"search",
"blockquote",
"cite",
"dd",
"dt",
"dl",
"div",
"figure",
"figcaption",
"hr",
"li",
"ol",
"p",
"pre",
"ul",
"a",
"abbr",
"b",
"bdi",
"bdo",
"br",
"code",
"data",
"time",
"dfn",
"em",
"i",
"kbd",
"mark",
"q",
"ruby",
"rp",
"rt",
"s",
"del",
"ins",
"samp",
"small",
"span",
"strong",
"sub",
"sup",
"u",
"var",
"wbr",
"area",
"map",
"audio",
"source",
"img",
"track",
"video",
"embed",
"iframe",
"object",
"picture",
"canvas",
"noscript",
"caption",
"col",
"colgroup",
"table",
"tbody",
"tr",
"td",
"tfoot",
"th",
"thead",
"button",
"datalist",
"option",
"fieldset",
"label",
"form",
"input",
"legend",
"meter",
"optgroup",
"select",
"output",
"progress",
"textarea",
"details",
"dialog",
"menu",
"summary",
"slot",
"template",
"svg",
"math"
];

let Elsguessed = [];
let domGuess = document.querySelector('#guess');
let domGuesses = document.querySelector('#guessed');
let domRemaining = document.querySelector('#remain');

function matchGuess(guess) {
    
    guess.preventDefault();    
    let thisGuess = domGuess.value.toLowerCase();    
    let domItem = document.createElement('li');

    if ( Els.includes(thisGuess) ) {
        if (checkGuesses(thisGuess)) return;
        domItem.textContent = thisGuess;
        domGuesses.appendChild(domItem);
        domGuess.value = "";
        keepGuesses(thisGuess);
        keepScore();
    }
  
  domGuess.focus();

}

function keepScore() {
    domRemaining.textContent = Els.length - domGuesses.querySelectorAll('li').length;
}

function keepGuesses(guess) {
    Elsguessed.push(guess);
}

function checkGuesses(guess) {
    return Elsguessed.includes(guess);
}

// NEW! Use els array to provide validation pattern, upper/lowercase match [Tt]ag
const pattern = Els.map(tag => {
    return `[${tag.charAt(0)}${tag.charAt(0).toUpperCase()}]${tag.slice(1)}`;
}).join('|');
if (pattern.length) {
  domGuess.setAttribute('pattern', pattern);
}

document.querySelector('#remain').textContent = Els.length;
document.querySelector('#form').addEventListener('submit', matchGuess, false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.