creating our work section

src/app/components/components.component.html

@@ -15,7 +15,8 @@ <h2 class="presentation-subtitle text-center">Think | Search | Build</h2>
         </div>
     </div>
     <div class="main">
-      <team-members></team-members>
-      <app-our-team></app-our-team>
+        <app-our-work></app-our-work>
+        <team-members></team-members>
+        <app-our-team></app-our-team>
     </div>
 </div>

src/app/components/components.component.ts

@@ -17,29 +17,29 @@ export class ComponentsComponent implements OnInit {
     focus;
     focus1;
     focus2;
-    date: {year: number, month: number};
+    date: { year: number, month: number };
     model: NgbDateStruct;
-    constructor( private renderer : Renderer2) {}
+    constructor(private renderer: Renderer2) { }
     isWeekend(date: NgbDateStruct) {
         const d = new Date(date.year, date.month - 1, date.day);
         return d.getDay() === 0 || d.getDay() === 6;
     }
 
-    isDisabled(date: NgbDateStruct, current: {month: number}) {
+    isDisabled(date: NgbDateStruct, current: { month: number }) {
         return date.month !== current.month;
     }
 
     ngOnInit() {
         let input_group_focus = document.getElementsByClassName('form-control');
         let input_group = document.getElementsByClassName('input-group');
         for (let i = 0; i < input_group.length; i++) {
-            input_group[i].children[0].addEventListener('focus', function (){
+            input_group[i].children[0].addEventListener('focus', function () {
                 input_group[i].classList.add('input-group-focus');
             });
-            input_group[i].children[0].addEventListener('blur', function (){
+            input_group[i].children[0].addEventListener('blur', function () {
                 input_group[i].classList.remove('input-group-focus');
             });
         }
     }
-
 }
+

src/app/components/components.module.ts

@@ -12,6 +12,8 @@ import { ComponentsComponent } from './components.component';
 import { NgbdModalComponent } from './modal/modal.component';
 import { NgbdModalContent } from './modal/modal.component';
 import { MemberCardComponent } from './member-card/member-card.component';
+import { OurWorkComponent } from './our-work/our-work.component';
+import { ProjectCardComponent } from './project-card/project-card.component';
 import { OurTeamComponent } from './our-team/our-team.component';
 
 @NgModule({
@@ -29,9 +31,11 @@ import { OurTeamComponent } from './our-team/our-team.component';
         NgbdModalComponent,
         NgbdModalContent,
         MemberCardComponent,
+        OurWorkComponent,
+        ProjectCardComponent,
         OurTeamComponent
     ],
     entryComponents: [NgbdModalContent],
-    exports:[ ComponentsComponent ]
+    exports: [ComponentsComponent]
 })
 export class ComponentsModule { }

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

@@ -0,0 +1,28 @@
+<div class="section">
+    <div class="container">
+        <h2>Our Work</h2>
+        <div class="work-section">
+            <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"><b>{{project.projectName}}</b>
+                            <i *ngIf="project.isWeb" class="fa fa-globe" aria-hidden="true"
+                                style="padding-left:10px;"></i> </h5>
+                        <p class="card-text" style="text-align: justify; font-size: 12px;">{{project.description}}</p>
+                        <button class="btn btn-default" (click)="showProjectCard({
+                                image:project.image,
+                                description: project.largeDescription,
+                                name: project.projectName,
+                                github: project.github|| null})">
+                            See more</button>
+                    </div>
+                </div>
+                <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>
+</div>

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

@@ -0,0 +1,28 @@
+.project {
+  margin: 2px 20px;
+  width: 18rem;
+
+  @media screen and (max-width: 995px) {
+    margin: 2px 12px;
+  }
+
+  @media screen and (max-width: 398px) {
+    margin: 2px 5px;
+    width: 250px;
+  }
+
+  @media screen and (max-width: 398px) {
+    margin: 2px 5px;
+    width: 220px;
+  }
+}
+
+.slider_button {
+  display: block;
+  margin-bottom: auto;
+  margin-top: auto;
+}
+
+.work-section {
+  margin-top: 5vh;
+}

src/app/components/our-work/our-work.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 { OurWorkComponent } from './our-work.component';
+
+describe('OurWorkComponent', () => {
+  let component: OurWorkComponent;
+  let fixture: ComponentFixture<OurWorkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OurWorkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OurWorkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,61 @@
+import { Component, OnInit, HostListener } from '@angular/core';
+import projects from '../../../assets/json/projects.json';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ProjectCardComponent } from '../project-card/project-card.component';
+
+
+@Component({
+  selector: 'app-our-work',
+  templateUrl: './our-work.component.html',
+  styleUrls: ['./our-work.component.scss']
+})
+export class OurWorkComponent implements OnInit {
+
+  private displayCount;
+  public listedProjects;
+  private clicker = 0;
+
+  constructor(private modalService: NgbModal) { }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.adjustScreen(event.target.innerWidth);
+  }
+
+  ngOnInit() {
+    this.adjustScreen(window.innerWidth);
+  }
+
+  showProjectCard(data) {
+    const card = new ProjectCardComponent(this.modalService);
+    card.open(data);
+  }
+
+  foward() {
+    if (this.clicker < projects.length - this.displayCount) {
+      this.clicker++;
+      this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
+    }
+  }
+
+  backward() {
+    if (this.clicker > 0) {
+      this.clicker--;
+      this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
+    }
+  }
+
+  adjustScreen(width) {
+    if (width <= 767) {
+      this.displayCount = 1;
+    } else if (width < 770) {
+      this.displayCount = 2;
+    }
+    else if (width < 1300) {
+      this.displayCount = 2;
+    } else {
+      this.displayCount = 3;
+    }
+    this.listedProjects = projects.slice(0, this.displayCount);
+  }
+}

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

@@ -0,0 +1,22 @@
+<div class="project-modal">
+  <div class="modal-header no-border-header">
+    <h5 class="modal-title text-center">&nbsp;</h5>
+  </div>
+  <div class="modal-body">
+    <h5 class="modal-title text-center">{{data.name}}</h5>
+    <img src="assets/img/work/{{data.image}}" class="img-rounded" style="height:60%;width:60%;">
+    <div class="project-description">{{data.description}}</div>
+    <div class="row justify-content-center social-media-links">
+      <div *ngIf="data.github" class="col-xs-4 social-link">
+        <a rel="tooltip" title="Github" data-placement="bottom" href="{{data.github}}" target="_blank">
+          <i class="fa fa-github-square"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer no-border-footer">
+    <div class="project-close mx-auto">
+      <button type="button" #closebutton class="btn btn btn-outline-primary btn-round" data-dismiss="modal" (click)="close()">Close</button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+.project-modal {
+  background-color: #ffffff;
+  border-radius: 5px;
+}
+
+.project-modal .close {
+  outline: none !important;
+}
+
+.modal-body {
+  text-align: center;
+}
+
+.modal-footer {
+  padding-bottom: 10px;
+}
+
+.modal-title {
+  font-weight: bold;
+}
+
+.project-description {
+  text-align: justify;
+  margin-top: 10px;
+}
+
+.modal-body .social-media-links {
+  margin-top: 10px;
+}
+
+.social-link {
+  padding: 1%;
+}
+
+.social-link .fa {
+  color: #000000;
+  font-size: large;
+}

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,35 @@
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { NgbModal, NgbActiveModal, } from '@ng-bootstrap/ng-bootstrap';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'app-project-card',
+  templateUrl: './project-card.component.html',
+  styleUrls: ['./project-card.component.scss']
+})
+
+@Component({
+  selector: 'project-card-component',
+  templateUrl: './project-card.component.html'
+})
+
+export class ProjectCardComponent implements OnInit {
+  public data;
+  private activeModal: NgbActiveModal;
+  constructor(private modalService: NgbModal) {
+
+  }
+
+  ngOnInit() { }
+
+
+  open(data) {
+    const modalRef = this.modalService.open(ProjectCardComponent);
+    modalRef.componentInstance.data = data;
+    modalRef.componentInstance.activeModal = modalRef;
+  }
+
+  close() {
+    this.activeModal.close();
+  }
+}

