four

diary/diary/.angular-cli.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "diary"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

diary/diary/.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

diary/diary/.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/dist-server
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

diary/diary/README.md

+# Diary
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.
+
+## 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. Use the `-prod` flag for a production build.
+
+## 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 [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

diary/diary/config/DB.js

+// DB.js
+
+module.exports = {
+    DB: 'mongodb://localhost:27017/diary' //set
+  };
\ No newline at end of file

diary/diary/e2e/app.e2e-spec.ts

+import { AppPage } from './app.po';
+
+describe('diary App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

diary/diary/e2e/app.po.ts

+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

diary/diary/e2e/tsconfig.e2e.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

diary/diary/expressRoutes/diaryRoutes.js

+// coinRoutes.js
+
+var express = require('express');
+var diaryRoutes = express.Router(); //set
+
+// Require Item model in our routes module
+var Diary = require('../models/Diary'); //set
+
+// Defined store route
+diaryRoutes.route('/add').post(function (req, res) { //set
+  var diary = new Diary(req.body); //set
+   diary.save() //set
+    .then(item => {
+    res.status(200).json({'diary': 'Diary added successfully'}); //set
+    })
+    .catch(err => {
+    res.status(400).send("unable to save to database"); 
+    });
+});
+
+// Defined get data(index or listing) route
+diaryRoutes.route('/').get(function (req, res) { //set
+   Diary.find(function (err, diarys){ //set
+    if(err){
+      console.log(err);
+    }
+    else {
+      res.json(diarys); //set
+    }
+  });
+});
+
+// Defined edit route
+diaryRoutes.route('/edit/:id').get(function (req, res) { //set
+  var id = req.params.id;
+  Diary.findById(id, function (err, diary){ //set
+      res.json(diary); //set
+  });
+});
+
+//  Defined update route
+diaryRoutes.route('/update/:id').post(function (req, res) { 
+  Diary.findById(req.params.id, function(err, diary) { 
+   if (!diary) //set
+     return next(new Error('Could not load Document'));
+   else { //set
+     diary.topic = req.body.topic;
+     diary.story = req.body.story;
+     diary.date = req.body.date;
+
+     diary.save().then(diary => { 
+         res.json('Update complete');
+     })
+     .catch(err => {
+           res.status(400).send("unable to update the database");
+     });
+   }
+ });
+});
+
+// Defined delete | remove | destroy route
+diaryRoutes.route('/delete/:id').get(function (req, res) { //set
+   Diary.findByIdAndRemove({_id: req.params.id}, function(err, diary){ //set
+        if(err) res.json(err);
+        else res.json('Successfully removed');
+    });
+});
+
+
+
+module.exports = diaryRoutes; //set
+

diary/diary/expressRoutes/jobRoutes.js

+// coinRoutes.js
+
+var express = require('express');
+var jobRoutes = express.Router(); //set
+
+// Require Item model in our routes module
+var Job = require('../models/Job'); //set
+
+// Defined store route
+jobRoutes.route('/add').post(function (req, res) { //set
+  var job = new Job(req.body); //set
+   job.save() //set
+    .then(item => {
+    res.status(200).json({'job': 'job added successfully'}); //set
+    })
+    .catch(err => {
+    res.status(400).send("unable to save to database"); 
+    });
+});
+
+// Defined get data(index or listing) route
+jobRoutes.route('/').get(function (req, res) { //set
+   Job.find(function (err, jobs){ //set
+    if(err){
+      console.log(err);
+    }
+    else {
+      res.json(jobs); //set
+    }
+  });
+});
+
+// Defined edit route
+jobRoutes.route('/edit/:id').get(function (req, res) { //set
+  var id = req.params.id;
+  Job.findById(id, function (err, job){ //set
+      res.json(job); //set
+  });
+});
+
+//  Defined update route
+jobRoutes.route('/update/:id').post(function (req, res) { 
+  Job.findById(req.params.id, function(err, job) { 
+   if (!job) //set
+     return next(new Error('Could not load Document'));
+   else { //set
+     job.topic = req.body.topic;
+     job.date = req.body.date;
+     job.story = req.body.story;
+     
+
+     job.save().then(job => { 
+         res.json('Update complete');
+     })
+     .catch(err => {
+           res.status(400).send("unable to update the database");
+     });
+   }
+ });
+});
+
+// Defined delete | remove | destroy route
+jobRoutes.route('/delete/:id').get(function (req, res) { //set
+   Job.findByIdAndRemove({_id: req.params.id}, function(err, job){ //set
+        if(err) res.json(err);
+        else res.json('Successfully removed');
+    });
+});
+
+module.exports = jobRoutes; //set

diary/diary/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

diary/diary/models/Diary.js

+var mongoose = require('mongoose');
+var Schema = mongoose.Schema;
+
+// Define collection and schema for Items
+var Diary = new Schema({
+
+  topic: {
+    type: String
+  },
+  story: {
+    type: String
+  },
+  date: {
+    type: String
+  }
+},{
+    collection: 'diarys'
+});
+
+module.exports = mongoose.model('Diary', Diary);
+
+//set all
\ No newline at end of file

diary/diary/models/Job.js

+var mongoose = require('mongoose');
+var Schema = mongoose.Schema;
+
+var Job = new Schema({
+
+    topic: {
+    type: String
+  },
+    date: {
+    type: String
+  },
+    story: {
+    type: String
+  }
+},{
+    collection: 'jobs'
+});
+
+module.exports = mongoose.model('Job', Job);

diary/diary/package.json

+{
+  "name": "diary",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.2.0",
+    "@angular/common": "^5.2.0",
+    "@angular/compiler": "^5.2.0",
+    "@angular/core": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "@angular/http": "^5.2.0",
+    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/router": "^5.2.0",
+    "body-parser": "^1.18.2",
+    "core-js": "^2.4.1",
+    "cors": "^2.8.4",
+    "express": "^4.16.3",
+    "mongoose": "^5.0.16",
+    "nodemon": "^1.17.3",
+    "rxjs": "^5.5.6",
+    "zone.js": "^0.8.19"
+  },
+  "devDependencies": {
+    "@angular/cli": "~1.7.4",
+    "@angular/compiler-cli": "^5.2.0",
+    "@angular/language-service": "^5.2.0",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~4.1.0",
+    "tslint": "~5.9.1",
+    "typescript": "~2.5.3"
+  }
+}

