Author: John Au-Yeung

Sometimes, we want to make a table row clickable with JavaScript.

In this article, we’ll look at how to make a table row clickable with JavaScript.

How to make a table row clickable with JavaScript?

To make a table row clickable with JavaScript, we can use jQuery.

For instance, we write:

<table>
  <tbody>
    <tr>
      <td><a href="#">Column 1</a></td>
      <td><a href="#">Column 2</a></td>
      <td><a href="#">Column 3</a></td>
    </tr>
  </tbody>
</table>

to add a table.

Then we write:

.highlightRow {
  background-color: green
}

to set background color for the highlightRow class.

Next, we write:

$('tr').click(function() {
  $(this).toggleClass('highlightRow');
});

to add an event handler for tr element clicks.

When we click on them, we call the toggleClass method on the tr element to toggle the highlightRow class.

Conclusion

To make a table row clickable with JavaScript, we can use jQuery.

Sometimes, we want to insert hyphens into a JavaScript string.

In this article, we’ll look at how to insert hyphens into a JavaScript string.

How to insert hyphens into a JavaScript string?

To insert hyphens into a JavaScript string, we can use the JavaScript string’s replace method.

For instance, we write:

const phone = "1234567890";
const newPhone = phone.replace(/(\d{3})(\d{3})(\d+)/, '$1-$2-$3');
console.log(newPhone)

We call phone.replace with a regex that has 3 capturing groups for capturing 2 groups of 3 digits and the remaining digits respectively.

Then we put dashes in between each group with '$1-$2-$3'.

Therefore, newPhone is '123-456-7890'.

Conclusion

To insert hyphens into a JavaScript string, we can use the JavaScript string’s replace method.

Sometimes, we want to preview an image before and after upload with JavaScript.

In this article, we’ll look at how to preview an image before and after upload with JavaScript.

How to preview an image before and after upload with JavaScript?

To preview an image before and after upload with JavaScript, we can read the image file into a URL that we set as the value of the img element’s src attribute with a FileReader instance.

For instance, we write:

<form>
  <input type="file" />
  <img src="">
</form>

to add a form with an input and an img element.

Then we write:

const input = document.querySelector('input')
const img = document.querySelector('img')
const reader = new FileReader();

reader.onload = (e) => {
  img.src = e.target.result;
}

input.onchange = (e) => {
  const [file] = e.target.files
  reader.readAsDataURL(file);
}

We call document.querySelector to select the input and img elements.

Next, we create a new FileReader instance.

And then we set the reader.onload property to a function that gets the image URL from e.target.result and set that as the value of the img.src property.

Next, we set the input.onchange property to a function that gets the selected file from e.target.files.

And then we call reader.readAsDataUrl with file to read the file into a URL string.

Conclusion

To preview an image before and after upload with JavaScript, we can read the image file into a URL that we set as the value of the img element’s src attribute with a FileReader instance.

Sometimes, we want to format hexadecimal number to short UUID in JavaScript.

In this article, we’ll look at how to format hexadecimal number to short UUID in JavaScript.

How to format hexadecimal number to short UUID in JavaScript?

To format hexadecimal number to short UUID in JavaScript, we can use some JavaScript string methods.

For instance, we write:

const toPaddedHexString = (num, len) => {
  const str = num.toString(16);
  return "0".repeat(len - str.length) + str;
}

const hexStr = toPaddedHexString(12345, 16);
const result = hexStr.substr(0, 8) + '-' + hexStr.substr(8, 4) + '-' + hexStr.substr(12, 4);
console.log(result)

We create the toPaddedHexString function to convert num to a hex number.

Then we return the str string padded to len characters with "0".repeat(len - str.length) + str.

Then we call toPaddedHexString with 12345 and 16 to return 12345 converted to hex and padded to 16 characters.

Finally, we add the dashes between the digit groups by calling hex.substr with the start and end indexes of each segment and adding dashes between between them.

Therefore, result is '00000000-0000-3039'.

Conclusion

To format hexadecimal number to short UUID in JavaScript, we can use some JavaScript string methods.

Sometimes, we want to validate a URL in Node.js.

In this article, we’ll look at how to validate a URL in Node.js.

How to validate a URL in Node.js?

To validate a URL in Node.js, we can use the valid-url package.

To install it, we run npm i valid-url.

Then we can use it by writing:

const validUrl = require('valid-url');

const url = "http://bla.com"
if (validUrl.isUri(url)) {
  console.log('Looks like an URI');
}
else {
  console.log('Not a URI');
}

We call the validUrl.isUri method with the url string to check if url is a valid URL string.

Since it’s a URL, isUri should return true.

Therefore, 'Looks like an URI' is logged.

Conclusion

To validate a URL in Node.js, we can use the valid-url package.