For this lab, I developed a webpage which would function as a list , which users can add items to, with real-time updates. This is all possible with the React technology, a smart javascript library. This webpage also contains a feature that allows users to search for an item on the list by typing the first letters of the word, in this case, a name.
In this demonstration, I append the name "Margot" to the list, and then test out the search feature to demonstrate that the list updates after each letter is typed.
Utilizing Figma, I designed a Todo app with custom branding and several functionalities which include:
Signing in/signing out
Adding tasks with a description and deadline
Viewing and sorting the task list by completion status
Marking tasks complete
Deleting tasks
The app would greet the user by name, and make task creation just as accessible as viewing the task list, by having them both docked to the navbar. Another one of my design decisions was to make any interactible elements stand out from the static content through color differentiation.
The objective of this lab was to develop an exercise app that would have two different modes:
Repetition: In this mode, a user can increment a counter by the push of a button, in order to log any form of exercise that this type of metric would apply to.
Duration: This mode simply starts a counter, which could be paused at any moment. The home screen is easily accessible through both modes with a return button
To expand on the last lab, this running exercise webpage was designed to print timestamps whenever a button is pressed, powered by React. This would typically be useful to time laps, or other exercises where timing is relevant.
An additional design element was adding to this project, which is supporting imagery to make the screen's visual appeal increase.