You can view the web app here: https://gavinpwd.github.io/task-planner/
Our Task Planner web app was created using the following:
- HTML5, CSS3, JavaScript
- Bootstrap v4.5.2
- JQuery v3.5.1
- Popper JS v1.16.1
- Unsplash API
- Google Fonts API
- Font Awesome Icons v4.7.0 library
- Jasmine v3.6.0
Our Design Goals:
- Interface should convey sense of calm, fun and happiness
- A simple web layout with intuitive menu controls
- Task lists should echo Post-It Notes
- Typography should be well-considered
- Strategic use of colours and icons
- Use of white space, soft colours and single image
- Show calendar and time (simple but animated, if possible)
- Mobile-friendly layout
- Consider using floating elements, transparency, opacity, shadows
Our Coding Goals:
- Use comments strategically
- Codes should be well organised and easy to read
- Create separate .js and .css files for better organisation
- Utilise documentation from Bootstrap, MDN and W3CSchools website
- Reference any external code sources used
- Use at least one API as part of the project
Trajectory of this project:
- Navigation Menu Bar with Account Settings, Avatar, Messaging / Email Option
- A Tab Menu to separate Task Lists in different stages - Done, In Progress, For Review, Deleted
- Drag and Drop each Task List to Tab Menu Options instead of using buttons
- An Edit function for each Task List
- Ability to customise page with different background image, colour scheme and text size
- Improved Validation code
- Improved coding overall
- Improved Jasmine JS Testing
Stretch Goal:
- Create a Mobile app version
Here is a sample screenshot of the web app:
