Author: John Au-Yeung

Sometimes, we want to add validation using Yup to check string or number length with JavaScript.

In this article, we’ll look at how to add validation using Yup to check string or number length with JavaScript.

How to add validation using Yup to check string or number length with JavaScript?

To add validation using Yup to check string or number length with JavaScript, we call the test method.

For instance, we write

yup
  .string()
  .test("len", "Must be exactly 5 characters", (val) => val.length === 5);

to call test with 'len', an validation error string, and a callback to do the validation.

We check that the val has length 5 with (val) => val.length === 5.

Conclusion

To add validation using Yup to check string or number length with JavaScript, we call the test method.

Sometimes, we want to create a simple 10 second countdown with JavaScript.

In this article, we’ll look at how to create a simple 10 second countdown with JavaScript.

How to create a simple 10 second countdown with JavaScript?

To create a simple 10 second countdown with JavaScript, we use the setInterval method.

For instance, we write

<progress value="0" max="10" id="progressBar"></progress>

to add a progress element.

Then we update it by writing

let timeleft = 10;
const downloadTimer = setInterval(() => {
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
  }
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
}, 1000);

to call setInterval with a function that calls clearInterval to stop the timer if timeLeft is 0 or less.

Otherwise, we update the progress element with the value of 10 - timeleft to show the count down value.

And then we decrement timeLeft by 1.

Conclusion

To create a simple 10 second countdown with JavaScript, we use the setInterval method.

Sometimes, we want to add a custom button to the toolbar that calls a JavaScript function with CKEditor.

In this article, we’ll look at how to add a custom button to the toolbar that calls a JavaScript function with CKEditor.

How to add a custom button to the toolbar that calls a JavaScript function with CKEditor?

To add a custom button to the toolbar that calls a JavaScript function with CKEditor, we call the addCommand and addButton methods.

For instance, we write

<textarea id="container"></textarea>

to add a text area.

Then we write

const editor = CKEDITOR.replace("container");

editor.addCommand("mySimpleCommand", {
  exec(edt) {
    alert(edt.getData());
  },
});

editor.ui.addButton("SuperButton", {
  label: "Click me",
  command: "mySimpleCommand",
  toolbar: "insert",
  icon: "https://avatars1.githubusercontent.com/u/5500999?v=2&s=16",
});

to convert the text area to a rich text editor with CKEDITOR.replace.

Then we call addCommand to add a command that calls alert.

Then we call addButton to add a button that issues the mySimpleCommand command.

Conclusion

To add a custom button to the toolbar that calls a JavaScript function with CKEditor, we call the addCommand and addButton methods.

Sometimes, we want to convert 12-hour hh:mm AM/PM time to 24-hour hh:mm time with JavaScript

In this article, we’ll look at how to convert 12-hour hh:mm AM/PM time to 24-hour hh:mm time with JavaScript.

How to convert 12-hour hh:mm AM/PM time to 24-hour hh:mm time with JavaScript?

To convert 12-hour hh:mm AM/PM time to 24-hour hh:mm time with JavaScript, we can manipulate the time strings.

For instance, we write

const convertTime12to24 = (time12h) => {
  const [time, modifier] = time12h.split(" ");
  let [hours, minutes] = time.split(":");

  if (hours === "12") {
    hours = "00";
  }

  if (modifier === "PM") {
    hours = parseInt(hours, 10) + 12;
  }

  return `${hours}:${minutes}`;
};

console.log(convertTime12to24("01:02 PM"));

to define the convertTime12to24 function.

It takes the time12h string which has the time in 12 hour format.

In it, we split the time12h string into the time and modifier with split.

Then we split the time into hours and minutes with split.

Next, we check if hours is '12'.

If it is, then we set it to '00'.

And if modifier is 'PM', we add 12 to the hour.

Finally we return the 24 hour format time string.

Conclusion

To convert 12-hour hh:mm AM/PM time to 24-hour hh:mm time with JavaScript, we can manipulate the time strings.

Sometimes, we want to format an integer to a specific length in JavaScript.

In this article, we’ll look at how to format an integer to a specific length in JavaScript.

How to format an integer to a specific length in JavaScript?

To format an integer to a specific length in JavaScript, we use the string padStart method.

For instance, we write

const formatted = String(num).padStart(4, "0");

to convert num into a string with String.

Then we call padStart with 4 and '0' to prepend 0’s to the string until it has length 4.

Conclusion

To format an integer to a specific length in JavaScript, we use the string padStart method.