<main>
  <h2>Optional Parameters with <code>window.setTimeout()</code></h2>
  
  <p>The <code>window.setTimeout()</code> method take an optional number of unlimited parameters after the function and the delay value. These parameters allow you to pass values into the function. The button starts a timer that passes in two values and adds them up inside the function after the specified delay.</p>

  <button>Start Calculation</button>
  <output></output>

</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

output {
  display: block;
  padding: 20px;
  font-weight: bold;
}

let btn = document.querySelector('button'),
    op = document.querySelector('output'),
    a = 5,
    b = 7;

btn.addEventListener('click', () => {
  op.innerHTML = 'Calculating...';
  setTimeout(doSomething, 2000, a, b);
});

function doSomething (a, b) {
  op.innerHTML = a + b;
}