Add Clock Component

src/app/components/clock/clock.html

@@ -0,0 +1,4 @@
+<div class="clock-container">
+  <div class="clock-date">{{ dateString() }}</div>
+  <div class="clock-time">{{ timeString() }}</div>
+</div>

src/app/components/clock/clock.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.clock-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  font-family: inherit;
+  gap: 4px;
+  width: 100%;
+}
+
+.clock-date {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.clock-time {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #000;
+}

src/app/components/clock/clock.ts

@@ -0,0 +1,48 @@
+import { Component, signal, computed, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'clock',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './clock.html',
+  styleUrl: './clock.scss',
+})
+export class Clock implements OnInit, OnDestroy {
+  private timer: any;
+  currentTime = signal(new Date());
+
+  dateString = computed(() => {
+    const d = this.currentTime();
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  });
+
+  timeString = computed(() => {
+    const d = this.currentTime();
+    let hours = d.getHours();
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+    const seconds = String(d.getSeconds()).padStart(2, '0');
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+
+    hours = hours % 12;
+    hours = hours ? hours : 12; // 0 should be 12
+    const hoursStr = String(hours).padStart(2, '0');
+
+    return `${hoursStr}:${minutes}:${seconds} ${ampm}`;
+  });
+
+  ngOnInit() {
+    this.timer = setInterval(() => {
+      this.currentTime.set(new Date());
+    }, 1000);
+  }
+
+  ngOnDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
+}