Author: John Au-Yeung

To get the element clicked for the whole document with JavaScript, we add a click event handler for document.

For instance, we write

document.addEventListener(
  "click",
  (e) => {
    const target = e.target;
    const text = target.textContent;
  },
  false
);

to add a click handler for document with addEventListener.

In the click handler, we get the element that we clicked on with e.target.

And then we get the element’s text content with textContent.

To change the playing speed of videos in JavaScript, we set the defaultPlaybackRate and playbackRate properties.

For instance, we write

document.querySelector("video").defaultPlaybackRate = 2.0;
document.querySelector("video").play();

to select the video element with querySelector.

Then we set its default playback rate to 2 times the original speed by setting the defaultPlaybackRate property to 2.0.

Or we write

document.querySelector("video").playbackRate = 3.0;

to set the video’s playbackRate to 3 times the original speed.

To enable Bootstrap tooltip on disabled button with HTML, we wrap the disabled button with a wrapper element.

For instance, we write

<div class="tooltip-wrapper" data-title="hello world">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

to wrap a div with the data-title attribute with the tooltip text with class tooltip-wrapper around the disabled button to show the tooltip when hovering over the disabled button.

To create a string of variable length, filled with a repeated character with JavaScript, we call the array join method.

For instance, we write

const str = new Array(len + 1).join(character);

to create an array with length len + 1 with Array.

And then we call join with character to return a string filled with character of length len.

To integrate Dropzone.js into existing HTML form with other fields with JavaScript, we set the Dropzone.options.fileUpload property.

For instance, we write

<form role="form" enctype="multipart/form-data" action="/url" method="post">
  <input hidden id="file" name="file" />

  <div class="dropzone dropzone-file-area" id="fileUpload">
    <div class="dz-default dz-message">
      <h3 class="sbold">Drop files here to upload</h3>
      <span>You can also click to open file browser</span>
    </div>
  </div>

  <button type="submit">Submit</button>
</form>

to add a form.

Then we write

Dropzone.options.fileUpload = {
  url: "blackHole.php",
  addRemoveLinks: true,
  accept: (file) => {
    let fileReader = new FileReader();

    fileReader.readAsDataURL(file);
    fileReader.onloadend = () => {
      let content = fileReader.result;
      $("#file").val(content);
      file.previewElement.classList.add("dz-success");
    };
    file.previewElement.classList.add("dz-complete");
  },
};

to set Dropzone.options.fileUpload to an object that has the upload url and an accept function.

In the accept method, we create a FileReader object to read the file.

And we get the file result from the onloadend method.

We get the read file as a base64 URL with fileReader.result.

We read the file with readAsDataURL.