Suggest make it a requirement that your script is unobtrusive. ES has matured to the point that we can completely remove it from the document, save for the SCRIPT element that loads the file. (This is not new, but the tools have matured.)
Your document structure is missing several key elements. Structure according to the standard HTML model:
<meta name="viewport" content="width=device-width">
<title>My First Education tool</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<h1>My First Education tool</h1>
<input type="text" value="0">
Take an inventory of your page elements. There are five interactive objects that we can cache in our script.
const buttons = document.querySelectorAll('button');
const userVal = document.querySelector('input');
const output = document.querySelector('#demo');
The first of these objects is a node list with three elements. The object is
buttons and the individual elements are
=> 'Easy Level'
Notice how unobstructed the HTML document is? This is what is meant by unobtrusive presentation and behaviors. Note also that
<button> does not require a type attribute since it is already defined in the DOM as a button. We only use a type attribute if the object is an input control.element.
type attribute values are never capitalized.
Buttons have as an advantage that they have a text node that we can read and manipulate. They also group very nicely, as our
buttons object demonstrates.
Give the HTML some consideration before pushing forward. Suggest read up on HTML so the structure makes sense. We should picture it as an outline and have our document fit that model.
We can pick this up when you get back from your reading.