Categories
JavaScript Answers

How to fix JavaScript Date.parse giving incorrect results?

Sometimes, we want to fix JavaScript Date.parse giving incorrect results.

In this article, we’ll look at how to fix JavaScript Date.parse giving incorrect results.

How to fix JavaScript Date.parse giving incorrect results?

To fix JavaScript Date.parse giving incorrect results, we can split the date string into its parts and the use the Date constructor.

For instance, we write

const parseDate = (input) => {
  const [year, month, day] = input.split("-");
  return new Date(year, month - 1, day);
};

to create the parseDate function that splits the input date string by the dashes.

Then we pass the destructured values from the array into the Date constructor.

We subtract month by 1 since JavaScript expects the month to be 0 to 11, with 0 being January and 11 being December.

Finally, we return the created Date instance.

Conclusion

To fix JavaScript Date.parse giving incorrect results, we can split the date string into its parts and the use the Date constructor.

Categories
JavaScript Answers

How to get query string values in JavaScript?

Sometimes, we want to get query string values in JavaScript.

In this article, we’ll look at how to get query string values in JavaScript.

How to get query string values in JavaScript?

To get query string values in JavaScript, we can use the URLSearchParams constructor.

For instance, we write

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

to create the URLSearchParams instance with the query string of the current URL.

window.location.search has the query string.

Then we get the returned query parameters in an iterable object with urlSearchParams.entries().

Finally, we covert the iterable object to a plain objectg with Object.fromEntries.

The keys of params has the query parameter keys and the values are the query parameter values.

Conclusion

To get query string values in JavaScript, we can use the URLSearchParams constructor.

Categories
JavaScript Answers

How to Store Objects in HTML5 localStorage with JavaScript?

To store objects in HTML5 localStorage with JavaScript, we can use JSON.stringify to convert the JavaScript object into a string.

Then we use the localStorage.setItem method to save the stringified JSON object into local storage.

For instance, we write

const testObject = {
  'one': 1,
  'two': 2,
  'three': 3
};

localStorage.setItem('testObject', JSON.stringify(testObject));

const retrievedObject = localStorage.getItem('testObject');

console.log(jSON.parse(retrievedObject));

to call JSON.stringify with testObject to return the string version of testObject.

Then we call setItem with the key of the local storage entry and the value set to the stringifyed JSON object.

We have to convert testObject to a string before storing it with setItem since local storage only store strings.

When we want to retrieve the item, we call localStorage.getItem with the 'testObject' key.

And then we call JSON.parse with the retrievedObject string to convert the string back to JavaScript object.

Categories
JavaScript Answers

How to Get a Timestamp in JavaScript?

Sometimes, we want to get a timestamp in JavaScript.

In this article, we’ll look at how to get a timestamp in JavaScript.

How to Get a Timestamp in JavaScript?

To get a timestamp in JavaScript, we can use some operators and functions.

For instance, we write

+new Date();
new Date().getTime();
Number(new Date())

to return the timestamp of the current datetime.

We use + before new Date() to get the timestamp of the current datetime in milliseconds.

Likewise, we use the getTime method to return the same thing.

Also, we can call Number with new Date() to return the current datetime’s timestamp

Conclusion

To get a timestamp in JavaScript, we can use some operators and functions.

Categories
CSS

How to vertically align text in a div with CSS?

Sometimes, we want to vertically align text in a div with CSS.

In this article, we’ll look at how to vertically align text in a div with CSS.

How to vertically align text in a div with CSS?

To vertically align text in a div with CSS, we use flexbox.

For instance, we write

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

to add some elements.

Then we write

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

to make the li elements flex containers with display: flex;.

And then we set the flex direction to vertical with flex-direction: column;.

We vertically center content with justify-content: center;.

And we horizontally center content with align-content: center;

Conclusion

To vertically align text in a div with CSS, we use flexbox.