Breaking Bad Characters ⚗️

🚀 Introduction

In this repository you can find the files generated in the final evaluation of Module 2 - JS within Adalab's Web Development Bootcamp - Promo Radia.

The main objective is to create a basic web application with a series of functionalities regarding interactivity with Javascript.

NOTE: Direct link to the project by clicking on the following link

📝 Requirements

With a 'Adalab Web Starter Kit' template as the starter point, the exercise consists on developing a web-site using the following elements:

HTML 5
Sass
Flexbox and CSS Grid
Media queries
Javascript
Interactions with the user
API request

The following requirements have to be respected:

Design:

Design with a basic structure made on a previously given model. It must have:

text input and search button to filter characters by their name.
as well as a list of articles with the photo, name and status of each character.
additional favorites section should appear in the aside.

Initial state:

When loading the page, all characters must appear in the main section, using an API request to obtain all the data. The URL for the request is The Breaking Bad API.
For each character obtained in the result, a card with the following information must be rendered: photo, name and status (dead or alive).

Search input:

The user can search characters by their name, filling the input and clicking in the 'Search' button of the form, the application should only display those characters that match the search query.

Favorites:

The user can designate favorite characters. When doing so, the following steps must occur:

Change styles of the selected character card to show it has been tagged as favorite.
Show a list of favorite characters in the aside with different CSS styles.
The favorite characters must continue to appear even if the user executes a new search by name

Local Storage:

All characters tagged as favorite must be saved in localStorage, so when the page is refreshed they do not disappear.

Bonus

Delete icon in favorites.
Highlight favorites.
General delete button.

🛠️ Tools

The project has been developed with 'Adalab Starter Kit', a framework created in node and gulp that has pre-installed and pre-configured functionalities. It also contains an HTML template engine, a Sass preprocessor and a local server, among other elements.

The following tools have been used when solving the project:

HTML (with partials for an easier lecture and project organization)
CSS/Sass
- Partials
- Variables, mixins and functions
- Flexbox
- CSS Grid
- Box model (size, padding and margin)
- Media queries
Javascript
- Partials
- Conditionals
- Events
- Functions
- Objects
- Arrays
- Loops
- API request
- Advanced DOM
- Routes and Links: SPA with react-router-dom
GIT version control

💾 Steps to follow to use this project on your computer:

NOTE: This project has been carried out using Adalab Starter Kit.

First of all, in order to have the repository on your computer:

Click on the top right corner > Fork.
It will ask you to choose which GitHub user you want to fork it to. Choose your user.
Go to github.com/your-user/name-of-project, clone it and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...
Finally and for everything to work properly, you must disable GitHub Pages and re-enable it so that GitHub generates the new URL correctly.

Once you have done the fork:

Open it in your code editor.
Open a terminal and install the local dependencies by executing in the command terminal. Here are the ones I used to start my project:

npm install

The project has to be started every time we start programming, to do this we will execute the command:

npm start

After running npm start we can start editing all the files inside the src/ folder and program comfortably 💫

✅ Final result

✨ Feedback

Any input is most welcome.

Thank you very much! 🤗

marocena26/breaking-bad-characters