Notflix App

README.md

@@ -1,29 +1,2 @@
-# MoviesApp
+# Notflix
 
-Angular Training Project Deployed in Firebase, check the following link [Movies-App](https://movie-imdb-site.web.app/) 
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.9.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "movies-app": {
+    "notflix": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -73,18 +73,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "movies-app:build:production"
+              "browserTarget": "notflix:build:production"
             },
             "development": {
-              "browserTarget": "movies-app:build:development"
+              "browserTarget": "notflix:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "movies-app:build"
+            "browserTarget": "notflix:build"
           }
         },
         "test": {
@@ -108,5 +108,5 @@
       }
     }
   },
-  "defaultProject": "movies-app"
+  "defaultProject": "notflix"
 }

karma.conf.js

@@ -25,7 +25,7 @@ module.exports = function (config) {
       suppressAll: true // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/movies-app'),
+      dir: require('path').join(__dirname, './coverage/notflix'),
       subdir: '.',
       reporters: [
         { type: 'html' },

src/app/app.component.spec.ts

@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'movies-app'`, () => {
+  it(`should have as title 'notflix'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('movies-app');
+    expect(app.title).toEqual('notflix');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('movies-app app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain('notflix app is running!');
   });
 });

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'movies-app';
+  title = 'notflix';
 }

src/app/components/slider/slider.component.html

@@ -5,7 +5,7 @@
         <img class="slide-bg-image" [src]="imagesSizes.large + item.backdrop_path" [alt]="item.title" />
       </div>
       <div class="slide-pane">
-        <h2 class="name">{{ item.title || item.name }}</h2>
+        <h2 class="name" style="color: red;">{{ item.title || item.name }}</h2>
         <div class="meta">
           <div class="info">
             <span class="rating">

src/app/pages/home/home.component.html

@@ -58,9 +58,9 @@ <h2 style="padding: 10px;">Popular Tv Shows</h2>
       >/10
     </div>
     <div class="item-image">
-      <img [src]="imagesSizes.medium + show.poster_path" alt="show" [title]="show.title"/>
+      <img [src]="imagesSizes.medium + show.poster_path" alt="show" [title]="show.name"/>
     </div>
-    <div class="item-title">{{ show.title }}</div>
+    <div class="item-title">{{ show.name }}</div>
   </a>
  </ng-template>
 

src/app/pages/show/show.component.scss

@@ -1,4 +1,4 @@
-@import '../../styles/colors';
+@import '../../../styles/colors';
 
 :host ::ng-deep {
   .p-tabview-nav {

src/app/shared/header/header.component.html

@@ -7,9 +7,9 @@
           </a>
         </ng-template>
         <ng-template pTemplate="item" let-item let-root="root">
-            <a pRipple class="flex align-items-center p-menuitem-link" [routerLink]="item.route">
+            <a pRipple class="flex align-items-center p-menuitem-link activated" [routerLink]="item.route">
                 <span [class]="item.icon" ></span>
-                <span class="ml-2">{{ item.label }}</span>        
+                <span class="ml-2 activated">{{ item.label }}</span>        
             </a>
         </ng-template>
         <ng-template pTemplate="end">

src/styles.scss

@@ -56,3 +56,7 @@ header{
   z-index: 1 !important;
   top: 0;
 }
+
+.activated {
+  color: red !important;
+}

src/styles/_colors.scss

@@ -1,5 +1,5 @@
 $bgColor: #141414;
-$bgColorLight: #212121;
+$bgColorLight: #111111;
 $white: #fff;
 $lightGray: #999;
 $primaryColor: #ffd54f;