# bradtraversy/vanillawebprojects

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bradtraversy-vanillawebprojects).**

16,097 stars · 4,390 forks · JavaScript

## Links

- GitHub: https://github.com/bradtraversy/vanillawebprojects
- awesome-repositories: https://awesome-repositories.com/repository/bradtraversy-vanillawebprojects.md

## Description

This project is a collection of reference implementations for vanilla web applications, interactive browser games, and core frontend development patterns. It consists of small web applications and tools built using standard HTML, CSS, and JavaScript without the use of external frameworks or libraries.

The collection demonstrates various practical implementations, including browser-based mini games with arcade and word-guessing mechanics, as well as frontend interface prototypes. These examples cover the use of the native document object model for state manipulation and the implementation of interactive web interfaces.

Capability areas covered include client-side API integration for external data fetching, form input validation, and the use of canvas rendering for graphics. Other featured utilities include audio playback controls, expense and income tracking, product list filtering, and text-to-speech synthesis.

## Tags

### Web Development

- [Vanilla JavaScript Applications](https://awesome-repositories.com/f/web-development/vanilla-javascript-applications.md) — Provides a collection of complete web applications built entirely with vanilla JavaScript. ([source](https://github.com/bradtraversy/vanillawebprojects#readme))
- [Vanilla JavaScript Implementations](https://awesome-repositories.com/f/web-development/vanilla-javascript-implementations.md) — Implements application behavior using standard ECMAScript specifications without the use of external frameworks or libraries.
- [Client-Side Data Fetching](https://awesome-repositories.com/f/web-development/client-side-data-fetching.md) — Fetches data from external REST services using the native fetch interface to dynamically populate the user interface.
- [Data Fetching](https://awesome-repositories.com/f/web-development/data-fetching-caching/data-fetching.md) — Implements mechanisms for retrieving and displaying third-party data, such as currency rates, using native browser tools. ([source](https://github.com/bradtraversy/vanillawebprojects#readme))
- [DOM Manipulation](https://awesome-repositories.com/f/web-development/dom-manipulation.md) — Implements native DOM interaction to dynamically update the structure and content of web pages. ([source](https://github.com/bradtraversy/vanillawebprojects#readme))
- [External API Integrations](https://awesome-repositories.com/f/web-development/external-api-integrations.md) — Fetches and displays external data from third-party services using standard browser communication tools.
- [Front-End Development](https://awesome-repositories.com/f/web-development/front-end-development.md) — Provides practical implementations of the user-facing part of web applications using native technologies.
- [Vanilla JavaScript Development](https://awesome-repositories.com/f/web-development/vanilla-javascript-development.md) — Builds interactive web features and small applications using standard HTML, CSS, and JavaScript without external frameworks.
- [Web Interface Construction](https://awesome-repositories.com/f/web-development/web-interface-construction.md) — Demonstrates the process of building functional web applications using standard HTML, CSS, and JavaScript. ([source](https://github.com/bradtraversy/vanillawebprojects#readme))
- [Client-Side Input Validators](https://awesome-repositories.com/f/web-development/client-side-input-validators.md) — Checks user input against specific rules and provides real-time feedback to ensure data accuracy before submission.
- [CSS Media Queries](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation/css-media-queries.md) — Uses media queries and flexible box models to adapt the visual interface across different screen sizes.

### Education & Learning Resources

- [Web Development Project Collections](https://awesome-repositories.com/f/education-learning-resources/web-development-project-collections.md) — Offers a collection of small web applications as reference implementations for frontend development.

### Game Development

- [Browser](https://awesome-repositories.com/f/game-development/browser.md) — Implements game mechanics and state management for interactive titles that run directly in the web browser.
- [Arcade Games](https://awesome-repositories.com/f/game-development/open-source-games/genres/arcade-games.md) — Features a variety of browser-based games focused on rapid gameplay and high scores.
- [Arcade Game Implementations](https://awesome-repositories.com/f/game-development/arcade-game-implementations.md) — Provides capabilities for implementing game mechanics, state management, and user input for browser titles. ([source](https://github.com/bradtraversy/vanillawebprojects#readme))
- [Word Guessing Mechanics](https://awesome-repositories.com/f/game-development/word-guessing-mechanics.md) — The project implements the logic for guessing letters to reveal hidden words, as seen in a Hangman-style game. ([source](https://github.com/bradtraversy/vanillawebprojects#readme))

### User Interface & Experience

- [DOM Manipulators](https://awesome-repositories.com/f/user-interface-experience/dom-manipulators.md) — Updates the user interface by directly modifying HTML elements and attributes in response to user input.
- [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Triggers JavaScript functions using browser event listeners to handle user clicks and keyboard inputs.
- [Vanilla DOM Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/javascript-component-controllers/vanilla-dom-controllers.md) — Implements UI behavior using direct DOM manipulation without the need for a framework runtime.
- [Browser Local Storage Management](https://awesome-repositories.com/f/user-interface-experience/browser-local-storage-management.md) — Saves user data and application state in the browser's local storage to maintain information across page refreshes.
- [UI Component Prototypes](https://awesome-repositories.com/f/user-interface-experience/ui-component-prototypes.md) — Creates functional UI components like product filters and modal menus to test layout and interaction logic.

### Graphics & Multimedia

- [Canvas Rendering](https://awesome-repositories.com/f/graphics-multimedia/canvas-rendering.md) — Uses direct pixel manipulation on a 2D canvas to render high-frequency visual updates for arcade games.