Category: JavaScript Answers

To add 1 day to the current date with JavaScript, we can use the setDate method.

For instance, we can write:

const date = new Date();
date.setDate(date.getDate() + 1);
console.log(date)

to get the current day with getDate , then add 1 to it.

And then we pass that as the argument of setDate to add 1 to the current date .

We can also add 1 day to the current by adding 1 day in milliseconds.

For instance, we can write:

const date = new Date(Date.now() + (3600 * 1000 * 24))
console.log(date)

to get the current date and time in milliseconds with Date.now .

Then we add 3600 * 1000 * 24 milliseconds, which is the same as 1 day to it.

And we pass that to the Date constructor to get the date 1 day after the current date.

To exponentiate numbers with JavaScript, we can use the ** operator or the Math.pow method.

For instance, we can write:

const num = 2 ** 3

or:

const num2 = Math.pow(2, 3)

The first operand if ** is the base and the 2nd is the exponent.

The first argument of Math.pow is the base and the 2nd is the exponent.

As a result, we get 8 for num and num2 .

To get the date that is 30 days prior to the current date with JavaScript, we can call the setDate method with the current date subtracted by 30 to get the date 30 days before the current date.

For instance, we can write:

const today = new Date()  
const priorDate = new Date().setDate(today.getDate() - 30)  
console.log(priorDate)

We create today’s date with the Date constructor with no arguments.

Then we call setDate with getDate to get the current date and minus that by 30 to get the date 30 days before today .

Get the Date That is 30 Days Prior to the Current Date with Moment.js

We can also use the subtract or add methods that come with moment.js to get the date that’s 30 days before today.

For example, we can write:

const priorDate = moment().subtract(30, 'days');  
console.log(priorDate)  
const priorDate2 = moment().add(-30, 'days');  
console.log(priorDate2)

to compute the date that’s 30 days before today with the subtract or add methods.

The first argument is the number of days to add or subtract.

The 2nd argument is the unit.

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.