diary/diary/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

diary/diary/server.js

+// server.js
+
+const express = require('express'),
+      path = require('path'),
+      bodyParser = require('body-parser'),
+      cors = require('cors'),
+      mongoose = require('mongoose'),
+      config = require('./config/DB'),
+      jobRoutes = require('./expressRoutes/jobRoutes'), //set
+      diaryRoutes = require('./expressRoutes/diaryRoutes'); //set
+
+
+mongoose.Promise = global.Promise;
+mongoose.connect(config .DB).then(
+    () => {console.log('Database is connected') },
+    err => { console.log('Can not connect to the database'+ err)}
+  );
+
+const app = express();
+app.use(bodyParser.json());
+app.use(cors());
+const port = process.env.PORT || 4000;
+
+app.use('/jobs', jobRoutes);
+app.use('/diarys', diaryRoutes); //set
+
+
+const server = app.listen(port, function(){
+  console.log('Listening on port ' + port);
+});
\ No newline at end of file

diary/diary/src/app/Diary.ts

+export interface Diary {
+    topic: string;
+    story: string;
+    date: string;
+  }

diary/diary/src/app/Job.ts

+export interface Job {
+    topic: string;
+    date: string;
+    story: string;
+}

diary/diary/src/app/about/about.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/about/about.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

diary/diary/src/app/add/add.component.html

+<div class="container" style="margin-top: 3%">
+<div class="panel panel-primary">
+    
+    <div class="panel-body">
+      <form [formGroup]="angForm" novalidate>
+  
+  
+  
+        <div class="form-group">
+          <div class="alert alert-danger" role="alert">
+          <label class="col-md-4">Topic</label>
+          <input type="text" class="form-control" formControlName="topic" #topic maxlength="50" size="50" />
+        </div>
+</div>
+
+        <div *ngIf="angForm.controls['topic'].invalid && (angForm.controls['topic'].dirty || angForm.controls['topic'].touched)"
+          class="alert alert-danger">
+          <div *ngIf="angForm.controls['topic'].errors.required">
+            Topic is required.
+          </div>
+        </div>
+    
+        <div class="form-group">
+          <div class="alert alert-danger" role="alert">
+          <label class="col-md-4">Story</label>
+          <textarea cols="40" rows="10" class="form-control" formControlName="story" #story ></textarea>
+        </div>
+</div>
+
+        <div *ngIf="angForm.controls['story'].invalid && (angForm.controls['story'].dirty || angForm.controls['story'].touched)"
+          class="alert alert-danger">
+          <div *ngIf="angForm.controls['story'].errors.required">
+            Story is required.
+          </div>
+        </div>
+  
+  
+        <div class="form-group">
+          <div class="alert alert-danger" role="alert">
+          <label class="col-md-4">Date</label>
+          <input type="date" class="form-control" formControlName="date" #date />
+        </div>
+</div>
+
+        <div *ngIf="angForm.controls['date'].invalid && (angForm.controls['date'].dirty || angForm.controls['date'].touched)" class="alert alert-danger">
+          <div *ngIf="angForm.controls['date'].errors.required">
+            Date is required.
+          </div>
+        </div>
+  
+        <div class="form-group">
+          <button (click)="addDiary(topic.value, story.value, date.value)" [disabled]="angForm.pristine || angForm.invalid"
+            class="btn btn-success">Conferm</button>
+            <a [routerLink]="['/home']" class="btn btn-danger" style="float: right;;">BACK</a>
+          
+        </div>
+  
+  
+      </form>
+    </div>
+  </div>
+</div>
\ No newline at end of file

diary/diary/src/app/add/add.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddComponent } from './add.component';
+
+describe('AddComponent', () => {
+  let component: AddComponent;
+  let fixture: ComponentFixture<AddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/add/add.component.ts

+import { Router } from '@angular/router';
+import { DiaryService } from './../diary.service';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { Diary } from '../Diary';
+import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrls: ['./add.component.css']
+})
+export class AddComponent implements OnInit {
+  diarys: any;
+  title = 'Add';
+  angForm: FormGroup;
+  constructor(private diaryservice: DiaryService, private fb: FormBuilder, private router: Router, private http: HttpClient) {
+    this.createForm();
+   }
+
+   getDiarys() {
+    this.diaryservice.getDiarys().subscribe(res => {
+      this.diarys = res;
+
+    });
+  }
+
+  createForm() {
+    this.angForm = this.fb.group({
+      topic: ['', Validators.required ],
+      story: ['', Validators.required ],
+      date: ['', Validators.required ]
+   });
+  }
+
+  addDiary(topic, story, date) {
+    if(confirm("ยืนยันการเพิ่มข้อมูล : "+topic)){
+      this.diaryservice.addDiary(topic, story, date);
+      this.router.navigate(['home']);
+  }
+}
+
+  ngOnInit() {
+  }
+
+}

