Category: JavaScript

Sometimes, we want to increment a numeric string by +1 with JavaScript.

In this article, we’ll look at how to increment a numeric string by +1 with JavaScript.

How to increment a numeric string by +1 with JavaScript?

To increment a numeric string by +1 with JavaScript, we can convert it to a number before incrementing it.

For instance, we write:

let pageID = '1'
pageID = parseInt(pageID) + 1;
console.log(pageID)

to call parseInt with pageID to convert the number string into a number.

Then we add 1 to it and assign the returned value back to pageID.

Therefore, pageID is 2 according to the console log.

Conclusion

To increment a numeric string by +1 with JavaScript, we can convert it to a number before incrementing it.

Sometimes, we want to compare 2 dates in format DD/MM/YYYY with JavaScript.

In this article, we’ll look at how to compare 2 dates in format DD/MM/YYYY with JavaScript.

How to compare 2 dates in format DD/MM/YYYY with JavaScript?

To compare 2 dates in format DD/MM/YYYY with JavaScript, we can convert each date string to a date.

For instance, we write:

const date1 = '25/02/1985';
const date2 = '26/02/1985';

const convertToDate = (d) => {
  const [day, month, year] = d.split("/");
  return new Date(year, month - 1, day);
}

console.log(convertToDate(date1) > convertToDate(date2))

to define the convertToDate function that takes the date string d.

In it, we call split with '/' to split the string by the slashes.

And then we destructure the date parts from the returned array and put them into the Date constructor.

We’ve to subtract month by 1 since JavaScript date’s months are zero-based.

Next, we call convertToDate with date1 and date2 and compare the 2 values.

Since date1 is earlier than date2, the console log should log false.

Conclusion

To compare 2 dates in format DD/MM/YYYY with JavaScript, we can convert each date string to a date.

Sometimes, we want to make an image load synchronously with JavaScript.

In this article, we’ll look at how to make an image load synchronously with JavaScript.

How to make an image load synchronously with JavaScript?

To make an image load synchronously with JavaScript, we can make a promise that loads the image.

For instance, we write:

const loadImage = (url) => {
  const img = new Image()
  return new Promise(resolve => {
    img.onload = () => {
      resolve(img)
    }
    img.src = url
  })
}

const urls = [
  'https://i.picsum.photos/id/879/200/300.jpg?hmac=07llkorYxtpw0EwxaeqFKPC5woveWVLykQVnIOyiwd8',
  'https://i.picsum.photos/id/35/200/300.jpg?hmac=No1hMogzX_PUqgWDfLRCc4wGPYTIeviBhJbzjqskoMA',
  'https://i.picsum.photos/id/56/200/300.jpg?hmac=XmVgSk2B8hc9Smojh4o14JnHBHBM8Gj0ePS78sxZbzI'
]

const load = async () => {
  for (const u of urls) {
    const img = await loadImage(u)
    document.body.appendChild(img)
  }
}
load()

We define the loadImage functino that returns a promise with the img element.

We create the img element with the Image constructor.

And we call resolve with img once the image has been loaded by setting the img.src to the image url.

Next, we define the load function that loops through each image URL in urls and call loadImage on each entry.

And then we call document.body.appendChild with img to add the image as a child of the body element.

Conclusion

To make an image load synchronously with JavaScript, we can make a promise that loads the image.

Sometimes, we want to retrieve the display property of a DOM element.

In this article, we’ll look at how to retrieve the display property of a DOM element.

How to retrieve the display property of a DOM element?

To retrieve the display property of a DOM element, we can get it with the window.getComputedStyle method.

For instance, we write:

<div>
  hello
</div>

to add a div.

Then we write:

const div = document.querySelector('div')
const styles = window.getComputedStyle(div)
console.log(styles.display)

to select the div with querySelector.

Then we call window.getComputedStyle with div to return the styles object.

Then we get the display CSS property value with styles.display.

Conclusion

To retrieve the display property of a DOM element, we can get it with the window.getComputedStyle method.

Sometimes, we want to rotate a base 64 image by X degrees and return new base64 image with JavaScript.

In this article, we’ll look at how to rotate a base 64 image by X degrees and return new base64 image with JavaScript.

How to rotate a base 64 image by X degrees and return new base64 image with JavaScript?

To rotate a base 64 image by X degrees and return new base64 image with JavaScript, we can put the image in a canvas.

Then we do the rotation in the canvas and return the image.

For instance, we write:

<img>

to add an img element.

Then we write:

const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAARElEQVR42u3PMREAAAgEIE1u9DeDqwcN6FSmHmgRERERERERERERERERERERERERERERERERERERERERERERERERkYsFbE58nZm0+8AAAAAASUVORK5CYII='

const rotateBase64Image = (base64data) => {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const image = new Image();
  image.src = base64data;
  return new Promise(resolve => {
    image.onload = () => {
      ctx.translate(image.width, image.height);
      ctx.rotate(45 * Math.PI / 180);
      ctx.drawImage(image, 0, 0);
      resolve(canvas.toDataURL())
    };
  })
}

(async () => {
  const rotatedImg = await rotateBase64Image(img)
  const imgEl = document.querySelector('img')
  imgEl.src = rotatedImg
})()

to define the rotateBase64Image function to rotate the base64data image by 45 degrees.

In it, we create a canvas with `createElement.

Then we get its context with getContext.

Next, we create a new Image instance and set its src property to base64data to load the image.

Then when the image is loaded, image.onload is run.

In onload, we rotate the image with rotate.

And we draw the rotated image with drawImage.

Finally, we call resolve with the base64 string version of the rotated image that we get from canvas.toDataURL.

Next, in the async function, we get call rotateBaseImage to rotate img.

Then we select the img element with querySelector.

And then we set imgEl.src to the rotateImg string.

Now we see the pink square rotated 45 degrees.

Conclusion

To rotate a base 64 image by X degrees and return new base64 image with JavaScript, we can put the image in a canvas.

Then we do the rotation in the canvas and return the image.