چگونه یک ردیاب هزینه با HTML، CSS و جاوا اسکریپت بسازیم
ساختن پروژه ها راهی عالی برای تمرین و بهبود مهارت های توسعه وب شما است. و این همان کاری است که ما در این آموزش عمیق انجام خواهیم داد: ساخت یک پروژه عملی با استفاده از HTML، CSS و جاوا اسکریپت.
اگر اغلب فکر می کنید که تمام پول شما کجا رفته یا چگونه توانسته اید این همه هزینه کنید، پس این پروژه برای شما مناسب است. من یک ردیاب هزینه ساده برای کمک به مدیریت امور مالی خود ایجاد کردم و تصمیم گرفتم یک آموزش گام به گام را با جامعه توسعه دهندگان به اشتراک بگذارم.
در این آموزش، فرآیند ساخت یک ردیاب هزینه اولیه را از ابتدا مرور خواهیم کرد. چه در توسعه وب تازه کار باشید و چه به دنبال افزایش مهارت های خود هستید، این پروژه تجربه عملی در HTML، CSS و جاوا اسکریپت را برای شما فراهم می کند.
در پایان، شما یک ابزار کاملا کاربردی برای ردیابی درآمد، مدیریت هزینه‌ها و حفظ یک نمای کلی شفاف از امور مالی خود در یک رابط کاربری شیک و کاربرپسند خواهید داشت.
ما با تنظیم ساختار ردیاب شروع می کنیم، به سبک سازی آن می پردازیم تا از نظر بصری جذاب شود، و در نهایت، عملکردی را اجرا می کنیم که آن را زنده می کند.
فهرست مطالب
پیش نیازها
برای استفاده حداکثری از این آموزش، داشتن درک اولیه از HTML، CSS و جاوا اسکریپت مفید خواهد بود. آشنایی با ایجاد صفحات وب ساده و مدیریت دستکاری اولیه DOM در جاوا اسکریپت به شما کمک می کند تا راحت تر دنبال کنید.
اما اگر با این فناوری ها تازه کار هستید، نگران نباشید – من شما را در هر مرحله با توضیحات مفصل راهنمایی می کنم.
تنظیم ساختار HTML
اول از همه، ما باید ساختار اولیه HTML را تنظیم کنیم. این به‌عنوان پایه‌ای برای هر چیز دیگری که خواهیم ساخت، عمل خواهد کرد. اگر در HTML تازه کار هستید نگران نباشید. من شما را در هر مرحله راهنمایی خواهم کرد.
1. یک قالب پایه HTML ایجاد کنید
با ایجاد یک فایل جدید و نامگذاری آن index.html شروع کنید. این فایل ساختار ردیاب هزینه ما را نگه می دارد. هر فایل HTML با یک الگوی اولیه شروع می‌شود که شامل اعلان <!DOCTYPE html> ، تگ <html> و بخش‌های head و body است.
در اینجا قالب اولیه HTML شما باید شبیه باشد:
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Expense Tracker </ title > </ head > < body > </ body > </ html >2. اضافه کردن یک ظرف
در داخل تگ <body> ، بیایید با گفت ن یک عنصر div با یک کلاس از container شروع کنیم. این کانتینر تمام محتوای ردیاب هزینه ما مانند عنوان، فیلدهای ورودی و خلاصه را در خود جای می دهد. ما از یک ظرف برای وسط همه چیز در صفحه استفاده می کنیم و مطمئن می شویم که چیدمان ما مرتب به نظر می رسد.
در اینجا نحوه انجام این کار آمده است:
< body > < div class = "container" > <!-- All content will go here --> </ div > </ body >3. عنوان Expense Tracker را اضافه کنید
حالا بیایید یک عنوان به ردیاب هزینه خود اضافه کنیم. برای این کار از تگ <h1> استفاده می کنیم که معمولاً برای عنوان اصلی یک صفحه وب استفاده می شود.
کد زیر را داخل container div اضافه کنید:
< h1 > Expense Tracker </ h1 >این عنوان به طور برجسته در بالای صفحه شما نمایش داده می شود و به کاربران اجازه می دهد بدانند برنامه در مورد چیست.
4. راه اندازی بخش های درآمد و هزینه
در مرحله بعد، بخش هایی را برای درآمد و هزینه ها اضافه می کنیم. این بخش ها شامل فیلدهای ورودی است که کاربران می توانند جزئیات درآمد و هزینه خود را وارد کنند.
با گفت ن دو عنصر div شروع کنید که هر کدام دارای یک کلاس section هستند. یک بخش مربوط به درآمد و بخش دیگر مربوط به هزینه ها خواهد بود. این هم کد:
< div class = "section" > < h2 > Income </ h2 > <!-- Income input fields will go here --> </ div > < div class = "section" > < h2 > Expenses </ h2 > <!-- Expense input fields will go here --> </ div > تگ‌های <h2> در داخل این بخش‌ها به عنوان زیرعنوان برای برچسب‌گذاری هر بخش عمل می‌کنند. فیلدهای ورودی را در مرحله بعد اضافه می کنیم.
5. اضافه کردن فیلدهای ورودی
حالا بیایید فیلدهای ورودی را برای بخش درآمد اضافه کنیم. کاربران باید یک توضیحات (به عنوان مثال، "حقوق") و یک مقدار وارد کنند. هر فیلد ورودی در یک div با یک input-group پیچیده می‌شود تا بعداً سبک‌سازی آسان شود.
در حالی که این مثال از Naira نیجریه (₦) برای ارز استفاده می کند، شما به راحتی می توانید آن را با هر ارزی که ترجیح می دهید تطبیق دهید. به سادگی نماد ارز را در مکان یا هر برچسبی برای مطابقت با نیازهای خود جایگزین کنید.
در اینجا نحوه اضافه کردن فیلدهای ورودی آورده شده است:
< div class = "input-group" > < label for = "income-description" > Description </ label > < input type = "text" id = "income-description" placeholder = "eg Salary" > </ div > < div class = "input-group" > < label for = "income-amount" > Amount (₦) </ label > < input type = "number" id = "income-amount" placeholder = "eg 100000" > </ div >همین کار را برای بخش هزینه‌ها انجام دهید، اما این بار، یک فهرست کشویی برای دسته هزینه‌ها نیز اضافه می‌کنیم:
< div class = "input-group" > < label for = "expense-description" > Description </ label > < input type = "text" id = "expense-description" placeholder = "eg Rent" > </ div > < div class = "input-group" > < label for = "expense-category" > Category </ label > < select id = "expense-category" > < option value = "Housing" > Housing </ option > < option value = "Food" > Food </ option > < option value = "Transportation" > Transportation </ option > < option value = "Entertainment" > Entertainment </ option > < option value = "Others" > Others </ option > </ select > </ div > < div class = "input-group" > < label for = "expense-amount" > Amount (₦) </ label > < input type = "number" id = "expense-amount" placeholder = "eg 50000" > </ div >6. به هر بخش یک دکمه اضافه کنید
در نهایت، در هر بخش به دکمه ای نیاز داریم که کاربران با کلیک بر روی آن درآمد یا هزینه خود را به ردیاب اضافه کنند. یک عنصر button را در داخل هر بخش مانند زیر قرار دهید:
< div class = "button-group" > < button onclick = "addIncome()" > Add Income </ button > </ div >و برای بخش هزینه ها:
< div class = "button-group" > < button onclick = "addExpense()" > Add Expense </ button > </ div >7. نمایش تاریخچه تراکنش
بعد از قسمت های درآمد و هزینه به مکانی برای نمایش تاریخچه تراکنش نیاز داریم. ما از یک جدول برای این کار استفاده خواهیم کرد، زیرا روشی تمیز و سازمان یافته برای ارائه داده است.
کد زیر را بعد از قسمت هزینه ها اضافه کنید:
< div class = "table-container" > < h2 > Transaction History </ h2 > < table > < thead > < tr > < th > Description </ th > < th > Category </ th > < th > Amount (₦) </ th > < th > Type </ th > < th > Action </ th > <!-- Column for delete button --> </ tr > </ thead > < tbody id = "transaction-history" > <!-- Transactions will appear here --> </ tbody > </ table > </ div >8. اضافه کردن یک بخش خلاصه
در پایین ظرف، یک بخش خلاصه اضافه می کنیم که کل درآمد، کل هزینه ها و مانده را نشان می دهد.
در اینجا کد برای خلاصه آمده است:
< div class = "summary" > < h2 > Budget Summary </ h2 > < p > Total Income: ₦ < span id = "total-income" > 0 </ span > </ p > < p > Total Expenses: ₦ < span id = "total-expenses" > 0 </ span > </ p > < p > Balance: ₦ < span id = "balance" > 0 </ span > </ p > </ div >9. اضافه کردن یک دکمه پاک کردن همه
در نهایت، دکمه ای را اضافه کنید که به کاربران امکان می دهد تمام داده ها را با یک کلیک پاک کنند. اگر بخواهند همه چیز را بازنشانی کنند، این به ویژه مفید است.
در اینجا نحوه اضافه کردن دکمه پاک کردن آمده است:
< div class = "clear-button-group" > < button onclick = "clearAll()" > Clear All </ button > </ div >10. قرار دادن همه چیز با هم
وقتی همه قطعات را کنار هم قرار می دهید، ساختار HTML شما باید به شکل زیر باشد:
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Creative Budget Planner </ title > </ head > < body > < div class = "container" > < h1 > Expense Tracker </ h1 > < div class = "section" > < h2 > Income </ h2 > < div class = "input-group" > < label for = "income-description" > Description </ label > < input type = "text" id = "income-description" placeholder = "eg Salary" > </ div > < div class = "input-group" > < label for = "income-amount" > Amount (₦) </ label > < input type = "number" id = "income-amount" placeholder = "eg 100000" > </ div > < div class = "button-group" > < button onclick = "addIncome()" > Add Income </ button > </ div > </ div > < div class = "section" > < h2 > Expenses </ h2 > < div class = "input-group" > < label for = "expense-description" > Description </ label > < input type = "text" id = "expense-description" placeholder = "eg Rent" > </ div > < div class = "input-group" > < label for = "expense-category" > Category </ label > < select id = "expense-category" > < option value = "Housing" > Housing </ option > < option value = "Food" > Food </ option > < option value = "Transportation" > Transportation </ option > < option value = "Entertainment" > Entertainment </ option > < option value = "Others" > Others </ option > </ select > </ div > < div class = "input-group" > < label for = "expense-amount" > Amount (₦) </ label > < input type = "number" id = "expense-amount" placeholder = "eg 50000" > </ div > < div class = "button-group" > < button onclick = "addExpense()" > Add Expense </ button > </ div > </ div > < div class = "table-container" > < h2 > Transaction History </ h2 > < table > < thead > < tr > < th > Description </ th > < th > Category </ th > < th > Amount (₦) </ th > < th > Type </ th > < th > Action </ th > </ tr > </ thead > < tbody id = "transaction-history" > <!-- Transactions will appear here --> </ tbody > </ table > </ div > < div class = "summary" > < h2 > Budget Summary </ h2 > < p > Total Income: ₦ < span id = "total-income" > 0 </ span > </ p > < p > Total Expenses: ₦ < span id = "total-expenses" > 0 </ span > </ p > < p > Balance: ₦ < span id = "balance" > 0 </ span > </ p > </ div > < div class = "clear-button-group" > < button onclick = "clearAll()" > Clear All </ button > </ div > طراحی ردیاب هزینه با CSS
اکنون که ساختار HTML خود را آماده کرده ایم، زمان آن رسیده است که با گفت ن مقداری CSS، ردیاب هزینه خود را از نظر بصری جذاب کنیم. ما با یک ظاهر طراحی اولیه شروع می کنیم و سپس به جزئیات خاص تر می رویم تا مطمئن شویم همه چیز مرتب و کاربر پسند به نظر می رسد.
1. تنظیم فایل CSS
ابتدا یک فایل جدید به نام styles.css در همان فهرست فایل index.html خود ایجاد کنید. این فایل CSS را با گفت ن خط زیر در قسمت <head> index.html به HTML خود پیوند دهید:
< link rel = "stylesheet" href = "styles.css" > این خط به فایل HTML شما می گوید که از سبک های تعریف شده در styles.css استفاده کند.
2. حالت دادن به بدن
بیایید با اضافه کردن چند سبک اولیه به <body> برای تنظیم رنگ پس‌زمینه، فونت و طرح‌بندی خوب شروع کنیم. styles.css را باز کنید و کد زیر را اضافه کنید:
body { font-family : Arial, sans-serif; background-color : #f4f4f4 ; margin : 0 ; padding : 0 ; display : flex; justify-content : center; align-items : center; height : 100vh ; }font-family: ما از یک فونت ساده و تمیز استفاده می کنیم.
پس‌زمینه رنگ: پس‌زمینه خاکستری روشن ظاهری ملایم به ردیاب ما می‌دهد.
display, justify-content, align-item, height: این ویژگی ها محتوا را به صورت عمودی و افقی متمرکز می کنند.
3. حالت دادن به ظرف
در مرحله بعد، .container را استایل می‌دهیم تا ظاهری تمیز و منظم به آن ببخشیم:
.container { background-color : white; padding : 20px ; border-radius : 10px ; box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , 0.1 ); max-width : 600px ; width : 100% ; }پس‌زمینه-color: رنگ سفید محتوا را در برابر پس‌زمینه خاکستری متمایز می‌کند.
padding: فضای داخل ظرف را اضافه می کند تا محتوا با لبه ها تماس نداشته باشد.
border-radius: گوشه ها را گرد می کند تا ظاهری مدرن داشته باشد.
box-shadow: یک سایه ظریف اضافه می کند تا ظرف کمی از صفحه خارج شود.
حداکثر عرض و عرض: اطمینان حاصل می کند که ظرف پاسخگو است و از عرض معینی تجاوز نمی کند.
4. حالت دادن به سرفصل ها
بیایید سرفصل ها را سبک کنیم تا از نظر بصری متمایزتر شوند:
h1 , h2 { color : #333 ; text-align : center; } h1 { margin-bottom : 20px ; } h2 { margin-bottom : 15px ; }رنگ: رنگ خاکستری تیره برای متن آن را خوانا نگه می دارد.
text-align: سرفصل ها را در مرکز قرار می دهد تا یک طرح بندی متعادل ایجاد کند.
margin-bottom: فضای زیر عنوان ها را اضافه می کند.
5. سبک دادن به گروه های ورودی
حال، اجازه دهید فیلدها و برچسب‌های ورودی را در کلاس .input-group استایل کنیم:
.input-group { margin-bottom : 15px ; } .input-group label { display : block; margin-bottom : 5px ; color : #555 ; } .input-group input , .input-group select { width : calc ( 100% - 10px ); padding : 10px ; border : 1px solid #ddd ; border-radius : 5px ; box-sizing : border-box; font-size : 16px ; }margin-bottom: فاصله بین گروه های ورودی اضافه می کند.
display: block: اطمینان حاصل می کند که برچسب ها تمام عرض را می گیرند.
عرض: فیلدهای ورودی و عناصر انتخابی را پاسخگو می کند.
padding، border، border-radius: ظاهر صیقلی تری برای ورودی ها ایجاد می کند.
اندازه جعبه: اطمینان حاصل می کند که بالشتک در کل عرض عنصر گنجانده شده است.
6. حالت دادن به دکمه ها
بیایید به دکمه ها ظاهر تعاملی و جذاب تری بدهیم:
.button-group button , .clear-button-group button { background-color : #FF69B4 ; color : white; border : none; padding : 10px 20px ; border-radius : 5px ; cursor : pointer; font-size : 16px ; } .button-group button :hover , .clear-button-group button :hover { background-color : #FF1493 ; }پس‌زمینه رنگ: صورتی پر جنب و جوش برای دکمه‌ها که برجسته‌تر شوند.
رنگ: متن سفید برای کنتراست در برابر پس زمینه صورتی.
حاشیه، بالشتک، شعاع حاشیه: بدون حاشیه، بالشتک زیاد و گوشه های گرد برای ظاهری مدرن.
مکان نما: مکان نما را به یک اشاره گر در حالت شناور تغییر می دهد که نشان می دهد دکمه قابل کلیک است.
hover: هنگامی که ماوس را نگه می‌دارید، رنگ دکمه را تیره می‌کند تا اثر تعاملی ظریف داشته باشد.
7. شکل دادن به جدول تاریخچه تراکنش
ما همچنین به جدول تاریخچه تراکنش‌ها استایل می‌دهیم تا اطمینان حاصل کنیم که خواندن آن آسان است و از نظر بصری با بقیه ردیاب سازگار است:
.table-container { margin-top : 20px ; } table { width : 100% ; border-collapse : collapse; margin-bottom : 20px ; } th , td { text-align : left; padding : 10px ; border-bottom : 1px solid #ddd ; } th { background-color : #FF69B4 ; color : white; } td { color : #333 ; } td button { background-color : #FF1493 ; color : white; border : none; padding : 5px 10px ; border-radius : 3px ; cursor : pointer; } td button :hover { background-color : #C71585 ; }border-collapse: اطمینان حاصل می کند که هیچ شکافی بین حاشیه های جدول وجود ندارد.
padding, border-bottom: padding داخل سلول های جدول و یک حاشیه در زیر هر ردیف برای جداسازی اضافه می کند.
پس‌زمینه رنگ برای th: دکمه‌ها را برای طراحی منسجم منطبق می‌کند.
دکمه td: یک دکمه حذف را در سلول‌های جدول اضافه می‌کند که شبیه به سایر دکمه‌ها است.
8. حالت دادن به بخش خلاصه
در نهایت، بیایید بخش خلاصه را سبک کنیم تا برجسته شود:
.summary { background-color : #FFB3FF ; padding : 15px ; border-radius : 10px ; text-align : center; color : #333 ; } .summary p { margin : 10px 0 ; font-size : 18px ; } .summary span { font-weight : bold; }پس‌زمینه رنگ: پس‌زمینه صورتی ملایم به تمایز خلاصه از بقیه محتوا کمک می‌کند.
padding, border-radius: فاصله و گوشه های گرد را اضافه می کند.
text-align: متن را در خلاصه قرار می دهد.
font-size, font-weight: اندازه و وزن فونت را افزایش می دهد تا مجموع ها و تعادل بیشتر برجسته شود.
9. قرار دادن همه چیز با هم
در اینجا نحوه ظاهر فایل styles.css شما با ترکیب همه سبک ها آمده است:
body { font-family : Arial, sans-serif; background-color : #f4f4f4 ; margin : 0 ; padding : 0 ; display : flex; justify-content : center; align-items : center; height : 100vh ; } .container { background-color : white; padding : 20px ; border-radius : 10px ; box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , 0.1 ); max-width : 600px ; width : 100% ; } h1 , h2 { color : #333 ; text-align : center; } h1 { margin-bottom : 20px ; } h2 { margin-bottom : 15px ; } .input-group { margin-bottom : 15px ; } .input-group label { display : block; margin-bottom : 5px ; color : #555 ; } .input-group input , .input-group select { width : calc ( 100% - 10px ); padding : 10px ; border : 1px solid #ddd ; border-radius : 5px ; box-sizing : border-box; font-size : 16px ; } .button-group button , .clear-button-group button { background-color : #FF69B4 ; color : white; border : none; padding : 10px 20px ; border-radius : 5px ; cursor : pointer; font-size : 16px ; } .button-group button :hover , .clear-button-group button :hover { background-color : #FF1493 ; } .table-container { margin-top : 20px ; } table { width : 100% ; border-collapse : collapse; margin-bottom : 20px ; } th , td { text-align : left; padding : 10px ; border-bottom : 1px solid #ddd ; } th { background-color : #FF69B4 ; color : white; } td { color : #333 ; } td button { background-color : #FF1493 ; color : white; border : none; padding : 5px 10px ; border-radius : 3px ; cursor : pointer; } td button :hover { background-color : #C71585 ; } .summary { background-color : #FFB3FF ; padding : 15px ; border-radius : 10px ; text-align : center; color : #333 ; } .summary p { margin : 10px 0 ; font-size : 18px ; } .summary span { font-weight : bold; }با این CSS، ردیاب هزینه شما اکنون باید تمیز، مدرن و آسان به نظر برسد. همیشه می‌توانید رنگ‌ها، فونت‌ها یا طرح‌بندی را تغییر دهید تا با استایل یا برند شما مطابقت داشته باشد.
نحوه پیاده سازی عملکرد با جاوا اسکریپت
اکنون که ساختار HTML و استایل CSS خود را آماده کرده ایم، زمان آن رسیده است که ردیاب هزینه خود را با استفاده از جاوا اسکریپت زنده کنیم. ما عملکردی را اضافه می کنیم تا کاربران بتوانند هزینه ها را اضافه کنند، خلاصه ای را مشاهده کنند و موارد را از فهرست حذف کنند.
1. تنظیم فایل جاوا اسکریپت
ابتدا یک فایل جدید به نام script.js در همان فهرست فایل index.html خود ایجاد کنید. این فایل جاوا اسکریپت را با گفت ن خط زیر درست قبل از بستن تگ </body> در index.html به HTML خود پیوند دهید:
< script src = "script.js" > </ script > این خط به فایل HTML شما می گوید که کد جاوا اسکریپت را از script.js اجرا کند.
2. تعریف متغیرها
بیایید با تعریف چند متغیر برای ارجاع عناصر کلیدی در HTML خود شروع کنیم. script.js را باز کنید و کد زیر را اضافه کنید:
const expenseForm = document .getElementById( 'expense-form' ); const expenseInput = document .getElementById( 'expense-input' ); const amountInput = document .getElementById( 'amount-input' ); const categoryInput = document .getElementById( 'category-input' ); const transactionList = document .getElementById( 'transaction-list' ); const totalExpense = document .getElementById( 'total-expense' ); const totalIncome = document .getElementById( 'total-income' ); const balance = document .getElementById( 'balance' );کاری که هر متغیر انجام می دهد به شرح زیر است:
costForm: به فرمی اشاره می کند که در آن کاربران هزینه های جدید را وارد می کنند.
costInput: به فیلد ورودی برای توضیحات هزینه ارجاع می دهد.
مقدارInput: فیلد ورودی مبلغ هزینه را ارجاع می دهد.
categoryInput: به منوی کشویی برای انتخاب دسته هزینه ارجاع می دهد.
transactionList: ارجاع به جدولی است که در آن تراکنش ها را نمایش خواهیم داد.
totalExpense، totalIncome، موجودی: ارجاع به عناصری که خلاصه هزینه ها، درآمد و مانده را نشان می دهد.
3. اضافه کردن هزینه
در مرحله بعد، بیایید یک تابع ایجاد کنیم که هنگام ارسال فرم، اضافه کردن یک هزینه جدید را مدیریت کند:
expenseForm.addEventListener( 'submit' , function ( event ) { event.preventDefault(); const description = expenseInput.value.trim(); const amount = parseFloat (amountInput.value.trim()); const category = categoryInput.value; if (description === '' || isNaN (amount) || amount <= 0 ) { alert( 'Please enter a valid expense description and amount.' ); return ; } addTransaction(description, amount, category); updateSummary(); clearInputs(); }); function addTransaction ( description, amount, category ) { const transactionRow = document .createElement( 'tr' ); transactionRow.innerHTML = ` <td> ${description} </td> <td> ${category} </td> <td> ${amount.toFixed( 2 )} </td> <td><button class="delete-btn">Delete</button></td> ` ; transactionList.appendChild(transactionRow); transactionRow.querySelector( '.delete-btn' ).addEventListener( 'click' , function ( ) { transactionRow.remove(); updateSummary(); }); }در اینجا آنچه در این کد اتفاق می افتد است:
event.preventDefault() : از بازخوانی صفحه هنگام ارسال جلوگیری می کند.
addTransaction : تراکنش جدیدی را به جدول اضافه می کند.
updateSummary : کل هزینه ها، درآمد و مانده را به روز می کند.
clearInputs : ورودی های فرم را پس از اضافه شدن تراکنش پاک می کند.
دکمه حذف: به کاربران اجازه می دهد تراکنش را از فهرست حذف کنند.
4. به روز رسانی خلاصه
برای پیگیری کل هزینه‌ها، درآمد و تعادل، یک تابع updateSummary ایجاد می‌کنیم:
function updateSummary ( ) { let totalExpenses = 0 ; let totalIncomes = 0 ; const transactions = transactionList.querySelectorAll( 'tr' ); transactions.forEach( function ( transaction ) { const amount = parseFloat (transaction.children[ 2 ].textContent); const category = transaction.children[ 1 ].textContent; if (category === 'Income' ) { totalIncomes += amount; } else { totalExpenses += amount; } }); totalExpense.textContent = totalExpenses.toFixed( 2 ); totalIncome.textContent = totalIncomes.toFixed( 2 ); balance.textContent = (totalIncomes - totalExpenses).toFixed( 2 ); }این تابع در هر تراکنش در جدول حلقه می زند:
totalExpenses و totalIncomes : با جمع کردن مبالغ در هر دسته محاسبه می شود.
totalExpense , totalIncome , balance : با مقادیر محاسبه شده به روز شده است.
5. پاک کردن ورودی های فرم
برای بازنشانی فرم پس از گفت ن تراکنش، یک تابع clearInputs ایجاد می کنیم:
function clearInputs ( ) { expenseInput.value = '' ; amountInput.value = '' ; categoryInput.value = 'Expense' ; }این تابع به سادگی مقادیر ورودی های فرم را پاک می کند.
6. قرار دادن همه چیز با هم
در اینجا فایل script.js شما با ترکیب همه کدها باید شبیه باشد:
const expenseForm = document .getElementById( 'expense-form' ); const expenseInput = document .getElementById( 'expense-input' ); const amountInput = document .getElementById( 'amount-input' ); const categoryInput = document .getElementById( 'category-input' ); const transactionList = document .getElementById( 'transaction-list' ); const totalExpense = document .getElementById( 'total-expense' ); const totalIncome = document .getElementById( 'total-income' ); const balance = document .getElementById( 'balance' ); expenseForm.addEventListener( 'submit' , function ( event ) { event.preventDefault(); const description = expenseInput.value.trim(); const amount = parseFloat (amountInput.value.trim()); const category = categoryInput.value; if (description === '' || isNaN (amount) || amount <= 0 ) { alert( 'Please enter a valid expense description and amount.' ); return ; } addTransaction(description, amount, category); updateSummary(); clearInputs(); }); function addTransaction ( description, amount, category ) { const transactionRow = document .createElement( 'tr' ); transactionRow.innerHTML = ` <td> ${description} </td> <td> ${category} </td> <td> ${amount.toFixed( 2 )} </td> <td><button class="delete-btn">Delete</button></td> ` ; transactionList.appendChild(transactionRow); transactionRow.querySelector( '.delete-btn' ).addEventListener( 'click' , function ( ) { transactionRow.remove(); updateSummary(); }); } function updateSummary ( ) { let totalExpenses = 0 ; let totalIncomes = 0 ; const transactions = transactionList.querySelectorAll( 'tr' ); transactions.forEach( function ( transaction ) { const amount = parseFloat (transaction.children[ 2 ].textContent); const category = transaction.children[ 1 ].textContent; if (category === 'Income' ) { totalIncomes += amount; } else { totalExpenses += amount; } }); totalExpense.textContent = totalExpenses.toFixed( 2 ); totalIncome.textContent = totalIncomes.toFixed( 2 ); balance.textContent = (totalIncomes - totalExpenses).toFixed( 2 ); } function clearInputs ( ) { expenseInput.value = '' ; amountInput.value = '' ; categoryInput.value = 'Expense' ; } 7. تست ردیاب هزینه
با همه کدهای موجود، فایل index.html خود را در یک مرورگر وب باز کنید. سعی کنید برخی از هزینه ها و درآمدها را اضافه کنید تا ببینید چگونه در جدول معاملات ظاهر می شوند. با گفت ن و حذف تراکنش‌ها، باید مجموع هزینه‌ها، کل درآمد و موجودی را به‌طور خودکار مشاهده کنید.
تبریک می گویم! اکنون یک ردیاب هزینه کاملاً کاربردی با استفاده از جاوا اسکریپت پیاده سازی کرده اید. این ردیاب ابزاری ساده اما قدرتمند برای مدیریت امور مالی شخصی است و می‌توانید با گفت ن آپشن های ی مانند ماندگاری داده‌ها، دسته‌های اضافی یا گزارش‌دهی دقیق‌تر، آن را بیشتر گسترش دهید.
چگونه تجربه کاربری را افزایش دهیم
اکنون که عملکرد اصلی ردیاب هزینه ما راه اندازی شده است، زمان بهبود تجربه کاربر فرا رسیده است. گفت ن جزئیات کوچک و پیشرفت های متفکرانه می تواند برنامه شما را بصری تر، تعاملی تر و لذت بخش تر کند.
در اینجا چند ایده برای افزایش تجربه کاربری ردیاب هزینه ما وجود دارد:
1. اضافه کردن بازخورد زمان واقعی
دریافت بازخورد هنگام تعامل با برنامه شما برای کاربران مفید است. بیایید یک ویژگی اعلان اضافه کنیم تا تأیید کنیم که تراکنش با موفقیت اضافه شده است. ما این کار را با نشان دادن یک پیام کوتاه پس از ارسال تراکنش انجام خواهیم داد.
در HTML خود، یک div زیر فرم برای پیام اعلان اضافه کنید:
< div id = "notification" class = "hidden" > </ div >در CSS خود، اعلان را طوری استایل دهید که بیشتر قابل مشاهده باشد:
#notification { background-color : #28a745 ; color : white; padding : 10px ; margin-top : 10px ; text-align : center; border-radius : 5px ; } .hidden { display : none; }اکنون، در فایل جاوا اسکریپت شما، این اعلان را برای چند ثانیه پس از اضافه شدن تراکنش نشان خواهیم داد:
function showNotification ( message ) { const notification = document .getElementById( 'notification' ); notification.textContent = message; notification.classList.remove( 'hidden' ); setTimeout ( function ( ) { notification.classList.add( 'hidden' ); }, 2000 ); // Notification will disappear after 2 seconds } تابع addTransaction را به‌روزرسانی کنید تا این اعلان هنگام اضافه شدن تراکنش جدید نشان داده شود:
addTransaction(description, amount, category); showNotification( 'Transaction added successfully!' ); updateSummary(); clearInputs();به این ترتیب، هر بار که کاربر یک تراکنش را ارسال می کند، بازخورد فوری دریافت می کند.
2. نمایش شاخص تعادل
برای اینکه کاربران درک بصری واضح تری از وضعیت مالی خود داشته باشند، می توانید یک شاخص تعادل را پیاده سازی کنید. این می تواند یک تغییر رنگ ساده برای نمایشگر تعادل بسته به مثبت یا منفی بودن تعادل باشد.
در CSS خود، سبک هایی را برای حالت های مختلف تعادل اضافه کنید:
.positive { color : #28a745 ; /* Green for positive balance */ } .negative { color : #dc3545 ; /* Red for negative balance */ } سپس، در تابع updateSummary ، کلاس مناسب را بر اساس تعادل اعمال کنید:
function updateSummary ( ) { let totalExpenses = 0 ; let totalIncomes = 0 ; const transactions = transactionList.querySelectorAll( 'tr' ); transactions.forEach( function ( transaction ) { const amount = parseFloat (transaction.children[ 2 ].textContent); const category = transaction.children[ 1 ].textContent; if (category === 'Income' ) { totalIncomes += amount; } else { totalExpenses += amount; } }); totalExpense.textContent = totalExpenses.toFixed( 2 ); totalIncome.textContent = totalIncomes.toFixed( 2 ); const currentBalance = totalIncomes - totalExpenses; balance.textContent = currentBalance.toFixed( 2 ); // Apply positive/negative class if (currentBalance >= 0 ) { balance.classList.remove( 'negative' ); balance.classList.add( 'positive' ); } else { balance.classList.remove( 'positive' ); balance.classList.add( 'negative' ); } }اکنون، وقتی کاربران در وضعیت مثبت هستند، تراز به رنگ سبز نشان داده می شود. اگر آنها منفی باشند، به رنگ قرمز ظاهر می شود.
3. حفظ داده ها با ذخیره سازی محلی
یکی از پیشرفت‌های مهم ذخیره تراکنش‌ها حتی پس از به‌روزرسانی صفحه است. برای این کار می توانیم از حافظه محلی مرورگر استفاده کنیم. با ذخیره تراکنش ها در حافظه محلی، ردیاب داده ها را بین جلسات حفظ می کند.
ابتدا تابع addTransaction را برای ذخیره تراکنش ها در حافظه محلی تغییر دهید:
function addTransaction ( description, amount, category ) { const transaction = { description : description, amount : amount, category : category }; let transactions = JSON .parse( localStorage .getItem( 'transactions' )) || []; transactions.push(transaction); localStorage .setItem( 'transactions' , JSON .stringify(transactions)); const transactionRow = document .createElement( 'tr' ); transactionRow.innerHTML = ` <td> ${description} </td> <td> ${category} </td> <td> ${amount.toFixed( 2 )} </td> <td><button class="delete-btn">Delete</button></td> ` ; transactionList.appendChild(transactionRow); transactionRow.querySelector( '.delete-btn' ).addEventListener( 'click' , function ( ) { transactionRow.remove(); removeTransaction(transaction); updateSummary(); }); } سپس، یک تابع removeTransaction برای مدیریت حذف از حافظه محلی ایجاد کنید:
function removeTransaction ( transactionToRemove ) { let transactions = JSON .parse( localStorage .getItem( 'transactions' )) || []; transactions = transactions.filter( function ( transaction ) { return !(transaction.description === transactionToRemove.description && transaction.amount === transactionToRemove.amount && transaction.category === transactionToRemove.category); }); localStorage .setItem( 'transactions' , JSON .stringify(transactions)); } برای بارگیری تراکنش های ذخیره شده هنگام بارگیری صفحه، یک تابع loadTransactions ایجاد کنید:
function loadTransactions ( ) { const transactions = JSON .parse( localStorage .getItem( 'transactions' )) || []; transactions.forEach( function ( transaction ) { addTransaction(transaction.description, transaction.amount, transaction.category); }); updateSummary(); } window .addEventListener( 'load' , loadTransactions);اکنون، هر بار که صفحه بارگذاری می شود، تراکنش های ذخیره شده از حافظه محلی بازیابی شده و در جدول نمایش داده می شوند.
4. نحوه بهبود فرم UX
بیایید با تمرکز خودکار روی فیلد ورودی توضیحات هنگام بارگیری صفحه و پاک کردن فیلدهای فرم هنگام ارسال تراکنش، فرم را کاربرپسندتر کنیم. همچنین می‌توانیم فیلد مقدار را محدود کنیم تا فقط اعداد را بپذیرد.
برای تمرکز خودکار روی قسمت توضیحات:
window .addEventListener( 'load' , function ( ) { expenseInput.focus(); }); برای محدود کردن مقدار ورودی فقط به اعداد، می‌توانید ویژگی زیر را به amount-input در HTML خود اضافه کنید:
< input type = "number" id = "amount-input" min = "0" step = "0.01" required >5. استفاده از آیکون ها برای رابط کاربری بهتر
برای بهبود جذابیت بصری، متن دکمه «حذف» را با یک نماد جایگزین کنید. می توانید از یک کتابخانه نماد مانند Font Awesome برای اضافه کردن نماد زباله استفاده کنید.
ابتدا Font Awesome را با گفت ن این خط در قسمت <head> در فایل HTML خود قرار دهید:
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" > سپس، در تابع addTransaction ، دکمه حذف را با یک نماد جایگزین کنید:
transactionRow.innerHTML = ` <td> ${description} </td> <td> ${category} </td> <td> ${amount.toFixed( 2 )} </td> <td><button class="delete-btn"><i class="fas fa-trash"></i></button></td> ` ;این ترفند کوچک باعث می شود ردیاب شما مدرن تر و از نظر بصری جذاب تر به نظر برسد.
تست و اشکال زدایی
پس از اجرای عملکرد و بهبود تجربه کاربر، بسیار مهم است که ردیاب هزینه را به طور کامل آزمایش کنید تا مطمئن شوید همه چیز همانطور که پیش بینی می شود کار می کند. آزمایش به شما کمک می‌کند تا قبل از اینکه برای کاربران مشکلی ایجاد شود، باگ یا مشکلی را پیدا کنید.
در این بخش، برخی از استراتژی‌های اولیه آزمایش و اشکال‌زدایی را تحلیل می‌کنیم تا مطمئن شویم ردیاب هزینه ما قوی است.
1. تست عملکرد پایه
با آزمایش ویژگی های اصلی ردیاب هزینه خود شروع کنید:
گفت ن تراکنش ها : چند تراکنش را وارد کنید و مطمئن شوید که آنها به درستی در جدول نشان داده می شوند و توضیحات، دسته بندی و مبلغ به درستی نمایش داده می شوند.
حذف تراکنش ها : با حذف تراکنش ها و تأیید اینکه هم از جدول و هم از حافظه محلی حذف شده اند، عملکرد حذف را آزمایش کنید.
به روز رسانی خلاصه : تحلیل کنید که درآمد کل، کل هزینه ها و موجودی به درستی به روز شوند و تراکنش ها را اضافه و حذف کنید.
اگر هر یک از این قابلیت‌ها مطابق انتظار کار نمی‌کند، بخش‌های کد مربوطه را دوباره تحلیل کنید. اطمینان حاصل کنید که توابع جاوا اسکریپت به درستی DOM را دستکاری کرده و حافظه محلی را به روز می کنند.
2. تست متقابل مرورگر
ردیاب هزینه شما باید به طور مداوم در مرورگرهای مختلف وب کار کند. برنامه را روی چندین مرورگر مانند کروم، فایرفاکس، سافاری و اج تست کنید. اطمینان حاصل کنید که چیدمان، عملکرد و استایل در همه پلتفرم‌ها سازگار است.
اگر با مشکلات خاص مرورگر مواجه شدید، ممکن است لازم باشد CSS یا جاوا اسکریپت خود را تنظیم کنید. به عنوان مثال، برخی از ویژگی های CSS ممکن است در مرورگرهای مختلف رفتار متفاوتی داشته باشند، پس از سازگاری اطمینان حاصل کنید یا موارد بازگشتی را ارائه دهید.
3. پاسخگویی موبایل
ردیاب هزینه خود را در دستگاه های مختلف آزمایش کنید تا مطمئن شوید که کاملاً پاسخگو است. برنامه را روی گوشی خود باز کنید یا از ابزارهای توسعه دهنده مرورگر برای شبیه سازی اندازه های مختلف صفحه استفاده کنید. نحوه انطباق طرح را تحلیل کنید و مطمئن شوید که ردیاب در صفحه نمایش های کوچکتر قابل استفاده است.
مراقب مسائلی مانند:
نوشتار یا دکمه‌ها خیلی کوچک یا سخت هستند.
شکستن چیدمان یا همپوشانی عناصر.
فیلدهای فرم متناسب با صفحه نمایش نیستند.
اگر مشکلی را مشاهده کردید، CSS خود را برای بهبود تجربه تلفن همراه تنظیم کنید. ممکن است لازم باشد از نمایش داده های رسانه ای برای ترسیم طرح برای صفحه های کوچکتر استفاده کنید.
4- آزمایش موارد لبه
به این فکر کنید که چگونه کاربران ممکن است با روش های غیر منتظره با ردیاب هزینه ارتباط برقرار کنند. آزمایش موارد لبه زیر را در نظر بگیرید:
ورودی های خالی : سعی کنید معامله را با زمینه های خالی ارسال کنید. آیا اعتبار سنجی فرم شما از این امر جلوگیری می کند؟ اطمینان حاصل کنید که ویژگی های required و اعتبار سنجی جاوا اسکریپت کار می کنند.
مقدار منفی : اعداد منفی را در قسمت مقدار وارد کنید. آیا ردیاب این کار را به درستی انجام می دهد؟ ممکن است بخواهید ورودی را برای جلوگیری از مقادیر منفی محدود کنید.
تعداد زیادی : با تعداد بسیار زیادی در قسمت مقدار آزمایش کنید. آیا برنامه بدون شکستن مقادیر بزرگی را کنترل می کند؟
معاملات تکراری : چندین بار معامله مشابه را اضافه کنید. آیا ردیاب شما کپی ها را با لطف مدیریت می کند؟
با آزمایش این موارد لبه ، می توانید قبل از تأثیرگذاری بر کاربران ، اشکالات بالقوه را شناسایی و به آن بپردازید.
5. اشکال زدایی موضوعات مشترک
اگر هنگام آزمایش به موضوعاتی بپردازید ، اشکال زدایی مرحله بعدی شم است. در اینجا برخی از مشکلات متداول که ممکن است با آنها روبرو شوید و نحوه عیب یابی آنها وجود دارد:
خطاهای JavaScript : اگر چیزی کار نمی کند ، کنسول مرورگر را برای هرگونه خطای JavaScript تحلیل کنید. این کنسول معمولاً اطلاعاتی در مورد آنچه اشتباه پیش آمده و کدام خط کد باعث مسئله شده است ، ارائه می دهد.
مشکلات چیدمان : اگر طرح درست به نظر نمی رسد ، با استفاده از ابزارهای توسعه دهنده مرورگر ، عناصر را بازرسی کنید. خصوصیات CSS را مورد استفاده قرار دهید و ببینید که آیا مشکلی در حاشیه ، بالشتک یا تنظیمات Flexbox/Grid وجود دارد یا خیر.
داده ها ادامه نمی یابد : اگر معاملات به درستی ذخیره نمی شوند یا بارگیری نمی شوند ، دوباره کد ذخیره سازی محلی را مجدداً تحلیل کنید. اطمینان حاصل کنید که به درستی در حال ذخیره و بازیابی داده ها هستید و JSON به طور صحیح تجزیه و پیچیده می شود.
شنوندگان رویداد شلیک نمی کنند : اگر دکمه ها یا سایر عناصر تعاملی کار نمی کنند ، اطمینان حاصل کنید که شنوندگان رویداد شما به درستی وصل شده اند. انتخاب کنندگان را دوبار تحلیل کنید و مطمئن شوید که عناصر هنگام تلاش برای ضمیمه شنوندگان وجود دارند.
6. آزمایش کاربر
در آخر ، از دیگران بخواهید که ردیاب هزینه خود را آزمایش کنند. آنها ممکن است از برنامه به روش هایی که پیش بینی نکرده اید استفاده کنند و به شما در شناسایی مشکلات قابلیت استفاده یا اشکالات مورد نظر خود کمک می کنند. تماشای نحوه تعامل آنها با ردیاب و جمع آوری بازخورد در مورد هرگونه عناصر گیج کننده یا رفتارهای غیر منتظره.
نتیجه گیری
ساختن یک ردیاب هزینه از ابتدا نه تنها یک راه عالی برای تیز کردن مهارت های توسعه وب شما است بلکه یک ابزار عملی را برای مدیریت امور مالی خود در اختیار شما قرار می دهد.
در طول این آموزش ، ما کل مراحل را طی کرده ایم ، از تنظیم ساختار HTML گرفته تا یک ظاهر طراحی شده با CSS ، اضافه کردن عملکرد با JavaScript ، تقویت تجربه کاربر و آزمایش و اشکال زدایی محصول نهایی.
با دنبال کردن این مراحل ، شما یک ردیاب هزینه کاملاً کاربردی ایجاد کرده اید که به شما امکان می دهد ضمن پیگیری درآمد و هزینه های خود ، معاملات را به راحتی اضافه ، مشاهده و حذف کنید. شما همچنین آموخته اید که چگونه می توانید داده های خود را با ذخیره محلی انجام دهید ، و اطمینان حاصل کنید که داده های شما حتی پس از تازه کردن صفحه در دسترس است.
به یاد داشته باشید ، اصول و تکنیک هایی که در اینجا اعمال کرده اید می تواند به پروژه های پیچیده تری گسترش یابد. این که آیا شما به دنبال اضافه کردن ویژگی های بیشتر به این ردیاب هستید یا یک چالش جدید را به عهده دارید ، مهارت هایی که به دست آورده اید بسیار ارزشمند خواهد بود.
با تشکر از شما برای دنبال کردن با این آموزش. امیدوارم که آن را مفید داشته باشید و در توانایی خود در ساخت برنامه های وب احساس اطمینان بیشتری دارید.
اگر سؤال یا پیشنهادی دارید ، در LinkedIn احساس راحتی کنید. اگر از این محتوا لذت بردید ، برای حمایت از ایجاد محتوای سازگار با توسعه دهنده ، قهوه را برای من خریداری کنید.
برچسب‌ها
|
ارسال نظر