Category: JavaScript

Sometimes, we want to automatically reload a web page at a certain time with JavaScript.

In this article, we’ll look at how to automatically reload a web page at a certain time with JavaScript.

How to automatically reload a web page at a certain time with JavaScript?

To automatically reload a web page at a certain time with JavaScript, we can use some date methods and setTimeout.

For instance, we write:

const refreshAt = (hours, minutes, seconds) => {
  const now = new Date();
  const then = new Date();

  if (now.getHours() > hours ||
    (now.getHours() === hours &&
      now.getMinutes() > minutes) ||
    now.getHours() === hours &&
    now.getMinutes() === minutes &&
    now.getSeconds() >= seconds) {
    then.setDate(now.getDate() + 1);
  }
  then.setHours(hours);
  then.setMinutes(minutes);
  then.setSeconds(seconds);

  const timeout = (then.getTime() - now.getTime());
  setTimeout(() => {
    window.location.reload(true);
  }, timeout);
}
refreshAt(13, 30, 0)

to define the refreshAt function.

In it, we create the now and then dates.

Next, we check if the time given by the hours, minutes, seconds has already been passed today with

now.getHours() > hours ||
(now.getHours() === hours &&
  now.getMinutes() > minutes) ||
now.getHours() === hours &&
now.getMinutes() === minutes &&
now.getSeconds() >= seconds)

If that’s true then we call setDate to set the date to tomorrow.

Then we call setHours, setMinutes and setSeconds to set the time of then.

Next, we calculate the timeOut by subtracting the timestamps of then and now in milliseconds.

Finally, we call setTimeout with a callback that calls window.location.reload to reload the page in timeout milliseconds.

Conclusion

To automatically reload a web page at a certain time with JavaScript, we can use some date methods and setTimeout.

Sometimes, we want to initialize a boolean array in JavaScript.

In this article, we’ll look at how to initialize a boolean array in JavaScript.

How to initialize a boolean array in JavaScript?

To initialize a boolean array in JavaScript, we can use the array fill method.

For instance, we write:

const arr = new Array(10).fill(false);
console.log(arr)

to create the array with Array with length 10.

Then we call fill with false to fill all 10 slots with false.

Therefore, arr is [false, false, false, false, false, false, false, false, false, false].

Conclusion

To initialize a boolean array in JavaScript, we can use the array fill method.

Sometimes, we want to create a HTML time zone dropdown with JavaScript.

In this article, we’ll look at how to create a HTML time zone dropdown with JavaScript.

How to create a HTML time zone dropdown with JavaScript?

To create a HTML time zone dropdown with JavaScript, we can create the options from a time zone array and then append them to a select element as its child.

For instance, we write:

<select>
</select>

to add a select element.

Then we write:

