This is a basic todo web application built with TypeScript. It serves as a starting point for developing more complex web applications using TypeScript.
Before you begin, ensure you have met the following requirements:
- You have installed the latest version of Node.js and npm
- You have a basic understanding of TypeScript and Express.js
To install the TypeScript Web App, follow these steps:
- Clone the repository:
git clone https://github.com/yourusername/typescript-web-app.git
- Navigate to the project directory:
cd typescript-web-app
- Install the dependencies:
npm install
- Create a
.env
file in the root directory of the project. - Add the following environment variables to the
.env
file:Adjust these values as needed for your environment.PORT=3000 NODE_ENV=development
To run the TypeScript Web App, follow these steps:
- Start the development server:
npm start
- Open your web browser and navigate to
http://localhost:3000
(or whatever port you specified in your.env
file).
To compile the TypeScript code to JavaScript, run:
npm run build
This will create a dist
directory with the compiled JavaScript files.
typescript-web-app/
│
├── src/
│ └── app.ts
│
├── dist/
│
├── .env
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md
-
Add Tasks
- Users can add new tasks by entering a task name, selecting a due date (optional), and assigning a priority level (low, medium, or high).
-
Task Completion
- Tasks can be marked as completed or incomplete by checking/unchecking the checkbox next to each task.
-
Due Dates
- Each task can have an optional due date. Overdue tasks will be highlighted in red.
-
Priority Levels
- Tasks can be assigned a priority of "low", "medium", or "high". Tasks are color-coded based on their priority:
- Low: Green
- Medium: Orange
- High: Red
- Tasks can be assigned a priority of "low", "medium", or "high". Tasks are color-coded based on their priority:
-
Task Filtering
- You can filter tasks to display:
- All tasks
- Completed tasks
- Incomplete tasks
- You can filter tasks to display:
-
Task Sorting
- Tasks can be sorted by:
- Due Date (earliest due date first)
- Priority (high priority tasks first)
- Tasks can be sorted by:
-
Fresh Start
- The app starts with an empty list every time it's opened, allowing for a fresh start in each session for your need.
-
Responsive Design
- The app is designed to be responsive and work well on both desktop and mobile devices.
To contribute to TypeScript ToDo Web App, follow these steps:
- Fork this repository.
- Create a branch:
git checkout -b <branch_name>
. - Make your changes and commit them:
git commit -m '<commit_message>'
- Push to the original branch:
git push origin <project_name>/<location>
- Create the pull request.
Alternatively, see the GitHub documentation on creating a pull request.
If you want to contact me, you can reach me at [your email or contact information].
This project uses the following license: MIT License.