Author: John Au-Yeung

To search and replace specific query string parameter value in JavaScript, we can use the URLSearchParams constructor.

For instance, we can write:

const paramsString = "foo=bar";
const searchParams = new URLSearchParams(paramsString);
searchParams.set('foo', 'baz')
const newParamString = searchParams.toString()
console.log(newParamString)

We create a URLSearchParams instance by passing in the paramsString string as its argument.

Then we use the set method from the returned object to replace the value of the foo query parameter with a new value.

We just pass in the key of the value to replace and the value to replace it with.

Finally, we call toString to return the new search parameter string.

Therefore, newParamString is now 'foo=baz' according to the console log.

Conclusion

To search and replace specific query string parameter value in JavaScript, we can use the URLSearchParams constructor.

To draw and image on the HTML5 canvas at an angle with JavaScript, we can call the rotate and translate methods on the canvas context.

For instance, we write:

<canvas style='width: 300px; height: 300px'></canvas>

to add the canvas.

Then we write:

const image = new Image()
image.src = 'https://picsum.photos/200'
image.onload = () => {
  const canvas = document.querySelector("canvas");
  const context = canvas.getContext("2d");
  const x = canvas.width / 2;
  const y = canvas.height / 2;
  const width = image.width;
  const height = image.height;
  const angleInRadians = Math.PI / 4
  context.translate(x, y);
  context.rotate(angleInRadians);
  context.drawImage(image, -width / 2, -height / 2, width, height);
  context.rotate(-angleInRadians);
  context.translate(-x, -y);
}

to create an image with the Image constructor.

Then we set the src of the image to the URL of the image we want to load.

Then we set the onload property to a function that draws the image onto the canvas.

In the function, we get the canvas with document.querySelector.

Then we call getContext to get the context.

Next, we set the x and y coordinates of the top left corner of the image.

Then we set the width and height of the image.

Next, we set the anglesInRadians to rotate the image by.

Then we call translate to translate the image horizontally and vertically by x and y respectively.

Then we call rotate to rotate the image by angleInRadians.

Next, we call drawImage to draw the image with the x and y coordinates of the top left corner and the width and height respectively as the arguments.

Then we call rotate and translate to do the rotation and translation again.

Now we should see a rotated image on the canvas.

To disable submit button Only after submit with JavaScript, we can set the disabled attribute of the submit button to true after the submit event is emitted.

For instance, we can write:

<form>
  <input type="submit" class="submitBtn" value="I Accept" />
</form>

to create a form.

Then we write:

$(document).ready(() => {
  $("form").submit((e) => {
    e.preventDefault()
    $(".submitBtn").attr("disabled", true);
  });
});

to listen to the submit event on the form with jQuery by calling the submit method.

In the submit event handler, we call e.preventDefault to prevent the default submit behavior.

Then we select the submit button with $(".submitBtn").

Finally, we call attr with 'disabled' and true to disable the submit button.

To set all values of an array with JavaScript, we can use the fill method

For instance, we can write:

const arr = [...Array(20)].fill(10)
console.log(arr)

We create an array with 20 empty slots with Array(20).

Then we spread that into a new array to create an array with 20 undefined entries.

Next, we call fill with 10 to replace will the undefined values with 10.

Therefore, arr is:

[10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]

as a result.