Category: JavaScript

Sometimes, we want to find all subsets of a set in JavaScript.

In this article, we’ll look at how to find all subsets of a set in JavaScript.

Find All Subsets of a Set in JavaScript

To find all subsets of a set in JavaScript, we can use the reduce method to get all subsets of a set.

For instance, we can write:

const getAllSubsets =
  theArray => theArray.reduce(
    (subsets, value) => subsets.concat(
      subsets.map(set => [value, ...set])
    ),
    [
      []
    ]
  );

console.log(getAllSubsets([1, 2, 3]));

to create the getAllSubsets function that takes the theArray array parameter.

We then call reduce on it with a callback that takes the subsets and value parameters.

We callsubsets.concat with the array created by subsets.map with a callback that takes the value and set entries and combine them into a new subset.

The 2nd argument is an array with an empty array in it, which is the initial value of subsets .

Therefore, when we call getAllSubsets with [1, 2, 3] , we get:

[]
[1]
[2]
[2, 1]
[3]
[3, 1]
[3, 2]
[3, 2, 1]

in the array.

Conclusion

To find all subsets of a set in JavaScript, we can use the reduce method to get all subsets of a set.

Sometimes, we want to verify that an URL is an image URL with JavaScript.

In this article, we’ll look at how to verify that an URL is an image URL with JavaScript.

Verify that an URL is an Image URL with JavaScript

To verify that an URL is an image URL with JavaScript, we can create our own function and that checks the URL we want to verify against our own regex.

For instance, we can write:

const isImgLink = (url) => {
  if (typeof url !== 'string') {
    return false;
  }
  return (url.match(/^http[^\?]*.(jpg|jpeg|gif|png|tiff|bmp)(\?(.*))?$/gmi) !== null);
}

console.log(isImgLink('https://example.com/img.jpg'));
console.log(isImgLink('https://example.com/any-route?param=not-img-file.jpg'));
console.log(isImgLink('https://example.com/img.jpg?param=123'));

to create the isImgLink function that takes the url we want to check.

Then in the function, we check if url isn’t a string with the typeof operator.

If it’s not, we return false .

Otherwise, we call url.match to check against the pattern that matches image URLs.

We check for common image file extensions like jpg , jpeg , gif , png , tiff , and bmp .

The g flag checks the whole string.

We also check that there’re no dots after the extension with (?(.*)) .

Conclusion

To verify that an URL is an image URL with JavaScript, we can create our own function and that checks the URL we want to verify against our own regex.

Sometimes, we want to get the selected value from jQuery UI slider.

In this article, we’ll look at how to get the selected value from jQuery UI slider.

Get the Selected Value from jQuery UI Slider

To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.

For instance, we can write:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<div id="slider"></div>

to add the script tags for jQuery and jQuery UI and the link tag for jQuery UI.

Then we add a div which we can turn into a slider.

Next, we write:

$('#slider').slider({
  change(event, ui) {
    console.log(ui.value);
  }
});

to select the div with:

$('#slider')

Then we call slider with an object with the change method.

And we get the slider value with the ui.value property.

Now when we finished sliding, we see the selected value logged.

Conclusion

To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.

Sometimes, we want to count text area characters with JavaScript.

In this article, we’ll look at how to count text area characters with JavaScript.

Count Text Area Characters with JavaScript

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

For instance, we can write:

<textarea></textarea>
<div id='count'>

</div>

to add the textarea element and the div to show the character count.

Then we write:

const textarea = document.querySelector('textarea')
const count = document.getElementById('count')
textarea.onkeyup = (e) => {
  count.innerHTML = "Characters left: " + (500 - e.target.value.length);
};

to get the textarea and div elements with document.querySelector and document.getElementById .

Then we set the textarea.onkeyup property to a function that takes the e event object as a parameter.

Then we get the input value with e.target.value which is a string.

The length property gets the character count.

We set count.innerHTML to some text that shows the character left count.

Now when we type something into the textarea , we see the character count.

Count

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

Sometimes, we want to add a month picker with JavaScript.

In this article, we’ll look at how to add a month picker with JavaScript.

Add a Month Picker with JavaScript

To add a month picker with JavaScript, we can use the jQuery UI date picker library.

For instance, we can write:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<input name="startDate" id="startDate" class="date-picker" />

to add the script and link tags for jQuery and jQuery UI.

And we also add the input element for the date picker.

Then we write:

$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  onClose(dateText, inst) {
    const month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    const year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year, month, 1));
  }
});

to select the input with:

$('.date-picker')

And we call datepicker with an object to turn the input into a date picker.

changeMonth lets us change the month if it’s true .

changeYear lets us change the year if it’s true .

showButtonPanel shows the bottom button panel if it’s true .

dateFormat lets us set the date that’s returned by the dateText parameter.

onClose is run when we close the date picker.

In the method, we get the month and year from the top dropdowns, and we call datepicker with 'setDate' to set the date.

Conclusion

To add a month picker with JavaScript, we can use the jQuery UI date picker library.