This is a DIY practical; there is no offline or online session.
Should you have any questions, please let me know.
You must implement and submit the assignment before 29.3.2024 23:59 UTC.
./practical-04/user-interface
Employ Vite and rendering library ( React, Vue, Angular, Svelte, ... ) of choice to implement functionality as described at following slides.
package.json must contain the build script for building the application into dist directory.
Create a simple application with a button, text input, and a label. When the button is clicked, the text input should be cleared. The content of the text field is synchronized with the label.
Each page must have a navigation bar with links to all pages in your application. The application must not reload upon navigation (single-page-application style). You may implement routing (navigating from page to page) yourself or utilize a library.
Add an about page with arbitrary content using the routing of choice.
Create two new pages, each page should contain a button. The label of the button should be a value of a counter. The counter must be shared between pages. When a user clicks the first button,with id = "increase-value", the counter will increase. When the user clicks the other button , with id = "decrease-value", the counter will decrease. Keep in mind that each button is located on a different page.
Your framework of choice may provide a state management library or technique (context) to help you with sharing the data.
Find and use any ui component library compatible with your selected framework. Add layout to the application, and make buttons look cool.
Bellow are libraries you may consider. Keep in mind that libraries are often framework specific.
As states before the navigation bar must contain links to all pages. In the navigation bar each href must contain property "data-target" with value according to following list: