Author: John Au-Yeung

To get the SVG’s text element’s width and height with JavaScript, we can call the getBBox method of the text element to get the text’s width and height.

For instance, if we have the following SVG:

<svg>  
  <text x="0" y="20">Some Text</text>  
</svg>

Then we can get the text’s width and height by writing

const textElement = document.querySelector('text')  
const bbox = textElement.getBBox();  
const {  
  width,  
  height  
} = bbox;  
console.log(width, height)

We get the text element with document.querySelector .

Then we call getBBox on the returned textElement to get an object with the dimensions of the text.

We then destructure the width and height to get the text’s width and height respectively.

To add checkboxes inside select options with JavaScript, we can wrap our select drop down in a div and then add a div below the select element to show the drop-down choices.

For instance, we can write the following HTML:

<form>
  <div class="multiselect">
    <div class="selectBox">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>

We add the select element with the div with ID checkboxes with the choices.

The input with type checkbox are the checkboxes.

Then we can add the following CSS to make the choices look like they’re part of the drop-down:

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

To do that, we div with ID overSelect absolute.

And we make the div with ID selectBox have relative position.

Also, we make the div with ID checkboxes hidden by setting the display property to none .

Finally, we add the following JavaScript code to toggle the div with ID checkboxes on and off:

let expanded = false;

const showCheckboxes = () => {
  const checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

const selectBox = document.querySelector('.selectBox')
selectBox.addEventListener('click', showCheckboxes)

We add the expanded variable to track the display state of the checkbox.

And we get the div with ID checkboxes with document.getElementById .

If expanded is false , then we set display to 'block' .

Otherwise, we set display to 'none' .

We also update expanded accordingly in each case.

Finally, we get the div with class selectBox with document.querySelector , call addEventListener with 'click' to add a click listener to it, and use showCheckboxes as the click listener.

Now when we click on the select element, we should see the drop-down with the checkboxes that we created.

To fix the ‘nodemon command is not recognized in terminal for node js server’ error, we can install nodemon locally or install it locally and add a script into package.json to run the local version.

To install it locally, we can run:

npm install -g nodemon

with NPM or:

yarn global add nodemon

with Yarn.

And to add a local version, we run:

npm install nodemon

with NPM or:

yarn add nodemon

with Yarn.

Then we add:

"serve": "nodemon server.js"

into the 'scripts' second of package.json .

And then we run:

npm run serve

With Yarn, adding to the 'scripts' section is optional, and we can just run:

yarn run nodemon server.js

If we did add the script to package.json , we run:

yarn run serve

We can reorder arrays with JavaScript with destructuring.

For instance, we can write:

const swapPositions = (array, a, b) => {
  [array[a], array[b]] = [array[b], array[a]]
}

const array = [1, 2, 3, 4, 5];
swapPositions(array, 0, 1);
console.log(array)

We create the swapPositions array with the array to reorder, and the a and b parameters which are the indexes of array items to swap.

In the function body, we swap the position of the elements with indexes a and b by putting them both in an array and then destructuring them.

This will swap the 2 array items in place.

Therefore, when we call swapPositions with array , 0, and 1, we get:

[2, 1, 3, 4, 5]

as a result.

To detect when the mouse leaves the window with JavaScript, we can add the mouseleave event to document .

For instance, we can write:

document.addEventListener("mouseleave", (event) => {  
  if (event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {  
    console.log("I'm out");  
  }  
});

We add a mouseleave event listener with the addEventListener method.

Then in the event listener, we check if one of the following conditions are met:

• event.clientY is less than or equal to 0
• event.clientX is less than or equal to 0
• event.clientX is bigger than or equal to window.innerWidth
• event.clientY is bigger than or equal to window.innerHeight

If any of the conditions are true , then we know the mouse is out of the browser tab.

And therefore, “I'm out" is logged.