diary/diary/src/app/app.component.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
+	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+	<title>My Dairy</title>
+	
+</head>
+
+<body>
+	<nav class="navbar navbar-expand-lg navbar-light" style="height:75px;background-color: #000033">
+		<a class="navbar-brand" href="#"><img src="https://openclipart.org/download/58213/diary.svg" width="120px" alt="Diary"></a>
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
+		 aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarNav">
+			<!-- <ul class="navbar-nav">
+				<li class="nav-item">
+					<a class="nav-link" routerLink="home" style="font-size:2vw;">
+						<i class="fa fa-home"></i>
+					</a>
+				</li>
+			</ul> -->
+			<div class="col-sm-2">
+			</div>
+
+			<div class="col-sm-6">
+				<input ng-model="searchText" class="form-control" placeholder="Search" >
+			</div>
+			<i class="fa fa-search" style="color:white"></i>
+		</div>
+	</nav>
+
+	<div style="background-color: white">
+		<router-outlet>
+		
+		</router-outlet>
+	</div>
+	
+	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
+</body>
+
+</html>
\ No newline at end of file

diary/diary/src/app/app.component.spec.ts

+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});

diary/diary/src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}
+
+
+

diary/diary/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { appRoutes } from './routerConfig';
+import { HttpClientModule } from '@angular/common/http';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { JobService } from './job.service';
+import { DiaryService } from './diary.service';
+
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { EditComponent } from './edit/edit.component';
+import { AboutComponent } from './about/about.component';
+import { ReadComponent } from './read/read.component';
+import { AddComponent } from './add/add.component';
+import { LoginComponent } from './login/login.component';
+import { CalenderComponent} from './calender/calender.component';
+import { StartComponent } from './start/start.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    EditComponent,
+    AboutComponent,
+    ReadComponent,
+    AddComponent,
+    LoginComponent,
+    CalenderComponent,
+    StartComponent
+
+  ],
+  imports: [
+    BrowserModule, RouterModule.forRoot(appRoutes), HttpClientModule, ReactiveFormsModule
+  ],
+  providers: [DiaryService, JobService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

diary/diary/src/app/calender/calender.component.html

+<div class="container" style="margin-top: 4%">
+<div>
+    <button type="button" class="btn btn-outline-info" style="width: 120px" data-toggle="modal" data-target="#work">Add</button>
+</div>
+<br>
+<!-- <div class="dropdown">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Add Activity
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+      <button class="dropdown-item" type="button">Job</button>
+      <button class="dropdown-item" type="button">Working</button>
+      <button class="dropdown-item" type="button">Success</button>
+    </div>
+  </div>
+<br> -->
+<div class="row text-center">
+    <div class="col-4">
+        <table class="table ">
+            <thead>
+                <tr class="bg-primary text-white">
+                    <th scope="col">Job</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <br>
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Card title</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+                            <div class="btn-group" role="group" aria-label="Basic example">
+                                <button type="button" class="btn btn-info">
+                                    <i class="fas fa-book" data-toggle="modal" data-target="#work"></i>
+                                </button>
+                            </div>
+                            <button type="button" class="btn btn-success">
+                                <i class="fas fa-arrow-circle-right"></i>
+                            </button>
+                            <a>
+                                <i class="fas fa-trash-alt fa-2x" style="float: right;"></i>
+                            </a>
+                        </div>
+                    </div>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+    <div class="col-4">
+        <table class="table">
+            <thead>
+                <tr class="bg-warning text-white" style="width: 100%">
+                    <th scope="col">Working</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <br>
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Card title</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+                            <div class="btn-group" role="group" aria-label="Basic example">
+                                <button type="button" class="btn btn-info">
+                                    <i class="fas fa-book" data-toggle="modal" data-target="#job"></i>
+                                </button>
+                            </div>
+                            <button type="button" class="btn btn-success">
+                                <i class="fas fa-arrow-circle-right"></i>
+                            </button>
+                            <a>
+                                <i class="fas fa-trash-alt fa-2x" style="float: right;"></i>
+                            </a>
+                        </div>
+                    </div>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+    <div class="col-4">
+        <table class="table">
+            <thead>
+                <tr class="bg-success text-white" style="width: 100%">
+                    <th scope="col">Success</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <br>
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Card title</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+                            <div class="btn-group" role="group" aria-label="Basic example">
+                                <button type="button" class="btn btn-info">
+                                    <i class="fas fa-book" data-toggle="modal" data-target="#success"></i>
+                                </button>
+                            </div>
+                            <button type="button" class="btn btn-success">
+                                <i class="fas fa-arrow-circle-right"></i>
+                            </button>
+                            <a>
+                                <i class="fas fa-trash-alt fa-2x" style="float: right;"></i>
+                            </a>
+                        </div>
+                    </div>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="work" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <input type="text" class="form-control" placeholder="Toppic" value="{{toppic}}">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            
+                <textarea class="form-control" rows="50"></textarea>
+            
+
+
+
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="job" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Toppic Job</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                ...
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Toppic Success</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                ...
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
\ No newline at end of file

diary/diary/src/app/calender/calender.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CalenderComponent } from './calender.component';
+
+describe('CalenderComponent', () => {
+  let component: CalenderComponent;
+  let fixture: ComponentFixture<CalenderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CalenderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CalenderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/calender/calender.component.ts

+// import { JobService } from './../job.service';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+// import { Job } from '../Job';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'app-calender',
+  templateUrl: './calender.component.html',
+  styleUrls: ['./calender.component.css']
+})
+export class CalenderComponent implements OnInit {
+  jobs: any;
+
+  // constructor(private http: HttpClient, private service: JobService) { }
+
+  Text = '';
+
+  ngOnInit() {
+    // this.getJobs();
+   }
+  // getJobs() {
+  //   this.service.getJob().subscribe(res => {
+  //     this.jobs = res;
+  //   });
+  // }
+
+  // deleteJob(id) {
+  //   this.service.deleteJob(id).subscribe(res => {
+  //     console.log('Deleted');
+  //     this.getJobs();
+
+  //   });
+  // }
+
+}

