• 

  landing page

• 

  toss coin feature

About the Project

Inspiration

The inspiration for this project came from a mix of personal experience and the desire to streamline common student tasks. I often struggled to keep track of my attendance and missed classes, especially when trying to make decisions in group settings. Whether it was deciding who should present in class or just picking teams for activities, I thought there had to be a better way to handle these things. That’s when I decided to build a web application that helps students track their attendance and make decisions easily.

What I Learned

This project helped me improve my web development skills, especially in combining HTML, CSS, JavaScript, and Tailwind CSS to create a functional and visually appealing app. I also learned how to integrate Three.js for the coin toss feature, adding a 3D element to the project.

How I Built the Project

• Frontend: HTML provided the structure, CSS made the site visually appealing, and Tailwind CSS helped with responsive layouts and modern designs.
• JavaScript: The logic for tracking attendance, calculating missed classes, and the coin toss decision-making feature was all handled with JavaScript.
• Three.js: I used Three.js to create a realistic coin toss animation for quick, random decision-making.
• Features:
  • Attendance Tracker: Users can input class attendance and see how many classes they've missed.
  • Coin Toss: A random decision-making tool, enhanced with 3D animation using Three.js, to help users make choices.
  • Real-time Updates: The attendance count updates live as users mark attendance, providing immediate feedback on their progress.

Challenges Faced

• Attendance Calculation: I initially had trouble figuring out the most effective way to calculate missed classes while keeping the interface simple. After a bit of trial and error, I implemented a system that tracks both total and attended classes, which then calculates the remaining missed ones.
• UI/UX Design: Tailwind CSS helped immensely in building the site"s layout.
• JavaScript Complexity: Implementing the randomization for the coin toss with Three.js required testing to ensure smooth animation and seamless transitions between states.

Future Enhancements

Although this project is functional, I plan to add more features such as:

• User Profiles: Allow users to create and manage accounts, which will store their attendance history.
• Class Calendar Integration: Linking the attendance tracker to a calendar system that allows users to add classes and track attendance against specific dates.
• Progress Tracking: Provide more detailed statistics, such as class participation or grades, alongside attendance to give users a complete overview of their performance. To-Do App Feature: Add a to-do list feature to help users manage tasks related to their classes or other activities.

This project was a great learning experience and a fun way to apply my skills. I'm excited about the possibilities for its future growth!

Built With

• css
• html
• javascript
• tailwind
• three.js