uhmi-vue-task

Demo

Task

1. Create a SPA (Single Page Application) based on Vue 3, which displays a list of posts from jsonplaceholder.typicode.com/posts.

2. The list should display:

   • Title
   • Text
   • Number of comment

3. Add the ability to filter posts by title.

4. Add pagination, 10 items per page.

5. Add the ability to display statistics from using Chart.js. Create a graph that will show the number of characters in a commenter's mail. The data for the graph can be obtained from jsonplaceholder.typicode.com/comments where possible get a list of comments for each post.

6. Add a new map page using the Leaflet.js library. Focus the map on Ukraine.

7. When clicking on the map, a marker is created and a modal window opens, which has 3 fields: Name marker, Latitude and Longitude.

8. Latitude and Longitude are filled automatically with places where the user clicked. Marker name the user enters himself.

9. Add the ability to create a new marker on the map with entered data.

10. The name of the marker is displayed when you hover the mouse over it marker.

11. Markers are stored in localstorage and displayed on the map when reloading the page.

12. Add navigation between the main page and the page maps