Pincode Input Dialog with Area Suggestions and Close Icon #92
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@dhruvishah122 is attempting to deploy a commit to the minavkaria's projects Team on Vercel. A member of the Team first needs to authorize it. |
MinavKaria
reviewed
Oct 7, 2024
There was a problem hiding this comment.
Welcome to Our repository, @dhruvishah122! 🎊 Thank you so much for taking the time to point this out.
|
Feature: Pincode Input Dialog with Area Suggestions and Close Icon |
|
can u pls merge this PR |
|
@dhruvishah122 The only thing you added is close button right ? |
|
yes |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
his contribution adds a dialog box component for entering and validating pincodes. When a valid pincode is entered, the component fetches and displays a list of area suggestions from an external API. It also includes an option to close the dialog via a cross (close) icon for better user experience.
Key Features:
Pincode Validation:
The user is required to enter a 6-digit pincode. Upon submission, if the pincode is valid, area suggestions are fetched and displayed.
Alerts the user if the pincode is invalid or if no area is selected.
Area Suggestions:
Uses the https://api.postalpincode.in/ API to fetch post office areas based on the entered pincode.
Suggestions are displayed dynamically as the user enters a valid pincode.
Allows the user to select an area from the suggestions list, which is saved locally.
Close Icon:
A cross (close) icon has been added to the top-right corner of the dialog to allow users to easily close the popup.
Improves user experience by providing a quick way to dismiss the dialog.
LocalStorage Integration:
Stores the selected pincode and area locally using localStorage, ensuring persistence across sessions.
Tech Stack:
React: Manages the state and renders the dialog UI.
Material-UI: Utilized for dialog, button, input, and icons, ensuring a clean and responsive UI.
API Integration: Fetches area suggestions from a public pincode API.