Дошёл до 14 урока

src/app/app.component.scss

@@ -0,0 +1,2 @@
+
+

src/app/app.component.ts

@@ -1,13 +1,28 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from "./components/header.component/header.component";
+import { FooterComponent } from './components/footer.component/footer.component';
+
+
+// const name = 'Umar';
+// if (name === 'Umar') {
+//   console.log('Umar')
+// } else {
+//   console.log(Error)
+// }
+
+const names = ['Umar', 'Suleman', 'Ilnur', 'Yusup', 'Ali', ];
+console.log(names [4]);
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, FooterComponent, HeaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
   title = 'mentoring-first-project';
+
+
 }

src/app/app.config.ts

@@ -2,7 +2,13 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(),
+     provideAnimationsAsync(),
+  ]
 };

src/app/app.routes.ts

@@ -1,3 +1,38 @@
 import { Routes } from '@angular/router';
+import { UsersListComponent } from './components/user.list.component/users.list.component';
+import { HeaderComponent } from './components/header.component/header.component';
+import { HomeComponent } from './components/home.component/home.component';
+import { TodosListComponent } from './components/todo.list.component/todos.list.component';
+import { LocationComponent } from './components/location.component/location.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: 'users',
+        component: UsersListComponent
+    },
+
+    {
+        path: 'header',
+        component: HeaderComponent
+    },
+
+    {
+        path: '',
+        component: HomeComponent
+    },
+
+    {
+        path: 'home',
+        component: HomeComponent
+    },
+
+    {
+        path: 'todos',
+        component: TodosListComponent
+    },
+
+    {
+        path: 'location',
+        component: LocationComponent
+    }
+];

src/app/components/create-todo-form/create-todo-form.component.html

@@ -0,0 +1,28 @@
+<h1 class="form">FORM TODOS</h1>
+
+<div class="create_input">
+    <form class="form_todos" action="" [formGroup]="form" (ngSubmit)="submitForm()">
+
+        <mat-form-field class="example-full-width">
+            <mat-label>UserId</mat-label>
+            <input matInput placeholder="Введите UserId " type="text" formArrayName="userId">
+        </mat-form-field>
+
+        <mat-form-field class="example-full-width">
+            <mat-label>Title</mat-label>
+            <input matInput placeholder="Введите Title" type="text" formArrayName="title">
+        </mat-form-field>
+
+        <mat-form-field class="example-full-width">
+            <mat-label>Completed</mat-label>
+            <input matInput placeholder="Введите Completed" type="text" formArrayName="completed">
+        </mat-form-field>
+
+        <button type="submit" class="button_create" matIconSuffix mat-raised-button [disabled]="form.invalid">Add Todo
+            <mat-icon>add</mat-icon>
+        </button>
+
+    </form>
+</div>
+
+

src/app/components/create-todo-form/create-todo-form.component.scss

@@ -0,0 +1,17 @@
+.form {
+    margin-left: 240px;
+    margin-top: 30px;
+}
+
+.create_input {
+    width: 100px;
+    margin-left: 240px;
+}
+
+.example-full-width {
+    width: 300px;
+}
+
+.button_create {
+    width: 300px;
+}

src/app/components/create-todo-form/create-todo-form.component.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+
+@Component({
+    selector: 'app-create-todo-form',
+    templateUrl: './create-todo-form.component.html',
+    styleUrl: './create-todo-form.component.scss',
+    standalone: true,
+    imports: [ReactiveFormsModule, MatFormFieldModule, MatButtonModule, MatIconModule, MatInputModule]
+})
+
+export class CreateTodoFormComponent {
+    @Output()
+    CreateTodo = new EventEmitter()
+
+
+    public form = new FormGroup ({
+        userId: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+        title: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+        completed: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    })
+
+
+    public submitForm(): void {
+        console.log(this.form.value)
+        this.CreateTodo.emit(this.form.value)
+        this.form.reset()
+    }
+}

src/app/components/create-user-dialog/create-user-dialog.component.html

