Photo by Pablo Merchán Montes on Unsplash

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.

Creating Elements

We can use jQuery’s function to create elements.

For instance, we can write:

$("<div/>");
$("<span/>");

to create a div and span respectively.

To do the same thing with vanilla JavaScript, we use the method:

document.createElement("div");
document.createElement("span");

To add some content to the created elements, we can set the property to add text.

Or we can attach child nodes with…


Photo by SARAJ PIXNAPPER on Unsplash

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 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) => {…


Photo by Florian Berger on Unsplash

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 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 is .

Get Object Property Values with the Object.values Method

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

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

For example, we…


Photo by CHUTTERSNAP on Unsplash

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 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 class in the div with the method to…


Photo by Tierra Mallorca on Unsplash

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 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 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 property.

Conclusion

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


Photo by Diego Jimenez on Unsplash

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 property.

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"; …


Photo by Sara Kurfeß on Unsplash

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 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 function with the parameter that takes the string.

is the number of characters to…


Photo by Nipanan Lifestyle on Unsplash

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 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 event:

const handlePaste = (e) => {…


Photo by Geert Pieters on Unsplash

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 callback to run code when the DOM is loaded:

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

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

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")…


Photo by Galen Crout on Unsplash

Infinite scrolling is something that we’ve to add often into our Vue 3 app.

In this article, we’ll look at how to add infinite scrolling to a Vue 3 app with the Intersection Observer API.

Add Infinite Scrolling with the Intersection Observer API

The Intersection API lets us add infinite scrolling easily in our Vue 3 app.

To do this, we assign a ref to the last element and watch when that element is displayed on the screen.

Then when the array changes, we reassign the ref to the last element that’s added then.

For instance, we can write:

<template>
<div
v-for="(a, i) of…

John Au-Yeung

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store