As a developer working on this project for Problem 2, I have been given the task of creating a new component for finding specific states based on a substring, to use a search component that allows me to input a substring so that I can quickly and easily filter and view states that contain the specified substring.
Acceptance Criteria:
Input Field for Substring:
There should be an input field where I can type a substring of a state name.
Alphabetical List of Matching States:
Below the input field, there should be an HTML list that displays, in alphabetical order, the names of all states whose names contain the entered substring (ignoring case differences).
The list should update automatically after each character I type in the input field.
Empty Substring Behavior:
When the input field is empty, the list should display all states.
Display Filtered Substring:
There should be a separate element displayed on the page, indicating the substring that was used to filter the states. This element should be updated as I type in the input field.
No Matching States Message:
If there are no states that match the entered substring, a message should be displayed on the web page to indicate this fact instead of showing an empty list.
Case Insensitivity:
The substring matching should be case-insensitive, meaning it should consider both uppercase and lowercase letters.
Component Separation:
The search component should be implemented as a React component named States in the components/states/States.jsx file.
Styling:
Create CSS styles for the States component to make the state list visually appealing and easy to read. These styles should be placed in the components/states/States.css file.
Use Provided Data:
Utilize the state data provided in window.models.states to populate and filter the list of states.
File Structure:
Follow the specified file naming conventions for the React component, JSX file, and CSS file as mentioned in the project guidelines.
Integration with Project:
Ensure that the component can be integrated into the project by using the provided HTML file (p2.html) and can be compiled and displayed properly in the browser at http://localhost:3000/p2.html via the p2.bundle.js file generated by webpack from p2.jsx.
In summary, as a developer working on this project, my task is to create a dynamic web component. It will enable users to search for states based on a substring, display matching states alphabetically, and handle empty substring inputs. Additionally, it will include a real-time substring display and a message for cases with no matching states. The component will be built using ReactJS, styled for a pleasing appearance, and utilize provided state data. It will integrate seamlessly into the project for a better user experience.
User Story:
As a developer working on this project for Problem 2, I have been given the task of creating a new component for finding specific states based on a substring, to use a search component that allows me to input a substring so that I can quickly and easily filter and view states that contain the specified substring.
Acceptance Criteria:
Input Field for Substring:
Alphabetical List of Matching States:
Empty Substring Behavior:
Display Filtered Substring:
No Matching States Message:
Case Insensitivity:
Component Separation:
Statesin thecomponents/states/States.jsxfile.Styling:
Statescomponent to make the state list visually appealing and easy to read. These styles should be placed in thecomponents/states/States.cssfile.Use Provided Data:
window.models.statesto populate and filter the list of states.File Structure:
Integration with Project:
p2.html) and can be compiled and displayed properly in the browser athttp://localhost:3000/p2.htmlvia thep2.bundle.jsfile generated by webpack fromp2.jsx.In summary, as a developer working on this project, my task is to create a dynamic web component. It will enable users to search for states based on a substring, display matching states alphabetically, and handle empty substring inputs. Additionally, it will include a real-time substring display and a message for cases with no matching states. The component will be built using ReactJS, styled for a pleasing appearance, and utilize provided state data. It will integrate seamlessly into the project for a better user experience.