diary/diary/src/app/diary.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { DiaryService } from './diary.service';
+
+describe('DiaryService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DiaryService]
+    });
+  });
+
+  it('should be created', inject([DiaryService], (service: DiaryService) => {
+    expect(service).toBeTruthy();
+  }));
+});

diary/diary/src/app/diary.service.ts

+import { Injectable } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+@Injectable()
+export class DiaryService {
+
+  result: any;
+  constructor(private http: HttpClient) { }
+
+  addDiary(topic, story, date) {
+    const uri = 'http://localhost:4000/diarys/add';
+    const obj = {
+
+      topic: topic,
+      story: story,
+      date: date
+    };
+    this
+      .http
+      .post(uri, obj)
+      .subscribe(res =>
+        console.log('Done'));
+  }
+  getDiarys() {
+    const uri = 'http://localhost:4000/diarys';
+    return this
+      .http
+      .get(uri)
+      .map(res => {
+        return res;
+      });
+  }
+
+
+
+
+  editDiarys(id) {
+    const uri = 'http://localhost:4000/diarys/edit/' + id;
+    return this
+      .http
+      .get(uri)
+      .map(res => {
+        return res;
+      });
+  }
+
+  updateDiary(topic, story, date, id2) {
+    const uri = 'http://localhost:4000/diarys/update/' + id2;
+
+    const obj = {
+      topic: topic,
+      story: story,
+      date: date
+    };
+    this
+      .http
+      .post(uri, obj)
+      .subscribe(res => console.log('Done'));
+  }
+
+  deleteDiary(id) {
+    const uri = 'http://localhost:4000/diarys/delete/' + id;
+
+    return this
+      .http
+      .get(uri)
+      .map(res => {
+        return res;
+      });
+  }
+}
+
+

diary/diary/src/app/edit/edit.component.html

+<div class="panel panel-primary">
+    <div class="panel-heading">
+      {{ title }}
+    </div>
+    <div class="panel-body">
+      <form [formGroup]="angForm" novalidate>
+  
+        <div class="form-group">
+          <div class="alert alert-danger" role="alert">
+            <label class="col-md-4">Topic</label>
+            <input type="text" class="form-control" formControlName="topic" #topic [(ngModel)] = "diary.topic" maxlength="50" size="50" />
+          </div>
+        </div>
+          <div *ngIf="angForm.controls['topic'].invalid && (angForm.controls['topic'].dirty || angForm.controls['topic'].touched)" class="alert alert-danger">
+            <div *ngIf="angForm.controls['topic'].errors.required">
+                topic is required.
+            </div>
+          </div>
+  
+
+
+          <div class="form-group">
+            <div class="alert alert-danger" role="alert">
+              <label class="col-md-4">Story</label>
+              <textarea cols="40" rows="10" class="form-control" formControlName="story" #story [(ngModel)] = "diary.story" ></textarea>
+            </div>
+            </div>
+
+            <div *ngIf="angForm.controls['story'].invalid && (angForm.controls['story'].dirty || angForm.controls['story'].touched)" class="alert alert-danger">
+              <div *ngIf="angForm.controls['story'].errors.required">
+                  story is required.
+              </div>
+            </div>
+
+
+
+
+  
+            <div class="form-group">
+              <div class="alert alert-danger" role="alert">
+                <label class="col-md-4">Date</label>
+                <input type="date" class="form-control" formControlName="date" #date [(ngModel)] = "diary.date" />
+              </div>
+</div>
+
+              <div *ngIf="angForm.controls['date'].invalid && (angForm.controls['date'].dirty || angForm.controls['date'].touched)" class="alert alert-danger">
+                <div *ngIf="angForm.controls['date'].errors.required">
+                    date is required.
+                </div>
+              </div>
+  
+          <div class="form-group">
+            <button (click)="updateDiary(topic.value, story.value, date.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Update</button>
+          </div>
+      </form>
+
+      
+    </div>
+  </div>
+  
+  
\ No newline at end of file

diary/diary/src/app/edit/edit.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditComponent } from './edit.component';
+
+describe('EditComponent', () => {
+  let component: EditComponent;
+  let fixture: ComponentFixture<EditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/edit/edit.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DiaryService } from './../diary.service';
+import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
+
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.css']
+})
+export class EditComponent implements OnInit {
+
+  diary: any;
+  angForm: FormGroup;
+  title = 'Edit Diary';
+  constructor(private route: ActivatedRoute, private router: Router, private service: DiaryService, private fb: FormBuilder) {
+    this.createForm();
+   }
+
+  createForm() {
+    this.angForm = this.fb.group({
+      topic: ['', Validators.required ],
+      story: ['', Validators.required ],
+      date: ['', Validators.required]
+
+   });
+  }
+
+  updateDiary(topic, story, date) {
+    this.route.params.subscribe(params => {
+    this.service.updateDiary(topic, story, date, params['id']);
+    this.router.navigate(['home']);
+  });
+}
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.diary = this.service.editDiarys(params['id']).subscribe(res => {
+        this.diary = res;
+      });
+    });
+  }
+
+}

diary/diary/src/app/home/home.component.html

