Monday, February 17 2025 \u2013 Continuing from last week\u2019s progress, I had 2 sections remaining out of 5 to complete. The 4th and 5th sections focused on item details, where the user clicks on an item from a list, and the remaining related details are displayed in the other two sections.<\/p>\n\n\n\n
I began with the 4th section by drafting the UI layout, including the text boxes and buttons. Since there was a lot of data to be shown, I spent time optimizing the available space and sorting the elements as efficiently as possible. As this was a component, one crucial piece of data was passed from the parent component. Using that data, I requested details from the API and passed them to the respective text boxes. There were several buttons in this section, and once I confirmed the data was passed correctly, I implemented the functionality for each button. One additional button didn\u2019t require an API call; instead, it calculated a value based on the current information and displayed it, saving the user from doing the math themselves.<\/p>\n\n\n\n
Moving to the last section, it was a table displaying the data history, so no additional functionality was needed. My focus was purely on designing the table to fit the available space as efficiently as possible. I created mock data to test the UI and identify any potential bugs.<\/p>\n\n\n\n
Next, I revisited the previous feature, where additional data needed to be displayed. While making these changes, I improved the UI by adding a “view” and “edit” mode, helping users distinguish between the two and preventing them from making unsaved changes.<\/p>\n\n\n\n
By the end of the week, both features were completed, though I still need to perform testing and clean up the code before pushing the changes.<\/p>\n","protected":false},"excerpt":{"rendered":"
Monday, February 17 2025 \u2013 Continuing from last week\u2019s progress, I had 2 sections remaining out of 5 to complete. The 4th and 5th sections focused on item details, where the user clicks on an item from a list, and the remaining related details are displayed in the other two sections. I began with the … <\/p>\n