Many websites need to be displayed in multiple languages. To handle this, all the languagespecific labels on the website are assigned a unique key and stored in a translation file. A website can have multiple translations files—one for each language. Translation files are stored in JSON, which allows labels to be stored hierarchically. For example, we could group the labels together by each section of a webpage:
The website can reference each label in the HTML by its key in dot-notation ([url removed, login to view] = “Welcome to my Webpage!”). The key is dynamically replaced by the label when the page is rendered. This means that your raw HTML pages will contain no actual text, just keys. The downside of this technique is that is becomes difficult to see what label a key corresponds to without looking through a long JSON document. There’s got to be something we can do about that, right? The Task Your job is to create a web page that allows a user to search a provided translation for a specific label. The search query will be the key of the label, in dot-notation. The requirements are as follows: Provide a text area on the web page where the JSON can be copy and pasted. We will use a different JSON, but you can assume the JSON will be valid. The value of a JSON object will only be a string (the label), or another JSON object (a nested JSON object). There will be no arrays in the JSON object.
The search interface will contain a search box, for entering the key, and a search results area to display the matching label. For example, if someone searched for “[url removed, login to view]”, the search page should display: “User Name”. Only one search result is possible since each key is unique. If the user enters an invalid key, or a key that could not be exactly matched from the JSON file, no search results should be returned. The page should be written using HTML utilizing jQuery and Bootstrap. We are flexible in how you use jQuery and Bootstrap but please demonstrate knowledge of both. Do not collaborate with other people on this project. It should represent only your own work. If you’re feeling ambitious, or just have a lot of time to kill, you can implement these extra features: A “reverse” search option: Allow the user to search by the label, and return all the keys to which the label belongs. This search result can return multiple keys. Once again, only exact matches need to be considered. How the UI switches between the regular search and the reverse search is up to you. Autocomplete: Give user options to fill in rest of a search based on partial input. Some other cool feature/design you think would bring value to the application.
13 freelancers are bidding on average $27 for this job
I have a lot of experinece in development of project like what you want. If you hire me, I will do my best to develop your project wonderfully in a short time! Proposed Milestones $25 USD - milestone
Expert in Web Application Html5,css3,php,asp.net,mvc Relevant Skills and Experience HTML5, JS , JQ , CSS3 , BOOTSTRAP , PHP OR ASP.NET MVC Proposed Milestones $30 USD - --