+
+<br>
+<div class="container" style="margin-top: 3%;" >
+<ul class="list-unstyled">
+    <li class="media">
+        <div class="media-body">
+
+            <div class="container text-right">
+                <button type="button" class="btn btn-outline-success" [routerLink]="['/calender']" style="float: left;">Calender</button>
+                <input type="text" placeholder="Search" id="search">
+                <button type="button" class="btn btn-primary" (click)="search()">Search</button>
+                <button type="button" class="btn btn-outline-success" [routerLink]="['/add']">ADD</button>
+                <button type="button" class="btn btn-outline-warning" (click)="getDiarys()">REFRESH</button>
+                
+            </div>
+            <br>
+            <table class="table">
+                <thead>
+                    <tr style="background-color: #8892ee">
+                        <th scope="col-3">Number</th>
+                        <th scope="col-3">Topic</th>
+                        <th scope="col-3">Date</th>
+                        <th scope="col-3">Function</th>
+
+                    </tr>
+                 <tbody>
+                    <tr *ngFor="let diary of diarys; let i = index">
+                        <td scope="row">{{ i+1 }}</td>
+                        <td>{{ diary.topic }}</td>
+                        <td>{{ diary.date }}</td>
+                        <td>
+                            <a [routerLink]="['/read', diary._id]" class="btn btn-outline-primary" >Read</a>
+                            <a [routerLink]="['/edit', diary._id]" class="btn btn-outline-warning">Edit</a>
+                            <button (click)="deleteDiary(diary._id,diary.topic)" class="btn btn-outline-danger">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+        </div>
+    </li>
+</ul>
+</div>
\ No newline at end of file

diary/diary/src/app/home/home.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/home/home.component.ts

+import { DiaryService } from './../diary.service';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { Diary } from '../Diary';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+  diarys: any;
+
+  constructor(private http: HttpClient, private service: DiaryService) {}
+
+  ngOnInit() {
+    this.getDiarys();
+  }
+
+  getDiarys() {
+    this.service.getDiarys().subscribe(res => {
+      this.diarys = res;
+    });
+  }
+
+  deleteDiary(id,topic) {
+    if(confirm("ยืนยันการลบข้อมูล : "+topic)){
+    this.service.deleteDiary(id).subscribe(res => {
+      console.log('Deleted');
+      this.getDiarys();
+
+    });
+  }
+  }
+
+
+}

diary/diary/src/app/job.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { JobService } from './job.service';
+
+describe('JobService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [JobService]
+    });
+  });
+
+  it('should be created', inject([JobService], (service: JobService) => {
+    expect(service).toBeTruthy();
+  }));
+});

diary/diary/src/app/job.service.ts

+import { Injectable } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class JobService {
+
+  result: any;
+  constructor(private http: HttpClient) { }
+
+  addJob(topic, date, story) {
+    const uri = 'http://localhost:4000/jobs/add';
+    const obj = {
+
+      topic: topic,
+      date: date,
+      story: story
+    };
+    this
+      .http
+      .post(uri, obj)
+      .subscribe(res =>
+        console.log('Done'));
+  }
+
+  getJob() {
+    const uri = 'http://localhost:4000/jobs';
+    return this
+      .http
+      .get(uri)
+      .map(res => {
+        return res;
+      });
+  }
+
+  ediJob(id) {
+    const uri = 'http://localhost:4000/jobs/edi' + id;
+    return this
+      .http
+      .get(uri)
+      .map(res => {
+        return res;
+      });
+  }
+
+  updateJob(topic, story, date, id2) {
+    const uri = 'http://locahost:4000/jobs/update/' + id2;
+
+    const obj = {
+      topic: topic,
+      date: date,
+      story: story
+    };
+    this
+      .http
+      .post(uri, obj)
+      .subscribe(res => console.log('Done'));
+  }
+
+  deleteJob(id) {
+    const uri = 'http://localhost:4000/jobs/delete/' + id;
+
+    return this
+      .http
+      .get(uri)
+      .map(res => {
+        return res;
+      });
+  }
+}

diary/diary/src/app/login/login.component.html

+<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+    <li class="nav-item">
+      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" 
+      href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true" (click)="Check()">Home</a>
+
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" 
+      href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
+
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" 
+      href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
+
+    </li>
+  </ul>
+  <div class="tab-content" id="pills-tabContent">
+    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">a</div>
+    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">b</div>
+    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">c</div>
+  </div>
+
+
+
+<!-- <br>
+<hr>
+<br>
+
+
+<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link " id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home">Home</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile">Profile</a>
+  </li>
+</ul>
+<div class="tab-content" id="pills-tabContent">
+  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
+
+    <div class="container">
+      <div class="form-group col-5">
+        <h1>Login</h1>
+        <h2>Name</h2>
+        <input type="text" class="form-control" placeholder="Your Name">
+      </div>
+      <div class="form-group col-5">
+        <h2>Password</h2>
+        <input type="password" class="form-control" placeholder="Password">
+      </div>
+      <div class="form-group form-check">
+      </div>
+      <button type="submit" class="btn btn-primary">Login</button>
+    </div>
+
+
+  </div>
+  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+
+    <div class="container">
+      <div class="form-group col-5">
+        <h1>Register</h1>
+        <h2>Name</h2>
+        <input class="form-control" id="exampleInputEmail1" placeholder="Your Name">
+      </div>
+      <div class="form-group col-5">
+        <label for="exampleInputPassword1">Password</label>
+        <input type="password" class="form-control" placeholder="Password">
+      </div>
+      <div class="form-group form-check">
+      </div>
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </div>
+
+  </div> -->
+
+
+

diary/diary/src/app/login/login.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/login/login.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

diary/diary/src/app/read/read.component.html

