Ali-working-on-reactivity

angular.json

@@ -97,5 +97,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "6f77b44c-cf67-41c2-b202-ca1e3af7c75d"
   }
 }

src/app/app.component.scss

@@ -0,0 +1,185 @@
+
+
+.content-container_footer {
+    width: 1320px;
+    margin: 0 auto;
+    height: 373px;
+}
+
+.phone-number {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    color: #FFFFFF;
+    font-size: 16px;
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    height: 373px;
+    color: white;
+    background-color: #4B565E;
+
+    &-blok {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 119px;
+
+        &-contacts {
+
+            &-logo {
+                width: 59px;
+                height: 39px;
+                margin-bottom: 36px;
+                margin-top: 34px;
+            }
+
+            &-info {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                height: 40px;
+                gap: 56px;
+
+                &_phone {
+                    display: flex;
+                    align-items: start;
+
+                    &-inner {
+                        display: flex;
+                        flex-direction: column;
+                        margin-left: 15px;
+                        padding: 4px 0px 0px 0px;
+                        gap: 8px;
+                    }
+                }
+
+                &_mail {
+                    display: flex;
+                    align-items: start;
+
+                    &-inner {
+                      flex-direction: column;
+                      display: flex;
+                      padding: 4px 0px 0px 0px;
+                      gap: 8px;
+                      margin-left: 15px;
+                    }
+                }
+            }
+
+        }
+    }
+
+    &-email {
+        width: 534px;
+        height: 162px;
+        top: 34px;
+        left: 1086px;
+        gap: 32px;
+
+        &-title {
+            font-size: 18px;
+            text-align: left;
+            line-height: 22px;
+            margin-bottom: 0;
+            margin-top: 34px;
+        }
+
+        &-label {
+            font-size: 14px;
+            text-align: left;
+            line-height: 24px;
+            color: #FFFFFF99;
+            width: 534px;
+            margin-top: 12px;
+        }
+
+        &-wrapper {
+            width: 534px;
+            border-radius: 30px;
+            border: 1px solid #F0BA4E;
+            background-color: #4B565E;
+            padding: 0px 6px 0px 24px;
+
+            &-input {
+                background-color: #4B565E;
+                border: none;
+                width: 402px;
+                margin-left: 9px;
+
+                ::placeholder {
+                    color: #FFFFFF99;
+                    font-size: 12px;
+                }
+
+            }
+
+            &-submit {
+                width: 94px;
+                height: 36px;
+                border-radius: 30px;
+                background: rgba(240, 186, 78, 1);
+                color: white;
+                font-size: 10px;
+                font-weight: 700;
+                line-height: 12px;
+                text-align: center;
+                border: none;
+                margin: 6px;
+            }
+
+            &-icon {
+                width: 13px;
+                height: 11px;
+            }
+        }
+    }
+
+    &-nav {
+
+        &-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        &-socials {
+            height: 24px;
+            width: 24px;
+            margin-top: 36px;
+            display: flex;
+            gap: 22px;
+        }
+    }
+
+    &-inline-horizontal {
+        border-top: 1px solid #566169;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        margin-bottom: -87px;
+    }
+
+    &-inline-vertical {
+        border-left: 1px solid #566169;
+        height: 230px;
+        position: absolute;
+        left: 50%;
+    }
+}
+
+.text {
+  font-size: 16px;
+  font-weight: 500;
+  text-align: left;
+  color: #FFFFFF;
+}
+
+.title {
+    font-size: 12px;
+    font-weight: 400;
+    text-align: left;
+    color: #FFFFFF99;
+}

src/app/app.component.ts

@@ -1,13 +1,55 @@
+import { NgIf } from '@angular/common';
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from "./header/header.component";
+
+const aboutCompani = (text: string) => console.log(text);
+
+aboutCompani('О компании');
+
+const names = ['Ilnur', 'Farukh', 'Sveta', 'Dmitry']
+
+// names.forEach (
+//   (name)=> {
+//     console.log(name)
+//   }
+// )
+
+// const time = new Date().getTime();
+
+// console.log('time:', time)
+
+// if (time === 1729677473756) {
+//   console.log('time is correct')
+// } else {
+//   console.log('ERROR')
+// }
+
+const newPages = [5, 4, 3, 2, 1]
+
+
+const upperCaseNames = names.map (
+  (name) => {
+    console.log(name.toUpperCase());
+    return name.toUpperCase();
+  }
+)
+
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, NgIf, NgFor, HeaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
+
 export class AppComponent {
   title = 'mentoring-first-project';
+
+  isShowImg = true;
+
+  readonly newPages = newPages;
+
 }

src/app/app.config.ts

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

src/app/app.routes.ts

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
+import { UsersListComponent } from './users-list/users-list.component';
+import { HomepageComponent } from './homepage/homepage.component';
+import { TodosListComponent } from './todos-list/todos-list.component'
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {path: '', component: HomepageComponent},
+  {path: 'users', component: UsersListComponent},
+  {path: 'todos', component: TodosListComponent},
+];

src/app/header/header.component.html

@@ -0,0 +1,58 @@
+<div class="header">
+  <div class="content-container_header">
+      <div class="header-left">
+          <div class="header-logo">
+              <img src="/assets/logo.svg" alt="Логотип компании">
+          </div>
+          <nav class="header-nav">
+              <a class="header-nav-item" routerLink="/">{{headerItem1}}</a>
+              <a class="header-nav-item">{{headerItem2}}</a>
+              <a class="header-nav-item" *ngIf="isShowCatalog">{{headerItem3}}</a>
+              <a class="header-nav-item" routerLink="users">{{headerItem4}}</a>
+              <a class="header-nav-item" routerLink="todos">{{headerItem5}}</a>
+          </nav>
+      </div>
+      <button (click)="isShowCatalog = !isShowCatalog">Скрыть/Показать каталог</button>
+      <button (click)="changeMenuText()">Изменить текст</button>
+
+      <div class="header-right">
+          <div class="header-Phone">
+              <div>
+                  <img src="/assets/phone.svg" alt="телефон">
+              </div>
+              <a href="tel:+79650842929" class="number">+7 (965) 084 29 29</a>
+          </div>
+          <a class="favour">
+              <img src="/assets/favour.svg" alt="избранное">
+          </a>
+          <button class="basket">
+              <div>
+                  <img src="/assets/basket.svg" alt="корзина">
+              </div>
+              <span>Пусто </span>
+          </button>
+      </div>
+  </div>
+</div>
+
+<div class="menu">
+  <div class="content-container_header">
+      <div class="menu-left">
+          <div>
+              <img src="/assets/menu.svg" alt="знак меню">
+          </div>
+          <div class="menu-left-punkt" *ngFor="let item of menuItems">{{item}}</div>
+      </div>
+
+      <div class="menu-right">
+          <form class="menu-right-search">
+              <input class="search" type="search" placeholder="Поиск, например Круг зачистной">
+              <img src="/assets/search.svg" alt="знак поиска" style="width: 24px; height: 24px;">
+          </form>
+          <div class="menu-right-plece">
+              <img src="/assets/map.svg" alt="место">
+              <span>Москва</span>
+          </div>
+      </div>
+  </div>
+</div>