A fun challenge would be to design a single directive that creates a responsive UI element, such as a tooltip that appears differently on desktop and mobile devices, showing up with touch or hover interactions. The task involves creating an HTML template, responsive CSS, and JavaScript to make it functional.
I recently had to create a similar directive for a project that followed the mouse on hover and remained static on mobile devices. However, I didn't incorporate responsive CSS into it - your challenge could include adding different styles for mobile devices.
To start, you can set up a basic HTML structure:
<div ng-repeat="item in items">
<span tooltop="item.description" tooltop-options="{color: item.color}">
{{item.text}}
</span>
</div>
The goal is to create a unique UI element efficiently. If it's completed quickly, you can introduce another challenge of designing a second directive that interacts with the first one, without explicitly instructing the participant to create a service. This new directive could handle error messages like:
<errors/>
Error messages can also be made responsive using CSS to ensure they appear appealing across different devices.
Additionally, there should be a directive like:
<something ng-model="someobject"/>
This 'something' directive should communicate error messages with the error directive, for example when the object type is not an array.
The participant needs to develop a directive utilizing ngModel and a service that stores errors, along with a second directive responsible for displaying these error messages from the service.