feat: Unix time util

src/app/app.routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '@angular/router';
 import { MainComponent } from './components/main/main.component';
 import { TrimComponent } from './components/trim/trim.component';
+import { UnixtimeComponent } from './components/unixtime/unixtime.component';
 
 export const routes: Routes = [
     { path: '', component: MainComponent },
     { path: 'trim', component: TrimComponent },
+    { path: 'unixtime', component: UnixtimeComponent },
 ];

src/app/components/main/main.component.css

@@ -1,10 +1,17 @@
 #tools{
     height: 100vh;
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
 }
 
-#trim{
-    width: 80%;
+.tools{
+    margin:1em;
+}
+@media only screen and (max-width: 600px) {
+    #tools{
+        width: 40%;
+    }
 }

src/app/components/main/main.component.html

@@ -1,3 +1,4 @@
 <div id="tools">
-    <button id="trim" mat-button routerLink="trim">Trim</button>    
+    <button class="tools" id="trim" mat-raised-button routerLink="trim">Trim</button>
+    <button class="tools" id="unixtime" mat-raised-button routerLink="unixtime">Unix timestamp converter</button>
 </div>

src/app/components/unixtime/unixtime.component.css

@@ -0,0 +1,7 @@
+#main{
+    padding: 1em;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-direction: column;
+}

src/app/components/unixtime/unixtime.component.html

@@ -0,0 +1,20 @@
+<div id="main">
+    <form>
+        <mat-form-field>
+            <mat-label>Enter timestamp</mat-label>
+            <input name="unixtime" matInput [(ngModel)]="unixtime" (input)="changed()" type="number">
+        </mat-form-field>
+    </form>
+
+    <div style="display: flex;flex-direction: column;">
+        <span>
+            Date: {{date}}
+        </span>
+        <span>
+            Time: {{time}}
+        </span>
+        <span>
+            UTC: {{utc}}
+        </span>
+    </div>
+</div>

src/app/components/unixtime/unixtime.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UnixtimeComponent } from './unixtime.component';
+
+describe('UnixtimeComponent', () => {
+  let component: UnixtimeComponent;
+  let fixture: ComponentFixture<UnixtimeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UnixtimeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UnixtimeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/unixtime/unixtime.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+@Component({
+  selector: 'app-unixtime',
+  standalone: true,
+  imports: [MatInputModule, FormsModule],
+  templateUrl: './unixtime.component.html',
+  styleUrl: './unixtime.component.css'
+})
+export class UnixtimeComponent implements OnInit {
+  unixtime: number = 0
+  date = "";
+  time = "";
+  utc = "";
+
+  ngOnInit() {
+    let date = Date.now();
+    this.unixtime = date;
+    this.changed();
+  }
+
+  changed() {
+    let date = new Date(this.unixtime);
+    this.date = date.toDateString();
+    this.time = date.toTimeString();
+    this.utc = date.toUTCString()
+  }
+}