changes in our work section

src/app/components/our-work/our-work.component.html

@@ -1,24 +1,20 @@
-
 <div class="section">
     <div class="container">
         <h2>Our Work</h2>
         <div class="work-section">
-            <div class="row justify-content-cente">
-                <button type="button" class="slider_button btn btn-danger btn-just-icon"><i class="	fa fa-angle-left"
-                        (click)="backward()"></i></button>
-                <div class="project card" *ngFor="let x of view">
-                    <img class="card-img-top" src="../../../assets/img/faces/{{x.image}}" alt="Card image cap">
+            <div class="row justify-content-center">
+                <button type="button" class="slider_button btn btn-danger btn-just-icon" (click)="backward()"><i
+                        class="	fa fa-angle-left"></i></button>
+                <div class="project card" *ngFor="let project of listedProjects">
+                    <img class="card-img-top" src="../../../assets/img/work/{{project.image}}" alt="Card image cap">
                     <div class="card-body">
-                        <h5 class="card-title">Sertum</h5>
-                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
-                            the
-                            card's
-                            content.</p>
+                        <h5 class="card-title"><b>{{project.projectName}}</b></h5>
+                        <p class="card-text" style="text-align: justify; font-size: 12px;">{{project.description}}</p>
                         <a href="#" class="btn btn-default">See more</a>
                     </div>
                 </div>
-                <button type="button" class="slider_button btn btn-danger btn-just-icon"><i class="fa fa-angle-right"
-                        (click)="foward()"></i></button>
+                <button type="button" class="slider_button btn btn-danger btn-just-icon" (click)="foward()"><i
+                        class="fa fa-angle-right"></i></button>
             </div>
         </div>
     </div>

src/app/components/our-work/our-work.component.scss

@@ -1,10 +1,14 @@
-.project{
+.project {
   margin: 2px 20px 2px;
   width: 18rem;
 }
 
-.slider_button{
+.slider_button {
   display: block;
   margin-top: auto;
   margin-bottom: auto;
-}
+}
+
+.work-section {
+  margin-top: 5vh;
+}

src/app/components/our-work/our-work.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, HostListener } from '@angular/core';
-import projects from '../../../assets/json/work.json';
+import projects from '../../../assets/json/projects.json';
 
 
 @Component({
@@ -10,7 +10,7 @@ import projects from '../../../assets/json/work.json';
 export class OurWorkComponent implements OnInit {
 
   private displayCount;
-  public view;
+  public listedProjects;
   private clicker = 0;
   @HostListener('window:resize', ['$event'])
   onResize(event) {
@@ -22,21 +22,24 @@ export class OurWorkComponent implements OnInit {
   }
 
   foward() {
+    console.log('clicked F');
     if (this.clicker < projects.length - this.displayCount) {
       this.clicker++;
-      this.view = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
+      this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
     }
+    console.log(this.clicker);
   }
 
   backward() {
+    console.log('clicked B');
     if (this.clicker > 0) {
       this.clicker--;
-      this.view = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
+      this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
     }
+    console.log(this.clicker);
   }
 
   adjustScreen(width) {
-    console.log(width)
     if (width < 750) {
       this.displayCount = 1;
     } else if (width < 800) {
@@ -49,6 +52,6 @@ export class OurWorkComponent implements OnInit {
     }else{
       this.displayCount = 4;
     }
-    this.view = projects.slice(0, this.displayCount);
+    this.listedProjects = projects.slice(0, this.displayCount);
   }
 }

src/app/components/project-card/project-card.component.html

@@ -0,0 +1,3 @@
+<p>
+  project-card works!
+</p>

src/app/components/project-card/project-card.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ProjectCardComponent } from './project-card.component';
+
+describe('ProjectCardComponent', () => {
+  let component: ProjectCardComponent;
+  let fixture: ComponentFixture<ProjectCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/project-card/project-card.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-project-card',
+  templateUrl: './project-card.component.html',
+  styleUrls: ['./project-card.component.scss']
+})
+export class ProjectCardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/json/projects.json

@@ -0,0 +1,32 @@
+[
+  {
+    "projectName": "Sertum",
+    "image": "sertum.jpg",
+    "description": "Sertum is a robot which can do both cleaning and serving on its own."
+  },
+  {
+    "projectName": "Cake-a-licious Website",
+    "image": "Cake-a-licious.png",
+    "description": "The official website of cake-a-licious cake store."
+  },
+  {
+    "projectName": "Ajith motors Entry System",
+    "image": "ajithMotors.jpg",
+    "description": "A data entry managment system deployed in Ajith motors car sale."
+  },
+  {
+    "projectName": "Fhix 45 Website",
+    "image": "fhix.png",
+    "description": "The official website of Fhix 45 gymnasium."
+  },
+  {
+    "projectName": "CodeJunction Website",
+    "image": "codeJuctionWebsite.png",
+    "description": "The official website of CodeJunction. (Open Source ❤️)"
+  },
+  {
+    "projectName": "Fire call",
+    "image": "firecall.jpg",
+    "description": "A sound wave classifying tool which analyse audio content. (Open Source ❤️)"
+  }
+]