Category: JavaScript Answers

Sometimes, we want to append multiple child elements with JavaScript.

In this article, we’ll look at how to append multiple child elements with JavaScript.

Append Multiple Child Elements with JavaScript

To append multiple child elements with JavaScript, we can use the append method.

For instance, if we have a ul element:

<ul>

</ul>

Then we write:

const listElement = document.querySelector('ul')
const listItem = document.createElement("li");
const listItemCheckbox = document.createElement("input");
const listItemLabel = document.createElement("label");

listElement.append(listItem, listItemCheckbox, listItemLabel);

to select the ul element with document.querySelector and assign the returned element to listElement.

Then we create some elements with document.createElement.

Finally, we call listElement.append with the elements we created as arguments to append them as the child of the ul element.

Conclusion

To append multiple child elements with JavaScript, we can use the append method.

Sometimes, we want to draw a line between two divs with JavaScript.

In this article, we’ll look at how to draw a line between two divs with JavaScript.

Draw a Line Between Two divs with JavaScript

To draw a line between two divs with JavaScript, we create a div that starts from the bottom right corner of the first div to the top right corner of the 2nd div.

We can do that by shifting the div, setting the length and rotating it so that it looks like it’s between the 2 divs.

For instance, if we have 2 divs:

<div id='d1' style='width: 20px; position: absolute; top: 1px; left: 2px'>
  foo
</div>

<div id='d2' style='width: 20px; position: absolute; top: 100px; left: 200px'>
  bar
</div>

Then we can connect the bottom right corner of the first div to the top right corner of the 2nd div by writing:

const getOffset = (el) => {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.pageXOffset,
    top: rect.top + window.pageYOffset,
    width: rect.width || el.offsetWidth,
    height: rect.height || el.offsetHeight
  };
}

const connect = (div1, div2, color, thickness) => {
  const off1 = getOffset(div1);
  const off2 = getOffset(div2);

  const x1 = off1.left + off1.width;
  const y1 = off1.top + off1.height;

  const x2 = off2.left + off2.width;
  const y2 = off2.top;

  const length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));

  const cx = ((x1 + x2) / 2) - (length / 2);
  const cy = ((y1 + y2) / 2) - (thickness / 2);

  const angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);

  const htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";

  document.body.innerHTML += htmlLine;
}

const d1 = document.getElementById('d1')
const d2 = document.getElementById('d2')
connect(d1, d2, 'green', 5)

We create the getOffset function with element el as its parameter.

Then we get the position and dimensions of the element with getBoundingClientRect method.

pageXOffset gets us the horizontal offset of el relative to the page.

pageYOffset gets us the vertical offset of el relative to the page.

left and top gets the left and top CSS values.

And width and height gets the width and height.

Next, we create the connect function that takes the 2 divs to connect, the color and the thickness respectively.

We call getOffset with the 2 divs in the beginning of the function.

x1 and y1 are the x and y coordinates of the bottom right of div1 with the offsets counted.

x2 and y2 are the x and y coordinates of the top right of div2 with the offsets counted.

Next, we use the distance formula to calculate the length between the 2 corners with:

const length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));

Then we calculate the width of the line div with:

const cx = ((x1 + x2) / 2) - (length / 2);

The height or thickness is calculated with:

const cy = ((y1 + y2) / 2) - (thickness / 2);

Next, we find the angle to rotate with:

const angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);

Finally, we define the line HTML in a string and assign it to htmlLine by combining all the values we calculated in the style attribute value.

And then we concatenate the htmlLine value to the body’s innerHTML.

Finally, we select the 2 divs with document.getElementById.

And then we call connect with the 2 divs, the color 'green', and 5 pixels thickness to render the line connecting the 2 divs.

Now we should see a green line between the 2 divs.

Conclusion

To draw a line between two divs with JavaScript, we create a div that starts from the bottom right corner of the first div to the top right corner of the 2nd div.

We can do that by shifting the div, setting the length and rotating it so that it looks like it’s between the 2 divs.

Sometimes, we want to add a listener for date change in FullCalendar.

In this article, we’ll look at how to add a listener for date change in FullCalendar.

Add a Listener for Date Change in FullCalendar

To add a listener for date change in FullCalendar, we can add a dateClick method into the object that’s passed into the FullCalendar constructor.

For instance, we write:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>

<div id="calendar"></div>

to add all the required script and link tags for the FullCalendar library.

We also add a div to render the calendar in.

Then we write:

document.addEventListener('DOMContentLoaded', () => {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ["interaction", "dayGrid"],
    initialView: 'dayGridMonth',    
    dateClick(view) {
      console.log(view.date)
    }
  });
  calendar.render();
});

to select the div with document.getElementById.

Then we render the calendar with the FullCalendar.Calendar constructor.

We pass in calendarEl and an object with the dateClick method.

The dateClick method runs when we click on the date.

And we set the plugins to the required plugins for rendering the calendar.

view.date has the date we clicked on.

The interaction and dayGrid plugins are both loaded from the script tags.

Finally, we call calendar.render to render the calendar.

Now when we click on a date on the calendar, we’ll see the clicked date logged.

Conclusion

To add a listener for date change in FullCalendar, we can add a dateClick method into the object that’s passed into the FullCalendar constructor.