Author: John Au-Yeung

Sometimes, we want to get the height of an element minus padding, margin, border widths with JavaScript.

In this article, we’ll look at how to get the height of an element minus padding, margin, border widths with JavaScript.

How to get the height of an element minus padding, margin, border widths with JavaScript?

To get the height of an element minus padding, margin, border widths with JavaScript, we get the offsetWidth and offsetHeight and subtract them by the padding and border width and height.

For instance, we write

const cs = getComputedStyle(element);

const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
const paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

const borderX =
  parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
const borderY =
  parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

const elementWidth = element.offsetWidth - paddingX - borderX;
const elementHeight = element.offsetHeight - paddingY - borderY;

to call getComputedStyle to get an object with the computed styles of element.

Then we get the horizontal padding with

const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

We get the vertical padding with parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom).

Horizontal border we get with parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth).

Vertical border we get with parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth).

Then we get the width and height without the border and padding with

const elementWidth = element.offsetWidth - paddingX - borderX;
const elementHeight = element.offsetHeight - paddingY - borderY;

Conclusion

To get the height of an element minus padding, margin, border widths with JavaScript, we get the offsetWidth and offsetHeight and subtract them by the padding and border width and height.

Sometimes, we want to fix PassportJS in Node not removing session on logout with JavaScript.

In this article, we’ll look at how to fix PassportJS in Node not removing session on logout with JavaScript.

How to fix PassportJS in Node not removing session on logout with JavaScript?

To fix PassportJS in Node not removing session on logout with JavaScript, we can use the req.session.destroy method.

For instance, we write

app.get("/logout", (req, res) => {
  req.session.destroy((err) => {
    res.redirect("/");
  });
});

to call req.session.destroy to destroy the session.

The callback is run when the session is destroyed.

Conclusion

To fix PassportJS in Node not removing session on logout with JavaScript, we can use the req.session.destroy method.

Sometimes, we want to fix .day() returns wrong day of month with Moment.js and JavaScript.

In this article, we’ll look at how to fix .day() returns wrong day of month with Moment.js and JavaScript.

How to fix .day() returns wrong day of month with Moment.js and JavaScript?

To fix .day() returns wrong day of month with Moment.js and JavaScript, we should use the date method instead of day.

For instance, we write

const today = moment().date();

to call date to return the day of the month of today.

Conclusion

To fix .day() returns wrong day of month with Moment.js and JavaScript, we should use the date method instead of day.

Sometimes, we want to override nested property with JavaScript Object.assign.

In this article, we’ll look at how to override nested property with JavaScript Object.assign.

How to override nested property with JavaScript Object.assign?

To override nested property with JavaScript Object.assign, we can use the spread operator.

For instance, we write

const b = Object.assign({}, a, {
  user: {
    ...a.user,
    groups: "some changed value",
  },
});

to call Object.assign with an empty object a, and a new object with the properties that override a‘s properties to return object b with the overridden nested propeties.

Conclusion

To override nested property with JavaScript Object.assign, we can use the spread operator.

Sometimes, we want to add a Google Maps Autocomplete search box with JavaScript.

In this article, we’ll look at how to add a Google Maps Autocomplete search box with JavaScript.

How to add a Google Maps Autocomplete search box with JavaScript?

To add a Google Maps Autocomplete search box with JavaScript, we can add an input.

For instance, we write

<head>
  ...
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  ...
</head>
<body>
  ...
  <input id="searchTextField" type="text" size="50" />
  ...
</body>

to add the Google Maps script and search input.

Then we write

const initialize = () => {
  const input = document.getElementById("searchTextField");
  new google.maps.places.Autocomplete(input);
};

google.maps.event.addDomListener(window, "load", initialize);

to select the input with getElementById in the initialize function.

Then we call the Autocomplete constructor with input to convert it to a Google Maps search input.

Then we call addDomListener with window, 'load', and initialize to call initialize when the DOM loads.

Conclusion

To add a Google Maps Autocomplete search box with JavaScript, we can add an input.