/highlight-priority

This is a coding challenge given to me.

Primary LanguageJavaScript

Highlight Priority

I was tasked with creating a web service that will highlight phrases in a document given a string and an array of highlight objects. If highlights overlap, it will show the higher-priority highlights over the lower-priority highlights.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

What things you need to install the software.

  • fork and clone this repository

Installing

Install the Node dependencies:

* run npm install

Start the react development server:

* npm start

Key Features

This application requires two inputs: text that will be manipulated and highlight values that will control the manipulation.

The text can be input in the text box on the top left of your screen.

To add highlight values, click the yellow button below the text box labeled "Add Highlights to Text." A form group will be rendered below. You can add as many as you'd like; add more by pressing the button again.

Within each form group, type in a number in the "Start Offset" box for which word you'd like the highlights to begin, and a number in the "End Offset" box for the word which you'd like the highlights to end.

You will also need to type in a number in the "Priority" box to determine the order in which the highlights will be prioritized. The priorities will be determined by ascending order. For example, the highlight value with a priority value of '0' will have a higher priority with a higlight value with a priority of '1'. You can determine your highlight color by clicking the colored circle of your choosing in the color swatch on the right of the box.

Please note that you must have the "Start Offset", "End Offset", and "Priority" boxes filled in order for each highlight value to be rendered. The "Start Offset" value must also be less than or equal to the "End Offset" value. Any highlight values that do not fit the above criteria will not be considered.

To render your text, click the blue button labeled "Render Your Text". The text will then be rendered with the highlight values on the right side of your screen. To clear the text and the highlights on the form on the left, click the red button labeled "Clear Text/Highlights".

Built With

Author