Author: John Au-Yeung

Sometimes, we want to detect when the user presses Enter in an input field with JavaScript.

In this article, we’ll look at how to detect when the user presses Enter in an input field with JavaScript.

How to detect when the user presses Enter in an input field with JavaScript?

To detect when the user presses Enter in an input field with JavaScript, we check the key code.

For instance, we write

const inputId = document.getElementById("input-id");
inputId.addEventListener("keyup", (e) => {
  if (e.keyCode === 13) {
    console.log("Enter");
  }
});

to get the input with getElementById.

Then we add a keyup event listener to it with addEventListener.

In the event listener, we check if enter is pressed by checking if keyCode is 13.

Conclusion

To detect when the user presses Enter in an input field with JavaScript, we check the key code.

Sometimes, we want to convert canvas to PDF with JavaScript.

In this article we’ll look at how to convert canvas to PDF with JavaScript.

How to convert canvas to PDF with JavaScript?

To convert canvas to PDF with JavaScript, we use jsPDF.

For instance, we write

<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

<canvas id="myCanvas" width="578" height="200"></canvas>
<button id="download">download</button>

to add the jsPDF script, canvas and button.

Then we write

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();

download.addEventListener("click", () => {
  const imgData = canvas.toDataURL("image/jpeg", 1.0);
  const pdf = new jsPDF();

  pdf.addImage(imgData, "JPEG", 0, 0);
  pdf.save("download.pdf");
});

to get the canvas with getElementById.

And then we get its context with getContext.

Next we draw a rectangle with rect.

Then we add a click listen to the button with addEventListener.

In it, we call toDataURL to return a base64 URL string with the canvas content as a JPEG.

And then we call pdf.addImage to add the base64 string into the pdf.

Finally, we call save to save the image as download.pdf.

Conclusion

To convert canvas to PDF with JavaScript, we use jsPDF.

Sometimes, we want to use anchor tags in react-router 4 and JavaScript.

In this article, we’ll look at how to use anchor tags in react-router 4 and JavaScript.

How to use anchor tags in react-router 4 and JavaScript?

To use anchor tags in react-router 4 and JavaScript, we use the eact-router-hash-link package.

To install it, we run

npm install --save react-router-hash-link

Then we use it by writing

import { HashLink as Link } from "react-router-hash-link";

<Link to="/pathLink#yourAnchorTag">Your link text</Link>;

to import the HashLink component as Link.

And then we use it with the to prop set to the destination URL.

Conclusion

To use anchor tags in react-router 4 and JavaScript, we use the eact-router-hash-link package.

To set dropdown selected item based on option text with JavaScript, we set the selectedIndex property of the select drop down.

For instance, we write

<select id="myDropDown">
  <option value="0">Google</option>
  <option value="1">Bing</option>
  <option value="2">Yahoo</option>
</select>

to add the drop down.

Then we write

const textToFind = "Bing";
const dd = document.getElementById("myDropDown");
dd.selectedIndex = [...dd.options].findIndex(
  (option) => option.text === textToFind
);

to get the select drop down with getElementById.

Then we find the element with the options we want to set with findIndex.

We get the node list of option elements with dd.options and spread the entries into an array before using findIndex.

option.text has the option text.

Sometimes, we want to compare two times with Moment.js and JavaScript.

In this article, we’ll look at how to compare two times with Moment.js and JavaScript.

How to compare two times with Moment.js and JavaScript?

To compare two times with Moment.js and JavaScript, we can parse times with moment.

For instance, we write

const beginningTime = moment("8:45am", "h:mma");
const endTime = moment("9:00am", "h:mma");
console.log(beginningTime.isBefore(endTime));

to call moment with the times we want to compare.

Then we check if beginningTime is before endTime with isBefore.

Conclusion

To compare two times with Moment.js and JavaScript, we can parse times with moment.