src/assets/json/projects.json

@@ -0,0 +1,43 @@
+[
+  {
+    "projectName": "Sertum",
+    "image": "sertum.jpg",
+    "largeDescription": "Sertum is a robot which can do both cleaning and serving on its own. It can be operated manually as well as automatically. In the automatic mode, Sertum can detect and avoid barriers and do the cleaning process on its own. For obstacle detection, an ultrasonic sensor is used. In restaurants, Sertum can be used to deliver the order to the relevant table number. The cleaning process is done using water and three main cleaners. A built in fan is also used. During the cleaning process, the water flow is controlled by a solenoid valve. In the serving process, the cook needs to place the ordered meal on Sertum's platform and provide the table number to be delivered to.",
+    "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",
+    "largeDescription": "codeJunction team proudly designed a WordPress website for cake-a-licious sweets shop in Moratuwa Sri Lanka. This website contains a gallery page, a contact us page, an Instagram and Facebook plugin has been embedded in order to see the latest posts on the website.",
+    "description": "The official website of cake-a-licious cake store.",
+    "isWeb": "true"
+  },
+  {
+    "projectName": "Ajith motors Entry System",
+    "image": "ajithMotors.jpg",
+    "largeDescription": "This is a Java application to manage Ajith Motors daily transactions, keep company records etc. There are primarily two interfaces for two main roles. One role is the admin and the other role is the staff. The cashier can use his/her account and according to the type of account (staff/admin) the correct interface will be displayed. Admins can view all the income, expenditure, during a time period which they put as a filter.",
+    "description": "A data entry managment system deployed in Ajith motors car sale."
+  },
+  {
+    "projectName": "Fhix 45 Website",
+    "image": "fhix.png",
+    "largeDescription": "codeJunction created a Wordpress website for Fhix 45 Gym at Kollupitiya Sri Lanka. This website consisted of a home page with sections, a blog page, a gallery page, join us popup card and a contact us form. Also, this website has an Instagram and Facebook plugins embedded to view the latest Instagram and Facebook posts.",
+    "description": "The official website of Fhix 45 gymnasium.",
+    "isWeb": "true"
+  },
+  {
+    "projectName": "codeJunction Website",
+    "image": "codeJuctionWebsite.png",
+    "description": "The official website of CodeJunction. (Open Source ❤️)",
+    "largeDescription": "This is the official website 0f codeJunction. An open-source Angular based project maintained by the codeJunction crew. We welcome everyone to contribute in this project. To get started please visit our Github repository.",
+    "github": "https://github.com/codeJunctionTeam/codeJunction-site",
+    "isWeb": "true"
+  },
+  {
+    "projectName": "Fire call",
+    "image": "firecall.jpg",
+    "description": "A sound wave classifying tool which analyse audio content. (Open Source ❤️)",
+    "largeDescription": "Fire call is an open-source project which is developed using python and flask framework. This project aims to classify sound waves through analysing audio content. We welcome everyone to contribute in this project. To get started please visit our Github repository.",
+    "github": "https://github.com/codeJunctionTeam/fire-call"
+  }
+]