<div id="display">
  <label for="start">start: 
    <input id="start" name="start" value="10.099999" placeholder="10.099999"/>
  seconds </label>
  <br>
  <label for="start">frame rate:  
    <input id="frame-rate" name="frame-rate" value="30" placeholder="30"/>
  fps</label>
  <br>
  <br>
  this word will be rendered on frame number: <p id="frame-count"></p>
</div>

body {
  font-size: 2em
}

input {
  font-size: 1em
}

#frame-count {
  color: dodgerblue
}

let startInput = document.getElementById("start")
let fpsInput = document.getElementById("frame-rate")
document.getElementById("frame-count").textContent = startInput.value * fpsInput.value

let handleInput = (e) => {
  let frameNumber = startInput.value * fpsInput.value
  document.getElementById("frame-count").textContent = frameNumber
  
}


startInput.addEventListener("input", handleInput, false)
fpsInput.addEventListener("input", handleInput, false)