Vue: Shopping Total

About This Widget

This widget is mainly an exercise in creating a slightly more complex GUI as compared with my To-Do List widget. Like many of my other projects, I use local storage to auto-save the user's inputs.

The main novelty for this widget is that I implemented interfaces for downloading a data backup and then recovering from backup. In reality, nobody would care enough about a shopping list to do that, but the principles involved would be the same for some other kind of data. For uploading data from a file, I used the FileReader class and its API.

I also used some simple style techniques to temporarily highlight on content that has changed. The highlighting fades in milliseconds, which is a transition animation.

The complete source code is available on my GitHub at https://github.com/​xerocross/xerocross.shop. The source also includes ample dom-centric unit testing.