# 💰 செலவு கண்காணிப்பாளர் (Expense Tracker)

![Expense Tracker Preview](../../assets/expense-tracker-preview.png)

## விளக்கம் (Description)

**HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் (ES மாட்யூல்கள்)** பயன்படுத்தி உருவாக்கப்பட்ட ஒரு எளிய **செலவு கண்காணிப்பாளர் (Expense Tracker)**, இது பயனர்கள் தங்களின் தினசரி வருமானம் (income) மற்றும் செலவுகளை (expenses) நிர்வகிக்க அனுமதிக்கிறது. பயனர்கள் பரிவர்த்தனைகளைச் (transactions) **சேர்க்கலாம், திருத்தலாம் மற்றும் நீக்கலாம்**, அவர்களின் **இருப்புச் சுருக்கத்தைப் (balance summary)** பார்க்கலாம் மற்றும் பேக்கெண்ட் (backend) இல்லாமல் **localStorage** ஐப் பயன்படுத்தித் தரவை உள்நாட்டில் (locally) சேமிக்கலாம்.

## அம்சங்கள் (Features)

- புதிய பரிவர்த்தனைகளைச் சேர் (வருமானம் அல்லது செலவு)
- ஏற்கனவே உள்ள பரிவர்த்தனைகளைத் திருத்து
- தேவையற்ற பரிவர்த்தனைகளை நீக்கு
- மொத்த இருப்பு (total balance), வருமானம் மற்றும் செலவுச் சுருக்கங்களைப் பார்
- `localStorage` ஐப் பயன்படுத்தித் தரவு நிலைத்தன்மை (Persistent data storage)
- சுத்தமான மற்றும் ரெஸ்பான்சிவ் UI வடிவமைப்பு

## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced)

- DOM கையாளுதல் (manipulation)
- வரிசைகள் (arrays) மற்றும் பொருள்களுடன் (objects) வேலை செய்தல்
- நிகழ்வு கையாளுதல் (Event handling) மற்றும் படிவச் சமர்ப்பிப்பு (form submission)
- `localStorage` ஐப் பயன்படுத்தித் தரவு நிலைத்தன்மை
- நிபந்தனை ரெண்டரிங் (Conditional rendering) மற்றும் மாறும் UI புதுப்பிப்புகள்
- மாடுலர் ஜாவாஸ்கிரிப்ட் (`index.mjs`)

## போனஸ் சவால் (Bonus Challenge)

- வழிசெலுத்தல் பட்டியில் (navbar) ஒரு **டார்க் மோட் டாகிள் (dark mode toggle)** 🌙 ஐச் சேர்க்கவும்
- JS சார்ட் (chart) நூலகத்தைப் பயன்படுத்தி **மாதாந்திரச் செலவு விளக்கப்படத்தைக் (monthly expense chart)** காட்டவும்
- பரிவர்த்தனைகளுக்கான **வடிகட்டி/தேடல் (filter/search)** விருப்பத்தைச் சேர்க்கவும்
- பயனர்கள் தரவை CSV ஆக **ஏற்றுமதி செய்ய (export)** அனுமதிக்கவும்

## நேரடி டெமோ (Live Demo)

<div align="center">
<iframe src="https://codesandbox.io/p/sandbox/f9n98v"
     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
     title="expense-tracker"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
</div>