QUESTION
Create a web page in which an input box and search button is given. It has only 1 view - \begin{tabular}{l|l|l|} \hline \multicolumn{2}{|l|}{ S } \\ Total cities found: 8 \\ \hline Uttar Pradesh & Agra & Aligarh \\ \hline \hline Maharashtra & Aurangabad & Amravati \\ \hline \hline Gujarat & Ahemdabad & Anand \\ \hline \hline Rajasthan & Alwar & Ajmer \\ \hline \end{tabular} 1. Only letters a-z, A-Z can be entered. No spaces or no numbers are allowed. If the input is invalid show, show an alert saying 'Please provide the valid input'. 2. On valid input and clicking on Search button, an API has to be hit 'https://jsonmock.hackerrank.com/api/cities/?city三\{input value\} ' which returns the json data containing the cities name starting with user input (city name comes with state name). For example - if ' $a$ ' is returned, cities starting with the letter ' $a$ ' are returned by the API. 3. Show the div - 'Total cities found: \{number of cities returned by API\}'. 4. Show the cities in tabular format such that all the cities belonging to the same state fall in the same row. First column is the state name followed by all city names per column. 5. As soon as the search button is clicked with a valid input, the loader should pop up and once the data is fetched from the API, the loader goes away and the table is re-rendered with the results. 6. To fill the gap between the button clicked and table display show the below loader. a Searchjust the .html
Public Answer
