diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index f4665bc..9ae5a89 100644 --- a/src/app/app.routes.ts +++ b/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 }, ]; diff --git a/src/app/components/main/main.component.css b/src/app/components/main/main.component.css index b32d969..6d158ac 100644 --- a/src/app/components/main/main.component.css +++ b/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%; + } } \ No newline at end of file diff --git a/src/app/components/main/main.component.html b/src/app/components/main/main.component.html index fe16d2c..3748a26 100644 --- a/src/app/components/main/main.component.html +++ b/src/app/components/main/main.component.html @@ -1,3 +1,4 @@
- + +
\ No newline at end of file diff --git a/src/app/components/unixtime/unixtime.component.css b/src/app/components/unixtime/unixtime.component.css new file mode 100644 index 0000000..5562e72 --- /dev/null +++ b/src/app/components/unixtime/unixtime.component.css @@ -0,0 +1,7 @@ +#main{ + padding: 1em; + display: flex; + width: 100%; + align-items: center; + flex-direction: column; +} \ No newline at end of file diff --git a/src/app/components/unixtime/unixtime.component.html b/src/app/components/unixtime/unixtime.component.html new file mode 100644 index 0000000..d96e95f --- /dev/null +++ b/src/app/components/unixtime/unixtime.component.html @@ -0,0 +1,20 @@ +
+
+ + Enter timestamp + + +
+ +
+ + Date: {{date}} + + + Time: {{time}} + + + UTC: {{utc}} + +
+
\ No newline at end of file diff --git a/src/app/components/unixtime/unixtime.component.spec.ts b/src/app/components/unixtime/unixtime.component.spec.ts new file mode 100644 index 0000000..22c898f --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [UnixtimeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(UnixtimeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/unixtime/unixtime.component.ts b/src/app/components/unixtime/unixtime.component.ts new file mode 100644 index 0000000..5c05dac --- /dev/null +++ b/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() + } +}