Enhancing an exising project with visual improvements.
For this project, we will revisit the Datamuse API to enhance the search tools we worked with a few projects ago. We will present one search with multiple options, and we will allow users to save their results to a "Word List" so they can more effectively browse for words.
This project is mostly built, but it requires some love and affection by way of visual enhancements to make it more useful. With such a complex search tool, it is possible for users to get no results. When that happens, we don't want them to think the application has malfunctioned.
We are also updating information in the search results and in the sidebar Word List. We want to use messages and animation to help users identify when data in these areas of the page has changed.
To make it a little easier to create professional quality animations, we will
rely on the vue2-animate
project,
which makes a set of common animations available for use with Vue.js transition
components. We will also use a load spinner from Spinkit.
To complete this project, we must fulfill the following requirements.
- Use the
showSpinner
value to modulate the display of theCubeSpinner
component when appropriate - Add an animation to the items of the WordList for when new items are added and removed
- Add an animation to the items of the results list when a search is completed
- Add messaging to results display area let the user know when no results are found
- Add global messaging child component (
MessageContainer
) toWordSearch
component - Add a global "success" message to let the user know that a word has been successfully added to the WordList
- Add a global "info" message to let the user know when they try to add a word to the WordList that has already been added
- Add a global "success" message to let the user know that a word has been successfully removed from the WordList
- Add a global "error" message to display any errors from the API request (aside from "no results found")
If we crave more challenges, try tackling some of these suggestions.
- Try making custom animations for everything, and don't use
vue2-animate
animations at all - Add a shuffle feature to the wordlist along with the accompanying animation
- Make other layout or design improvements that help the application be more helpful to our users
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader. This project uses vue2-animate
and SpinKit.