Sometimes, we may want to add a file upload feature to our web app.

And we have to check the file type of the file before we upload them sometimes.

In this article, we’ll look at how to check the selected file’s MIME type with JavaScript before upload.

Watch the change Event of a File Input

To check the file MIME type with JavaScript before we upload the file, we can listen to the change event of a file input.

For instance, we can write the following HTML:

<input type="file"  multiple>

And the following JavaScript code to watch the files selected:

const control = document.querySelector("input");
control.addEventListener("change", (event) => {…

Oftentimes, we have to get the keys and values of a JavaScript object.

In this article, we’ll look at how to get the keys and values from an object.

Get Object Keys with the Object.keys Method

We can use the Object.keys method to get the keys of an object.

It returns an array with the object’s string keys.

For instance, we can write:

const obj = {
  first: 'someVal',
  second: 'otherVal'
};
const keys = Object.keys(obj)
console.log(keys)

Then keys is [“first”, “second”] .

Get Object Property Values with the Object.values Method

To get an object’s property values, we can use the Object.values method.

It returns an array with the object’s property values.

For example, we…

Vanilla JavaScript in the browser now has many of the features of jQuery built-in.

Therefore, we don’t need to use jQuery to do many things.

In this article, we’ll look at the vanilla JavaScript equivalent of jQuery features.

Event Listening for Dynamically Added Elements

On many occasions, we want to listen to events on dynamically added elements.

In jQuery, we would use the on method to listen to the event on all the select elements.

For instance, we can write:

$("div").on("click", ".search-result", (e) => {
  //...
});

to listen to clicks on the elements with the search-result class in the div with the on method to…

Sometimes, we may want to remove a CSS property from an HTML element using JavaScript.

In this article, we’ll look at how to remove a CSS property using JavaScript.

Use the style.removeProperty Method

We can use the removeProperty method to remove a CSS property from an element.

For instance, if we have the following HTML:

<div style='background-color: green'>
  hello
</div>

We can remove the background-color property by writing:

const el = document.querySelector('div')
el.style.removeProperty('background-color');

Setting a CSS Property to an Empty String

Another way to remove a CSS property from an HTML element is to set its value to an empty string.

For instance, we can write:

const el = document.querySelector('div')
el.style.backgroundColor = ''

to remove the value of the CSS background-color property.

Conclusion

We can remove CSS properties from an object by setting to an empty string or calling the removeProperty method.

Sometimes, we may want to add query parameters to route URLs so that we can get the query parameters in the component.

In this article, we’ll look at how to get query parameters from a URL in a Vue 3 app that uses Vue Router 4.

Get Query Parameters from a URL in Vue.js 3 with Vue Router 4

To get query parameter from a URL in a Vue 3 app that uses Vue Router 4, we can get the query parameters from the this.$route.query property.

main.js

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import Page1 from "./views/Page1";
import Page2 from "./views/Page2"; …

Sometimes, we may want to truncate long strings in our JavaScript code.

In this article, we’ll look at some good ways to truncate long strings in JavaScript.

Using the String.prototype.substr Method

We can use the string instance’s substr method to return a substring given the start and end indexes.

For instance, we can write:

const truncate = (str, n) => {
  return (str.length > n) ? str.substr(0, n - 1) + '...' : str;
};console.log(truncate('Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 10))

We create the truncate function with the str parameter that takes the string.

n is the number of characters to…

Sometimes, we may want to get the clipboard data that we paste into an element in our web app.

In this article, we’ll look at how to get clipboard data when we paste it into our JavaScript app.

Listen to the paste Event

The paste event is triggered when we paste data into an element.

Therefore, we can just listen to that event when our own event listener to get the pasted content.

For instance, we can write the following HTML:

<div id='editableDiv' contenteditable='true'>Paste</div>

Then we can write the following JavaScript code to listen to the paste event:

const handlePaste = (e) => {…

Vanilla JavaScript in the browser now has many of the features of jQuery built-in.

Therefore, we don’t need to use jQuery to do many things.

In this article, we’ll look at the vanilla JavaScript equivalent of jQuery features.

Wait for Document to be Ready

With jQuery, we can use the $(document).ready callback to run code when the DOM is loaded:

$(document).ready(() => {
  //...
});

To do the same thing with vanilla JavaScript, we can listen to the DOMContentLoaded event on the document :

document.addEventListener("DOMContentLoaded", () => {
  //...
});

Working with Classes

jQuery has methods to let us add, remove or toggle classes of an element:

$("div").addClass("focus");
$("div").removeClass("focus");
$("div").toggleClass("focus")…