JavaScript｜Samples

• Home
• JavaScript｜Samples

JavaScript｜Samples

CSS

• Check Box
• 

  CSS Custom Checkboxes with SVG: A Complete Guide to Beautiful, Accessible UI Design

  Learn how to build 18 beautifully designed, fully accessible custom checkboxes using CSS and SVG. This guide walks you through practical techniques to overcome native limitations and create flexible, high‑quality UI components.

• Toggle Switch
• 

  Customize Toggle Switches with Pure CSS — 13 Copy‑Paste Checkbox UI Designs

  A collection of 13 toggle switch designs built entirely with CSS. Each switch scales with font size using em units, features a lightweight structure with appearance: none;, works on mobile, requires no JavaScript, and is ready to copy and use.

• Custom Properties (CSS Variables)

• CSS Bouncing Text Animation Using Custom Properties — With Sample Code

  Implement a bouncing text animation in CSS. By using custom properties to control delays, you can fine‑tune the motion with ease. Includes sample code and a clear explanation.

• CSS Fade‑In and Fade‑Out Text Animation, One Character at a Time — Using Custom Properties (With Sample Code)

  Implement a character‑by‑character fade‑in and fade‑out text animation using CSS. With custom properties controlling the delay, you can easily fine‑tune the motion. Includes sample code and a clear explanation.

• CSS Shaking Text Animation, One Character at a Time — Using Custom Properties (With Sample Code)

  Implement a character‑by‑character shaking text animation using CSS. With custom properties controlling the delay, you can fine‑tune the motion easily. Includes sample code and a clear explanation.

Javascript

• Chart

• Easily Draw Charts with Chart.js｜How to Implement Line and Radar Charts

  If you want to display charts in JavaScript, Chart.js is the way to go. This guide explains how to create line charts and radar charts in detail, complete with sample code.

• SVG Animation

• SVG × JavaScript Animation Design You Can Copy and Paste (Part 1)

  A copy‑and‑paste‑ready SVG and JavaScript animation design featuring bouncing cubes with randomized colors.

• SVG × JavaScript Animation Design You Can Copy and Paste (Part 2)

  A copy‑and‑paste‑ready SVG and JavaScript animation design featuring bouncing cubes with customizable color patterns.

• SVG × JavaScript: Implementing a Bouncing Ball Animation｜Copy‑and‑Paste Sample Code

  Create a colorful bouncing‑ball animation using SVG and JavaScript. By adjusting the viewBox height, it can also be used as a divider‑style visual effect. The included sample code works out of the box and can be copied and pasted as is.

• Arrange Text Freely with SVG textPath! Animations Along Lines, Arcs, and Curves Using JavaScript

  With SVG textPath, you can freely place text along straight lines, arcs, and Bézier curves. Combine it with JavaScript to create smooth animations with ease—making expressive effects possible that are difficult to achieve with CSS alone.

• Animation with the animate() Method

• Create Intuitive Animations with JavaScript’s animate()

  Implement flexible animations with JavaScript’s animate()—perfect for effects that are difficult to achieve with CSS alone. This guide clearly explains how to use its options and customize animations with ease.

• Carousel

• Free 3D Rotating Carousel — Easy Implementation with CSS and JavaScript

  Easily add a 3D rotating carousel using CSS and JavaScript. This guide explains how to use 'mam_rotate_carousel.js' with setup instructions and sample code, making it simple even for beginners.

• Copy‑and‑Paste Ready! A Lightweight and Simple Fade‑Out Image Carousel (CSS + JavaScript)

  A copy‑and‑paste friendly carousel that stacks randomly rotated images and switches them with a fade‑out effect. Includes the full source code for mam_fadeout_carousel.js (CSS + JavaScript).

• Table

• Edit Tables with Drag & Drop: Move, Copy, and Delete Rows in JavaScript

  Easily edit HTML tables with drag-and-drop! With the lightweight JavaScript library 'mamdragdrop.js', you can move, copy, and delete rows—just by copying and pasting the script into your project.

