Learn JavaScript by Example: Tutorials, Code Snippets & How-To’s

JavaScript Logo

Learn JavaScript in simple and easy steps starting from basic to advanced concepts, with examples including JavaScript tutorials, code snippets, use cases and scenarios.

Vanilla JavaScript or plain JavaScript does not require any third-party libraries or frameworks, and it offers, natively, prototype-based objects, AJAX animations, events, regular expressions, functions as first-class objects, closures, maths libraries, array libraries, string libraries, promises and more.

Also check our JavaScript blog for more resources and tutorials.

Do you need to enable JavaScript in your browser?

Animated JavaScript Counter-Up with the Intersection Observer API

An animated counter is a more engaging way to present this information, as it gradually increases the value of the number from zero to its final value. In this tutorial, we will…

How to Build a Vertical Off-Canvas Menu Bar Using JavaScript and CSS

In my work, coming up with fresh navigation ideas and creating an intuitive and efficient navigation system is essential for enhancing user experience. One solution that stands out is the vertical off-canvas…

How to Build a Double Off-Canvas Menu Using JavaScript

Creating a double off-canvas menu can greatly enhance the user experience by providing accessible navigation options without occupying valuable screen space. This article will guide you through how I built a double…

Simplifying Conditional Statements in JavaScript with the && Operator

JavaScript provides several ways to handle conditional logic. One powerful method is the logical AND (&&) operator. This tutorial will show you how to use the && operator and avoid unnecessary if/else…

Grouping Arrays in JavaScript with Object.groupBy() and Map.groupBy()

In JavaScript, there often arises a need to group array elements based on a certain property. Prior to ES2024, this involved custom functions or using libraries like Lodash. However, ES2024 introduced a…

inView

Loading Images Based on Screen Visibility Lazy loading images is a technique that defers the loading of non-critical resources (such as images) until they are needed. This approach can significantly improve page…

Thin Select โ€” Custom JavaScript Dropdown Element

Let’s create a custom <select> element using vanilla JavaScript and CSS. Thin Select provides a sleek and minimalistic design for <select> dropdowns. Here is what we’ll build: See the Pen Thin Select…

How to Create a JavaScript Spinner with Phenakistoscope Effect

In this tutorial, you will learn how to create a JavaScript spinner that mimics the effect of a Phenakistoscope, an early animation device that creates the illusion of motion by spinning images…

How to Lazy Load Google Map Iframe Embed in WordPress

If you embed a Google Map iframe on your WordPress website, you may notice an increase in the total webpage size and a slowdown in your website’s loading speed. This can be…

JavaScript Game: Obstakl

Obstakl is a game where the player needs to avoid moving obstacles, by controlling the main character using the mouse. See the Pen Obstakl – JavaScript Game by Ciprian (@ciprian) on CodePen.…

All JavaScript Topics โŸถ

JavaScript Carousels

A selection of multi-card, JavaScript-powered carousels for modern browsers.

JavaScript Sliders

A selection of JavaScript-powered sliders for modern browsers. Examples included!

JavaScript Time & Date

A collection of time and date related JavaScript examples and how-to’s.

JavaScript Pagination

Various JavaScript pagination techniques, examples, breakdowns, JSON datasets and more.

JavaScript Arrays & Objects

JavaScript array manipulation for various scenarios, such as sorting, mapping, ordering and more.

JavaScript Canvas

A Canvas playground for all kinds of experiments. Drawing, animating, building games.

JavaScript DOM

DOM manipulation, code injection, elements, classes, ID’s, data attributes, nodes, and HTML.

AJAX and Fetching Data

Fetch data, send GET or POST requests, translate JSON responses into parsable data and more.

Methods, Events, and Scopes

this, closures, global and local scopes and other tricky bits.

Vanilla JavaScript Repository โŸถ

A Repository of Fine JavaScript Libraries and Components

Best free JavaScript & CSS libraries for modern web design.
All scripts and libraries have been created in-house, either as client work or simply as a demo. Feel free to use and improve upon any of them.

Thin Select

A custom <select> element with vanilla JavaScript and CSS. Drop your <select> elements inside a <div class="thin-select"></div> element and call it a day.

RoarJS

A responsive, customizable, accessible, zero-dependency, vanilla JavaScript alert/confirm replacement. It automatically centers itself on the page and looks great on any device.

Tiny

A custom, tiny confirmation modal dialog with Promise support to your website.

A zero-dependency, vanilla JavaScript draggable and horizontally scrollable carousel.

Stackgrid

A lightweight, easy to implement and fully responsive vanilla JavaScript Masonry grid. As the screen width changes, the grid automatically adjusts the size and position of the cards to create a seamless and visually appealing layout.

DragonflyJS

A tiny vanilla JavaScript library that enables drag and drop functionality with zero dependencies. By implementing this library, a user is able to drag and drop elements and reorder them.

A zero-dependency, vanilla JavaScript boxed carousel.

tail.select

A custom replacement for your HTML <select> fields with nothing but vanilla JavaScript!

Minimal Slider

A minimal responsive JavaScript slider with CSS transitions, autoplay, infinite slides and wrap-around functionality.

inView

A tiny, tiny vanilla JavaScript lazy loading script that loads images based on screen visibility. Did I say tiny?

Price Range Slider

All JavaScript range sliders are hacks or workarounds. Because thereโ€™s no native HTML element for a range slider (only a single value slider), there are lots of libraries and solutions out there.

Mine is the simplest ๐Ÿคจ and the most fit for my purpose. Feel free to borrow it and improve upon it.

Thin UI

Thin UI is an opinionated, lightweight UI framework consisting of a Flex-powered column grid and a list of basic components, such as form fields and buttons. Built using a functional CSS approach, which means you get exactly what you ask for, without any hidden surprises. The resulting file size is far smaller than a traditional CSS framework.

Thin Table Pagination

This is a JavaScript script that adds pagination functionality to HTML tables. Specifically, the script allows users to display only a certain number of rows per page โ€“ by dividing the table rows into pages โ€“ and navigate between pages using a set of page navigation links.

Enlageable Images

This script creates a fake lightbox effect to any image, allowing it to become enlargeable on click. It’s a good alternative to any lightbox plugin, or when an <a> element is not desirable.