Author: John Au-Yeung

To round to nearest hour using JavaScript Date Object, we can call setHours to round the hour of the date to the nearest hour.

And we call setMinutes to set the minutes, seconds, and milliseconds of a date all to 0.

For instance, we can write:

const roundMinutes = (date) => {
  date.setHours(date.getHours() + Math.round(date.getMinutes() / 60));
  date.setMinutes(0, 0, 0);
  return date;
}

const date = new Date(2021, 1, 1, 4, 55);
const newDate = roundMinutes(date);
console.log(newDate)

We create the roundMinutes which takes a date object.

In the function, we call date.setHours with date.getHours() + Math.round(date.getMinutes() / 60).

We get the hour of the date with getHours. Then we add Math.round(date.getMinutes() / 60) to add one hour if date.getMinutes() / 60 is 0.5 or bigger.

Then we call setMinutes with 3 zeroes to set the minutes, seconds, and milliseconds all to 0 respectively.

Therefore, when we call roundMinutes with date, we get:

Mon Feb 01 2021 05:00:00 GMT-0800 (Pacific Standard Time)

from the console log.

To limit the amount of number shown after a decimal place in JavaScript, we can use the toFixed method.

For instance, we can write:

const x = 4.8855;
console.log(x.toFixed(2));

Then we round x to 2 decimal places.

The number of decimal places is the argument for toFixed.

Therefore, the console log should log 4.89.

To parse JSON arrays and display the data in an HTML table with JavaScript, we can loop through each entry of the array, create tr elements for each, and insert them into the table element.

For instance, we write:

<table>

</table>

to create the table element.

Then we write:

const data = [{
  "User_Name": "John Doe",
  "score": "10",
  "team": "1"
}, {
  "User_Name": "Jane Smith",
  "score": "15",
  "team": "2"
}, {
  "User_Name": "Chuck Berry",
  "score": "12",
  "team": "2"
}]

let tr;
for (const d of data) {
  tr = $('<tr/>');
  tr.append(`<td>${d.User_Name}</td>`);
  tr.append(`<td>${d.score}</td>`);
  tr.append(`<td>${d.team}</td>`);
  $('table').append(tr);
}

to put the content of data into a table.

We loop through data with a for-of loop.

Then in the loop body, we create a tr element with $('<tr/>').

Then we append the td elements for each column with:

tr.append(`<td>${d.User_Name}</td>`);
tr.append(`<td>${d.score}</td>`);
tr.append(`<td>${d.team}</td>`);

Then we append the tr element with the content to the table element with:

$('table').append(tr);

To check if a HTML5 video is ready with JavaScript, we can listen to the canplay event.

If it’s emitted, then the video is ready.

For instance, if we have:

<video src='https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4'></video>

Then we can listen for the canplay event by writing:

const video = document.querySelector('video')
video.addEventListener('canplay', () => {
  console.log('ready')
})

We select the video element with document.querySelector.

Then we call addEventListener with 'canplay' to listen to the canplay event.

The 2nd argument is the event handler for the canplay event, which runs when the video is ready to be played.