jQuery to Vanilla JS — The Translation Table

// SELECT
$(".card")               → document.querySelectorAll(".card")
$("#app")                → document.querySelector("#app")

// EVENTS
$(btn).on("click", fn)   → btn.addEventListener("click", fn)
$(document).ready(fn)    → defer attribute, or DOMContentLoaded
$(list).on("click", "li", fn) → delegation with e.target.closest("li")

// CLASSES & CONTENT
$(el).addClass("on")     → el.classList.add("on")
$(el).toggleClass("on")  → el.classList.toggle("on")
$(el).text("hi")         → el.textContent = "hi"
$(el).attr("href")       → el.getAttribute("href")
$(el).hide()             → el.hidden = true

// DOM
$(parent).append(el)     → parent.append(el)
$(el).remove()           → el.remove()
$("<li>")                → document.createElement("li")

// AJAX
$.getJSON(url, cb)       → const data = await (await fetch(url)).json()

// ANIMATION
$(el).fadeIn(300)        → CSS transition + el.classList.add("visible")