This project requires you build a component from scratch primarily in HTML5 and TypeScript need.
** Review the attached image **
This component allows for the creation and display of a simple text “note” in an aesthetically pleasing and easy to use manner.
This component must have minimal third-party dependencies.
A conceptual visual representation is shown in the attached image.
You will need to document your component API.
You will need to create a mock that allows you to unit test the operation of your component.
This component must be responsive. It will render its content to an area appropriate for the screen size. None of its content will be clipped.
Some Telerik components will be wrapped around this component, so knowing Telerik Kendo jQuery is preferred.
I’m looking for organization, good code style, and thoughtfulness. Good work on this project will lead to more work to follow.
You must develop this component in Microsoft Visual Studio and deliver it as a Visual Studio project.
The component has the following properties: • In its default state it is a visible, single icon (image) with a badge that represents the number of text entries (notes) that exist for this icon • On mouseover, a div is displayed in the most front foreground (z-index), offset to the right of the icon. This div has a transparent background. Its contents include: o An icon used to present the new note entry form o A list of text entries that, if the user is the author, will have the ability to edit or delete (i.e. controls will appear), otherwise the user will not see these controls. All text items will appear from top to bottom and potentially increase the height of the page if insufficient height exists. Each text entry will have its own display container and include some properties. • On click outside of the parent div or any of its children content the div will no longer be visible. API elements:
Initialize – The user’s ID and an array of objects will be injected into the component for initialization. This will build out the div to display when user places their mouse over the cue. The presumption is that this data will be loaded through an API call, but you are not responsible for any of this, other than to mock the call in your unit tests. The method signature should include the definition of three delegates: 1) Add, 2) Delete and 3) Update.
* Behaviors
** Existing Text Entry
Text entries display three properties when the User ID does not equal the User ID assigned to the text entry object. When the User ID property is identical, additional visuals are displayed and behaviors available. When the “owner” is the “viewer”, the user will see an edit cue (icon), and delete cue. They will also see at least one other property, named “Display”, which will be a checkbox in read-only mode. Behaviors are described below.
*** Delete The delete cue (icon) will be visible when the user’s ID equals the user ID assigned to the text entry. When clicked, the user will receive a model dialog box (this can be very crude, as it will be replaced by a Telerik component) requiring they confirm the delete. Upon confirmation the delete delegate is called. The component will remove the object from its local list and refresh the component display (or simply delete the single entry from the DOM).
*** Edit The edit cue (icon) will be visible when the user’s ID equals the user ID assigned to the text entry. When clicked, the text entry will change from a read-only mode to an editable mode. The text will be editable and the checkbox will be editable. Following the edit, the use can click Update. This will lead to the Update delegate being called and the mode for the individual entry will revert to read-only.
Object:
TextEntry Text - string Display – bool UserID - int AuthoredBy - string AuthoredOn – date.
