Category: JavaScript Answers

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.

To add email validation with JavaScript, we can check our strings against a simple regex with the test method.

For instance, we can write:

const email = 'abc@abc.com'
if (/(.+)@(.+){2,}\.(.+){2,}/.test(email)) {
  console.log('valid')
} else {
  console.log('invalid')
}

to define the email regex with:

/(.+)@(.+){2,}\.(.+){2,}/

The regex just matches any string with characters before and after the @ sign.

After the @ sign, we also, check if there’re 2 or more characters after the dot for the domain extension.

Then we call test on the regex with email to check if email is a valid email string.

Therefore, we should see 'valid' logged since it’s a valid email.

To clone a div and change its id with JavaScript, we can use the cloneNode method on the div.

Then we can set the id property of the cloned element to set the ID.

For instance, we can write:

<div id='foo'>
  foo bar
</div>

to add the div.

Then we can clone the div by writing:

const div = document.getElementById('foo')
const clone = div.cloneNode(true);
clone.id = "foo2";
document.body.appendChild(clone);

We get the div with document.getElementById and assign it to div.

Then we call div.cloneNode with true to clone the div and assign it to clone.

We pass in true to do a deep clone.

Then we set clone.id to the ID of the cloned div.

And then we call document.body.appendChild with clone to add to the body.