The Breaking Bad Name Highlighter is a React application that highlights the first occurrence of chemical elements' symbols within a given name and last name. It prioritizes symbols with two letters and ensures unique highlights between the name and last name fields. Visit it in github pages.
- Highlight Chemical Symbols: Automatically highlights the first occurrence of any chemical element symbol within the name and last name.
- Priority to Two-Letter Symbols: Gives precedence to chemical symbols with two letters over one-letter symbols.
- Unique Highlights: Ensures that symbols highlighted in the name are not reused in the last name.
Follow these instructions to get a copy of the project up and running on your local machine using Docker.
- Docker: Ensure Docker is installed and running on your system. You can download it from the official website.
-
Clone the Repository: Clone this repository to your local machine.
git clone git@github.com:enriquerene/react-challenge.git cd react-challenge -
Build the Docker Image: Build an image from the Dockerfile.
docker build -t breaking-bad-app . -
Run the Docker Container: Run a container from the image you just built.
docker run -p 80:80 breaking-bad-app
This command runs the container and maps port 80 of the container to port 80 on your host machine.
-
Access the Application: Open a web browser and navigate to
http://localhost. You should now see the Breaking Bad Name Highlighter app running.
If you prefer using docker-compose, you can start the application with the following command:
```bash
docker-compose up --build
```
This command uses the docker-compose.yml file to build and start the application. It's particularly useful when your application grows to include more services.
- Enter a name in the "Name" input field.
- Enter a last name in the "Last Name" input field.
- Click the "Breakify" button to highlight the chemical element symbols within the name and last name.