This project involved creating an application where you could enter in a specific task and assign a price to it. Those tasks would then be listed and their totals calculated. It also allows for the removal of any particular item from the list. Clicking the 'Send Invoice' button would then reset the list so you could start over and add new items. I have added many new stretch goals to the project of my own, including using React to build the app and Firebase to store the data.
- HTML
- CSS
- JavaScript
- React
- Firebase
There were 6 main requirements for this project. The first was I needed to create an array to hold all of the tasks that were entered onto the list. I created states within the TaskList component to hold and update this data. The second requirement was to create a button that would add each task to this array. The third was displaying the array data and making sure that it changed as the array was updated. In order to do this within React, I used the useEffect hook to watch for changes within the taskList array dependancy. The fourth requirement was to ensure that the same item could not be added twice to the list. The fifth was updating the total amount by keeping track of the price assigned to each task as it was added or removed. The last requirement was to have the 'Send Invoice' button reset the entire list. I changed this to store the invoice in history instead.
- Allow users to input any task or number
- Create a Dark Mode toggle button
- View past invoice history
- Store the data using Firebase
- Add more options to each invoice such as invoice numbers, personal and company information, and notes
- Style the invoices to better show the most important information