+<!-- <div class="panel panel-primary">
+  <div class="panel-heading">
+    {{ title }}
+  </div>
+  <div class="panel-body">
+    <form [formGroup]="angForm" novalidate>
+
+      <div class="form-group">
+        <div class="alert alert-danger" role="alert">
+          <label class="col-md-4">Topic</label>
+          <input type="text" readonly class="form-control" formControlName="topic" #topic [(ngModel)]="diary.topic" />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="alert alert-success" role="alert">
+          <label class="col-md-4">Story</label>
+          <textarea cols="40" rows="10" readonly class="form-control" formControlName="story" #story [(ngModel)]="diary.story"></textarea>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="alert alert-warning" role="alert">
+          <label class="col-md-4">Date</label>
+          <input type="date" class="form-control" readonly formControlName="date" #date [(ngModel)]="diary.date" />
+        </div>
+      </div>
+</form> -->
+
+
+<br>
+<br>
+
+  <div class="card">
+    <div class="card-header">
+     <h1 class="text-center"> {{diary.topic}}</h1>
+    </div>
+    <div class="card-body">
+      <h5 class="card-title text-right">{{diary.date}}</h5>
+      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+      <a [routerLink]="['/home']" class="btn btn-primary">BACK</a>
+    </div>
+</div>
+
+
+<!-- <!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>My Dairy</title>
+</head>
+
+<body>
+  <br>
+  <form>
+    <div class="form-group row">
+      <div class="alert alert-success" role="alert">
+        A simple success alert—check it out!
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="alert alert-success" role="alert">
+          AGILE
+          Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams. Agile methods or Agile processes generally promote a disciplined project management process that encourages frequent inspection and adaptation, a leadership philosophy that encourages teamwork, self-organization and accountability, a set of engineering best practices intended to allow for rapid delivery of high-quality software, and a business approach that aligns development with customer needs and company goals. Agile development refers to any development process that is aligned with the concepts of the Agile Manifesto. The Manifesto was developed by a group fourteen leading figures in the software industry, and reflects their experience of what approaches do and do not work for software development. Read more about the Agile Manifesto.
+          SCRUM
+          Scrum is a subset of Agile. It is a lightweight process framework for agile development, and the most widely-used one.
+          A “process framework” is a particular set of practices that must be followed in order for a process to be consistent with the framework. (For example, the Scrum process framework requires the use of development cycles called Sprints, the XP framework requires pair programming, and so forth.)
+          “Lightweight” means that the overhead of the process is kept as small as possible, to maximize the amount of productive time available for getting useful work done.
+          A Scrum process is distinguished from other agile processes by specific concepts and practices, divided into the three categories of Roles, Artifacts, and Time Boxes. These and other terms used in Scrum are defined below. Scrum is most often used to manage complex software and product development, using iterative and incremental practices. Scrum significantly increases productivity and reduces time to benefits relative to classic “waterfall” processes. Scrum processes enable organizations to adjust smoothly to rapidly-changing requirements, and produce a product that meets evolving business goals. An agile Scrum process benefits the organization by helping it to
+          Increase the quality of the deliverables
+          Cope better with change (and expect the changes)
+          Provide better estimates while spending less time creating them
+          Be more in control of the project schedule and state
+      </div>
+    </div>
+    <button class="btn btn-primary" routerLink="../home">Black</button>
+  </form>
+
+</body>
+
+</html> -->
\ No newline at end of file

diary/diary/src/app/read/read.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReadComponent } from './read.component';
+
+describe('ReadComponent', () => {
+  let component: ReadComponent;
+  let fixture: ComponentFixture<ReadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/read/read.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DiaryService } from './../diary.service';
+import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-read',
+  templateUrl: './read.component.html',
+  styleUrls: ['./read.component.css']
+})
+export class ReadComponent implements OnInit {
+
+  diary: any;
+  angForm: FormGroup;
+  title = 'Edit Diary';
+  constructor(private route: ActivatedRoute, private router: Router, private service: DiaryService, private fb: FormBuilder) {
+    this.createForm();
+   }
+   createForm() {
+    this.angForm = this.fb.group({
+      topic: ['', Validators.required ],
+      story: ['', Validators.required ],
+      date: ['', Validators.required ]
+   });
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.diary = this.service.editDiarys(params['id']).subscribe(res => {
+        this.diary = res;
+      });
+    });
+  }
+}

diary/diary/src/app/routerConfig.ts

