Author: John Au-Yeung

Sometimes, we want to pass parameter or argument to Axios interceptor with JavaScript.

In this article, we’ll look at how to pass parameter or argument to Axios interceptor with JavaScript.

How to pass parameter or argument to Axios interceptor with JavaScript?

To pass parameter or argument to Axios interceptor with JavaScript, we can add it to the config.params object.

For instance, we write:

axios.interceptors.request.use((config) => {
  config.params = {
    ...config.params,
    myVar: 'value'
  }
  return config
})

We add the myVar property to config.params by spreading its existing properties into a new object and then add myVar after it.

Conclusion

To pass parameter or argument to Axios interceptor with JavaScript, we can add it to the config.params object.

Sometimes, we want to parse and convert exponential values to decimal in JavaScript.

In this article, we’ll look at how to parse and convert exponential values to decimal in JavaScript.

How to parse and convert exponential values to decimal in JavaScript?

To parse and convert exponential values to decimal in JavaScript, we can use the toFixed method.

For instance, we write:

const n = (4.656657507739E-10).toFixed(20)
console.log(n)

to call toFixed on 4.656657507739E-10 and return a number with 20 decimal places.

Therefore, n is 0.00000000046566575077.

toFixed can parse numbers that has up to 20 decimal places.

Conclusion

To parse and convert exponential values to decimal in JavaScript, we can use the toFixed method.

Sometimes, we want to detect browser time zone on client side with JavaScript.

In this article, we’ll look at how to detect browser time zone on client side with JavaScript.

How to detect browser time zone on client side with JavaScript?

To detect browser time zone on client side with JavaScript, we can use the Internationalization API.

For instance, we write:

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)

to use Intl.DateTimeFormat().resolvedOptions().timeZone to get the time zone from the browser the device is running on.

Therefore, if we’re in the Pacific time zone, we see 'America/Los_Angeles' logged.

Conclusion

To detect browser time zone on client side with JavaScript, we can use the Internationalization API.

Sometimes, we want to remove text without removing inner elements from a parent element using JavaScript.

In this article, we’ll look at how to remove text without removing inner elements from a parent element using JavaScript.

How to remove text without removing inner elements from a parent element using JavaScript?

To remove text without removing inner elements from a parent element using JavaScript, we can loop through all the child nodes in the element and remove the ones with nodeType 3.

For instance, we write:

<div id='foo'>
  hello world
</div>

to add a div.

Then we write:

const el = document.getElementById("foo")
let child = el.firstChild
let nextChild;

while (child) {
  nextChild = child.nextSibling;
  if (child.nodeType === 3) {
    el.removeChild(child);
  }
  child = nextChild;
}

to select it with getElementById.

Then we loop through the child elements by first getting the first child with firstChild.

And then we use a while loop to get the nextSibling node.

If the nodeType is 3, then we call removeChild to remove it.

As a result, we shouldn’t see ‘hello world’ in the div after the loop is run.

Conclusion

To remove text without removing inner elements from a parent element using JavaScript, we can loop through all the child nodes in the element and remove the ones with nodeType 3.

Sometimes, we want to calculate the hex color in the middle of a gradient with JavaScript.

In this article, we’ll look at how to calculate the hex color in the middle of a gradient with JavaScript.

How to calculate the hex color in the middle of a gradient with JavaScript?

To calculate the hex color in the middle of a gradient with JavaScript, we can convert the color numbers to decimal, find the halves, and then convert the result back to hex and concatenate them.

For instance, we write:

const color1 = 'FF0000';
const color2 = '00FF00';
const ratio = 0.5;
const hex = (x) => {
  return x.toString(16).padStart(2, '0')
};

const r = Math.ceil(parseInt(color1.substring(0, 2), 16) * ratio + parseInt(color2.substring(0, 2), 16) * (1 - ratio));
const g = Math.ceil(parseInt(color1.substring(2, 4), 16) * ratio + parseInt(color2.substring(2, 4), 16) * (1 - ratio));
const b = Math.ceil(parseInt(color1.substring(4, 6), 16) * ratio + parseInt(color2.substring(4, 6), 16) * (1 - ratio));
const middle = hex(r) + hex(g) + hex(b);
console.log(middle)

We define the hex function that converts the decimal number x to a hex string with toString and the prepend 0’s to it until it reaches the length of 2 with padStart.

Next, we call Math.ceil with the hex color multiplied by the ratio.

Then we add the 2nd color string converted to a decimal number multiplied by 1 - ratio.

Finally, we convert the decimal numbers back to hex strings with hex and concatenate them together.

Therefore, middle is '808000'.

Conclusion

To calculate the hex color in the middle of a gradient with JavaScript, we can convert the color numbers to decimal, find the halves, and then convert the result back to hex and concatenate them.