Author: John Au-Yeung

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.

Get the Number of Lines in a textarea Using JavaScript

To get the number of lines in a textarea using JavaScript, we can call split on the input value of the textarea by the newline character.

Then we get the length of the returned string array.

For instance, we can write:

<textarea></textarea>

to create a textarea element.

Then we write:

const textarea = document.querySelector('textarea')
textarea.addEventListener('input', () => {
  const text = textarea.value;
  const lines = text.split("\n");
  const count = lines.length;
  console.log(count);
})

We select the textarea with the document.querySelector.

Then we call addEventListener to listen to the input event.

In the input event handler, we get the textarea’s input value with textarea.value.

Then we call split with \n to split the value by the newline character.

And finally, we get the length of the split lines.

Therefore, now we should see the number of lines logged as we type.

To draw a circle in HTML5 canvas using JavaScript, we can use the arc method.

For instance, we can add the canvas element by writing:

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

Then we write:

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

We select the canvas with document.querySelector.

Then we get the canvas context with getContext.

Next, we set the center’s coordinates with centerX and centerY.

We then we set the radius of the circle.

Next, we call beginPath to start drawing.

Then we call arc with centerX, centerY, radius, 0, 2 * Math.PI and `false.

We need 2 * Math.PI to draw an arc forms the circle.

Next, we set the fillStyle to set the fill of the circle.

Then we call fill to draw the fill.

Next, we set lineWidth to set the outline’s width.

Then we set strokeStyle to set the outline color.

And finally, we call stroke to draw the outline.

Now we see a circle with green fill color and black outline drawn.

To call moment.calendar method without the time, we can pass in null as the first argument.

For instance, we can write:

const cal = moment('2021-01-01')
  .calendar(null, {
    lastDay: '[Yesterday]',
    sameDay: '[Today]',
    nextDay: '[Tomorrow]',
    lastWeek: '[last] dddd',
    nextWeek: 'dddd',
    sameElse: 'L'
  })
console.log(cal)

We call moment with a date string.

Then we call calendar on the moment object with null and an object that has some date formatting options.

sameDay lets us specify the format for same day.

lastDay lets us specify the format for yesterday.

nextDay lets us specify the format for tomorrow.

lastWeek lets us specify the format for last week.

nextWeek lets us specify the text for next week.

sameElse specifies the format for all other dates.

Therefore, cal is '01/01/2021'.