+import { Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { EditComponent } from './edit/edit.component';
+import { AboutComponent } from './about/about.component';
+import { ReadComponent } from './read/read.component';
+import { AddComponent } from './add/add.component';
+import { StartComponent } from './start/start.component';
+import { CalenderComponent } from './calender/calender.component';
+import { Command } from 'selenium-webdriver';
+import { Component } from '@angular/core';
+
+export const appRoutes: Routes = [
+  {
+    path: 'home',
+    component: HomeComponent
+  },
+  {
+    path: 'edit/:id',
+    component: EditComponent
+  },
+  {
+    path: 'about',
+    component: AboutComponent
+  },
+  {
+    path: 'read/:id',
+    component: ReadComponent
+  },
+  {
+    path: 'add',
+    component: AddComponent
+  },
+  {
+    path: '',
+    component: StartComponent
+  },
+  {
+    path: 'calender',
+    component: CalenderComponent
+  },
+  {
+    path: 'calender',
+    component: CalenderComponent
+  }
+
+];

diary/diary/src/app/start/start.component.css

+body, html {
+    height: 100%;
+    margin: 0%;
+}
+.intro {
+    width: 100%;
+    background: url('https://images.unsplash.com/photo-1497864149936-d3163f0c0f4b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=362d7bfa3bb12d109ccec4ef185281cf&auto=format&fit=crop&w=1949&q=80') no-repeat;
+    height: 100%; 
+    margin-top: 0%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding: 25px;
+    
+}
+div.head {
+    text-align: center;
+    color: white;
+    position: relative;
+    margin-top: 0%;
+    margin-bottom: 20%;
+    margin-left: 20%;
+    
+}
+div.head h1 {
+    margin-top: 0%;
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+    font-family: 'Sriracha', cursive;
+    font-size: 50px;
+}
+div.head p {
+    font-family: 'Sriracha', cursive;
+}
+
+.bttn-default {
+  color: #fff;
+}
+.bttn-primary,
+.bttn,
+.bttn-lg,
+.bttn-md,
+.bttn-sm,
+.bttn-xs {
+  color: #1d89ff;
+}
+.bttn-warning {
+  color: #feab3a;
+}
+.bttn-danger {
+  color: #ff5964;
+}
+.bttn-success {
+  color: #28b78d;
+}
+.bttn-royal {
+  color: #bd2df5;
+}
+.bttn,
+.bttn-lg,
+.bttn-md,
+.bttn-sm,
+.bttn-xs {
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  border-color: transparent;
+  background: transparent;
+  font-weight: 400;
+  cursor: pointer;
+  position: relative;
+}
+.bttn-lg {
+  padding: 8px 15px;
+  font-size: 24px;
+  font-family: inherit;
+}
+.bttn-md {
+  font-size: 20px;
+  font-family: inherit;
+  padding: 5px 12px;
+}
+.bttn-sm {
+  padding: 4px 10px;
+  font-size: 16px;
+  font-family: inherit;
+}
+.bttn-xs {
+  padding: 3px 8px;
+  font-size: 12px;
+  font-family: inherit;
+}
+.bttn-stretch {
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  border-color: transparent;
+  background: transparent;
+  font-weight: 400;
+  cursor: pointer;
+  position: relative;
+  font-size: 20px;
+  font-family: inherit;
+  padding: 5px 12px;
+  overflow: hidden;
+  border-width: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #fff;
+  letter-spacing: 0;
+  -webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
+  transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
+}
+.bttn-stretch:after,
+.bttn-stretch:before {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: currentColor;
+  content: '';
+  opacity: 0.65;
+  -webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
+  transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
+  -webkit-transform: scaleX(0);
+          transform: scaleX(0);
+}
+.bttn-stretch:after {
+  top: 0;
+}
+.bttn-stretch:before {
+  bottom: 0;
+}
+.bttn-stretch:hover,
+.bttn-stretch:focus {
+  letter-spacing: 2px;
+  opacity: 0.9;
+  -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
+  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
+}
+.bttn-stretch:hover:after,
+.bttn-stretch:focus:after {
+  opacity: 1;
+  -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
+  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
+  -webkit-transform: scaleX(1);
+          transform: scaleX(1);
+}
+.bttn-stretch:hover:before,
+.bttn-stretch:focus:before {
+  opacity: 1;
+  -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
+  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
+  -webkit-transform: scaleX(1);
+          transform: scaleX(1);
+}
+.bttn-stretch.bttn-xs {
+  padding: 3px 8px;
+  font-size: 12px;
+  font-family: inherit;
+}
+.bttn-stretch.bttn-sm {
+  padding: 4px 10px;
+  font-size: 16px;
+  font-family: inherit;
+}
+.bttn-stretch.bttn-md {
+  font-size: 20px;
+  font-family: inherit;
+  padding: 5px 12px;
+}
+.bttn-stretch.bttn-lg {
+  padding: 8px 15px;
+  font-size: 24px;
+  font-family: inherit;
+}
+.bttn-stretch.bttn-default {
+  color: #fff;
+}
+.bttn-stretch.bttn-primary {
+  color: #1d89ff;
+}
+.bttn-stretch.bttn-warning {
+  color: #feab3a;
+}
+.bttn-stretch.bttn-danger {
+  color: #ff5964;
+}
+.bttn-stretch.bttn-success {
+  color: #28b78d;
+}
+.bttn-stretch.bttn-royal {
+  color: #bd2df5;
+}
\ No newline at end of file

diary/diary/src/app/start/start.component.html

+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <link href="https://fonts.googleapis.com/css?family=Gothic+A1:700|Sriracha" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Athiti" rel="stylesheet">
+   
+   
+</head>
+<body class="intro">
+    <div class="head">
+        <br><br><br><br><br><br><br><br>
+        <h1>MY DIARY</h1>
+        <p>จดบันทึก • ความประทับใจ • กันลืมก็ได้</p>
+        <button class="bttn-stretch bttn-md bttn-primary" style="font-family: 'Athiti', sans-serif;" [routerLink]="['/home']">เข้าสู่เว็บไซต์</button>
+    </div>
+    
+</body>

diary/diary/src/app/start/start.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StartComponent } from './start.component';
+
+describe('StartComponent', () => {
+  let component: StartComponent;
+  let fixture: ComponentFixture<StartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diary/diary/src/app/start/start.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-start',
+  templateUrl: './start.component.html',
+  styleUrls: ['./start.component.css']
+})
+export class StartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

diary/diary/src/assets/css/bootstrap-reboot.css

+/*!
+ * Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+dfn {
+  font-style: italic;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus {
+  outline: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */
\ No newline at end of file

diary/diary/src/assets/css/bootstrap-reboot.min.css

+/*!
+ * Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
+/*# sourceMappingURL=bootstrap-reboot.min.css.map */
\ No newline at end of file

diary/diary/src/assets/fullcalendar/fullcalendar.print.css

