Web Applications

JavaScript, User Interface


  • User Interface

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.

Assignment: 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

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.

  • The button has id = "clear-button".
  • The text input has id = "input-text".

Add routing

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.

Shared state

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.

Utilize a UI library

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.

Navigation bar

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:

  • home - Page with input box.
  • about - About page.
  • increase - Page with value increase button.
  • decrease - Page with value decrease button.
Questions, ideas, or any other feedback?

Please feel free to use the anonymous feedback form.