FitTracker Pro

🧠 Inspiration

𝐓𝐡𝐞 𝐢𝐝𝐞𝐚 𝐟𝐨𝐫 𝐅𝐢𝐭𝐓𝐫𝐚𝐜𝐤𝐞𝐫 𝐏𝐫𝐨 𝐞𝐦𝐞𝐫𝐠𝐞𝐝 𝐟𝐫𝐨𝐦 𝐭𝐡𝐞 𝐧𝐞𝐞𝐝 𝐟𝐨𝐫 𝐚 𝐬𝐢𝐦𝐩𝐥𝐞, 𝐚𝐥𝐥-𝐢𝐧-𝐨𝐧𝐞 𝐟𝐢𝐭𝐧𝐞𝐬𝐬 𝐭𝐫𝐚𝐜𝐤𝐢𝐧𝐠 𝐩𝐥𝐚𝐭𝐟𝐨𝐫𝐦 𝐭𝐡𝐚𝐭 𝐡𝐞𝐥𝐩𝐬 𝐢𝐧𝐝𝐢𝐯𝐢𝐝𝐮𝐚𝐥𝐬 𝐦𝐨𝐧𝐢𝐭𝐨𝐫 𝐰𝐨𝐫𝐤𝐨𝐮𝐭𝐬, 𝐬𝐞𝐭 𝐡𝐞𝐚𝐥𝐭𝐡 𝐠𝐨𝐚𝐥𝐬, 𝐚𝐧𝐝 𝐬𝐭𝐚𝐲 𝐦𝐨𝐭𝐢𝐯𝐚𝐭𝐞𝐝. 𝐖𝐢𝐭𝐡 𝐫𝐢𝐬𝐢𝐧𝐠 𝐚𝐰𝐚𝐫𝐞𝐧𝐞𝐬𝐬 𝐚𝐛𝐨𝐮𝐭 𝐩𝐞𝐫𝐬𝐨𝐧𝐚𝐥 𝐡𝐞𝐚𝐥𝐭𝐡, 𝐞𝐬𝐩𝐞𝐜𝐢𝐚𝐥𝐥𝐲 𝐩𝐨𝐬𝐭-𝐩𝐚𝐧𝐝𝐞𝐦𝐢𝐜, 𝐰𝐞 𝐰𝐚𝐧𝐭𝐞𝐝 𝐭𝐨 𝐜𝐫𝐞𝐚𝐭𝐞 𝐚 𝐭𝐨𝐨𝐥 𝐭𝐡𝐚𝐭 𝐬𝐮𝐩𝐩𝐨𝐫𝐭𝐬 𝐜𝐨𝐧𝐬𝐢𝐬𝐭𝐞𝐧𝐜𝐲 𝐚𝐧𝐝 𝐩𝐫𝐨𝐠𝐫𝐞𝐬𝐬 𝐢𝐧 𝐩𝐡𝐲𝐬𝐢𝐜𝐚𝐥 𝐚𝐜𝐭𝐢𝐯𝐢𝐭𝐲 𝐚𝐧𝐝 𝐰𝐞𝐥𝐥-𝐛𝐞𝐢𝐧𝐠.

🚀What it does

FitTracker Pro allows users to:

⭐⭐Track daily workouts (exercise name, reps, sets, and duration).

⭐⭐Monitor and calories burned.

⭐⭐Get real-time visual insights through graphs and summaries.

⭐⭐Store progress locally in the browser (via localStorage).

⭐⭐Seamlessly reset and manage sessions.

𝙄𝙩 𝙖𝙘𝙩𝙨 𝙖𝙨 𝙖 𝙙𝙞𝙜𝙞𝙩𝙖𝙡 𝙛𝙞𝙩𝙣𝙚𝙨𝙨 𝙘𝙤𝙢𝙥𝙖𝙣𝙞𝙤𝙣—𝙥𝙚𝙧𝙛𝙚𝙘𝙩 𝙛𝙤𝙧 𝙗𝙚𝙜𝙞𝙣𝙣𝙚𝙧𝙨 𝙖𝙣𝙙 𝙧𝙚𝙜𝙪𝙡𝙖𝙧 𝙚𝙭𝙚𝙧𝙘𝙞𝙨𝙚𝙧𝙨 𝙖𝙡𝙞𝙠𝙚.

🔧How we built it

💡𝐇𝐓𝐌𝐋 for structure

💡𝐂𝐒𝐒 for styling and layout

💡𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 for interactivity and logic

💡𝐂𝐡𝐚𝐫𝐭.𝐉𝐒 for generating dynamic graphs and visual feedback

𝑨𝒍𝒍 𝒅𝒂𝒕𝒂 𝒊𝒔 𝒎𝒂𝒏𝒂𝒈𝒆𝒅 𝒖𝒔𝒊𝒏𝒈 𝑱𝒂𝒗𝒂𝑺𝒄𝒓𝒊𝒑𝒕 𝒂𝒏𝒅 𝒔𝒕𝒐𝒓𝒆𝒅 𝒊𝒏 𝒕𝒉𝒆 𝒃𝒓𝒐𝒘𝒔𝒆𝒓 𝒕𝒐 𝒂𝒗𝒐𝒊𝒅 𝒕𝒉𝒆 𝒏𝒆𝒆𝒅 𝒇𝒐𝒓 𝒃𝒂𝒄𝒌𝒆𝒏𝒅 𝒔𝒆𝒓𝒗𝒊𝒄𝒆𝒔, 𝒎𝒂𝒌𝒊𝒏𝒈 𝒊𝒕 𝒂 𝒍𝒊𝒈𝒉𝒕𝒘𝒆𝒊𝒈𝒉𝒕 𝒂𝒏𝒅 𝒇𝒂𝒔𝒕 𝒔𝒐𝒍𝒖𝒕𝒊𝒐𝒏.

🧩Challenges we ran into

Some challenges we faced include:

🚧 🚧 Integrating Chart.js for dynamic data visualization.

🚧 🚧 Ensuring responsive and clean UI for various screen sizes.

🚧 🚧 Handling real-time updates and maintaining data consistency in localStorage.

🚧 🚧 Creating a reset mechanism without disrupting user experience.

🏆Accomplishments that we're proud of

🏅🏅A fully working fitness tracker with interactive UI and real-time data visualization.

🏅🏅Clean, minimalistic design with user-friendly navigation.

🏅🏅Successfully storing and updating user data locally.

🏅🏅Customization features like editable workouts and reset functionality.

📚What we learned

Throughout the project, we learned:

💬💬 How to manage data using localStorage effectively.

💬💬 How to implement Chart.js for dynamic visual tracking.

💬💬 How to modularize code and improve readability.

💬💬 The importance of UX in fitness-related applications.

🚀What's next for FitTracker Pro

In the future, I plan to: 🔜Add authentication and cloud sync support.

🔜Integrate workout suggestions and diet plans using APIs.

🔜Include social sharing features for motivation.

🔜Add dark mode and notification reminders.

Built With

• api
• chart.js
• css
• html
• javascript
• particle.js