Create Claude.md and project structure for Stock Hackers

Claude.md

@@ -0,0 +1,184 @@
+# Claude.md - Stock Hackers Code-Along Workbook
+
+## Project Overview
+
+This repository contains 20+ vanilla JavaScript web projects originally created by Brad Traversy for Traversy Media. It has been adapted as a **code-along workbook** for the **Stock Hackers** team to learn and practice JavaScript fundamentals through hands-on project building.
+
+## Purpose
+
+The Stock Hackers workbook provides a structured learning path for team members to:
+- Master vanilla JavaScript (ES6+) without framework dependencies
+- Build real-world projects from scratch
+- Understand modern web development patterns
+- Practice working with browser APIs and external APIs
+- Develop problem-solving skills through practical exercises
+
+## Repository Structure
+
+```
+vanilla-web-projects/
+├── Claude.md                          # This file - project documentation
+├── readme.md                          # Original project documentation
+├── stock-hackers-workbook/            # Custom workbook materials
+│   ├── exercises/                     # Team exercises and challenges
+│   ├── solutions/                     # Reference solutions
+│   ├── notes/                         # Team learning notes
+│   └── projects/                      # Team-built projects
+└── [20+ project folders]/             # Original course projects
+    ├── form-validator/
+    ├── movie-seat-booking/
+    ├── custom-video-player/
+    └── ... (and more)
+```
+
+## Available Projects
+
+### Beginner-Friendly Projects
+1. **Form Validator** - Client-side validation with regex
+2. **Exchange Rate Calculator** - Currency conversion with API
+3. **New Year Countdown** - Date/time manipulation
+4. **Menu Slider & Modal** - UI components and DOM manipulation
+
+### Intermediate Projects
+5. **Movie Seat Booking** - Local storage and state management
+6. **Expense Tracker** - CRUD operations with persistence
+7. **Meal Finder App** - API integration and data fetching
+8. **Music Player** - Audio API and playlist management
+9. **Custom Video Player** - HTML5 video controls
+10. **Lyrics Search App** - API integration and dynamic content
+
+### Advanced Projects
+11. **Breakout Game** - Canvas API and game logic
+12. **Hangman Game** - Game state management
+13. **Memory Cards** - Algorithm implementation
+14. **Typing Game** - Event handling and timing
+15. **Speech Text Reader** - Web Speech API
+16. **Speak Number Guessing Game** - Voice recognition
+
+### Utility & UI Projects
+17. **DOM Array Methods** - Array manipulation demos
+18. **Infinite Scrolling** - Pagination and lazy loading
+19. **Product Filtering UI** - Dynamic filtering logic
+20. **Relaxer App** - Animation and timing
+
+## Technology Stack
+
+- **Vanilla JavaScript (ES6+)** - No frameworks required
+- **HTML5** - Semantic markup, Canvas API
+- **CSS3** - Modern styling, flexbox, grid
+- **Browser APIs** - LocalStorage, Speech, Canvas, Video, Audio
+- **External APIs** - Third-party API integration examples
+
+## Getting Started for Stock Hackers Team
+
+### 1. Clone the Repository
+```bash
+git clone <repository-url>
+cd vanilla-web-projects
+```
+
+### 2. Choose a Project
+Browse the available projects and select one that matches your skill level.
+
+### 3. Work Through the Project
+Each project contains:
+- `index.html` - Main HTML structure
+- `style.css` - Project styling
+- `script.js` - JavaScript logic
+- `readme.md` - Project specifications and learning objectives
+
+### 4. Use the Workbook Structure
+- **exercises/** - Complete team challenges and exercises
+- **solutions/** - Reference implementations (check after attempting)
+- **notes/** - Document your learnings and insights
+- **projects/** - Build your own variations
+
+## Learning Path Recommendations
+
+### Week 1-2: JavaScript Fundamentals
+- Form Validator
+- Exchange Rate Calculator
+- New Year Countdown
+
+### Week 3-4: DOM Manipulation & Storage
+- Menu Slider & Modal
+- Movie Seat Booking
+- Expense Tracker
+
+### Week 5-6: API Integration
+- Meal Finder App
+- Lyrics Search App
+- Infinite Scrolling
+
+### Week 7-8: Advanced Features
+- Music Player
+- Custom Video Player
+- Speech Text Reader
+
+### Week 9-10: Games & Canvas
+- Typing Game
+- Hangman Game
+- Breakout Game
+
+## Best Practices
+
+1. **Code Along First** - Type the code yourself, don't copy-paste
+2. **Understand Before Moving On** - Make sure you understand each concept
+3. **Experiment** - Modify projects to add your own features
+4. **Document** - Keep notes on what you learn
+5. **Share** - Collaborate with team members on challenges
+
+## Team Collaboration
+
+- Use the `stock-hackers-workbook/` folder for team-specific work
+- Share solutions and discuss approaches
+- Create custom exercises based on Stock Hackers needs
+- Build projects that relate to stock market/finance themes
+
+## Resources
+
+- **Live Demos**: vanillawebprojects.com
+- **Original Course**: Udemy - Brad Traversy
+- **Documentation**: MDN Web Docs (developer.mozilla.org)
+- **Practice**: Complete projects in your own style
+
+## Project Standards
+
+Each project should demonstrate:
+- Clean, readable code
+- Proper variable naming conventions
+- Code comments where necessary
+- Responsive design principles
+- Error handling
+- User experience considerations
+
+## Notes for Claude AI Assistant
+
+When working with this repository:
+- All projects are self-contained in their own folders
+- Follow the existing project structure (HTML, CSS, JS, README)
+- Test projects by opening `index.html` in a browser
+- Maintain consistency with the educational nature of the repo
+- Focus on vanilla JavaScript - no frameworks
+- Keep code beginner-friendly and well-commented
+
+## Git Workflow
+
+- **Main Branch**: Production-ready code
+- **Feature Branches**: Use `claude/` prefix for AI-assisted work
+- **Current Branch**: `claude/setup-stock-hackers-workbook-T0uw4`
+- **Commit Often**: Small, descriptive commits
+- **Push When Complete**: To designated feature branch
+
+## Questions or Issues?
+
+- Review project `readme.md` files for specifications
+- Check live demos for expected behavior
+- Consult MDN docs for API references
+- Collaborate with Stock Hackers team members
+
+---
+
+**Last Updated**: 2026-01-16
+**Maintained By**: Stock Hackers Team
+**AI Assistant**: Claude (Anthropic)

stock-hackers-workbook/README.md

@@ -0,0 +1,62 @@
+# Stock Hackers Code-Along Workbook
+
+Welcome to the Stock Hackers JavaScript learning workbook! This folder contains all team-specific materials, exercises, and projects.
+
+## Folder Structure
+
+### 📚 `/exercises`
+Team exercises and coding challenges. This is where you'll find:
+- Weekly coding challenges
+- Practice problems
+- Skill-building exercises
+- Team assignments
+
+### ✅ `/solutions`
+Reference solutions for exercises. Guidelines:
+- Try exercises first before checking solutions
+- Multiple approaches may be valid
+- Learn from different solution styles
+- Use as a learning tool, not a shortcut
+
+### 📝 `/notes`
+Team learning notes and documentation:
+- Personal learning notes
+- Team meeting notes
+- Key concepts and takeaways
+- Code snippets and references
+- Best practices discovered
+
+### 🚀 `/projects`
+Custom projects built by the Stock Hackers team:
+- Original team projects
+- Variations of course projects
+- Finance/stock market themed projects
+- Collaborative team builds
+
+## How to Use This Workbook
+
+1. **Start with Exercises**: Work through weekly challenges in `/exercises`
+2. **Document Your Learning**: Keep notes in `/notes` about what you discover
+3. **Check Solutions**: After attempting exercises, review `/solutions` for reference
+4. **Build Projects**: Apply your skills in `/projects` with custom builds
+
+## Team Workflow
+
+1. Pull latest changes from the repository
+2. Work on assigned exercises or projects
+3. Document your approach and learnings
+4. Share and discuss with team members
+5. Commit and push your work to the feature branch
+
+## Getting Help
+
+- Review the main `Claude.md` file for project overview
+- Check individual project folders for reference implementations
+- Consult MDN Web Docs for JavaScript references
+- Collaborate with team members on Slack/Teams
+- Ask questions during team meetings
+
+---
+
+Happy Coding! 🎯
+**Stock Hackers Team**

stock-hackers-workbook/exercises/README.md

@@ -0,0 +1,51 @@
+# Exercises
+
+This folder contains coding exercises and challenges for the Stock Hackers team.
+
+## Structure
+
+Organize exercises by week or topic:
+```
+exercises/
+├── week-01/
+├── week-02/
+├── fundamentals/
+├── dom-manipulation/
+├── api-integration/
+└── advanced/
+```
+
+## Exercise Format
+
+Each exercise should include:
+- Clear problem statement
+- Learning objectives
+- Starter code (if applicable)
+- Expected output/behavior
+- Hints or tips (optional)
+
+## Submission Guidelines
+
+1. Create a folder for each exercise attempt
+2. Include your solution files (HTML, CSS, JS)
+3. Add comments explaining your approach
+4. Test your solution before submitting
+
+## Example Exercise
+
+```
+exercise-name/
+├── instructions.md    # Exercise requirements
+├── starter/          # Starting code template
+│   ├── index.html
+│   ├── style.css
+│   └── script.js
+└── your-solution/    # Your implementation
+    ├── index.html
+    ├── style.css
+    └── script.js
+```
+
+---
+
+Start with the fundamentals and progress to more advanced topics!

stock-hackers-workbook/notes/README.md

@@ -0,0 +1,81 @@
+# Notes
+
+Team learning notes and documentation for Stock Hackers.
+
+## What to Document
+
+### Personal Learning Notes
+- Concepts you've learned
+- "Aha!" moments and breakthroughs
+- Questions and areas of confusion
+- Resources that helped you understand
+
+### Code Snippets
+- Useful code patterns
+- Reusable functions
+- Helper utilities
+- Common solutions
+
+### Best Practices
+- Coding standards
+- Design patterns discovered
+- Performance tips
+- Accessibility considerations
+
+### Meeting Notes
+- Team discussion summaries
+- Decisions made
+- Action items
+- Q&A sessions
+
+## Suggested Structure
+
+```
+notes/
+├── personal/
+│   ├── john-smith-notes.md
+│   └── jane-doe-notes.md
+├── team/
+│   ├── meeting-2026-01-16.md
+│   └── architecture-decisions.md
+├── concepts/
+│   ├── async-javascript.md
+│   ├── dom-manipulation.md
+│   └── api-integration.md
+└── snippets/
+    ├── utility-functions.js
+    └── common-patterns.js
+```
+
+## Note-Taking Tips
+
+1. **Be Consistent**: Take notes regularly, not just when stuck
+2. **Use Examples**: Include code examples with explanations
+3. **Link Resources**: Add URLs to helpful articles or docs
+4. **Review Regularly**: Revisit notes to reinforce learning
+5. **Share Insights**: Help team members by sharing what works
+
+## Markdown Format
+
+Use clear formatting:
+```markdown
+# Topic Title
+
+## Key Concept
+
+Brief explanation...
+
+### Code Example
+```javascript
+// Your code here
+```
+
+### Key Takeaways
+- Point 1
+- Point 2
+- Point 3
+```
+
+---
+
+Document your journey! Future you will thank present you. 📝