A multi-tool student dashboard built with vanilla HTML, CSS, and JavaScript as part of the Campus Recruitment Training (CRT) program — serving as a hands-on revision project for core MERN stack fundamentals before placements.
Before diving into React and Node.js at the interview level, this project was built to solidify JavaScript foundations — the engine behind the entire MERN stack. Every module in this dashboard targets a specific concept that frequently appears in technical rounds.
- Dynamic DOM creation and manipulation
- Functions, loops (for / while / do-while), and conditionals
- Arrays, nested objects, and data modeling
- Event handling and real-time UI updates
- Input validation and error handling
- Modular thinking — each tool is an independent, reusable unit
| Module | Concept Focus |
|---|---|
| Smart Attendance Tracker | Arrays, dynamic tables, percentage logic |
| CGPA Calculator | Objects, loops, weighted calculations |
| Number System Converter | Algorithms, while loops, no built-in shortcuts |
| Password Strength Analyzer | Regex, conditionals, live DOM updates |
| Dynamic Quiz System | Arrays of objects, state management, navigation |
| Expense Splitter | Nested logic, balance calculation, data mapping |
| Theme Generator | CSS variables, DOM styling, real-time events |
| Typing Speed Tester | Timers, string comparison, live rendering |
- HTML5 / CSS3 / Vanilla JavaScript
- No frameworks, no libraries — pure fundamentals
- Single-file architecture
Built during Campus Recruitment Training (CRT) as a revision exercise to bridge the gap between classroom JavaScript and real-world MERN development. Designed to mirror the kind of problem-solving expected in placement technical rounds.