Frontend Development ( UX/UI )

[DanApollo]

Description:
Develop the user interface (UI) of the Employee Wellness Portal using HTML, CSS, and vanilla JavaScript to provide a user-friendly and visually appealing experience.

User Stories:

• "As an employee, I want an intuitive and easy-to-navigate interface to access and interact with the portal's features."

• "As an employee, I want the portal to be visually appealing and engaging, making it enjoyable to use."

Acceptance Criteria:

1. HTML Structure:

-Semantic HTML elements are used to create a well-structured and accessible layout.
-Pages are organised logically, with clear sections for different functionalities (e.g., dashboard, workout logging, nutrition logging, challenges).
-Forms are implemented for user input, following best practices for accessibility and usability.

2. CSS Styling:

-A visually appealing design is implemented.
-Responsive design is used to ensure the UI adapts to different screen sizes and devices (optional).
-Typography is clear and easy to read, with appropriate font choices and sizes.
-Colour scheme is chosen for visual appeal and accessibility.

3. JavaScript Interactions:

-Form validation is implemented using vanilla JavaScript to provide immediate feedback to users.
-Dynamic updates are used to display or hide content based on user actions.
-Navigation elements are interactive and responsive.

Tasks:

1. UI Design:

-Create wireframes to outline the page layouts and element placement.
-Finalise the design with the team.

2. HTML Implementation:

-Write clean and semantic HTML code based on the approved design.
-Use appropriate HTML5 elements for forms, navigation, and interactive components.

3. CSS Implementation:

-Write CSS rules to style the HTML elements according to the design.
-Use CSS Grid or Flexbox for layout.
-Implement media queries for responsive design (optional).

4. JavaScript Implementation:

-Write vanilla JavaScript code to add interactivity to the UI elements.
-Implement form validation logic.

5. Testing:

-Thoroughly test the UI on different browsers and devices to ensure cross-compatibility.
-Test interactive elements and form validation for proper functionality.

Dependencies:

• This ticket depends on the completion of the database creation and API integration tickets (to fetch and display data).
• The UI design phase should ideally be completed before starting development.

[domBeCoding]

implementation pushed to dom_branch