frontend-engineering-octernship Duplicate char remover project.

📝 Description

It is a ReactJS app that allows users to remove duplicate characters from a string.

It has two screens:

Screen 1: The form contains a text field where users can type in their string and a submit button to finalize the submission.

Screen 2: In this screen showing the original string, the current string, and a list of cards representing each character in the current string. The user can click on a delete icon located on each card to remove all duplicate instances of that character in the string except the one that is being clicked.

🚀Live Demo:

• simply click this link : https://duplicate-char-remover-8b327.web.app 👈 to see my React project.

👉 Instructions to run this project locally

Step:1.Clone the repository by running the following command

git clone https://github.com/amaranand360/frontend-engineering-octernship.git

Step:2.Navigate to the project directory by running the following command

cd app

Step:3.Install React app's Dependencies

npm install

Step:4.To start the React app in your default browser by running the following command

npm start

Step:5.If your browser doesn't open automatically, you can manually open it and navigate to

http://localhost:3000

• Note: Make sure you have Node.js and npm installed on your computer

🎨 Features

• Users are not allowed to go to page 2 without providing a non-empty value in the input field on Page 1.
• All letter cards with the same character have the same background color.
• The container is nicely styled with a modern design, and each letter card has a hover effects.
• When User Clicked on a card delete icon on deletes all other appearances of that character in the string, except the one that is clicked.
• This header appears when there are no more characters with greater than 1 appearance
• User have opction to GoBack by clicking Go Back button.
• The app is completely responsive and can be used on mobile phones also.

Requirements

• Screen 1: Provide an input field and a button with text 'Submit'.

• Screen 1:User should be able to put in any value in the input field. Clicking on the button should redirect user to screen 2

screen1.mp4

• Screen 1: If the input field is empty or has only space characters, the user should be shown an alert

• Screen 2: Cards for the same characters should have the same background color.

• Screen 2: When User Clicked on a card delete icon on deletes all other appearances of the character in the string, except the one that is clicked.

deletebtn.mp4

• Screen 2: We should also show the original string and the new resultant string.

🎨 Responsiveness futures :