JobTrackr is a responsive job application tracker built with HTML, CSS, and JavaScript. It helps users organize job applications, monitor their progress, and keep important application details in one place.
- Add new job applications
- Edit existing applications
- Delete individual applications with confirmation
- Delete all applications with a clear confirmation message
- Search by company or position
- Filter applications by status
- Reset search and filters
- Display live application statistics
- Sort applications from newest to oldest
- Show color-coded status badges
- Save data in
localStorage - Safely render user-entered data with DOM methods and
textContent - Responsive layout for desktop, tablet, and mobile
- Keyboard-friendly and accessible interface
- Smooth form and table animations
- Scroll-based reveal animations using
IntersectionObserver - Reduced-motion support through
prefers-reduced-motion
- Saved
- Applied
- Under Review
- Interview
- Offer
- Rejected
- HTML5
- CSS3
- JavaScript
- Local Storage
- DOM Manipulation
- Event Delegation
- Intersection Observer API
- Responsive Design
- CSS Grid and Flexbox
- Accessibility attributes
JobTrackr/
├── index.html
├── README.md
├── favicon.ico
├── assets/
│ └── images/
│ ├── jobtrackr-desktop.png
│ ├── jobtrackr-form.png
│ ├── jobtrackr-tablet.png
│ └── jobtrackr-mobile.png
├── css/
│ └── style.css
└── js/
└── main.js
Applications are stored locally in the browser using localStorage. This means the data remains available after refreshing or reopening the page in the same browser.
The current version does not require a backend or database. All application data stays in the browser where it was created.
The interface uses a professional blue and indigo color palette that fits the employment and productivity theme.
The design includes:
- A modern gradient header
- Animated statistics cards
- Scroll-triggered section reveals
- A responsive applications table
- Clear status colors
- Accessible keyboard focus styles
- Smooth form opening and notification feedback
Animations are automatically reduced for users who enable reduced-motion preferences in their operating system.
- Download or clone the repository.
- Open the project folder.
- Open
index.htmlin your browser.
For the best development experience, run the project with a local server such as Live Server in Visual Studio Code.
The interface is optimized for:
- Desktop
- Tablet
- Mobile
On smaller screens, the applications table can be scrolled horizontally while the rest of the page remains fixed.
- User authentication
- Cloud database integration
- Synchronization across devices
- Application reminders
- Export to CSV or PDF
- Dark mode
- Dashboard charts
- Email-based status updates
Kinan Ashkar
- GitHub: KinanAshkar
- Portfolio: Portfolio
This project is available for educational and portfolio purposes.