Category: JavaScript

Sometimes, we want to prevent arrow keys from changing values in a number input with JavaScript.

In this article, we’ll look at how to prevent arrow keys from changing values in a number input with JavaScript.

How to prevent arrow keys from changing values in a number input with JavaScript?

To prevent arrow keys from changing values in a number input with JavaScript, we can check if the arrow keys are pressed and call preventDefault is they are.

For instance, we write:

<input type='number'>

to add a number input.

Then we write:

const input = document.querySelector('input')
input.onkeydown = (e) => {
  if (e.which === 38 || e.which === 40) {
    e.preventDefault();
  }
}

to select the input with querySelector.

And we set input.onkeydown with a function that checks if the up and down arrow keys with e.which.

Then we call e.preventDefault to stop the arrow keys from changing the input value.

Conclusion

To prevent arrow keys from changing values in a number input with JavaScript, we can check if the arrow keys are pressed and call preventDefault is they are.

Sometimes, we want to call Lodash assign only if property exists in target object with JavaScript.

In this article, we’ll look at how to call Lodash assign only if property exists in target object with JavaScript.

How to call Lodash assign only if property exists in target object with JavaScript?

To call Lodash assign only if property exists in target object with JavaScript, we can use the pick and keys method to return an object that only has the keys in the target object.

For instance, we write:

const options = {
  foo: 1,
  bar: 2
}
const defaults = {
  foo: 2,
  baz: 3
}
const o = _.assign(options, _.pick(defaults, _.keys(options)));
console.log(o)

to call pick with the defaults object and the properties that are only in options to return an object with the properties that are only in options.

Then we call assign with options and the returned object to return a new object with the options properties overridden by the properties in the object returned by pick.

Therefore, o is

{
  bar: 2,
  foo: 2
}

Conclusion

To call Lodash assign only if property exists in target object with JavaScript, we can use the pick and keys method to return an object that only has the keys in the target object.

Sometimes, we want to check if times overlap using moment and JavaScript.

In this article, we’ll look at how to check if times overlap using moment and JavaScript.

How to check if times overlap using moment and JavaScript?

To check if times overlap using moment and JavaScript, we can use the moment-range plugin.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/4.0.2/moment-range.js"></script>

to add the moment and moment-range scripts.

Then we write:

window['moment-range'].extendMoment(moment);

const start = new Date(2022, 0, 15);
const end = new Date(2022, 4, 23);
const range = moment.range(start, end);

const a = new Date(2022, 1, 15);
const b = new Date(2021, 1, 15);
console.log(range.contains(a))
console.log(range.contains(b))

to add moment-range with

window['moment-range'].extendMoment(moment)

Then we create a moment-range object with moment.range and 2 dates.

Next, we check if dates a and b are in the range by calling range.contains.

Therefore, the first log is true and the 2nd is false since a is in the range and b isn’t.

Conclusion

To check if times overlap using moment and JavaScript, we can use the moment-range plugin.

Sometimes, we want to initialize and using session storage in React and JavaScript.

In this article, we’ll look at how to initialize and using session storage in React and JavaScript.

How to initialize and using session storage in React and JavaScript?

To initialize and using session storage in React and JavaScript, we can call the sessionStorage methods.

For instance, we write:

import React from "react";

export default function App() {
  React.useEffect(() => {
    sessionStorage.setItem("key", "value");
    console.log(sessionStorage.getItem("key"));
  }, []);

  return <></>;
}

to call sessionStorage.setItem with the key and value of the entry we want to store in session storage respectively.

Then we call sesessionStorage.getItem with the key to get the entry with the given key.

Conclusion

To initialize and using session storage in React and JavaScript, we can call the sessionStorage methods.