@@ -0,0 +1,13 @@
+.content-area {
+margin-top: 25px;
+height: 93%;
+overflow-y: auto;
+}
+
+.input-card {
+margin: 16px;
+}
+
+mat-form-field {
+width: 100%;
+}

@@ -0,0 +1,12 @@
+<mat-toolbar color="primary">
+<mat-toolbar-row>
+<span>TODO App</span>
+</mat-toolbar-row>
+</mat-toolbar>
+<div class="content-area">
+<div class="input-card">
+<app-input (submit)="addItem($event)" [placeholder]="'What do you need to do?'" [maxLength]="250" [buttonEnabled]="true"
+[buttonText]="'Add'"></app-input>
+</div>
+<app-todo-list [items]="todos"></app-todo-list>
+</div>

@@ -0,0 +1,66 @@
+import {ComponentFixture, getTestBed, TestBed} from '@angular/core/testing';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+import {MaterialModule} from '../../modules';
+import {TodoService} from '../../services/todo/todo.service';
+import {InputComponent} from '../input/input.component';
+import {TodoListComponent} from '../todo-list/todo-list.component';
+
+import {AppComponent} from './app.component';
+
+describe('AppComponent', () => {
+let component: AppComponent;
+let fixture: ComponentFixture<AppComponent>;
+
+let todoService: TodoService;
+
+beforeEach(() => {
+TestBed.configureTestingModule({
+declarations: [AppComponent, InputComponent, TodoListComponent],
+imports: [MaterialModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule]
+});
+
+fixture = TestBed.createComponent(AppComponent);
+component = fixture.componentInstance;
+
+todoService = getTestBed().get(TodoService);
+
+fixture.detectChanges();
+});
+
+it('should create the app', () => {
+expect(component).toBeTruthy();
+});
+
+describe('addItem', () => {
+it('should call addTodo of TodoService', () => {
+const text: string = 'SomeText';
+const spy = spyOn(todoService, 'addTodo');
+
+component.addItem(text);
+
+expect(spy).toHaveBeenCalled();
+expect(spy).toHaveBeenCalledWith({text});
+});
+
+it('should call getTodos of TodoService', () => {
+const text: string = 'SomeText';
+const spy = spyOn(todoService, 'getTodos');
+
+component.addItem(text);
+
+expect(spy).toHaveBeenCalled();
+});
+});
+
+describe('getTodos', () => {
+it('should call getTodos of TodoService', () => {
+const spy = spyOn(todoService, 'getTodos');
+
+component.getTodos();
+
+expect(spy).toHaveBeenCalled();
+});
+});
+});

@@ -0,0 +1,23 @@
+import {Component, OnInit} from '@angular/core';
+import {TodoItem} from '../../models/todo-item.model';
+import {TodoService} from '../../services';
+
+@Component({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})
+export class AppComponent implements OnInit {
+newItemText: string = '';
+
+todos: TodoItem[];
+
+constructor(private todoService: TodoService) {}
+
+ngOnInit(): void {}
+
+addItem(text: string): void {
+this.todoService.addTodo({text});
+this.getTodos();
+}
+
+getTodos(): void {
+this.todos = this.todoService.getTodos();
+}
+}

@@ -0,0 +1,3 @@
+export {AppComponent} from './app/app.component';
+export {InputComponent} from './input/input.component';
+export {TodoListComponent} from './todo-list/todo-list.component';

@@ -0,0 +1 @@
+export {} from './todo-item.model';

@@ -0,0 +1,4 @@
+export class TodoItem {
+done?: boolean;
+text: string;
+}

@@ -0,0 +1 @@
+export {TodoService} from './todo/todo.service';

@@ -0,0 +1,42 @@
+import {getTestBed, TestBed} from '@angular/core/testing';
+
+import {TodoItem} from '../../models/todo-item.model';
+
+import {TodoService} from './todo.service';
+
+describe('TodoService', () => {
+let service: TodoService;
+
+beforeEach(() => {
+TestBed.configureTestingModule({});
+
+service = getTestBed().get(TodoService);
+});
+
+it('should be created', () => {
+expect(service).toBeTruthy();
+expect(service['todos']).toEqual([]);
+});
+
+describe('addTodo', () => {
+it('should add todo to array', () => {
+const todo: TodoItem = {text: 'SomeTextINeedToDo'};
+
+service.addTodo(todo);
+
+expect(service['todos']).toEqual([todo]);
+});
+});
+
+describe('getTodos', () => {
+it('should return the todos', () => {
+const todos: TodoItem[] = [{text: 'SomeTextINeedToDo'}];
+
+service['todos'] = todos;
+
+const result = service.getTodos();
+
+expect(result).toEqual(todos);
+});
+});
+});

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {TodoItem} from '../../models/todo-item.model';
+
+@Injectable({providedIn: 'root'})
+export class TodoService {
+private todos: TodoItem[];
+
+constructor() {
+this.todos = [];
+}
+
+addTodo(todo: TodoItem): void {
+this.todos.push(todo);
+}
+
+getTodos(): TodoItem[] {
+return this.todos;
+}
+}