+/*!
+ * FullCalendar v2.2.5 Print Stylesheet
+ * Docs & License: http://arshaw.com/fullcalendar/
+ * (c) 2013 Adam Shaw
+ */
+
+/*
+ * Include this stylesheet on your page to get a more printer-friendly calendar.
+ * When including this stylesheet, use the media='print' attribute of the <link> tag.
+ * Make sure to include this stylesheet IN ADDITION to the regular fullcalendar.css.
+ */
+
+.fc {
+	max-width: 100% !important;
+}
+
+
+/* Global Event Restyling
+--------------------------------------------------------------------------------------------------*/
+
+.fc-event {
+	background: #fff !important;
+	color: #000 !important;
+	page-break-inside: avoid;
+}
+
+.fc-event .fc-resizer {
+	display: none;
+}
+
+
+/* Table & Day-Row Restyling
+--------------------------------------------------------------------------------------------------*/
+
+th,
+td,
+hr,
+thead,
+tbody,
+.fc-row {
+	border-color: #ccc !important;
+	background: #fff !important;
+}
+
+/* kill the overlaid, absolutely-positioned common components */
+.fc-bg,
+.fc-bgevent-skeleton,
+.fc-highlight-skeleton,
+.fc-helper-skeleton {
+	display: none;
+}
+
+/* don't force a min-height on rows (for DayGrid) */
+.fc tbody .fc-row {
+	height: auto !important; /* undo height that JS set in distributeHeight */
+	min-height: 0 !important; /* undo the min-height from each view's specific stylesheet */
+}
+
+.fc tbody .fc-row .fc-content-skeleton {
+	position: static; /* undo .fc-rigid */
+	padding-bottom: 0 !important; /* use a more border-friendly method for this... */
+}
+
+.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td { /* only works in newer browsers */
+	padding-bottom: 1em; /* ...gives space within the skeleton. also ensures min height in a way */
+}
+
+.fc tbody .fc-row .fc-content-skeleton table {
+	/* provides a min-height for the row, but only effective for IE, which exaggerates this value,
+	   making it look more like 3em. for other browers, it will already be this tall */
+	height: 1em;
+}
+
+
+/* Undo month-view event limiting. Display all events and hide the "more" links
+--------------------------------------------------------------------------------------------------*/
+
+.fc-more-cell,
+.fc-more {
+	display: none !important;
+}
+
+.fc tr.fc-limited {
+	display: table-row !important;
+}
+
+.fc td.fc-limited {
+	display: table-cell !important;
+}
+
+.fc-popover {
+	display: none; /* never display the "more.." popover in print mode */
+}
+
+
+/* TimeGrid Restyling
+--------------------------------------------------------------------------------------------------*/
+
+/* undo the min-height 100% trick used to fill the container's height */
+.fc-time-grid {
+	min-height: 0 !important;
+}
+
+/* don't display the side axis at all ("all-day" and time cells) */
+.fc-agenda-view .fc-axis {
+	display: none;
+}
+
+/* don't display the horizontal lines */
+.fc-slats,
+.fc-time-grid hr { /* this hr is used when height is underused and needs to be filled */
+	display: none !important; /* important overrides inline declaration */
+}
+
+/* let the container that holds the events be naturally positioned and create real height */
+.fc-time-grid .fc-content-skeleton {
+	position: static;
+}
+
+/* in case there are no events, we still want some height */
+.fc-time-grid .fc-content-skeleton table {
+	height: 4em;
+}
+
+/* kill the horizontal spacing made by the event container. event margins will be done below */
+.fc-time-grid .fc-event-container {
+	margin: 0 !important;
+}
+
+
+/* TimeGrid *Event* Restyling
+--------------------------------------------------------------------------------------------------*/
+
+/* naturally position events, vertically stacking them */
+.fc-time-grid .fc-event {
+	position: static !important;
+	margin: 3px 2px !important;
+}
+
+/* for events that continue to a future day, give the bottom border back */
+.fc-time-grid .fc-event.fc-not-end {
+	border-bottom-width: 1px !important;
+}
+
+/* indicate the event continues via "..." text */
+.fc-time-grid .fc-event.fc-not-end:after {
+	content: "...";
+}
+
+/* for events that are continuations from previous days, give the top border back */
+.fc-time-grid .fc-event.fc-not-start {
+	border-top-width: 1px !important;
+}
+
+/* indicate the event is a continuation via "..." text */
+.fc-time-grid .fc-event.fc-not-start:before {
+	content: "...";
+}
+
+/* time */
+
+/* undo a previous declaration and let the time text span to a second line */
+.fc-time-grid .fc-event .fc-time {
+	white-space: normal !important;
+}
+
+/* hide the the time that is normally displayed... */
+.fc-time-grid .fc-event .fc-time span {
+	display: none;
+}
+
+/* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
+.fc-time-grid .fc-event .fc-time:after {
+	content: attr(data-full);
+}
+
+
+/* Vertical Scroller & Containers
+--------------------------------------------------------------------------------------------------*/
+
+/* kill the scrollbars and allow natural height */
+.fc-scroller,
+.fc-day-grid-container,    /* these divs might be assigned height, which we need to cleared */
+.fc-time-grid-container {  /* */
+	overflow: visible !important;
+	height: auto !important;
+}
+
+/* kill the horizontal border/padding used to compensate for scrollbars */
+.fc-row {
+	border: 0 !important;
+	margin: 0 !important;
+}
+
+
+/* Button Controls
+--------------------------------------------------------------------------------------------------*/
+
+.fc-button-group,
+.fc button {
+	display: none; /* don't display any button-related controls */
+}

diary/diary/src/assets/function_on_calender.js

+function Test(){
+    let input = document.getElementById("input").value;
+    let output = document.getElementById("output");
+    output.value = input;
+    
+}
\ No newline at end of file

diary/diary/src/assets/js/style.css

+.m1{
+    display: none;
+    background-color: aquamarine;
+    align-content: center;
+}
\ No newline at end of file

diary/diary/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

diary/diary/src/environments/environment.ts

+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

diary/diary/src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Diary</title>
+  <base href="/">
+  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
+</body>
+</html>

diary/diary/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

diary/diary/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

diary/diary/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

diary/diary/src/tsconfig.app.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}