Welcome to my Web Component Project
Open up the project on a vscode and right click on test_page.html and left click on "Open with Live Server"
Within the credit table, other than displaying the data provided, it felt odd to me that this component would have two unusable buttons. So I made some assumptions and added features where I thought made sense.
Feature 1. "Show All" Lock History
- It should have the functionality to show all data
- It should reflect different text when the whole history is being shown, as such to offer user to minimize
- It should minimize back to showing 5 items when #2 is clicked
- It should be disabled when less than a certain amount (I chose 5)
- Hiding and showing entire lock history (the other feature) should hide/show the last selected (show all) state
Feature 2. Locked/Unlocked event feature
- The event where clicking the lock/unlock button should post a new lock history to the server
- The button should toggle between lock <--> unlock
- Table should reflect the event after it passes through by refetching data on post/put event success
#1 and #3 are mocked in this project since there's no server to perform a put/post request.
Feature 3. Collapsible items
- Items wrapped around the collapsible component should hide from view
Some things I'm still unsure about:
- I'm still unsure of which features needed were actually requested from this task, other than to display data from json. There were many aspects in the html content that had signs that it was missing functionality. But I was just told to simulate the demo, and that no extra styling was necessary. In order to add the featuers I thought made sense, I would have to go beyond the demo and some styling needed to be done, which led me to believe that the features weren't part of the task scope. I felt that it doensn't hurt to add functionality so I went ahead anyways.
There's a note in the objectives that quotes: "Don't worry about making any other elements on the page dynamic." Unfortunately, I was still confused because I still wasn't sure what qualifies the "lock history" table as functional with real data. To me, making the entire thing dynamic was part of scope.
- I'm still unsure about the best practices in Web Components:
- Whether it was supposed to be broken down into parts, or be kept in one giant file. I felt broken down parts is more maintainable and easier to understand.
- Whether to use templating strings for static html (some html content was just huge and I wanted to abstract it away) or migrate them via web component class based approach. Neither seemed like a "wrong answer" so I went for the cleanest approach between the two.
Other than that, to conclude, no other dependencies or libraries were used, so I have nothing else to add! Please do let me know if there are any discrepencies! I would love to have some feedback, and learn a little bit more about what makes a Web Component!