Add WPM display

This commit is contained in:
Neale Pickett 2022-04-18 15:37:17 -06:00
parent e0e90735b7
commit 4f33d7453c
2 changed files with 6 additions and 0 deletions

View File

@ -220,6 +220,8 @@
<p> <p>
Dit length (iambic): Dit length (iambic):
<output id="iambic-duration-value"></output>ms <output id="iambic-duration-value"></output>ms
/
<output id="iambic-duration-wpm"></output> WPM
<input <input
id="iambic-duration" id="iambic-duration"
class="mdl-slider mdl-js-slider" class="mdl-slider mdl-js-slider"

View File

@ -182,11 +182,15 @@ class VailClient {
element.value = storedValue element.value = storedValue
} }
let outputElement = document.querySelector(selector + "-value") let outputElement = document.querySelector(selector + "-value")
let outputWpmElement = document.querySelector(selector + "-wpm")
element.addEventListener("input", e => { element.addEventListener("input", e => {
localStorage[element.id] = element.value localStorage[element.id] = element.value
if (outputElement) { if (outputElement) {
outputElement.value = element.value outputElement.value = element.value
} }
if (outputWpmElement) {
outputWpmElement.value = (1200 / element.value).toFixed(1)
}
if (callback) { if (callback) {
callback(e) callback(e)
} }