The project is built for Shopify Interview Challenge, built entirely using Vanilla Javascript. User can search movies by typing movie title into the search box. The result will show up in the research history list and can be nominated. The nominated movie can be removed. localStorage API is implemented so the research history and nominee list can be restored.
1. I added the slide-in-slide-out animation when the cards got added/removed.
2. Not only the research list and nominee list got stored when page is refreshed, the
"status" of the Nominate button will be restored as well.
I choose to built this project with pure Javascript instead of using frameworks to challenge
myself, and
I am pretty satisfy with the result given that after 4 months of heavy school work I still
remember how to do the
fundamental stuff.
The DOM navigation is the challenge part, frameworks definitely have made our life easier, but
I still think it is crucial to know how to stuff in the hard way, it is beneficial to have a
better understanding of the
top-level technologies. It took me a while to figure out figure out how to restore the status of
the button, that is, disable
the button according the stored nominee list. Then I remember I did a similar project before
where I store the node reference to
the localStorage as well. My previous project save me again, I feel very great because I know it
is a great learning opportunity
for me and I likely will not forget how to implement this feature for a very long time.