Category: JavaScript

Sometimes, we want to get the last item in a JavaScript object with a for loop.

In this article, we’ll look at how to get the last item in a JavaScript object with a for loop.

How to get the last item in a JavaScript object with a for loop?

To get the last item in a JavaScript object with a for loop, we can use the Object.entries method.

For instance, we write:

const obj = {
  foo: 1,
  bar: 2,
  baz: 3
}
const last = Object.entries(obj).at(-1)
console.log(last)

to call Object.entries with obj to return an array of key-value pair arrays from the object.

Then we call at with -1 to return the last item in the array.

Therefore, last is ['baz', 3].

Conclusion

To get the last item in a JavaScript object with a for loop, we can use the Object.entries method.

Sometimes, we want to make a live clock with JavaScript.

In this article, we’ll look at how to make a live clock with JavaScript.

How to make a live clock with JavaScript?

To make a live clock with JavaScript, we can use the setInterval function.

For instance, we write:

<span></span>

to add a span.

Then we write:

const span = document.querySelector('span');

const time = () => {
  const d = new Date();
  const s = d.getSeconds().toString().padStart(2, '0');
  const m = d.getMinutes().toString().padStart(2, '0');
  const h = d.getHours().toString().padStart(2, '0');
  span.textContent = `${h}:${m}:${s}`
}

setInterval(time, 1000);

to select the span with querySelector.

Then we define the time function that populates the span with the time.

In it, we create a Date instance that returns the current date time.

Then we get get hours, minutes, and seconds with getHours, getMinutes, and getSeconds.

We convert them to strings with toString.

And we prepend a 0 to each string if their length is less than 2 with padStart.

Next, we set span.textContent to the time string to show the current time.

Finally, we call setInterval with time and 1000 to call time every second.

Conclusion

To make a live clock with JavaScript, we can use the setInterval function.

Sometimes, we want to export HTML table to excel using JavaScript.

In this article, we’ll look at how to export HTML table to excel using JavaScript.

How to export HTML table to excel using JavaScript?

To export HTML table to excel using JavaScript, we can select the table, get its HTML, and encode it into a base64 string.

For instance, we write:

<table id="table">
  <thead>
    <tr>
      <th>name</th>
      <th>place</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>adfas</td>
      <td>asdfasf</td>
    </tr>
  </tbody>
</table>

to add a table.

Then we write:

const table = document.getElementById('table');
const html = table.outerHTML;
window.open('data:application/vnd.ms-excel;base64,' + btoa(html));

to select the table with getElementById.

And then we get its HTML code with outerHTML.

Next, we call btoa to convert the table HTML string into a base64 string.

And we concatenate the 'data:application/vnd.ms-excel;base64,' MIME type before it.

Then we download it with window.open.

Conclusion

To export HTML table to excel using JavaScript, we can select the table, get its HTML, and encode it into a base64 string.

Sometimes, we want to check if mouse is inside div with JavaScript.

In this article, we’ll look at how to check if mouse is inside div with JavaScript.

How to check if mouse is inside div with JavaScript?

To check if mouse is inside div with JavaScript, we can listen to the mouseenter and mouseout events triggered by the div.

For instance, we write:

<div>
  hello world
</div>

to add a div.

Then we write:

const div = document.querySelector("div")
let isOnDiv = false;
div.onmouseenter = () => {
  isOnDiv = true
  console.log(isOnDiv)
}
div.onmouseout = () => {
  isOnDiv = false
  console.log(isOnDiv)
}

to select the div with querySelector.

Next, we set div.onmouseenter to a function that sets isOnDiv to true.

And we set div.onmouseout to a function that sets isOnDiv to false.

Now when our mouse pointer is in the div, true is logged.

And when our mouse pointer leaves the div, false is logged.

Sometimes, we want to get parent element and write holder div for siblings with JavaScript.

In this article, we’ll look at how to get parent element and write holder div for siblings with JavaScript.

How to get parent element and write holder div for siblings with JavaScript?

To get parent element and write holder div for siblings with JavaScript, we can use the parentNode property to get the parent node.

For instance, we write:

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

to add nested divs.

Then we write:

const child1 = document.getElementById("child1")
const parent = child1.parentNode
const contents = parent.innerHTML;
parent.innerHTML = `<div id="holder">${contents}</div>`;

to get the div with ID child1 with getElementById.

Then we get its parent node with parentNode.

Next, we get the parent node’s content with innerHTML.

And then we set parent.innerHTML to a string with a div wrapped around the contents.

Now the div with ID holder is wrapped around the div with ID child1.

Conclusion

To get parent element and write holder div for siblings with JavaScript, we can use the parentNode property to get the parent node.