Author: John Au-Yeung

We can use the JavaScript array filter method to filter out all the null or empty strings first before joining them together with join .

For instance, we can write:

const address = "foo";
const city = '';
const state = "bar";
const zip = '';

const text = [address, city, state, zip].filter(Boolean).join(", ");
console.log(text)

We have an array of strings with some having empty strings as their value.

So we just call filter with Boolean to filter out the ones with an empty string as their value.

And then we call join to join the non-empty strings together with a comma.

Therefore, text is 'foo, bar’ .

We can also be more precise with our filtering by writing:

const address = "foo";
const city = '';
const state = "bar";
const zip = '';

const text = [address, city, state, zip]
  .filter(x => typeof x === 'string' && x.length > 0)
  .join(", ");
console.log(text)

We check if x is a string and if its length is longer than 0 to make sure filter returns array of non-empty strings.

Conclusion

We can use the JavaScript array filter method to filter out all the null or empty strings first before joining them together with join .

We can use the jQuery append method with a script tag that has its type set to a non-recognized type to add a template.

To do this, we can write:

<script id="hidden-template" type="text/x-custom-template">
  <tr>
   <td>Foo</td>
    <td>Bar</td>
  <tr>
</script>

<table id='targetTable'>

</table>

Then we can write:

const template = $('#hidden-template').html();
$('#targetTable').append(template);

to add the HTML in the script tag into the table element.

Since the type is set to text/x-custom-template which isn’t recognized by the browser, it won’t be parsed by it.

We get the HTML content of the script tag with the html method.

Then we can use append to append the HTML content.

Template String

Another way to add HTML to the DOM is to use template strings.

For instance, we can write:

<div class='list-items'>

</div>

Then we write:

const Item = ({ url, img, title }) => `
  <a href="${url}" class="list-group-item">
    <div class="image">
      <img src="${img}" />
    </div>
    <p class="list-group-item-text">${title}</p>
  </a>
`;
$('.list-items').html([
  { url: '/foo', img: 'https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY', title: 'Foo item' },
  { url: '/bar', img: 'https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY', title: 'Bar item' },
].map(Item).join(''));

We have the Item function that takes an object with the url , img , and title properties and put them into the template string that it returns.

Then we get the div with $(‘.list-items’) , and then call html with an array objects and map them to strings with a elements by calling map with Item .

And then we call join to join them strings together.

Now we see the items displayed on the page.

Use the Spread Operator

One way to remove a file from a JavaScript FileList is to use the spread operator to convert the FileList to an array.

Then we can call splice to remove the file we want.

For instance, we can write the following HTML:

<input type='file' multiple id='files'>

We add multiple to let select multiple files.

Then we can remove one of the items selected by writing:

const input = document.getElementById('files')
input.addEventListener('change', () => {
  const fileListArr = [...input.files]
  fileListArr.splice(1, 1)
  console.log(fileListArr)
})

We get the file input element with getElementById .

We spread input.files into an array.

Then we call splice on the array with index 1 as the first argument and we specify that we remove 1 item with the 2nd arguemnt.

Therefore, fileListArr has the 1st and 3rd file listed.

Use the Array.from Method

We can replace the spread operator with the Array.from method.

For instance, we can write:

<input type='file' multiple id='files'>

And:

const input = document.getElementById('files')
input.addEventListener('change', () => {
  const fileListArr = Array.from(input.files)
  fileListArr.splice(1, 1)
  console.log(fileListArr)
})

to do the same thing.

The only difference is that the spread operator is replaced with Array.from .

To get the day of the week, we can use the getDay method with an array of day strings to get the day of the week.

For instance, we can write:

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const dt = new Date(2021, 1, 1)
const day = days[dt.getDay()];
console.log(day)

We have the days array with day names in it.

Then create the dt date object with the Date constructor.

Next, we call getDay on dt to get the day index starting with 0 for Sunday to 6 for Saturday.

And we pass that into days to get the day name of the date.

Therefore day is 'Monday' .

Get the Month of the Year

To get the day of the week, we can use the getMonth method with an array of day strings to get the month of the year.

For instance, we can write:

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const dt = new Date(2021, 1, 1)
const month = months[dt.getMonth()];
console.log(month)

We have the months array with the month names.

We have the days array with day names in it.

Then create the dt date object with the Date constructor.

Next, we call getMonth on dt to get the month index starting with 0 for January to 11 for December.

And we pass that into months to get the day name of the date.

Therefore month is 'February' .

To hide the cursor on a web page with CSS, we can use the cursor property.

For instance, we can write the following HTML:

<div class="nocursor">
   Some stuff
</div>

Then we can hide the cursor when our mouse in the div by writing:

.nocursor {
  cursor: none;
}

Hide the Cursor in a Webpage Using JavaScript

To hide the cursor on a web page with JavaScript, we can use the style.cursor property.

For instance, we can write the following HTML:

<div class="nocursor">
   Some stuff
</div>

Then we can hide the cursor when our mouse in the div by writing:

document.getElementsByClassName('nocursor')[0].style.cursor = 'none';

We get the div with getElementsByClassName .

And we set the style.cursor property of it to 'none' to hide the cursor when our mouse is in the div.