• A Copy‑and‑Paste Responsive Table That Switches to a Two‑Column Layout Below 640px (Design 1)

  Easily add this responsive table with simple copy‑and‑paste. It automatically switches to a two‑column layout when the screen width is 640px or less. Lightweight and smooth, making it ideal for business tools and data displays.

• A Copy‑and‑Paste Responsive Table That Switches to a Two‑Column Layout Below 640px (Design 2)

  Easily add this responsive table with simple copy‑and‑paste. It automatically switches to a two‑column layout when the screen width is 640px or less. Lightweight and smooth, making it ideal for business tools and data displays.

• A Copy‑and‑Paste JavaScript & CSS Table with Ascending/Descending Column Sorting

  Create a sortable table that lets you reorder column values in ascending or descending order with just a click on the header row. This lightweight solution can be added instantly using simple copy‑and‑paste JavaScript and CSS. Sample code included.

• Hardware — Sound / Audio

• Playing PCM Data in JavaScript How to Use AudioContext.createBuffer

  A detailed guide on how to create and play PCM data in JavaScript using AudioContext. This article explains how to work with createBuffer and adjust settings such as sample rate and channel configuration.

• Playing Sound in JavaScript Setting Frequencies and Playback with OscillatorNode

  An explanation of how to play sound in JavaScript. This guide covers how to generate and play tones of specific frequencies using AudioContext and OscillatorNode.

• How to Implement Speech Recognition and Transcription in JavaScript Includes Microphone Input Sample

  An introduction to performing speech recognition and transcription in JavaScript. This guide explains the basics of the SpeechRecognition API and includes sample code that supports microphone input.

• How to Make the Browser Read Text Aloud in JavaScript【speechSynthesis】

  An explanation of how to use window.speechSynthesis.speak() to make the browser read text aloud. Includes sample code!

• Recording Audio from the Microphone in JavaScript: Download, POST to Server, and Playback

  Record audio from the microphone in a website using JavaScript. This guide covers downloading the recorded file, sending it to a server via POST, and playing back the recorded audio.

• Recording Audio from the Microphone in JavaScript: Oscilloscope Display, Download, POST, and Playback

  Record audio from the microphone in a website using JavaScript, display it as an oscilloscope waveform, download the recorded file, send it to a server via POST, and play it back (using getUserMedia, MediaRecorder, AudioContext, and createAnalyser).

• Hardware — Video / Image

• Reading JAN Codes in JavaScript｜Barcode Scanning with quagga.js and Accuracy Improvements

  This page explains how to read JAN barcodes from a webcam using JavaScript and quagga.js. It includes a simple accuracy‑improvement method that confirms a scan only when the same value is detected three times in a row, along with practical examples for camera setup, canvas handling, and decodeSingle processing.

• Reading Code39 Barcodes from Camera Video on a Website (Code39 Barcode Reader)

  This page demonstrates how to use JavaScript to read Code39 barcodes in real time from a camera stream on a website, converting them into text using quaggaJS.

• Free Guide: How to Build a QR Code Reader in JavaScript (Web Camera Supported)

  Learn how to scan QR codes in real time on a website using JavaScript and jsQR. This guide explains how to implement a QR code reader that works with camera input on iPhone (Safari), Chrome, and other browsers.

• Generate a Code39 Barcode PNG from Text Input on a Website

  Create a Code39 barcode PNG image from user‑entered text using JavaScript on a website.

• Hardware — Video and Image Method
  face-api.js

• Recognize Faces from WebCam Images on a Website and Retrieve Coordinates of Eyes, Mouth, Nose, and More

  Using JavaScript on a website, this method performs real‑time face recognition from a WebCam feed and retrieves coordinates for facial landmarks such as the eyes, mouth, and nose (powered by face‑api.js).

• Face Recognition + Age Estimation with JavaScript｜Webcam Implementation Using face-api.js

  A step‑by‑step guide on how to perform face recognition and real‑time AI‑based age estimation from a webcam using JavaScript and face-api.js, complete with implementation code.

