Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to Convert a Boolean to an Integer with JavaScript?

selective focus photography of sleeping baby

Sometimes, we want to convert a boolean to an integer with JavaScript.

In this article, we’ll look at how to convert a boolean to an integer with JavaScript.

Convert a Boolean to an Integer with JavaScript

To convert a boolean to an integer with JavaScript, we can use the Number function.

For instance, we write:

console.log(Number(true))  
console.log(Number(false))

then we get 1 and 0 in the console log respectively.

We just pass true and false as arguments into the Number function to do the conversion.

Conclusion

To convert a boolean to an integer with JavaScript, we can use the Number function.

Categories
JavaScript Answers

How to Invert Color on All Elements of a Page with JavaScript?

selective focus photography of seal lying on ground

Sometimes, we want to invert color on all elements of a page with JavaScript.

In this article, we’ll look at how to invert color on all elements of a page with JavaScript.

Invert Color on All Elements of a Page with JavaScript

To invert color on all elements of a page with JavaScript, we just set use the invert(100%) value with CSS.

For instance, if we have:

<div style='background-color: white'>
  hello
</div>

Then we can invert all the colors by writing:

const css = `html {
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -o-filter: invert(100%);
  -ms-filter: invert(100%);
}`
const head = document.head
const style = document.createElement('style')
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

We create the css string to set the filter property to invert(100%) on the html element.

Then we get the head element with document.head .

Then we create the style element with document.createElement .

We set the type attribute of style by assigning a value to style.type .

And then we apply the styles from the css string with:

if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

to set the content of the style element and append it to the head with head.appendChild .

Conclusion

To invert color on all elements of a page with JavaScript, we just set use the invert(100%) value with CSS.

Categories
JavaScript Answers

How to Retrieve the Name from an Email Address with JavaScript?

Seal lying on rock covered with snow

Sometimes, we want to retrieve the name from an email address with JavaScript.

In this article, we’ll look at how to retrieve the name from an email address with JavaScript.

Retrieve the Name from an Email Address with JavaScript

To retrieve the name from an email address with JavaScript, we can use the JavaScript string’s lastIndexOf and substring methods to get the part before the last @ from the email address string.

For instance, we write:

const email = "john.doe@example.com";  
const name = email.substring(0, email.lastIndexOf("@"));  
console.log(name)

We get the index of the last @ in the email string with:

email.lastIndexOf("@")

And we call email.substring with 0 and the index returned by lastIndexOf to get the name part of the email string and assign it to name .

Therefore, name is 'john.doe’ according to the console log.

Conclusion

To retrieve the name from an email address with JavaScript, we can use the JavaScript string’s lastIndexOf and substring methods to get the part before the last @ from the email address string.

Categories
Vue Answers

How to Get the Window Size Whenever it Changes in a Vue.js App?

white seal on soil

Sometimes, we want to get the window size whenever it changes in a Vue.js app.

In this article, we’ll look at how to get the window size whenever it changes in a Vue.js app.

Get the Window Size Whenever it Changes in a Vue.js App

To get the window size whenever it changes in a Vue.js app, we can add resize event listener to window when the component is mounting.

For instance, we write:

<template>
  <div id="app">{{ width }} x {{ height }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { width: window.innerWidth, height: window.innerHeight };
  },
  created() {
    window.addEventListener("resize", this.onResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize(e) {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    },
  },
};
</script>

to call window.addEventListener in the created hook.

We use the onResize method as the resize event listener.

In the destroyed hook, we call window.removeEventListener to remove the event listener.

In onResize and the data methods, we get the width of the window with window.innerWidth .

And we get the height of the window with window.innerHeight .

Now when we resize the window, we should see the numbers change on the screen since we added width and height to the template.

Conclusion

To get the window size whenever it changes in a Vue.js app, we can add resize event listener to window when the component is mounting.

Categories
JavaScript Answers

How to Apply the ESLint no-unused-vars Rule to a Block of JavaScript Code?

photo of seals

Sometimes, we want to apply the ESLint no-unused-vars rule to a block of JavaScript code.

In this article, we’ll look at how to apply the ESLint no-unused-vars rule to a block of JavaScript code.

Apply the ESLint no-unused-vars Rule to a Block of JavaScript Code

To apply the ESLint no-unused-vars rule to a block of JavaScript code, we can wrap the code block that we want to apply the rule to with /* eslint-disable no-unused-vars */ and /* eslint-enable no-unused-vars */ respectively.

For instance, we write:

/* eslint-disable no-unused-vars */

let x;
//...

/* eslint-enable no-unused-vars */

to wrap the code that we want the rule to apply with the comments.

Therefore, the no-unused-vars rule will only apply to the block that are wrapped by the comments.

Conclusion

To apply the ESLint no-unused-vars rule to a block of JavaScript code, we can wrap the code block that we want to apply the rule to with /* eslint-disable no-unused-vars */ and /* eslint-enable no-unused-vars */ respectively.