Author: John Au-Yeung

Sometimes, we want to get the current GMT world time with JavaScript.

In this article, we’ll look at how to get the current GMT world time with JavaScript.

How to get the current GMT world time with JavaScript?

To get the current GMT world time with JavaScript, we can use the various date methods to get the date parts of the UTC equivalent of the current date and time.

For instance, we write:

const d = new Date();
console.log(d.getUTCDate())
console.log(d.getUTCDay())
console.log(d.getUTCFullYear())
console.log(d.getUTCHours())
console.log(d.getUTCMilliseconds())
console.log(d.getUTCMinutes())
console.log(d.getUTCMonth())
console.log(d.getUTCSeconds())

to call getUTCDate to get the UTC day of the month.

getUTCDay to get the UTC day of the week.

getUTCFullYear to get the UTC year.

getUTCHours to get the UTC hour.

getUTCMilliseconds to get the UTC milliseconds.

getUTCMinutes to get the UTC minutes.

getUTCMonth to get the UTC month.

And getUTCSeconds to get the UTC seconds.

Conclusion

To get the current GMT world time with JavaScript, we can use the various date methods to get the date parts of the UTC equivalent of the current date and time.

Sometimes, we want to get the computed font size for DOM element with JavaScript.

In this article, we’ll look at how to get the computed font size for DOM element with JavaScript.

How to get the computed font size for DOM element with JavaScript?

To get the computed font size for DOM element with JavaScript, we can use the window.getComputedStyle method.

For instance, we write:

<div>
  hello world
</div>

to add a div with some text in it.

Then we write,

const div = document.querySelector('div')
const styles = window.getComputedStyle(div)
console.log(styles.fontSize)

to get the div with document.querySelector.

Then we call window.getComputedStyle method with the div.

Finally, we get the font size of the items in the div with the styles.fontSize property.

From the console log, we should see that the font size is 16px large.

Conclusion

To get the computed font size for DOM element with JavaScript, we can use the window.getComputedStyle method.

Sometimes, we want to test if one array is a subset of another with JavaScript.

In this article, we’ll look at how to test if one array is a subset of another with JavaScript.

How to test if one array is a subset of another with JavaScript?

To test if one array is a subset of another with JavaScript, we can use the JavaScript array’s includes and every methods.

For instance, we write:

const a1 = [1, 2, 3]
const a2 = [1, 2, 3, 4, 5, 6]
const isSubset = a1.every(a => {
  return a2.includes(a)
})
console.log(isSubset)

We define 2 arrays a1 and a2.

And we call every on a1 with a callback that checks if each element in a1 is included in a2 with the includes method.

Therefore, the console log should log true since every element in a1 is in a2.

Conclusion

To test if one array is a subset of another with JavaScript, we can use the JavaScript array’s includes and every methods.

Sometimes, we want to populate one dropdown based on selection in another with JavaScript.

In this article, we’ll look at how to populate one dropdown based on selection in another with JavaScript.

How to populate one dropdown based on selection in another with JavaScript?

To populate one dropdown based on selection in another with JavaScript, we can create our own functions to get the selected value of the first drop down.

Then we can populate the options of the 2nd drop down based on the value of the first drop down.

For instance, we write:

<select id="ddl" >
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select>

to add drop down.

When we select an option from the first drop down, then the 2nd drop down will have options populated.

To do this, we write:

const ddl = document.getElementById('ddl')
const ddl2 = document.getElementById('ddl2')

const createOption = (ddl, text, value) => {
  const opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

const configureDropDownLists = (ddl1, ddl2) => {
  const colours = ['Black', 'White', 'Blue'];
  const shapes = ['Square', 'Circle', 'Triangle'];
  const names = ['John', 'David', 'Sarah'];
  ddl2.options.length = 0

  switch (ddl1.value) {
    case 'Colours':
      for (const c of colours) {
        createOption(ddl2, c, c);
      }
      break;
    case 'Shapes':
      for (const s of shapes) {
        createOption(ddl2, s, s);
      }
      break;
    case 'Names':
      for (const n of names) {
        createOption(ddl2, n, n);
      }
      break;
    default:
      break;
  }
}

ddl.addEventListener('change', () => {
  configureDropDownLists(ddl, ddl2)
})

We select both drop downs with document.getElementById.

Then we define the createOption function that takes the ddl select element, and the text and value of the options.

We then create the option element with document.createElement.

And we set the text and value properties of the opt option element to set the corresponding attributes with the same name.

Then we call ddl.options.add with opt to add the opt option element into the select element as its child.

Next, we have the configureDropDownLists function that takes both ddl and ddl2 select elements.

ddl1 is the first drop down and ddl2 is the 2nd.

We have some options for the 2nd drop down defined in the colors, shapes and names arrays.

Then we get the selected value from the ddl1 drop with ddl1.value.

And then we have a switch statement to populate the ddl2 drop down according to ddl1‘s value.

In each case statement, we loop through the option arrays with the for-of loop an call createOption in the body.

Finally, we call ddl.addEventListener with 'change' to add the change event listener for the first drop down.

In the event handler, we call configureDropDownList with both drop downs to update the options of the 2nd according to the selected value of the first.

Conclusion

To populate one dropdown based on selection in another with JavaScript, we can create our own functions to get the selected value of the first drop down.

Then we can populate the options of the 2nd drop down based on the value of the first drop down.

Sometimes, we want to run a function on pressing the enter key in an input field.

In this article, we’ll look at how to run a function on pressing the enter key in an input field.

How to run a function on pressing the enter key in an input field?

To run a function on pressing the enter key in an input field, we can listen to the keydown event.

And in the keydown event handler, we can check the key that’s pressed with the key property.

For instance, we write:

<input id='wage'>

to add an input element.

Then we write:

const wage = document.getElementById("wage");

const validate = (e) => {
  const text = e.target.value;
  console.log(text)
  //validation of the input...
}
wage.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    validate(e);
  }
});

to select the input element with document.getElementById and assign it to wage.

Then we add the validate function that takes the e event object and get the input value with the e.target.value property.

Then we call addEventListener on wage with 'keydown' to add a keydown event listener.

Inside the event listener function, we check if the enter key is pressed with the e.key property.

If it’s true, then we run validate.

Conclusion

To run a function on pressing the enter key in an input field, we can listen to the keydown event.

And in the keydown event handler, we can check the key that’s pressed with the key property.