How to make a canvas as wide and as high as parent with JavaScript?

To make a canvas as wide and as high as parent with JavaScript, we set the canvas width and height properties.

For instance, we write

const canvas = document.getElementById("theCanvas");
const parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

to select the canvas and the parent element with getElementById.

Then we get the parent‘s offsetWidth and offsetHeight and set them as the canvaswidth and height to make them the same width and height.

How to create a link that opens the appropriate map app on any device, with directions to the destination with JavaScript?

To create a link that opens the appropriate map app on any device, with directions to the destination with JavaScript, we create a JavaScript function to detect the platform.

For instance, we write

<a style="cursor: pointer" onclick="myNavFunc()">Take me there!</a>

to add a link that calls myNavFunc when we click it.

Then we write

function myNavFunc() {
  if (
    navigator.platform.indexOf("iPhone") !== -1 ||
    navigator.platform.indexOf("iPod") !== -1 ||
    navigator.platform.indexOf("iPad") !== -1
  )
    window.open(
      "maps://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]"
    );
  else
    window.open(
      "https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]"
    );
}

to get the platform with navigation.platform.

We call window.open with the URL of the map to open the map according to the platform.

How to play local (hard-drive) video file with HTML5 video tag with JavaScript?

To play local (hard-drive) video file with HTML5 video tag with JavaScript, we add a file input.

For instance, we write

<input type="file" accept="video/*" /><br />
<video controls></video>

to add the file and video elements.

Then we write

const playSelectedFile = (event) => {
  const [file] = event.target.files;
  const fileURL = URL.createObjectURL(file);
  const videoNode = document.querySelector("video");
  videoNode.src = fileURL;
};

const inputNode = document.querySelector("input");
inputNode.addEventListener("change", playSelectedFile, false);

to add a change listener to the file input with addEventListener.

In the playSelectedFile listener, we get the select file with event.target.files.

And then we create a object URL string from the file.

Next, we get the video element with querySelector.

And we set the src property of the video to fileURL to load it.

How to make HTML elements resizable using pure JavaScript?

To make HTML elements resizable using pure JavaScript, we add the mousemove event listener.

For instance, we write

const div = document.querySelector(`div.before`);
const box = document.querySelector(`div.container`);
box.addEventListener(`mousemove`, (e) => {
  const { offsetX, offsetY } = e;
  div.style.width = offsetX + `px`;
});

to select the divs with querySelector.

And we add a mousemove event listener for the box div with addEventListener.

In the event listener, we set the width of the div to the offsetX value to change the width when we move the mouse.

How to get the text of an input text box during onKeyPress with JavaScript?

To get the text of an input text box during onKeyPress with JavaScript, we use thw value property.

For instance, we write

const onKeyPress = () => {
  const inputelem = document.getElementById("editvalue");
  const s = inputelem.value;
};

const inputElem = document.getElementById("editvalue");
inputElem.addEventListener("keypress", onKeyPress);

to get the input with getElementById.

And then we call addEventListener to add a keypress onKeyPress as the event listener.

In onKeyPress, we get the input with getElementById.

And we get its value with the value property.

How to create a custom InfoWindow with Google Maps and JavaScript?

To create a custom InfoWindow with Google Maps and JavaScript, we use the InfoWindow constructor.

For instance, we write

const infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(
  marker,
  "mouseover",
  ((marker) => {
    return () => {
      const content = address;
      infowindow.setContent(content);
      infowindow.open(map, marker);
    };
  })(marker)
);

to call addListener to listen for marker‘s mouseover event with a event listener that’s returned by calling the outer function with marker.

We set the infoWindow‘s content with setContent.

And we open it with open.