diff --git a/src/app/app.component.html b/src/app/app.component.html index cebf745..b753a4e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..8b13789 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1 @@ + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1e49a4a..75ecaaa 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,12 +6,16 @@ import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TodoAppComponent } from './todo-app/todo-app.component'; import { TodoFormComponent } from './todo-form/todo-form.component'; +import { TodoListComponent } from './todo-list/todo-list.component'; +import { TodoFooterComponent } from './todo-footer/todo-footer.component'; @NgModule({ declarations: [ AppComponent, TodoAppComponent, - TodoFormComponent + TodoFormComponent, + TodoListComponent, + TodoFooterComponent ], imports: [ BrowserModule, diff --git a/src/app/model/todo-item.ts b/src/app/model/todo-item.ts index bdb4f8b..b0a555d 100644 --- a/src/app/model/todo-item.ts +++ b/src/app/model/todo-item.ts @@ -1,9 +1,28 @@ export class TodoItem { - id: number; + static idCounter: number = 0; + + id: number = 0; description: string; isCompleted: boolean = false; + constructor(description){ + this.id = TodoItem.getIdCount(); + this.description = description; + + TodoItem.increaseIdCount() + } + + static increaseIdCount() { + this.idCounter += 1; + } + + static getIdCount() { + return this.idCounter; + } + toggleCompleted() { this.isCompleted = !this.isCompleted; } + } + diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html index 5d907a2..e236aa6 100644 --- a/src/app/todo-app/todo-app.component.html +++ b/src/app/todo-app/todo-app.component.html @@ -1,8 +1,23 @@ - - - - +
+
+
+
+
+
+

¡Mi lista de tareas!

+ +
+ + +
+ +
+
+
+
+
+ diff --git a/src/app/todo-app/todo-app.component.scss b/src/app/todo-app/todo-app.component.scss index e69de29..391f6cb 100644 --- a/src/app/todo-app/todo-app.component.scss +++ b/src/app/todo-app/todo-app.component.scss @@ -0,0 +1,6 @@ +.content{ + margin-top: 10px; + margin-left: auto; + margin-right: auto; + width: 60%; +} \ No newline at end of file diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts index 700530b..67d6f51 100644 --- a/src/app/todo-app/todo-app.component.ts +++ b/src/app/todo-app/todo-app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import {TodoItem} from '../model/todo-item'; @Component({ @@ -6,15 +6,24 @@ import {TodoItem} from '../model/todo-item'; templateUrl: './todo-app.component.html', styleUrls: ['./todo-app.component.scss'] }) -export class TodoAppComponent implements OnInit { - list = []; - lastItemId = 0; - constructor() { } - - ngOnInit(): void { - } +export class TodoAppComponent { + list : TodoItem[] = []; + // lastItemId = 0; onItemStateChanged(item: TodoItem) { item.toggleCompleted(); } + + onTodoItemCreated(newItem : TodoItem){ + this.list.push(newItem); + } + + onTodoItemRemoved(item : TodoItem){ + const index = this.list.findIndex(each => each.id === item.id); + this.list.splice(index,1); + } + + // onItemEdited(item : TodoItem){ + + // } } diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html new file mode 100644 index 0000000..4642aa5 --- /dev/null +++ b/src/app/todo-footer/todo-footer.component.html @@ -0,0 +1,4 @@ +
+ Tareas completadas:  {{ Completeditems() }}   + Tareas pendientes:   {{ UnCompleteditems() }} +
\ No newline at end of file diff --git a/src/app/todo-footer/todo-footer.component.scss b/src/app/todo-footer/todo-footer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/todo-footer/todo-footer.component.spec.ts b/src/app/todo-footer/todo-footer.component.spec.ts new file mode 100644 index 0000000..71f36d8 --- /dev/null +++ b/src/app/todo-footer/todo-footer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoFooterComponent } from './todo-footer.component'; + +describe('TodoFooterComponent', () => { + let component: TodoFooterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TodoFooterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TodoFooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts new file mode 100644 index 0000000..0c9eb1a --- /dev/null +++ b/src/app/todo-footer/todo-footer.component.ts @@ -0,0 +1,24 @@ +import { Component, Input } from '@angular/core'; + +import { TodoItem } from '../model/todo-item'; + +@Component({ + selector: 'app-todo-footer', + templateUrl: './todo-footer.component.html', + styleUrls: ['./todo-footer.component.scss'] +}) +export class TodoFooterComponent { + + @Input() list : TodoItem[] = []; + + Completeditems(){ + return this.list.filter(each => each.isCompleted === true).length; + } + + UnCompleteditems(){ + // return this.list.filter(each => each.isCompleted === true).length; + // Other form: + return this.list.length - this.Completeditems() + } + +} diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html index 69e81bd..8a1230a 100644 --- a/src/app/todo-form/todo-form.component.html +++ b/src/app/todo-form/todo-form.component.html @@ -1 +1,5 @@ -

todo-form works!

+
+ + +
+ diff --git a/src/app/todo-form/todo-form.component.scss b/src/app/todo-form/todo-form.component.scss index e69de29..8b7546b 100644 --- a/src/app/todo-form/todo-form.component.scss +++ b/src/app/todo-form/todo-form.component.scss @@ -0,0 +1,7 @@ +body { + background-color: #f9f9fa +} + +ul{ + list-style-type: none; +} \ No newline at end of file diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts index 78dc6ab..0a21baa 100644 --- a/src/app/todo-form/todo-form.component.ts +++ b/src/app/todo-form/todo-form.component.ts @@ -1,16 +1,22 @@ -import { Component, OnInit, Output, EventEmitter} from '@angular/core'; +import { Component, Output, EventEmitter} from '@angular/core'; + +import { TodoItem } from 'src/app/model/todo-item'; @Component({ selector: 'app-todo-form', templateUrl: './todo-form.component.html', styleUrls: ['./todo-form.component.scss'] }) -export class TodoFormComponent implements OnInit { +export class TodoFormComponent { - @Output() add = new EventEmitter(); - constructor() { } + @Output() add = new EventEmitter(); - ngOnInit(): void { - } + addItem(item){ + if (item.value === '') return; + const newItem = new TodoItem(item.value); + item.value = ''; + item.focus(); + this.add.emit(newItem); + } } diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html new file mode 100644 index 0000000..a105296 --- /dev/null +++ b/src/app/todo-list/todo-list.component.html @@ -0,0 +1,49 @@ +
+
    +
  • +
    + + + + {{ item.description }} (ID {{ item.id }}: {{ getEstado(item) }}) +
    +
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/todo-list/todo-list.component.scss b/src/app/todo-list/todo-list.component.scss new file mode 100644 index 0000000..25962cf --- /dev/null +++ b/src/app/todo-list/todo-list.component.scss @@ -0,0 +1,44 @@ +.completed { + background-color: #cbff7b; + text-decoration: line-through; +} + +.uncompleted { + background-color: lemonchiffon; +} + +li { + border-radius: 2em; + margin-bottom: 0.5em; +} + +ul{ + list-style-type: none; +} + +.btn { + margin-right: 10px; + font-weight: bold; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: small; + border-radius: 6em; +} + +.done{ + background-color: #77dd77; + border-color: #77dd77; +} + +.remove{ + background-color: #c23b22; + border-color: #c23b22; +} + +.edit{ + background-color: #a2cadf; + border-color: #a2cadf; +} + +.atenuar{ + color: gray; +} diff --git a/src/app/todo-list/todo-list.component.spec.ts b/src/app/todo-list/todo-list.component.spec.ts new file mode 100644 index 0000000..9865d1d --- /dev/null +++ b/src/app/todo-list/todo-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoListComponent } from './todo-list.component'; + +describe('TodoListComponent', () => { + let component: TodoListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TodoListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TodoListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts new file mode 100644 index 0000000..ac9907a --- /dev/null +++ b/src/app/todo-list/todo-list.component.ts @@ -0,0 +1,40 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +import { TodoItem } from '../model/todo-item'; + +@Component({ + selector: 'app-todo-list', + templateUrl: './todo-list.component.html', + styleUrls: ['./todo-list.component.scss'] +}) + + +export class TodoListComponent { + + @Input() list = []; + @Output() itemRemoved = new EventEmitter(); + @Output() itemStateChanged = new EventEmitter(); + @Output() itemEdited = new EventEmitter(); + + constructor() { } + + itemRemovedClick(item : TodoItem){ + this.itemRemoved.emit(item); + } + + itemStateChangedClick(item : TodoItem){ + this.itemStateChanged.emit(item); + } + + // itemEditClick(item : TodoItem){ + // this.itemEdited.emit(item); + // } + + getEstado(item : TodoItem){ + if (item.isCompleted) + return 'Completada'; + else + return 'Incompleta'; + + } +} diff --git a/src/img-of-app/toDoList.png b/src/img-of-app/toDoList.png new file mode 100644 index 0000000..054ba1c Binary files /dev/null and b/src/img-of-app/toDoList.png differ diff --git a/src/index.html b/src/index.html index 62a7817..926d1f4 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,8 @@ + + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..dc941f5 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,3 @@ -/* You can add global styles to this file, and also import other style files */ +body{ + background-color: powderblue; +} \ No newline at end of file