• Hardware — Video and Image Method
  Google MediaPipe

• Detecting and Displaying Pose Landmarks from WebCam Images on a Website — Using Google MediaPipe/pose

  Detecting and displaying pose landmarks from WebCam images on a website using Google MediaPipe/pose.js.

• Segmenting and Displaying the Foreground Person from WebCam Images on a Website — Using Google MediaPipe/selfie_segmentation

  Segmenting and displaying the foreground person from WebCam images on a website using Google MediaPipe/selfie_segmentation.js.

• Detecting and Displaying Hand Landmarks from WebCam Images on a Website — Using Google MediaPipe/hands

  Detecting and displaying hand landmarks from WebCam images on a website using Google MediaPipe/hands.js.

• Detecting Faces and Estimating 468 3D Face Landmarks from WebCam Images on a Website — Using Google MediaPipe/face_mesh

  Detecting faces and estimating 468 3D face landmarks from WebCam images on a website using Google MediaPipe/face_mesh.js.

• Using Google MediaPipe/holistic to Combine right_hand, left_hand, pose, and face — Google MediaPipe/holistic

  Using Google MediaPipe/holistic.js on a website to process right_hand, left_hand, pose, and face together from WebCam images.

• Canvas

• Pixel Manipulation on Canvas in JavaScript｜How to Use getImageData and putImageData

  This page explains how to manipulate Canvas pixels in JavaScript. It covers how to use getImageData and putImageData to change colors, retrieve pixel data, and edit image content in detail.

• Apply a Skin‑Smoothing Filter in JavaScript｜Smoothing Images with a Bilateral Filter

  This page explains how to apply a bilateral filter in JavaScript to reduce spots and freckles in an image. It includes an implementation example of a skin‑smoothing filter using the Canvas API, along with a comparison of how the effect changes depending on the number of filter passes.

• A Website That Displays Explosion Animations

  A website where you can configure explosion animation parameters, display particle effects, and generate PNG frames or GIF files for each animation frame.

• Display an Analog Clock with JavaScript｜Lightweight Canvas‑Based Clock UI (Copy & Paste Ready)

  Learn how to display an analog clock on a webpage using JavaScript and Canvas. Includes lightweight, copy‑and‑paste‑ready code with smooth animations for the second, minute, and hour hands.

• Draw Fireworks Animation in JavaScript — Canvas‑Based Particle Effects (Copy & Paste Ready)

  Learn how to create a fireworks animation using JavaScript and Canvas. This guide includes copy‑and‑paste sample code, using sin/cos to draw radial particle bursts, gradient effects, and multi‑stage explosions.

• Hardware Sensor

• Draw Fireworks Animation in JavaScript — Canvas‑Based Particle Effects (Copy & Paste Ready)

  How to retrieve the screen orientation of a smartphone on a website using JavaScript (screen.orientation)

• Web Level Tool for Smartphones Display Device Tilt in Real Time with JavaScript

  A web-based level tool that reads your smartphone’s tilt using built‑in sensors and displays it in real time. With JavaScript’s DeviceOrientationEvent, you can easily check the rotation angles of the x, y, and z axes.

• Web Level Tool for Smartphones Display Device Tilt in Real Time with JavaScript

  A web-based level tool that reads your smartphone’s tilt using built‑in sensors and displays it in real time. With JavaScript’s DeviceOrientationEvent, you can easily check the rotation angles of the x, y, and z axes.

• dialog

• JavaScript Time Input UI — Lightweight, Mobile‑Friendly Time Picker (mamtimepicker.js)

  Introducing mamtimepicker.js — a lightweight JavaScript time‑input dialog that works without jQuery. Fully mobile‑friendly and easy to integrate by simply adding a class. Supports 5‑minute steps, readonly fields, and other practical features for real‑world use.

• Parallax Scroll Effect

• Copy‑and‑Paste Parallax Scroll Effect (JavaScript)

  A simple JavaScript parallax scroll effect you can use by copy‑and‑paste on your website.