Categories
JavaScript Answers

How to sort of HTML elements with JavaScript?

Sometimes, we want to sort of HTML elements with JavaScript.

In this article, we’ll look at how to sort of HTML elements with JavaScript.

How to sort of HTML elements with JavaScript?

To sort of HTML elements with JavaScript, we can select them. Then we can spread the selected elements into an array and use the array sort method to do the sorting.

For instance, we write:

<ol>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ol>

to add 3 li elements.

Then we write:

const lis = document.querySelectorAll('li')
const sorted = [...lis]
  .sort((a, b) => {
    return a.innerHTML.localeCompare(b.innerHTML)
  })
console.log(sorted)

to select the li’s with querySelectorAll.

Then we spread the li elements into an array.

Next, we call sort with a callback that compares the innerHTML of each with localeCompare to sort them alphabetically.

Therefore, sorted is an array of li elements with the one with bar first, the one with baz 2nd, and the one with foo last.

Conclusion

To sort of HTML elements with JavaScript, we can select them. Then we can spread the selected elements into an array and use the array sort method to do the sorting.

Categories
JavaScript Answers

How to decrypt messages with CryptoJS AES and JavaScript?

Sometimes, we want to decrypt messages with CryptoJS AES and JavaScript.

In this article, we’ll look at how to decrypt messages with CryptoJS AES and JavaScript.

How to decrypt messages with CryptoJS AES and JavaScript?

To decrypt messages with CryptoJS AES and JavaScript, we can call the CryptoJS.AES.decrypt method with the encrypted message and the secret key.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

to add the CryptoJS script.

Then we write:

const key = "secret";
const data = CryptoJS.AES.encrypt("Message", key);
const decrypted = CryptoJS.AES.decrypt(data, key).toString(CryptoJS.enc.Utf8);
console.log(decrypted)

We call CryptoJS.AES.encrypt to encrypt 'Message' with the secret key.

Then we call CryptoJS.AES.decrypt with the encrypted data and the secret key to decrypt data.

Then we convert the decrypted data to a string with toString.

Therefore, decrypted is also 'Message'.

Conclusion

To decrypt messages with CryptoJS AES and JavaScript, we can call the CryptoJS.AES.decrypt method with the encrypted message and the secret key.

Categories
JavaScript Answers

How to auto stop other audio players the when current one is playing with JavaScript?

Sometimes, we want to auto stop other audio players the when current one is playing with JavaScript.

In this article, we’ll look at how to auto stop other audio players the when current one is playing with JavaScript.

How to auto stop other audio players the when current one is playing with JavaScript?

To auto stop other audio players the when current one is playing with JavaScript, we can call the pause method on the other audio players when the current one is playing.

For instance, we write:

<audio src='https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3' controls></audio>

<audio src='https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3' controls></audio>

<audio src='https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3' controls></audio>

to add 3 audio elements.

Then we write:

const audios = document.getElementsByTagName('audio');
for (const a of audios) {
  a.onplay = (e) => {
    for (const aa of audios) {
      if (aa !== e.target) {
        aa.pause()
      }
    }
  }
}

to select all audio elements with getElementsByTagName.

Then we loop through all the audio elements in audios and set the a.onplay property to a function that loops through each audio element in audios.

If the audio element aa isn’t the same as e.target, which is the current audio element that’s playing, then we call pause on it.

Therefore, we see that the audio players other than the current one will stop playing when the current one is playing.

Conclusion

To auto stop other audio players the when current one is playing with JavaScript, we can call the pause method on the other audio players when the current one is playing.

Categories
JavaScript Answers

How to remove a class from body with JavaScript?

Sometimes, we want to remove a class from body with JavaScript.

In this article, we’ll look at how to remove a class from body with JavaScript.

How to remove a class from body with JavaScript?

To remove a class from body with JavaScript, we can use the classList.remove method.

For instance, we write:

document.querySelector('body').classList.remove('no-javascript');

to remove the no-javascript class from the HTML body element.

We select the body element with querySelector.

Then we call classList.remove with the class names we want to remove.

Conclusion

To remove a class from body with JavaScript, we can use the classList.remove method.

Categories
JavaScript Answers

How to identify card type from card number with JavaScript?

Sometimes, we want to identify card type from card number with JavaScript.

In this article, we’ll look at how to identify card type from card number with JavaScript.

How to identify card type from card number with JavaScript?

To identify card type from card number with JavaScript, we can check against regexes for card numbers of different types of cards.

For instance, we write:

const getCardType = (number) => {
  if (number.match(new RegExp("^4")) !== null) {
    return "Visa";
  } else if (/^(5[1-5][0-9]{14}|2(22[1-9][0-9]{12}|2[3-9][0-9]{13}|[3-6][0-9]{14}|7[0-1][0-9]{13}|720[0-9]{12}))$/.test(number)) {
    return "Mastercard";
  } else if (number.match(new RegExp("^3[47]")) !== null) {
    return "AMEX";
  } else if (number.match(new RegExp("^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)")) !== null) {
    return "Discover";
  } else if (number.match(new RegExp("^36")) !== null) {
    return "Diners";
  } else if (number.match(new RegExp("^30[0-5]")) !== null) {
    return "Diners - Carte Blanche";
  } else if (number.match(new RegExp("^35(2[89]|[3-8][0-9])")) !== null) {
    return "JCB";
  } else if (number.match(new RegExp("^(4026|417500|4508|4844|491(3|7))")) !== null) {
    return "Visa Electron";
  }
  return "";
}

console.log(getCardType('5105105105105100'))
console.log(getCardType('4111111111111111'))

We define the getCardType function that takes the card number.

Then we use a series of if-else statements to check whether number matches regexes for different card types with the string’s match method.

If match returns anything other than null, that means the number matches the given regex pattern.

Therefore, 'Mastercard' and 'Visa' are logged since we the first number is a test Mastercard number and the 2nd is a test Visa card number.

Conclusion

To identify card type from card number with JavaScript, we can check against regexes for card numbers of different types of cards.