diff --git a/Claude.md b/Claude.md new file mode 100644 index 00000000..005bd345 --- /dev/null +++ b/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 +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) diff --git a/stock-hackers-workbook/README.md b/stock-hackers-workbook/README.md new file mode 100644 index 00000000..45890522 --- /dev/null +++ b/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** diff --git a/stock-hackers-workbook/exercises/README.md b/stock-hackers-workbook/exercises/README.md new file mode 100644 index 00000000..b5d50bda --- /dev/null +++ b/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! diff --git a/stock-hackers-workbook/notes/README.md b/stock-hackers-workbook/notes/README.md new file mode 100644 index 00000000..5caf84fd --- /dev/null +++ b/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. 📝 diff --git a/stock-hackers-workbook/projects/README.md b/stock-hackers-workbook/projects/README.md new file mode 100644 index 00000000..38c15c81 --- /dev/null +++ b/stock-hackers-workbook/projects/README.md @@ -0,0 +1,103 @@ +# Projects + +Custom projects built by the Stock Hackers team. + +## Project Ideas + +### Finance-Themed Projects +Since you're the **Stock Hackers** team, consider building: + +1. **Stock Price Tracker** + - Real-time stock price display + - API integration with financial data providers + - Price charts and trends + +2. **Portfolio Manager** + - Track multiple stock holdings + - Calculate portfolio value + - Profit/loss calculations + +3. **Trading Game** + - Simulate stock trading + - Virtual currency system + - Leaderboard functionality + +4. **Market News Aggregator** + - Fetch financial news via API + - Filter by stocks or sectors + - Bookmark favorite articles + +5. **Investment Calculator** + - Calculate ROI, compound interest + - Investment scenario planning + - Visual charts and projections + +### General Project Ideas + +- Expand on course projects with new features +- Combine multiple concepts into one app +- Build tools that solve real team problems +- Create games with financial themes + +## Project Structure + +Each project should have: +``` +project-name/ +├── README.md # Project documentation +├── index.html # Main HTML +├── style.css # Styles +├── script.js # Main logic +├── assets/ # Images, icons, etc. +│ ├── images/ +│ └── icons/ +└── js/ # Additional JS modules (if needed) + ├── api.js + └── utils.js +``` + +## Project Requirements + +### Must Have +- Clear purpose and goal +- Clean, readable code +- Basic error handling +- Responsive design +- README with setup instructions + +### Nice to Have +- Comments explaining complex logic +- Multiple JS modules for organization +- CSS animations/transitions +- Accessibility features +- User data persistence (localStorage) + +## Starting a New Project + +1. **Plan First**: Sketch out features and structure +2. **Start Simple**: Build core functionality first +3. **Iterate**: Add features incrementally +4. **Test**: Verify functionality as you build +5. **Document**: Update README with usage instructions +6. **Share**: Demo to the team and get feedback + +## Collaboration + +- Use descriptive commit messages +- Create feature branches for major changes +- Review each other's code +- Share knowledge and techniques +- Celebrate wins together! + +## Inspiration + +Look at the 20+ course projects for inspiration: +- Study their structure +- Learn from their patterns +- Build upon their concepts +- Make them your own + +--- + +Build something awesome! 🚀 +**Stock Hackers Team** diff --git a/stock-hackers-workbook/solutions/README.md b/stock-hackers-workbook/solutions/README.md new file mode 100644 index 00000000..6b3407fd --- /dev/null +++ b/stock-hackers-workbook/solutions/README.md @@ -0,0 +1,49 @@ +# Solutions + +Reference solutions for Stock Hackers exercises. + +## Important Guidelines + +⚠️ **Try Before You Look!** +- Attempt exercises on your own first +- Struggle is part of the learning process +- Use solutions as a learning tool, not a crutch + +## What You'll Find Here + +- **Reference Implementations**: Well-commented solution code +- **Multiple Approaches**: Different ways to solve the same problem +- **Best Practices**: Examples of clean, maintainable code +- **Explanations**: Comments explaining why certain approaches were chosen + +## How to Use Solutions + +1. **Complete the Exercise First**: Give it your best effort +2. **Compare Approaches**: See how your solution differs +3. **Learn from Differences**: Understand why alternative approaches work +4. **Ask Questions**: If something is unclear, discuss with the team +5. **Refactor Your Code**: Apply learnings to improve your solution + +## Solution Structure + +``` +solutions/ +├── week-01/ +│ ├── exercise-01/ +│ │ ├── solution.js +│ │ ├── alternative-solution.js +│ │ └── explanation.md +│ └── exercise-02/ +└── week-02/ +``` + +## Learning Tips + +- Don't just copy the solution - understand it +- Try implementing the solution yourself after reviewing +- Experiment with modifications +- Note patterns and techniques you can reuse + +--- + +Remember: The goal is learning, not just completing exercises!