¡Hola mundo!
After some Javascript code digging here comes the chance to put it on on practice. This is a series searcher/finder, the applications allows to search a TV serie by its name and to add it to a personal favorite list.✨ Here's a glimpse✨
I was asked to develop a web application that:
- User can search a TV serie by name.
- The result of the search must show the name and a picture. from the serie fetched from the TV Maze API.
- The user must be able to click on a serie to add it on "favorites".
- Favorite list must be in a column on the left.
- If the user refresh the browser, favorite list must remain.
- As a bonus: add a reset button to the favorite area that resets the shown list and the local storage.
- As another bonus: allow the user to eliminate a serie from his favorite area by clicking on the "x"
Starring: Adalab Web Starter Kit - An amazing template that allowed me to use a local host, SASS, HTML Template Engines and gulp. For more information you may visit the Kit repository
Node.js and Gulp are required
- Visual Code Studio: as code editor
- HTML
- SASS
- Javascript
For the development of this web application I used a flowchart to understand the user journey and develop my code following some logic. If you are curious about my train of thought you can check my flowchart in Spanish here.
The main function is the fetch that will give us all the content for our dinamic website. With this information saved on a variable I rendered the website mainly using the DOM as a way of practice.
After the results were showing correctly I went for the "favorite" ⭐ function in which checking the id of the series I created a new array to render this area.
With the favorite series packed up in a variable I wrote down the localStorage so, whenever the user comeback his favorite series📺 will always be waiting for him.
Go for it! Rembember that you will need to:
- Install dependencies. You will only have to do this once.
npm install- Start the proyect. This must be done everytime you code and will open a local host that will update in real time
npm startI'm an student and am learning loads of things in Adalab's bootcamp, if you have any idea that I could develope or would like to explain me new and easier ways to develope this site, please tell me so and I will try to.
MIT