const select = document.querySelector('select')
const tzArr = [{
    "label": "(GMT-12:00) International Date Line West",
    "value": "-12"
  },
  {
    "label": "(GMT-11:00) Midway Island, Samoa",
    "value": "-11"
  },
  {
    "label": "(GMT-10:00) Hawaii",
    "value": "-10"
  },
  {
    "label": "(GMT-09:00) Alaska",
    "value": "-9"
  },
  {
    "label": "(GMT-08:00) Pacific Time (US & Canada)",
    "value": "-8"
  },
  {
    "label": "(GMT-08:00) Tijuana, Baja California",
    "value": "-8"
  },
  {
    "label": "(GMT-07:00) Arizona",
    "value": "-7"
  },
  {
    "label": "(GMT-07:00) Chihuahua, La Paz, Mazatlan",
    "value": "-7"
  },
  {
    "label": "(GMT-07:00) Mountain Time (US & Canada)",
    "value": "-7"
  },
  {
    "label": "(GMT-06:00) Central America",
    "value": "-6"
  },
  {
    "label": "(GMT-06:00) Central Time (US & Canada)",
    "value": "-6"
  },
  {
    "label": "(GMT-05:00) Bogota, Lima, Quito, Rio Branco",
    "value": "-5"
  },
  {
    "label": "(GMT-05:00) Eastern Time (US & Canada)",
    "value": "-5"
  },
  {
    "label": "(GMT-05:00) Indiana (East)",
    "value": "-5"
  },
  {
    "label": "(GMT-04:00) Atlantic Time (Canada)",
    "value": "-4"
  },
  {
    "label": "(GMT-04:00) Caracas, La Paz",
    "value": "-4"
  },
  {
    "label": "(GMT-04:00) Manaus",
    "value": "-4"
  },
  {
    "label": "(GMT-04:00) Santiago",
    "value": "-4"
  },
  {
    "label": "(GMT-03:30) Newfoundland",
    "value": "-3.5"
  },
  {
    "label": "(GMT-03:00) Brasilia",
    "value": "-3"
  },
  {
    "label": "(GMT-03:00) Buenos Aires, Georgetown",
    "value": "-3"
  },
  {
    "label": "(GMT-03:00) Greenland",
    "value": "-3"
  },
  {
    "label": "(GMT-03:00) Montevideo",
    "value": "-3"
  },
  {
    "label": "(GMT-02:00) Mid-Atlantic",
    "value": "-2"
  },
  {
    "label": "(GMT-01:00) Cape Verde Is.",
    "value": "-1"
  },
  {
    "label": "(GMT-01:00) Azores",
    "value": "-1"
  },
  {
    "label": "(GMT+00:00) Casablanca, Monrovia, Reykjavik",
    "value": "0"
  },
  {
    "label": "(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London",
    "value": "0"
  },
  {
    "label": "(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
    "value": "1"
  },
  {
    "label": "(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague",
    "value": "1"
  },
  {
    "label": "(GMT+01:00) Brussels, Copenhagen, Madrid, Paris",
    "value": "1"
  },
  {
    "label": "(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb",
    "value": "1"
  },
  {
    "label": "(GMT+01:00) West Central Africa",
    "value": "1"
  },
  {
    "label": "(GMT+02:00) Amman",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Athens, Bucharest, Istanbul",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Beirut",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Cairo",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Harare, Pretoria",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Jerusalem",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Minsk",
    "value": "2"
  },
  {
    "label": "(GMT+02:00) Windhoek",
    "value": "2"
  },
  {
    "label": "(GMT+03:00) Kuwait, Riyadh, Baghdad",
    "value": "3"
  },
  {
    "label": "(GMT+03:00) Moscow, St. Petersburg, Volgograd",
    "value": "3"
  },
  {
    "label": "(GMT+03:00) Nairobi",
    "value": "3"
  },
  {
    "label": "(GMT+03:00) Tbilisi",
    "value": "3"
  },
  {
    "label": "(GMT+03:30) Tehran",
    "value": "3.5"
  },
  {
    "label": "(GMT+04:00) Abu Dhabi, Muscat",
    "value": "4"
  },
  {
    "label": "(GMT+04:00) Baku",
    "value": "4"
  },
  {
    "label": "(GMT+04:00) Yerevan",
    "value": "4"
  },
  {
    "label": "(GMT+04:30) Kabul",
    "value": "4.5"
  },
  {
    "label": "(GMT+05:00) Yekaterinburg",
    "value": "5"
  },
  {
    "label": "(GMT+05:00) Islamabad, Karachi, Tashkent",
    "value": "5"
  },
  {
    "label": "(GMT+05:30) Sri Jayawardenapura",
    "value": "5.5"
  },
  {
    "label": "(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi",
    "value": "5.5"
  },
  {
    "label": "(GMT+05:45) Kathmandu",
    "value": "5.75"
  },
  {
    "label": "(GMT+06:00) Almaty, Novosibirsk",
    "value": "6"
  }, {
    "label": "(GMT+06:00) Astana, Dhaka",
    "value": "6"
  },
  {
    "label": "(GMT+06:30) Yangon (Rangoon)",
    "value": "6.5"
  },
  {
    "label": "(GMT+07:00) Bangkok, Hanoi, Jakarta",
    "value": "7"
  },
  {
    "label": "(GMT+07:00) Krasnoyarsk",
    "value": "7"
  },
  {
    "label": "(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi",
    "value": "8"
  },
  {
    "label": "(GMT+08:00) Kuala Lumpur, Singapore",
    "value": "8"
  },
  {
    "label": "(GMT+08:00) Irkutsk, Ulaan Bataar",
    "value": "8"
  },
  {
    "label": "(GMT+08:00) Perth",
    "value": "8"
  },
  {
    "label": "(GMT+08:00) Taipei",
    "value": "8"
  },
  {
    "label": "(GMT+09:00) Osaka, Sapporo, Tokyo",
    "value": "9"
  },
  {
    "label": "(GMT+09:00) Seoul",
    "value": "9"
  },
  {
    "label": "(GMT+09:00) Yakutsk",
    "value": "9"
  },
  {
    "label": "(GMT+09:30) Adelaide",
    "value": "9.5"
  },
  {
    "label": "(GMT+09:30) Darwin",
    "value": "9.5"
  },
  {
    "label": "(GMT+10:00) Brisbane",
    "value": "10"
  },
  {
    "label": "(GMT+10:00) Canberra, Melbourne, Sydney",
    "value": "10"
  },
  {
    "label": "(GMT+10:00) Hobart",
    "value": "10"
  },
  {
    "label": "(GMT+10:00) Guam, Port Moresby",
    "value": "10"
  },
  {
    "label": "(GMT+10:00) Vladivostok",
    "value": "10"
  },
  {
    "label": "(GMT+11:00) Magadan, Solomon Is., New Caledonia",
    "value": "11"
  },
  {
    "label": "(GMT+12:00) Auckland, Wellington",
    "value": "12"
  },
  {
    "label": "(GMT+12:00) Fiji, Kamchatka, Marshall Is.",
    "value": "12"
  },
  {
    "label": "(GMT+13:00) Nuku'alofa",
    "value": "13"
  }
]
for (const {
    label,
    value
  } of tzArr) {
  const o = new Option()
  o.value = value
  o.textContent = label
  select.appendChild(o)
}

