Build Location Facet Widget
Budget: ₹600 – ₹1,500 INR
You are required to implement a Location Widget which will be used in an application as a control to enable
and disable datasets used for generating reports/charts.
The widget should look as in Image-1, and have following actions and controls:
1. Be able to list locations (i.e. City and Country separated by -) in alphabetical order.
2. Provide the ability to filter the list using a search box.
3. Have an alphabetical letter index on the right hand side. Each character should be clickable and
should scroll the list to the first item starting with that letter.
4. Upon clicking icon the widget should be minimised as shown in Image-2
5. Upon clicking icon the widget should be collapsed as shown in Image-3
6. Upon clicking icon the widget should be returned to normal form as in Image-1
7. Upon clicking icon the widget should be returned to normal form as in Image-1
Deliverables__________________________________________________________________________
Source code:
1. A committable and working solution with source code
2. Source code should be zipped and shared either on email or a shareable google drive link. (Do not share
the solution or put the code on GitHub or other code sharing system)
3. Readme file detailing steps to configure
4. Any dependency on a separate application or a server should be listed. This means that any external
dependency installed via a package manager should not be included in the deliverable. (that will increase
size of the shared zip)
Project Documentation should include:
1. Any assumptions made.
2. Suggest any additional parameters that could be additionally taken as input to improve the accuracy of
the solution.
3. State any improvements that you would like to make if more time was available for implementation.
IMPORTANT INFORMATION:___________________________________________________
To make evaluation accurate and less time consuming please take note of the following.
1. Framework: You can use any JS framework of your preference , or use vanilla JS. Framework won’t be
part of the evaluation. Make sure to use a framework you feel more confident with.
2. Excessive usage of UI libraries: While there are many UI toolkits, and it is good to use them, we want to
see how you code and achieve a solution. Usage of this is allowed but discouraged to use them in excess
for this WS.
3. Documentation: Please document the code where necessary and document it just enough. Excessive
documentation is worse than no documentation.
4. Summary: Please explain how to build and execute the code. How and what inputs to be passed and
where output can be seen. A general execution flow will also be good for the evaluator to understand the
solution that is being provided. As mentioned above, this needs to be just enough to make evaluation
effective and avoid excessive documentation.
and disable datasets used for generating reports/charts.
The widget should look as in Image-1, and have following actions and controls:
1. Be able to list locations (i.e. City and Country separated by -) in alphabetical order.
2. Provide the ability to filter the list using a search box.
3. Have an alphabetical letter index on the right hand side. Each character should be clickable and
should scroll the list to the first item starting with that letter.
4. Upon clicking icon the widget should be minimised as shown in Image-2
5. Upon clicking icon the widget should be collapsed as shown in Image-3
6. Upon clicking icon the widget should be returned to normal form as in Image-1
7. Upon clicking icon the widget should be returned to normal form as in Image-1
Deliverables__________________________________________________________________________
Source code:
1. A committable and working solution with source code
2. Source code should be zipped and shared either on email or a shareable google drive link. (Do not share
the solution or put the code on GitHub or other code sharing system)
3. Readme file detailing steps to configure
4. Any dependency on a separate application or a server should be listed. This means that any external
dependency installed via a package manager should not be included in the deliverable. (that will increase
size of the shared zip)
Project Documentation should include:
1. Any assumptions made.
2. Suggest any additional parameters that could be additionally taken as input to improve the accuracy of
the solution.
3. State any improvements that you would like to make if more time was available for implementation.
IMPORTANT INFORMATION:___________________________________________________
To make evaluation accurate and less time consuming please take note of the following.
1. Framework: You can use any JS framework of your preference , or use vanilla JS. Framework won’t be
part of the evaluation. Make sure to use a framework you feel more confident with.
2. Excessive usage of UI libraries: While there are many UI toolkits, and it is good to use them, we want to
see how you code and achieve a solution. Usage of this is allowed but discouraged to use them in excess
for this WS.
3. Documentation: Please document the code where necessary and document it just enough. Excessive
documentation is worse than no documentation.
4. Summary: Please explain how to build and execute the code. How and what inputs to be passed and
where output can be seen. A general execution flow will also be good for the evaluator to understand the
solution that is being provided. As mentioned above, this needs to be just enough to make evaluation
effective and avoid excessive documentation.