@@ -0,0 +1,33 @@
+<h1 class="form">FORM USERS</h1>
+
+<div class="create_input">
+
+    <form class="form_users" action="" [formGroup]="form" (ngSubmit)="submitForm()">
+
+        <mat-form-field class="example-full-width">
+            <mat-label>Name</mat-label>
+            <input matInput placeholder="Введите имя" type="text" formControlName="name">
+        </mat-form-field>
+
+        <mat-form-field class="example-full-width">
+            <mat-label>Email</mat-label>
+            <input matInput placeholder="Введите email" type="text" formControlName="email">
+        </mat-form-field>
+
+        <mat-form-field class="example-full-width">
+            <mat-label>Website</mat-label>
+            <input matInput placeholder="Введите website" type="text" formControlName="website">
+        </mat-form-field>
+
+        <mat-form-field class="example-full-width">
+            <mat-label>Company Name</mat-label>
+            <input matInput placeholder="Введите название" type="text" formControlName="companyName">
+        </mat-form-field>
+
+        <button type="submit" class="button_create" matIconSuffix mat-raised-button [disabled]="form.invalid">Add User
+            <mat-icon>add</mat-icon>
+        </button>
+    </form>
+
+</div>
+

src/app/components/create-user-dialog/create-user-dialog.component.scss

@@ -0,0 +1,17 @@
+.form {
+    margin-left: 240px;
+    margin-top: 30px;
+}
+
+.create_input {
+    width: 100px;
+    margin-left: 240px;
+}
+
+.example-full-width {
+    width: 300px;
+}
+
+.button_create {
+    width: 300px;
+}

src/app/components/create-user-dialog/create-user-dialog.component.ts

@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+
+@Component({
+    selector: 'app-create-user-dialog',
+    templateUrl: './create-user-dialog.component.html',
+    styleUrl: './create-user-dialog.component.scss',
+    standalone: true,
+    imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule, MatIconModule, MatButtonModule],
+})
+
+export class CreateUserDialogComponent {
+
+    @Output()
+    CreateUser = new EventEmitter()
+
+
+    public form = new FormGroup ({
+        name: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+        email: new FormControl('', [Validators.required, Validators.email]),
+        website: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+        companyName: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    }) 
+
+
+    public submitForm(): void {
+        console.log(this.form.value)
+        this.CreateUser.emit(this.form.value)
+        this.form.reset()
+    }
+}
+

src/app/components/derictives/box.shadow.directive.ts

@@ -0,0 +1,24 @@
+import {Directive, HostBinding, HostListener} from "@angular/core";
+
+
+@Directive({
+    selector: '[shadow]',
+    standalone: true,
+})
+
+export class BoxShadowDirective {
+
+    @HostBinding('style.boxShadow')
+     boxShadow = '';
+
+     @HostListener('mouseenter')
+     enter() {
+        this.boxShadow = '0 8px 10px rgba(0, 0, 0, 0.5)';
+     }
+
+     @HostListener('mouseleave')
+     leave() {
+        this.boxShadow = ''
+     }
+
+}

src/app/components/derictives/red.directive.ts

@@ -0,0 +1,46 @@
+import { HostBinding, HostListener } from "@angular/core";
+import { Directive } from "@angular/core";
+
+// @Directive({
+//     selector: '[silver]',
+//     standalone: true,
+// })
+
+// export class SilverDirective {
+//     // constructor(private elementRef: ElementRef) {
+//     //   console.log('RedDirective работает!', this.elementRef.nativeElement);
+//     //   this.elementRef.nativeElement.style.backgroundColor = 'silver';
+//     // };
+//   }
+
+@Directive({
+    selector: '[red]',
+    standalone: true,
+})
+export class RedDirective {
+    color = 'defolt';
+    textTransform = 'lowercase';
+
+    @HostBinding('style.backgroundColor')
+    get backgroundColor() {
+        return this.color;
+    }
+
+    @HostBinding('style.textTransform')
+    get textTransformGetter() {
+        return this.textTransform;
+    }
+
+    @HostListener('mouseenter')
+    enter() {
+        this.color = 'red';
+        this.textTransform = 'uppercase';
+    }
+
+    @HostListener('mouseleave')
+    leave() {
+        this.color = 'white';
+        this.textTransform = 'lowercase';
+    }
+}
+

src/app/components/derictives/silver.footer.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, HostBinding, HostListener } from "@angular/core";
+
+
+@Directive({
+    selector: '[silver]',
+    standalone: true,
+})
+
+export class SilverFooterDirective {
+    color = '';
+    // textTransform = 'lowercase';
+
+    @HostBinding('style.backgroundColor') 
+     get backgroundColor() {
+       return this.color
+    }
+
+//     @HostBinding('style.backgroundColor') 
+//     get  textTransformFooter() {
+//       return this.textTransform
+//    }
+
+    @HostListener('mouseenter')
+    enter() {
+        this.color = '#4b565e';
+        // this.textTransform = 'uppercase';
+    }
+
+    @HostListener('mouseleave')
+    leave() {
+        this.color = '#F0BA4E';
+        // this.textTransform = 'lawercase';
+    }
+
+}