Category: JavaScript Answers

We can use the getDate method to get the number of days in a month with JavaScript.

For instance, we can write:

const numDays = (y, m) => new Date(y, m, 0).getDate();  
console.log(numDays(2020, 2));

We call the Date constructor with the y year, m month, and day 0 to create the Date instance with the last date of the given month.

Then we call getDate to get the value of the last day of the month m — 1according to the calendar.

Therefore, the console log should log 29 since February 2020 has 29 days.

Determine the Number of Days in a Month with moment.js

Also, we can use the daysInMonth method that comes with momenbt.js to get the number of days in a month.

For instance, we can write:

const numDays = moment("2020-02", "YYYY-MM").daysInMonth()  
console.log(numDays);

to parse the year and month with the moment function into a moment object.

Then we call daysInMonth to get the number of days in the month for the given month.

So numDays is 29.

Convert a JavaScript Number Variable to a Currency Value with the Intl.NumberFormat Constructor

We can convert a JavaScript number variable to a currency value with the Intl.NumberFormat constructor.

For instance, we can write:

const formatter = new Intl.NumberFormat("en", {
  style: "currency",
  currency: "GBP"
});

console.log(formatter.format(1234.5));

to format 1234.5 into a currency value denominated in GBP.

We use the Intl.NumberFormat constructor with the locale as the first argument.

The 2nd argument is an object with some options.

The style is set to 'currency' to format it into a currency value.

And currency is set to 'GBP' to format it into British Pound.

Then we call formatter.format with the number to return the string with the currency value.

Therefore, the console log should log '£1,234.50' .

We can make a number a percentage with basic arithmetic operators.

For instance, we can write:

const number1 = 4.954848;
const number2 = 5.9797;
console.log(Math.floor((number1 / number2) * 100));

to get the percentage of number1 of number2 by dividing number1 by number2 .

Then we multiply that by 100 to get the percentage point.

And then we call Math.floor to round the returned result down to the nearest integer.

We should get 82 from the console log.

Make a Number a Percentage with JavaScript with the toLocaleString Method

Also, we can make a number a percentage with the toLocaleString method.

For instance, we can write:

const number1 = 4.954848;
const number2 = 5.9797;
const percentage = (number1 / number2).toLocaleString("en", {
  style: "percent"
})
console.log(percentage);

We divide number1 by number2 .

Then we call toLocaleString on the returned result with the 'en' locale and an object with style set to 'percent' to return a string with the percentage of number1 divided by number2 .

We should get '83%' from the console log.

We can play a notification sound on websites with JavaScript by creating an audio player object with the Audio constructor.

For instance, if we have the following button:

<button>Play</button>

Then we can use the Audio constructor to play an audio clip when we click it by writing:

const playSound = (url) => {
  const audio = new Audio(url);
  audio.play();
}

const button = document.querySelector('button')
button.addEventListener('click', () => {
  playSound('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
})

We create the playSound function that takes the audio url .

And we pass the url into the Audio constructor to create the audio player object.

Next, we call play to play the audio file at the given url .

Then we get the button with document.querySelector .

And then we call addEventListener to add a click listener to the button.

In the event handler callback, we call playSound with the URL of the audio file we want to play.

Now when we click the button, the audio at the given URL should play.

Conclusion

We can play a notification sound on websites with JavaScript by creating an audio player object with the Audio constructor.

We can paste plain text into a content editable element by listening to the paste event and modifying the pasting behavior.

For instance, if we have the following div:

<div contenteditable>

</div>

Then we can modify the paste behavior by listening to the paste event:

const editor = document.querySelector('div')
editor.addEventListener("paste", (e) => {
  e.preventDefault();
  const text = e.clipboardData.getData('text/plain');
  document.execCommand("insertHTML", false, text);
});

We get the div with document.querySelector .

Then we listen to the paste event with addEventListener .

We pass in a callback that calls e.preventDefault to stop the default paste behavior.

Then we get the pasted text with the e.clipboard.getData method.

We pass in 'text/plain' to get the pasted data as plain text.

And then we call document.execCommand to run the insertHTML command with the text to paste it into the editor div as plain text.