A simple yet effective progress bar that visually represents the percentage of the year (or any custom date range) that has passed. This dynamic progress bar updates in real-time and supports both standard and dark themes, as well as flexible date ranges.

• Displays the progress of the current year by default.
• Supports custom date ranges (e.g., fiscal years, project timelines).
• Two themes available: light and dark.

Ensure you have the following installed:

• Node.js

1. Clone the repository:

   git clone https://github.com/yourusername/year-progress-api.git
   cd year-progress-api

2. Install dependencies

   npm install

3. Start the server

   node app.js

4. Open your browser and navigate to:

   http://localhost:3000/year-progress

In the cloud-free development environment where you can directly start coding.

You can use Gitpod in the cloud

By default, the project will show the progress of the current year (from January 1st to December 31st)

http://localhost:3000/year-progress

Screenshot:

You can pass custom startDate and endDate query parameters to track the progress of a specific date range, such as fiscal years or project timelines.

You have to specify the exact startDate and endDate in the YYYY-MM-DD format.

Example 1: Custom Fiscal Year (April 1, 2024 to March 31, 2025)

http://localhost:3000/year-progress?startDate=2024-04-01&endDate=2025-03-31

Screenshot:

Example 2: Progress of a Single month (October 2024, screenshoted on October 2)

http://localhost:3000/year-progress?startDate=2024-10-01&endDate=2024-10-31

Screenshot:

startDate (optional): The start date in YYYY-MM-DD.
endDate (optional): The end date in YYYY-MM-DD.
theme (optional): Can be dark or standard (default). It helps changing the theme of the progress bar.

To see the changes of the progress bar in real-time, you can change the date range in the URL in the index file and refresh the page.

Change the lines below:

<img id="progress-img" src="https://year-in-progress.vercel.app/year-progress" alt="Year Progress" style="width: 450px; height: 75px;">

document.getElementById('progress-img').src = `https://year-in-progress.vercel.app/year-progress?time=${Date.now()}&startDate=2024-04-01&endDate=2025-03-31&theme=${theme}`

To:

<img id="progress-img" src="http://localhost:3000/year-progress?startDate=2024-04-01&endDate=2025-03-31" alt="Year Progress" style="width: 450px; height: 75px;">

document.getElementById('progress-img').src = `http://localhost:3000/year-progress?time=${Date.now()}&startDate=2024-04-01&endDate=2025-03-31&theme=${theme}`

You can change the date range and theme as per your requirement.

Feel free to update the README.md or raise issues if any to enhance the project

Thanks to all the amazing contributors who have helped make a thriving community! 🌟