# dom-projects | Jisan Mia | Knowledge Base | Instagit

dom-projects is an open-source web app that helps you learn frontend development faster with a hands-on practice style.  It is a collection of projects that you can use to learn HTML, CSS and JavaScript

GitHub Stars: 100

Repository: https://github.com/jisan-mia/dom-projects

---

## Articles

### [How to Organize and Structure a Vanilla JavaScript Project with Multiple Modules](/jisan-mia/dom-projects/how-to-organize-and-structure-a-vanilla-javascript-project-with-multiple-modules)

Organize vanilla JavaScript projects with multiple modules by treating features as self-contained folders and using ES modules. Learn to build scalable and maintainable codebases.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Use CSS Transforms and Transitions for Smooth Animations](/jisan-mia/dom-projects/how-to-use-css-transforms-and-transitions-for-smooth-animations)

Master smooth CSS animations using transform and transition properties. Learn to create GPU-accelerated visual changes and seamless state interpolations with JavaScript class toggles. Explore examples from the jisan-mia/dom-pro...

- Tags: tutorial
- Published: 2026-03-04

### [How to Create a Random User Generator Using the randomuser.me API](/jisan-mia/dom-projects/how-to-create-a-random-user-generator-using-randomuser-me-api)

Build a random user generator with vanilla JavaScript. Fetch user data from the randomuser.me API and dynamically display profiles on your webpage.

- Tags: tutorial
- Published: 2026-03-04

### [How to Implement a Weather App with External API Integration](/jisan-mia/dom-projects/how-to-implement-weather-app-with-external-api-integration)

Learn to implement a weather app with external API integration using JavaScript Fetch API and OpenWeatherMap. Display live weather data dynamically with vanilla JS.

- Tags: tutorial
- Published: 2026-03-04

### [How to Handle Keyboard Events for Keyboard-Accessible Web Apps](/jisan-mia/dom-projects/how-to-handle-keyboard-events-for-keyboard-accessible-web-apps)

Learn to handle keyboard events for accessible web apps. Filter repeats, whitelist keys, and map inputs to actions for full keyboard navigation and assistive technology support.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Create Responsive Navigation with Proper Event Handling in the DOM-Projects Repository](/jisan-mia/dom-projects/how-to-create-responsive-navigation-with-proper-event-handling)

Learn to build responsive navigation with event handling in the DOM-Projects repo. Use flexbox, media queries, and classList toggle for seamless mobile adaptation.

- Tags: tutorial
- Published: 2026-03-04

### [How to Implement a Quiz App with Timer and Score Tracking in Vanilla JavaScript](/jisan-mia/dom-projects/how-to-implement-quiz-app-with-timer-and-score-tracking)

Learn to build a quiz app with timer and score tracking using vanilla JavaScript CSS and HTML Explore the jisan-mia/dom-projects repository for a full example.

- Tags: tutorial
- Published: 2026-03-04

### [How to Convert Text to Morse Code and Vice Versa Using JavaScript: A Complete Guide](/jisan-mia/dom-projects/how-to-convert-text-to-morse-code-and-vice-versa-using-javascript)

Learn to convert text to Morse code and back using JavaScript. This guide explains bidirectional mapping and lookup tables with a practical example from jisan-mia/dom-projects.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Filter Array Data and Render Dynamic Content in the DOM: A Complete Guide](/jisan-mia/dom-projects/how-to-filter-array-data-and-render-dynamic-content-in-the-dom)

Master filtering array data and rendering dynamic DOM content. Learn to use Array.prototype.filter() and forEach() to build interactive web applications effectively.

- Tags: tutorial
- Published: 2026-03-04

### [How to Use LocalStorage for Persistent Data Storage in Vanilla JavaScript](/jisan-mia/dom-projects/how-to-use-localstorage-for-persistent-data-storage-in-vanilla-js)

Learn to use localStorage for persistent data storage in vanilla JS. Store key-value pairs, serialize objects with JSONstringify and retrieve them with JSONparse for seamless data persistence.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Implement a Testimonial Slider with Navigation Controls in Vanilla JavaScript](/jisan-mia/dom-projects/how-to-implement-testimonial-slider-with-navigation-controls)

