This Angular app functions as a countdown timer for events, enabling users to specify the date and name of the event. It displays the remaining time to the event in the format of Days, Hours(h), Minutes(m), and Seconds(s). Both the event title and countdown dynamically adjust their display to fit the width of the screen.
- Display Countdown: The countdown starts from the current time and displays the time remaining to the specified end date.
- Responsive Design: The app seamlessly adapts to all screen sizes, including both portrait and landscape modes, ensuring that the headers always fill the entire width of the screen.
- Persistent Data Between Page Loads: The event name and end date specified by the user are persisted between page reloads.
- Improve Initial Render: The UI may appear jumpy upon initial render due to font size adjustments for the title and countdown after the elements are rendered. Consider adding a loading state or animation to gracefully resolve this issue.
- Restrict Countdown for Future Dates: Currently, the countdown displays "-" if users choose the past dates. Implement restrictions on the UI so that users can only select future dates, enhancing the user experience and accuracy of the countdown.
- Custom Date Picker UI: Add a custom date picker UI to hide the calendar icon.
To run the app locally, follow these steps:
- Fork and clone the repository to your local machine:
git clone git@github.com:KyunginNa/countdown.git
- Navigate to the project directory:
cd countdown
- Install dependencies:
npm install
- Start the development server:
ng serve
- Open your browser and navigate to
http://localhost:4200/.
- Specify the end date of the event and the event name in the designated input fields.
- The countdown will start automatically from the current time.
- The countdown format will be displayed as Days, Hours(h), Minutes(m), and Seconds(s).
- Ensure that the text always covers the entire screen width, resizing as necessary.
The app is deployed and accessible at nc-countdown.netlify.app.
- Angular
This project is licensed under the MIT License.