Custom HTML5 Component (Element) Development

This project requires you build a component from scratch primarily in HTML5 and TypeScript.

** 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.



> Text - string

> Display – bool

> UserID - int

> AuthoredBy - string

> AuthoredOn – date

Habilidades: jQuery, Typescript, CSS, HTML5

Veja mais: autonomous custom elements, custom element example, custom elements vs web components, web components example, customized built-in elements, custom elements, web components, custom elements tutorial, mootools custom joomla component, joomla custom profile component, custom scrollpane component flash, custom flash splash page development, custom joomla component mvc tutorial, joomla custom search component, custom scrollpane component as3, treeview custom jsf component, develop custom swing component, custom login component joomla, custom property field control development sharepoint, flash custom listbox component

Acerca do Empregador:
( 2 comentários ) HUNTINGTN BCH, United States

ID do Projeto: #27248792

Concedido a:


Hi, I represent the European outsourcing company Scalamandra. We take care of the entire project development cycle: consulting, development, integration, support, and maintenance. Also, after the implementation of th Mais

$20 USD / hora
(1 Comentário)

8 freelancers are bidding on average $21/hour for this job


Hi, I have read your post and understood your requirement. Looking for the freelancer to work on your next project? Or just need some issues/bugs/fixes ASAP? I have 11+ years of software experience in fortune 500 comp Mais

$25 USD / hora
(23 Comentários)

Hi, I have read your job description carefully and i am very interested in this job. I am full stack web developer and i have a strong experience with HTML, Typescript. I can start working right now and looking fo Mais

$20 USD / hora
(12 Comentários)

Hello William L.,   We have 20 years of strong experience in CSS, HTML5, Typescript, jQuery, as a result, we can successfully complete this project.   Please, review our profile here: Mais

$23 USD / hora
(4 Comentários)

Hello. how are you? I have read your project and I have confidence in this project and I can start right now. I specialize in website design and development and am excited about this opportunity to work with you in ac Mais

$20 USD / hora
(8 Comentários)

Hi! Hope you would be doing well so am I. Checked your project details and skills. They match 100% with my skills. As shown in portfolio I have always completed projects on time as well as have perfection in them. Henc Mais

$20 USD / hora
(2 Comentários)

Hi there! I have more than 7 years of experience and can start working on your project right now :) lets have a chat :) Best: Grewal

$20 USD / hora
(0 Comentários)

⭐⭐Hello. I'm specialized in javascript. I have 7+ years of experience of web projects with PHP framework such as laravel, CI, Yii & Javascript such as jquery, React, Vue, angularJS, NodeJS. Please contact me if you are Mais

$20 USD / hora
(0 Comentários)