Syntaxed v0.3.1 - Professional Code Typing Trainer

Master your coding speed with our professional typing trainer. Practice with 25+ programming languages, track your progress, and improve your development efficiency.

✨ Features

🎯 Professional Typing Interface

Monaco Editor integration - Industry-standard code editor with syntax highlighting
25+ programming languages supported with authentic code snippets
Multiple topics per language (Variables, Control Flow, Functions, and more)
Real-time syntax highlighting for each programming language
Desktop Version Built in Tauri Also on GitHub syntaxed-desktop

📊 Advanced Performance Metrics

Words Per Minute (WPM) calculation with precision timing
Real-time accuracy tracking with error detection
Error count monitoring with visual feedback
Time elapsed display with millisecond accuracy
Live metrics updates every 100ms for smooth performance

🏆 Comprehensive Statistics System

Personal best tracking for each language and topic
Completion history with timestamps and attempt counts
Global statistics across all languages and sessions
Persistent data storage using localStorage
Detailed performance analytics with exportable stats modal

🎨 Modern UI/UX Design

Dark/Light mode toggle with smooth transitions
Fully responsive design - works perfectly on mobile, tablet, and desktop
Touch-friendly interface with optimized button sizes
Accessible design - WCAG 2.1 compliant with screen reader support
High contrast mode support for visually impaired users

⌨️ Power User Features

Keyboard shortcuts for all major functions:
- Alt + Q: Stop test
- Alt + R: Reset test
- Alt + T: Toggle theme (Dark/Light mode)
- Alt + E: Show explanation modal
- Alt + S: View statistics
- Alt + V: Vertical layout
- Alt + H: Horizontal layout
- Alt + U: Toggle blur levels (10%, 30%, 50%, 70%, 90%)
Icon-only mode for ultra-small screens (under 360px)
Automatic test detection - starts on first keystroke
Completion celebration with personal best comparison and time display

🛡️ Professional Quality

Error handling with graceful degradation
Performance optimized with debounced updates
SEO optimized with complete meta tags and structured data
Social media ready with Open Graph and Twitter Card support
Cross-browser compatible with modern web standards

🚀 Quick Start

Visit the live demo: burkifa23.github.io/Syntaxed
Select your language from the dropdown (25+ options available)
Choose a topic (Start, Variables, Control Flow, Functions)
Start typing when you see the code snippet
Track your progress with real-time metrics
View your stats to see personal bests and improvement over time

💻 Supported Languages

Plus Additional Languages:

✅ ASSEMBLY X86-64 LINUX NASM
✅ COBOL - Legacy systems programming
✅ MOKOTO ICP Programming Language
✅ Oen an issue to suggest a path or ideas.

Plan is From Zero To Hero

🛠️ Tech Stack

Built with modern web technologies for optimal performance:

Key Technologies:

HTML5 - Semantic markup with ARIA accessibility
CSS3 - Modern responsive design with advanced features
Vanilla JavaScript - High-performance ES6+ code
Monaco Editor - Professional code editor (VS Code engine)
LocalStorage API - Persistent statistics and user data

🎯 Why Syntaxed?

For Developers:

Improve coding speed with real code snippets
Learn new languages through typing practice
Track your progress with detailed analytics
Practice anywhere - fully responsive design

For Educators:

Engage students with interactive typing practice
Support multiple languages in one platform
Monitor progress with built-in statistics
Accessible design for inclusive learning

For Companies:

Train new developers on coding efficiency
Standardize typing skills across teams
Improve code review speed through familiarity
Professional-grade tool ready for enterprise use

🏆 Recognition

Syntaxed demonstrates enterprise-level web development practices:

✅ WCAG 2.1 AA Compliant - Full accessibility support
✅ SEO Optimized - Complete meta tags and structured data
✅ Performance Optimized - 60fps animations and efficient updates
✅ Cross-browser Compatible - Works on all modern browsers
✅ Mobile-first Design - Perfect experience on any device

� Recent Updates (v0.3.1)

🎨 UI/UX Improvements

Single Theme Toggle Button

Replaced separate dark/light mode buttons with one unified theme toggle
Dynamic icon switching: Shows sun ☀️ in dark mode, moon 🌙 in light mode
Keyboard shortcut updated: Alt+T now toggles theme (previously Alt+B/Alt+W)
Theme preference now persists in localStorage
Smooth icon transitions for better visual feedback

Updated Keyboard Shortcuts

Alt + T: Toggle theme (Dark ↔ Light)
Alt + E: Show explanation modal (moved from Alt+T)
Alt + Q: Stop test
Alt + R: Reset test
Alt + S: View statistics
Alt + V: Vertical layout
Alt + H: Horizontal layout
Alt + U: Toggle blur levels

🐛 Critical Bug Fixes

Fixed Stats Double Increment Issue

Problem: Test completion counter was incrementing by 2 instead of 1
Root Cause: Race condition in updateMetrics() loop causing complete() to be called multiple times
Solution: Added hasCompleted flag to prevent duplicate completion calls
Result: Stats now accurately track test completions ✅

Fixed Timer Display Issue

Problem: Completion message showed "Test Completed in 0.0 seconds"
Root Cause: Debounced handleContentChange was restarting the test after completion, resetting startTime
Solution: Added !this.hasCompleted check to prevent restart after completion
Result: Accurate time display in completion message ✅

Enhanced Completion Message

Before: "🎉 Test Completed!"
After: "🎉 Test Completed in 15.6 seconds!"
Now displays the exact time taken to complete the test
Provides immediate feedback on performance

🔧 Technical Improvements

State Management

Added hasCompleted flag to TypingTest class for better state tracking
Improved test lifecycle management (start → running → complete → reset)
Fixed race conditions in debounced event handlers
Enhanced completion detection logic

Code Quality

Removed unused button references (darkModeButton, lightModeButton)
Cleaned up event listener management
Improved code organization and readability
Added safety checks for null/undefined values

🎯 Layout System

Vertical/Horizontal layout toggle now correctly affects only code editor panels
Target Code and Monaco Editor can be stacked or side-by-side
Smooth transitions between layout modes
Layout preference persists across sessions

🌟 Blur Mode Enhancements

Fixed blur functionality on Target Code panel
Two control methods: dropdown selector and cycle button
Blur levels: Off, 10%, 30%, 50%, 70%, 90%
Word reveal mode automatically enabled with blur
Both controls stay synchronized

�👥 Contributing

We welcome contributions! Whether it's:

🐛 Bug reports and fixes
✨ New language support
📝 Documentation improvements
🎨 UI/UX enhancements

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Monaco Editor Team - For the incredible code editor
DevIcons - For the beautiful programming language icons
Web Accessibility Initiative - For accessibility guidelines
The Developer Community - For inspiration and feedback
Gemini and Claude - For Documentation, Suggestions and endless hours of debugging

Built with ❤️ by Burkifa23 & Programmer-233

⭐ Star us on GitHub if you find this useful!

Name		Name	Last commit message	Last commit date
Latest commit History 602 Commits
.vscode		.vscode
explanations		explanations
snippets		snippets
Syntaxed_Logo.png		Syntaxed_Logo.png
UI-OVERHAUL-SUMMARY.md		UI-OVERHAUL-SUMMARY.md
full_Logo.png		full_Logo.png
index.html		index.html
readme.md		readme.md
script.js		script.js
styles.css		styles.css
syntaxed-preview.png		syntaxed-preview.png

Burkifa23/Syntaxed

Folders and files

Latest commit

History

Repository files navigation