to add the options to the select drop down.

We select the select element with querySelector.

Then we loop through tzArr with a for-of loop.

In the loop body, we create a new option element with Option.

Then we set the value and textContent to the value and label respectively.

And then we call selectAppendChild with o to append o as the child of the select element.

Conclusion

To create a HTML time zone dropdown with JavaScript, we can create the options from a time zone array and then append them to a select element as its child.

To get a date in YYYY-MM-DD format, we can use the date toISOString method.

For instance, we write:

const d = new Date(2022, 2, 2)
const [date] = d.toISOString().split('T')
console.log(date)

to create a new date with the Date constructor.

Then we call toISOString on the date instance to return a date time string.

Next, we split the string with split called with 'T' to split the date time string into the date and time parts.

Finally, we get the date part with destructuring.

Therefore, date is "2022-03-02".

Conclusion

To get a date in YYYY-MM-DD format, we can use the date toISOString method.

Sometimes, we want to count the number of properties in a JavaScript object.

In this article, we’ll look at how to count the number of properties in a JavaScript object.

How to count the number of properties in a JavaScript object?

To count the number of properties in a JavaScript object, we can use the Object.entries method.

For instance, we write:

const member = {
  "mother": {
    "name": "Mary",
    "age": "38"
  },
  "father": {
    "name": "Bill",
    "age": "40"
  },
  "brother": {
    "name": "Alex",
    "age": "10"
  }
}

const {
  length
} = Object.entries(member)
console.log(length)

to call Object.entries with member to return an array of key-value pair arrays obtained from member.

Then we use the length property of the returned array to get the number of properties in member.

Therefore, length is 3.

Conclusion

To count the number of properties in a JavaScript object, we can use the Object.entries method.