Need help understanding what the computer is told to do

Can somebody comment line by line on what the code below is telling the computer to do so I can understand js better?

<button>Start machine</button>
<p>The machine is stopped.</p>
const btn = document.querySelector('button');
const txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

querySelector returns the first Element within the document that matches the specified selector. In this case, the btn const is assigned to the first button Element in the document. Same with txt and the first p Element. You can read more about it here.

const btn = document.querySelector('button');
const txt = document.querySelector('p');

addEventListener sets up a function that will be called whenever the specified event is delivered to the target. It allows the webpage to “listen” to whenever the btn element is “clicked.” When the element is clicked, the updateBtn function will run. You can read more about addEventListener here.

btn.addEventListener('click', updateBtn);

This is the function that is run when the above code executes, or when the btn element is clicked. btn.textContent checks the content of the text in the element to see what it is equal to. It then changes the btn and txt elements based on the conditional requirements.

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

It would also be handy to study up on HTML DOM manipulation. It may be a bit overwhelming, but this is a good resource to start on here.

Good luck!