How bradtraversy/vanillawebprojects works
This repository is a course collection of independent vanilla-JavaScript browser projects, not one integrated application. Users open a project and interact with its page; each project owns its own state and presentation. The README documents 20 projects, so all are represented even where source was not sampled. External service links are included only where sampled code shows requests or browser APIs; unsampled projects use their exact directory paths, and their internal wiring is not inferred.
Main entry points: lyrics-search/script.js Lyrics search · typing-game/script.js Typing game · memory-cards/script.js Memory cards · speech-text-reader/script.js Speech text reader
Components 28
Games and play
- Breakout game
breakout-game/script.js - Hangman game
hangman/script.js - Typing game
typing-game/script.js - Speak-number game
speak-number-guess - Memory cards
memory-cards/script.js
Media and relaxation
- Breathing relaxer
relaxer-app - Custom video player
custom-video-player - Music player
music-player/script.js - Speech text reader
speech-text-reader/script.js
Data and discovery
- Exchange calculator
exchange-rate - DOM array methods
dom-array-methods/script.js - Expense tracker
expense-tracker/script.js - Infinite scrolling
infinite_scroll_blog - Lyrics search
lyrics-search/script.js - Meal finder
meal-finder/script.js - Product filtering
product-filtering/script.js
Interactive utilities
- Seat booking
movie-seat-booking - Form validator
form-validator - Menu and modal
modal-menu-slider - Sortable list
sortable-list/script.js - New Year countdown
new-year-countdown
Other components
- User
- Random User API
- TheMealDB API
- Lyrics API
- CORS proxy
- Browser local storage
- Speech synthesis
Connections 29
- User → Breakout game: plays
- User → Hangman game: plays
- User → Typing game: plays
- User → Speak-number game: plays
- User → Memory cards: reviews cards
- User → Seat booking: books seats
- User → Form validator: submits form
- User → Menu and modal: opens controls
- User → Sortable list: sorts list
- User → Breathing relaxer: uses
- User → Custom video player: plays video
- User → Music player: plays tracks
- User → Speech text reader: enters or selects text
- User → New Year countdown: views countdown
- User → Exchange calculator: converts currency
- User → DOM array methods: transforms data
- User → Expense tracker: tracks transactions
- User → Infinite scrolling: browses posts
- User → Lyrics search: searches songs
- User → Meal finder: searches meals
- User → Product filtering: filters products
- DOM array methods → Random User API: fetches users
- Meal finder → TheMealDB API: fetches meals
- Lyrics search → Lyrics API: fetches suggestions and lyrics
- Lyrics search → CORS proxy: fetches pages
- Memory cards → Browser local storage: reads and writes cards
- Expense tracker → Browser local storage: reads and writes transactions
- Typing game → Browser local storage: reads and writes difficulty
- Speech text reader → Speech synthesis: speaks text