💡 Inspiration We noticed that many students and young people struggle with managing their pocket money, tracking daily expenses, and setting realistic financial goals. With financial literacy being crucial for the future, we wanted to build a simple, accessible, and smart tool to solve this.
🚀 What it does MK Smart pocket is a bilingual (Arabic/English) web application that helps users:
- Track daily income and expenses dynamically with local storage persistence.
- Calculate smart savings goals and determine exact daily saving amounts.
- Switch seamlessly between Dark Mode and Light Mode for optimal user experience.
🛠️ How we built it
- HTML5 & CSS3: For a responsive, modern, and clean user interface with dynamic theme variables.
- JavaScript (Vanilla JS): For handling financial logic, localized data storage (
LocalStorage), and multi-language support.
🚧 Challenges we ran into
- Ensuring smooth layout transitions between Right-to-Left (RTL) for Arabic and Left-to-Right (LTR) for English.
- Designing a minimalist dashboard that packs multiple robust features without feeling cluttered on mobile screens.
🏆 Accomplishments that we're proud of
- Successfully delivering a fully working, responsive prototype with state management and persistent storage using pure vanilla web technologies.
- Creating an accessible educational tool that promotes financial literacy among youth.
📚 What we learned
- Advanced DOM manipulation and dynamic translation mapping in JavaScript.
- The importance of clean UI/UX design in financial and productivity applications.