Learn to build a vanilla JavaScript testimonial slider with navigation. This guide uses HTML CSS and JS to create a dynamic slider with easy controls. Perfect for web developers.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Consume REST APIs and Handle Async/Await in Vanilla JavaScript: 7 Patterns from dom-projects](/jisan-mia/dom-projects/how-to-consume-rest-apis-and-handle-async-await-in-vanilla-javascript)

Learn to consume REST APIs and handle async await in vanilla JavaScript. Explore 7 patterns from the dom-projects repository for efficient asynchronous operations and error handling.

- Tags: tutorial
- Published: 2026-03-04

### [How to Implement a Todo List with Add, Edit, Delete, and Filter Functionality in Vanilla JavaScript](/jisan-mia/dom-projects/how-to-implement-a-todo-list-with-add-edit-delete-and-filter-functionality)

Build a vanilla JavaScript todo list with add edit delete and filter features using native DOM APIs Clone the jisan mia dom projects repository for a dependency free solution

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Build a Calculator with Keyboard Support in Vanilla JavaScript](/jisan-mia/dom-projects/how-to-build-a-calculator-with-keyboard-support-in-vanilla-javascript)

Build a calculator with keyboard support using vanilla JavaScript. Learn to map keydown events, whitelist keys, and debounce input for a seamless user experience. Enhance your DOM projects today.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Use classList.toggle for Toggleable UI Components: 5 Patterns from the dom-projects Repository](/jisan-mia/dom-projects/how-to-use-classlist-toggle-for-toggleable-ui-components)

Master classList toggle for dynamic UI components. Explore 5 patterns from dom-projects and efficiently add/remove CSS classes for interactive elements.

- Tags: tutorial
- Published: 2026-03-04

### [How to Implement Infinite Scroll and Animation on Scroll Events in JavaScript](/jisan-mia/dom-projects/how-to-implement-infinite-scroll-and-animation-on-scroll-events)

Learn to implement infinite scroll and animation on scroll events with JavaScript. Discover efficient pagination detection and viewport-triggered animations using IntersectionObserver and getBoundingClientRect.

- Tags: tutorial
- Published: 2026-03-04

### [How to Create a Modal Dialog Using Traditional JavaScript and the HTML5 Dialog Element](/jisan-mia/dom-projects/how-to-create-a-modal-dialog-using-both-traditional-and-html5-dialog-element)

Learn to create modal dialogs with traditional JavaScript and the native HTML5 dialog element. Explore custom control versus built in accessibility.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Access the Device Camera Using the MediaDevices API: A Complete Guide](/jisan-mia/dom-projects/how-to-access-the-device-camera-using-the-mediadevices-api)

Learn how to access the device camera using the MediaDevices API. This guide shows you how to get a MediaStream and display video in your web app.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Use the Drag and Drop API for Kanban Board Functionality: A Complete Implementation Guide](/jisan-mia/dom-projects/how-to-use-the-drag-and-drop-api-for-kanban-board-functionality)

Build a Kanban board with the HTML Drag and Drop API. Learn to implement draggable elements, handle events, and use localStorage for persistent state. Get the complete guide.

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Implement Form Validation with Real-Time Feedback in Vanilla JavaScript](/jisan-mia/dom-projects/how-to-implement-form-validation-with-real-time-feedback-in-vanilla-js)

Implement real-time form validation using vanilla JavaScript. Add input event listeners and validator functions to provide instant success or error feedback without libraries. Learn more!

- Tags: how-to-guide
- Published: 2026-03-04

### [How to Fetch and Parse JSON Data from a Local File Using the Fetch API](/jisan-mia/dom-projects/how-to-fetch-and-parse-json-data-from-a-local-file-using-fetch-api)

Learn to fetch and parse JSON from a local file using the Fetch API.  Easily deserialize the JSON data and use it in your JavaScript applications.

- Tags: tutorial
- Published: 2026-03-04

### [How to Dynamically Create and Append DOM Elements in JavaScript: A Complete Guide](/jisan-mia/dom-projects/how-to-dynamically-create-and-append-dom-elements-in-javascript)

Learn to dynamically create and append DOM elements in JavaScript using document createElement, appendChild, and more. Master DOM manipulation for interactive web pages.

- Tags: how-to-guide
- Published: 2026-03-04