Good Things

For a beginner this looks like a good start. In the JavaScript code const is used instead of let for variables that don't get re-assigned (which is all variables).

Suggestions

Delegating events

I would recommend using event delegation. Instead of adding click handlers to each button, add a single event handler to the form or another container element and determine the action based on the event.target - e.g. using class names or other attributes. The forEach callback could be altered slightly for this.

Referencing the form in JavaScript

The form can be accessed via document.forms - so instead of using querySelector()

const calculator = document.querySelector('form[name = "calculator"]')

Access it via

const calculator = document.forms.calculator;

The elements could also be accessed via HTMLFormElement.elements - e.g. document.forms.calculator.elements.clear

Line terminators

Semicolons aren't required for all lines except a handful of statements so as this blog post explains it is best to use them to avoid unintentional behavior in your code.

Good Things

For a beginner this looks like a good start. The markup is fairly clean. In the JavaScript code the variables have good scope - i.e. limited to functions, const is used instead of let for variables that don't get re-assigned (which is all variables).

Suggestions

Delegating events

I would recommend using event delegation. Instead of adding click handlers to each button, add a single event handler to the form or another container element and determine the action based on the event.target - e.g. using class names or other attributes. The forEach callback could be altered slightly for this.

Referencing the form in JavaScript

The form can be accessed via a property on Document - i.e. document.forms - so instead of using querySelector()

const calculator = document.querySelector('form[name = "calculator"]')

Access it via the property of document:

const calculator = document.forms.calculator;

This avoids excess DOM queries.

The elements could also be accessed via HTMLFormElement.elements - e.g. document.forms.calculator.elements.clear

Line terminators

Semicolons aren't required for all lines except a handful of statements so as this blog post explains it is best to use them to avoid unintentional behavior in your code.

Good Things

For a beginner this looks like a good start. In the JavaScript code const is used instead of let for variables that don't get re-assigned (which is all variables).

Suggestions

Delegating events

I would recommend using event delegation. Instead of adding click handlers to each button, add a single event handler to the form or another container element and determine the action based on the event.target - e.g. using class names or other attributes. The forEach callback could be altered slightly for this.

Referencing the form in JavaScript

The form can be accessed via document.forms - so instead of using querySelector()

const calculator = document.querySelector('form[name = "calculator"]')

Access it via

const calculator = document.forms.calculator;

Line terminators

Semicolons aren't required for all lines except a handful of statements so as this blog post explains it is best to use them to avoid unintentional behavior in your code.

Good Things

For a beginner this looks like a good start. In the JavaScript code const is used instead of let for variables that don't get re-assigned (which is all variables).

Suggestions

Delegating events

I would recommend using event delegation. Instead of adding click handlers to each button, add a single event handler to the form or another container element and determine the action based on the event.target - e.g. using class names or other attributes. The forEach callback could be altered slightly for this.

Referencing the form in JavaScript

The form can be accessed via document.forms - so instead of using querySelector()

const calculator = document.querySelector('form[name = "calculator"]')

Access it via

const calculator = document.forms.calculator;

The elements could also be accessed via HTMLFormElement.elements - e.g. document.forms.calculator.elements.clear

Line terminators

Semicolons aren't required for all lines except a handful of statements so as this blog post explains it is best to use them to avoid unintentional behavior in your code.