This exercise consists of a series search engine where you can select your favorite series and save them in localstorage
- Data structure
- Search application
- Favorite
- Delete favorites
- [Local Storage](##Local-storage
src
├─ api // los ficheros de esta carpeta se copian en public/api/
| └─ data.json
├─ images
| └─ logo.jpg
├─ js // the files in this folder are concatenated in the main.js file and this is saved in public / main.js
| ├─ 00-constans.js
| └─ 02-rendershow.js
| └─ 03-search.js
| └─ 04-fav.js
| └─ 05-renderFav.js
| └─ 07-localstorage.js
| └─ 08-reset.js
|
├─ scss
| ├─ core
| ├─ layout
|└─ mains.scss
└─ html
└─ partials
The series search application consists of two parts:
. A text field and a button to search for series by title.
. A list of search results where the poster of the series and the title appear.
For each show contained in the search result, a card must be painted where we show an image of the series and the title.
In the case that the API does not return an image for some series, it must show a fill image.
Once the search results appear, the user can indicate which are our series
favorites when you click
To do this, when clicking on a series the following must happen:
The marked series is marked as a favorite.
You have to show a list, below the search form, with your favorite series.
Favorite series should continue to appear even if the user performs another search.
Include a button at the end of the favorites list to delete all favorites at once. (included localstorage)
By clicking on the delete icon next to each favorite, you have to delete the clicked favorite from the list and from the localStorage.
Being able to add / remove as a favorite by clicking on a series. If we do a new search and a series that is already a favorite comes up, it will appear already highlighted in the search results.
Favorite series should continue to appear even if the user performs another search.
Local storage The list of favorites must be stored in the localStorage. In this way, when reloading the page the list of favorites should be shown.
JS / SCSS
Install the package and its dependencies using:
Once the installation is complete you will find that a folder named node_modules / has been added.
Finally, run the following command to load a local server and be able to do the visualization.
NOTE: It is necessary to have NodeJS installed
Build the production app in the docs
folder. \
Correctly bundles React in production mode and optimizes build for best performance.
These Gulp tasks produce the following file stream:
Our gulpfile.js uses the config.json
configuration file with the paths of the files to generate / observe.
In this way we separate the actions that are in gulpfile.js
from the configuration of the actions that are in config.json
.
If you have come this far, and you have detected a problem or consider that something can be improved,
I would be delighted if you open a new issue and get your opinion, each improvement is important and necessary for me, thank you very much for your time.