Clock Application - README

The project contains three branches, each branch corresponding to a part of the project.

The master branch contains the latest code -- same as branch Part-C

Table of Contents

1. Part A - Create a Watch
2. Part B - Extend Your Watch
3. Part C - Further Extend Your Watch

---

Part A - Create a Watch

-For this part, my main goal was to achieve the following:

Functional Requirements

• Displaying the time:

  • The clock displays the current local time in hh:mm:ss format, updating every second.
  • Single digit hours, minutes, and seconds are displayed with a leading zero.

• Editing the time:

  • A mode button allows toggling between hours, minutes, and standard display.
  • Hours and minutes can be edited while the clock continues to run.

• UI Editing:

  • A light button toggles the background color between yellow and white.

Technical Requirements

• Languages: TypeScript (vanilla).
• Architecture: MVC pattern with ClockModel, ClockView, and ClockController.

UML Class Diagram for Part A

Result - UI for Part A

---

Part B - Extend Your Watch

-As for this part, I did a major refactoring, creating the HomePage template, controller and view. This was important to reduce the responsibility of the clock view/controller as new functionalities were added (buttons to the clock).

Functional Requirements

• Adding New Clocks:

  • A button allows adding new clocks, each synchronized and displaying the local time.
  • Timezone selection is available for each new clock.(UCT default)

• Editing a Clock:

  • Toggle between AM/PM and 24-hour format.
  • Reset time while keeping the clock settings and timezone, upon click on a reset button.

• Managing Clocks:

  • Each clock can be removed uppon click on a delete button.

UML Class Diagram for Part B

Result - UI for Part B

---

Part C - Further Extend Your Watch

In this part I refactored the code again, adding new utility classes besides the required Matrix3x3. This was important to reduce again the responsibility for the clock view/controller. This part was also marked by introducing a new display mode for the clock: the analog mode.

Functional Requirements

• Matrix Transformations:

  • Utility functions allow defining and transforming 3x3 matrices.
  • (extra)ClockUtilities: to allow retrieving the hours, minutes and seconds more efficiently.
  • (extra)DisplayUtilities: to manage display toggling between analog and digital mode.
  • Apply translation, rotation, and scaling to points.

• New Clock Type (Analog):

  • An option to switch to an analog clock displaying hours, minutes, and seconds hands.
  • Animations are powered by matrix transformations not css API.

UML Class Diagram for Part C

Result - UI for Part C