Category: JavaScript Answers

Sometimes, we want to let users enter currency values with HTML number inputs.

In this article, we’ll look at how to let users enter currency values with HTML number inputs.

Let Users Enter Currency Values with HTML Number Inputs

To let users enter currency values with HTML number inputs, we can set the step attribute to 0.01 so that users can enter 2 decimal places into the number input.

For instance, we can write:

<input type="number" min="0.01" step="0.01" max="1000" value="25.67" />

to add the number input with the min and max attributes set to the min and max values allowed in the input.

The step attribute is set to 0.01 to let us enter 2 decimal places into the input box.

Conclusion

To let users enter currency values with HTML number inputs, we can set the step attribute to 0.01 so that users can enter 2 decimal places into the number input.

Sometimes, we want to wrap a long JavaScript template literal line to multiple lines without creating a new line in the string.

In this article, we’ll look at how to wrap a long JavaScript template literal line to multiple lines without creating a new line in the string.

Wrap a Long JavaScript Template Literal Line to Multiple Lines without Creating a New Line in the String

To wrap a long JavaScript template literal line to multiple lines without creating a new line in the string, we can use the \ character to break up the string code into multiple lines without creating a multi-line string.

For instance, we can write:

const text = `a very long string that just continues \
and continues and continues`;
console.log(text)

to create the text string with a \ between a very long string that just continues and and continues and continues .

Then we see from the console log that text is 'a very long string that just continues and continues and continues’ .

Conclusion

To wrap a long JavaScript template literal line to multiple lines without creating a new line in the string, we can use the “ character to break up the string code into multiple lines without creating a multi-line string.

Sometimes, we want to disable text selection with JavaScript.

In this article, we’ll look at how to disable text selection with JavaScript.

Disable Text Selection with JavaScript

To disable text selection with JavaScript, we can set the onselectstart and onmousedown properties of the element we want to disable selection for to a function that returns false .

For instance, if we have the following HTML:

<div>  
  hello world  
</div>

Then we write:

const disableselect = (e) => {  
  return false  
}  
document.onselectstart = disableselect  
document.onmousedown = disableselect

to disable select on the whole page.

We create the disableselect function that returns false and set that as the value of the document.onselectstart and document.onmousedown properties to disable text selection on the whole page.

Now when we try to select the text, nothing will happen.

Conclusion

To disable text selection with JavaScript, we can set the onselectstart and onmousedown properties of the element we want to disable selection for to a function that returns false .

Sometimes, we want to count animation from number A to B with JavaScript.

In this article, we’ll look at how to count animation from number A to B with JavaScript.

Count Animation from Number A to B with JavaScript

To count animation from number A to B with JavaScript, we can use the requestAnimationFrame method to update the number.

For instance, we can write:

const animateValue = (obj, start, end, duration) => {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}

const obj = document.getElementById('value');
animateValue(obj, 100, -25, 2000);

to create the animateValue function that does the animation.

And we write:

<div id="value">100</div>

to add the number display.

It takes the obj parameter that is set to the element to update.

start and end are the start and end numbers for the animation.

duration is the duration of the animation.

We start the animation by setting the startTimestamp .

Then we define the step funtion that updates the startTimestamp if it’s not defined.

Next, we calculate the progress of the animation by taking the difference between timestamp and startTimestamp , then dividing that by the duration .

Then we update the innerHTML property of obj to update the number displayed.

Then if progress is less than 1, which means the animation isn’t finished, then we call window.requestAnimationFrame with step to update the number display.

Below the step function, we call window.requestAnimationFrame to start the animation.

Finally, we get the div with ID value and call animateValue to run the animation.

Now we should see the number animate from 100 to -25.

Conclusion

To count animation from number A to B with JavaScript, we can use the requestAnimationFrame method to update the number.

Sometimes, we want to calculate frames per second (FPS) in the canvas using JavaScript’s requestAnimationFrame function.

In this article, we’ll look at how to calculate FPS in the canvas using JavaScript’s requestAnimationFrame function.

Calculate FPS in the Canvas Using JavaScript’s requestAnimationFrame Function

To calculate FPS in the canvas using JavaScript’s requestAnimationFrame function, we can create our own function that gets the number of timestamps that are added to an array in one second.

Then the length of that array is the FPS value.

To do this, we write:

let fps = 1;
const times = [];
const fpsLoop = (timestamp) => {
  while (times.length > 0 && times[0] <= timestamp - 1000) {
    times.shift();
  }
  times.push(timestamp);
  fps = times.length;
  console.log(fps);
  requestAnimationFrame(fpsLoop);
}

requestAnimationFrame(fpsLoop);

We create the times array to hold the array of timestamps.

Then the length of times is the FPS value.

Next, we create the fpsLoop to remove the entries in the times array is times[0] is less than or equal to timestamp — 1000 and times.length is bigger than 0 to remove the timestamps that are added before 1 second.

Then we push the timestamp into the times array.

And we assign times.length to fps to get the FPS value.

Next, we call requestAnimation with fpsLoop to run the function indefinitely.

And we call requestAnimation with fpsLoop in the last line to start the measurement.

Conclusion

To calculate FPS in the canvas using JavaScript’s requestAnimationFrame function, we can create our own function that gets the number of timestamps that are added to an array in one second.

Then the length of that array is the FPS value.