├── src
├── assets
│ └── .gitkeep
├── app
│ ├── app.component.css
│ ├── conponent
│ │ ├── tasks
│ │ │ ├── tasks.component.css
│ │ │ ├── tasks.component.html
│ │ │ ├── tasks.component.spec.ts
│ │ │ └── tasks.component.ts
│ │ ├── buttons
│ │ │ ├── buttons.component.css
│ │ │ ├── buttons.component.html
│ │ │ ├── buttons.component.ts
│ │ │ └── buttons.component.spec.ts
│ │ ├── add-task
│ │ │ ├── add-task.component.css
│ │ │ ├── add-task.component.spec.ts
│ │ │ ├── add-task.component.html
│ │ │ └── add-task.component.ts
│ │ ├── header
│ │ │ ├── header.component.css
│ │ │ ├── header.component.html
│ │ │ ├── header.component.spec.ts
│ │ │ └── header.component.ts
│ │ └── task-items
│ │ │ ├── task-items.component.html
│ │ │ ├── task-items.component.css
│ │ │ ├── task-items.component.spec.ts
│ │ │ └── task-items.component.ts
│ ├── TASK.ts
│ ├── app.component.html
│ ├── app.component.ts
│ ├── app-routing.module.ts
│ ├── services
│ │ ├── ui.service.spec.ts
│ │ ├── task-items.service.spec.ts
│ │ ├── ui.service.ts
│ │ └── task-items.service.ts
│ ├── fake_tasks.ts
│ ├── app.component.spec.ts
│ └── app.module.ts
├── favicon.ico
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── index.html
├── main.ts
├── test.ts
├── styles.css
└── polyfills.ts
├── .vscode
├── extensions.json
├── launch.json
└── tasks.json
├── .editorconfig
├── tsconfig.app.json
├── tsconfig.spec.json
├── db.json
├── .browserslistrc
├── .gitignore
├── tsconfig.json
├── package.json
├── karma.conf.js
├── README.md
└── angular.json
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/conponent/tasks/tasks.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/conponent/buttons/buttons.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yassineboujrada/TO_DO_LIST/HEAD/src/favicon.ico
--------------------------------------------------------------------------------
/src/app/conponent/add-task/add-task.component.css:
--------------------------------------------------------------------------------
1 | .add-form {
2 | margin-bottom: 40px;
3 | }
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/app/TASK.ts:
--------------------------------------------------------------------------------
1 | export interface TASK{
2 | id?:number;
3 | text:string;
4 | day:string;
5 | reminder:boolean;
6 | }
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/conponent/header/header.component.css:
--------------------------------------------------------------------------------
1 | header{
2 | display: flex;
3 | justify-content: space-between;
4 | align-items: center;
5 | margin-bottom: 20px;
6 | }
--------------------------------------------------------------------------------
/src/app/conponent/buttons/buttons.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/conponent/header/header.component.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
--------------------------------------------------------------------------------
/src/app/conponent/tasks/tasks.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | const routes: Routes = [];
5 |
6 | @NgModule({
7 | imports: [RouterModule.forRoot(routes)],
8 | exports: [RouterModule]
9 | })
10 | export class AppRoutingModule { }
11 |
--------------------------------------------------------------------------------
/src/app/conponent/task-items/task-items.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
{{task.text}}
5 |
{{task.day}}
6 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | tasks
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts",
10 | "src/polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/conponent/task-items/task-items.component.css:
--------------------------------------------------------------------------------
1 | .task {
2 | background: #f4f4f4;
3 | margin: 5px;
4 | padding: 10px 20px;
5 | cursor: pointer;
6 | border-radius: 5px;
7 | }
8 |
9 | .task.reminder {
10 | border-left: 5px solid green;
11 | }
12 |
13 | .task h3 {
14 | display: flex;
15 | align-items: center;
16 | justify-content: space-between;
17 | }
--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/src/app/services/ui.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { UiService } from './ui.service';
4 |
5 | describe('UiService', () => {
6 | let service: UiService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(UiService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "tasks": [
3 | {
4 | "id": 1,
5 | "text": "Doctors Appointment",
6 | "day": "May 5th at 2:30pm",
7 | "reminder": true
8 | },
9 | {
10 | "id": 2,
11 | "text": "Meeting at School",
12 | "day": "May 6th at 1:30pm",
13 | "reminder": false
14 | },
15 | {
16 | "id": 5,
17 | "text": "Food Shopping test4",
18 | "day": "May 7th at 12:30pm",
19 | "reminder": true
20 | }
21 | ]
22 | }
--------------------------------------------------------------------------------
/src/app/services/task-items.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { TaskItemsService } from './task-items.service';
4 |
5 | describe('TaskItemsService', () => {
6 | let service: TaskItemsService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(TaskItemsService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/app/fake_tasks.ts:
--------------------------------------------------------------------------------
1 | import { TASK } from './TASK';
2 |
3 |
4 | export const tasks :TASK[] =[
5 | {
6 | id: 1,
7 | text: 'Doctors Appointment',
8 | day: 'May 5th at 2:30pm',
9 | reminder: true,
10 | },
11 | {
12 | id: 2,
13 | text: 'Meeting at School',
14 | day: 'May 6th at 1:30pm',
15 | reminder: true,
16 | },
17 | {
18 | id: 3,
19 | text: 'Food Shopping',
20 | day: 'May 7th at 12:30pm',
21 | reminder: false,
22 | },
23 | ];
--------------------------------------------------------------------------------
/src/app/services/ui.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {Observable,Subject} from 'rxjs'
3 |
4 | @Injectable({
5 | providedIn: 'root'
6 | })
7 | export class UiService {
8 |
9 | private showAddTask:boolean=false;
10 | private subject =new Subject();
11 |
12 | constructor() { }
13 |
14 | toggleAdd():void{
15 | this.showAddTask=!this.showAddTask;
16 | this.subject.next(this.showAddTask);
17 | };
18 |
19 | on_toggle():Observable{
20 | return this.subject.asObservable();
21 | };
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "pwa-chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/conponent/buttons/buttons.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit ,Input,Output, EventEmitter} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-buttons',
5 | templateUrl: './buttons.component.html',
6 | styleUrls: ['./buttons.component.css']
7 | })
8 | export class ButtonsComponent implements OnInit {
9 |
10 | @Input() text!: string;
11 | @Input() color!: string;
12 | @Output() btnclick = new EventEmitter();
13 |
14 | constructor() { }
15 |
16 | ngOnInit(): void {
17 | }
18 |
19 | onclicknow() {
20 | this.btnclick.emit();
21 | }
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/src/app/conponent/tasks/tasks.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TasksComponent } from './tasks.component';
4 |
5 | describe('TasksComponent', () => {
6 | let component: TasksComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ TasksComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(TasksComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/conponent/header/header.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HeaderComponent } from './header.component';
4 |
5 | describe('HeaderComponent', () => {
6 | let component: HeaderComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ HeaderComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(HeaderComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # Compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | /bazel-out
8 |
9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 |
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 |
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 |
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/src/app/conponent/buttons/buttons.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ButtonsComponent } from './buttons.component';
4 |
5 | describe('ButtonsComponent', () => {
6 | let component: ButtonsComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ ButtonsComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(ButtonsComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/src/app/conponent/add-task/add-task.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AddTaskComponent } from './add-task.component';
4 |
5 | describe('AddTaskComponent', () => {
6 | let component: AddTaskComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ AddTaskComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(AddTaskComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/conponent/task-items/task-items.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TaskItemsComponent } from './task-items.component';
4 |
5 | describe('TaskItemsComponent', () => {
6 | let component: TaskItemsComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ TaskItemsComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(TaskItemsComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/conponent/add-task/add-task.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | (id: string): T;
13 | keys(): string[];
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting(),
21 | );
22 |
23 | // Then we find all the tests.
24 | const context = require.context('./', true, /\.spec\.ts$/);
25 | // And load the modules.
26 | context.keys().forEach(context);
27 |
--------------------------------------------------------------------------------
/src/app/conponent/task-items/task-items.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
2 | import {TASK} from '../../TASK'
3 | import { faTimes } from '@fortawesome/free-solid-svg-icons';
4 |
5 | @Component({
6 | selector: 'app-task-items',
7 | templateUrl: './task-items.component.html',
8 | styleUrls: ['./task-items.component.css']
9 | })
10 | export class TaskItemsComponent implements OnInit {
11 | @Input() task! :TASK;
12 | @Output() delete_task : EventEmitter = new EventEmitter();
13 | @Output() On_toggle: EventEmitter=new EventEmitter();
14 |
15 | faTimes=faTimes;
16 | constructor() { }
17 |
18 | ngOnInit(): void {
19 | }
20 |
21 | Drop_task(e:TASK):void{
22 | // console.log(gg);
23 | this.delete_task.emit(e)
24 | }
25 |
26 | toggle(e:TASK){
27 | this.On_toggle.emit(e);
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2020",
20 | "module": "es2020",
21 | "lib": [
22 | "es2020",
23 | "dom"
24 | ]
25 | },
26 | "angularCompilerOptions": {
27 | "enableI18nLegacyMessageIdFormat": false,
28 | "strictInjectionParameters": true,
29 | "strictInputAccessModifiers": true,
30 | "strictTemplates": true
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/conponent/header/header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {UiService} from '../../services/ui.service';
3 | import { Subscription } from 'rxjs';
4 | import { Router } from '@angular/router';
5 |
6 | @Component({
7 | selector: 'app-header',
8 | templateUrl: './header.component.html',
9 | styleUrls: ['./header.component.css']
10 | })
11 | export class HeaderComponent implements OnInit {
12 | title:string = 'TO DO LIST App';
13 | showAddTeask:boolean =false;
14 | subscription!:Subscription;
15 |
16 | constructor(private serv:UiService , private route:Router) {
17 | this.subscription=this.serv.on_toggle().subscribe( (val) => (this.showAddTeask = val) )
18 | }
19 |
20 | ngOnInit(): void {
21 | }
22 |
23 | toggle_add_task(){
24 | // alert('hi again')
25 | this.serv.toggleAdd();
26 |
27 | }
28 |
29 | // this function is for the show to button if we are in a specific route as example home page
30 | inRoute(my_route:string){
31 | return this.route.url === my_route
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/conponent/tasks/tasks.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {TASK} from '../../TASK'
3 | // import {tasks} from '../../fake_tasks'
4 | import {TaskItemsService} from '../../services/task-items.service'
5 |
6 | @Component({
7 | selector: 'app-tasks',
8 | templateUrl: './tasks.component.html',
9 | styleUrls: ['./tasks.component.css']
10 | })
11 | export class TasksComponent implements OnInit {
12 | tasks : TASK[]=[];
13 | constructor(private task_service:TaskItemsService) {
14 |
15 | }
16 |
17 | ngOnInit(): void {
18 | this.task_service.getTasks().subscribe( (tasks) =>{
19 | this.tasks=tasks
20 | });
21 | }
22 |
23 | on_delete_task(task:TASK){
24 | this.task_service.deleteTasks(task).subscribe( () =>{
25 | this.tasks=this.tasks.filter( t=> t.id !== task.id);
26 | });
27 | }
28 |
29 | on_toggle_task(task:TASK){
30 | task.reminder = !task.reminder;
31 | this.task_service.update_task_reminde(task).subscribe();
32 | }
33 |
34 | OnAddTask(task:TASK){
35 | this.task_service.Add_new_Task(task).subscribe((task) => this.tasks.push(task));
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/services/task-items.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {TASK} from '../TASK'
3 | // import {tasks} from '../fake_tasks'
4 | import { Observable,of } from 'rxjs';
5 | import {HttpClient,HttpHeaders} from '@angular/common/http'
6 |
7 | const httpOption={
8 | headers: new HttpHeaders({
9 | 'Content-Type':'application/json'
10 | })
11 | }
12 |
13 |
14 | @Injectable({
15 | providedIn: 'root'
16 | })
17 |
18 |
19 | export class TaskItemsService {
20 |
21 | private api_Url="http://localhost:5000/tasks"
22 |
23 | constructor(private http:HttpClient) { }
24 |
25 | getTasks(): Observable {
26 | // return of(tasks);
27 | return this.http.get(this.api_Url);
28 | }
29 |
30 | deleteTasks(task:TASK): Observable {
31 | const url = `${this.api_Url}/${task.id}`;
32 | return this.http.delete(url);
33 | }
34 |
35 | update_task_reminde(task:TASK):Observable {
36 | const url = `${this.api_Url}/${task.id}`;
37 | return this.http.put(url,task,httpOption);
38 | }
39 |
40 | Add_new_Task(task:TASK):Observable{
41 | return this.http.post(this.api_Url,task,httpOption);
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'my_app'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('my_app');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement as HTMLElement;
33 | expect(compiled.querySelector('.content span')?.textContent).toContain('my_app app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/src/app/conponent/add-task/add-task.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit,Output,EventEmitter } from '@angular/core';
2 | import {TASK} from '../../TASK';
3 | import { UiService } from '../../services/ui.service';
4 | import { Subscription } from 'rxjs';
5 |
6 | @Component({
7 | selector: 'app-add-task',
8 | templateUrl: './add-task.component.html',
9 | styleUrls: ['./add-task.component.css']
10 | })
11 | export class AddTaskComponent implements OnInit {
12 | text!:string;
13 | day!:string;
14 | reminder:boolean=false;
15 |
16 | @Output() add_Task : EventEmitter=new EventEmitter();
17 | showAddTask!:boolean;
18 | subscription:Subscription;
19 |
20 |
21 | constructor(private serv:UiService) {
22 | this.subscription=this.serv.on_toggle().subscribe( (val) => (this.showAddTask = val) )
23 | }
24 |
25 | ngOnInit(): void {
26 | }
27 |
28 | onSubmit():void{
29 | if(!this.text){
30 | alert('fill data');
31 | return;
32 | }
33 | console.log('hhh')
34 | const new_task_info:TASK={
35 | text:this.text,
36 | day:this.day,
37 | reminder:this.reminder,
38 | };
39 |
40 | this.add_Task.emit(new_task_info);
41 |
42 | this.text='';
43 | this.day='';
44 | this.reminder=false;
45 |
46 | }
47 |
48 | }
49 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
3 |
4 | * {
5 | box-sizing: border-box;
6 | margin: 0;
7 | padding: 0;
8 | }
9 |
10 | body {
11 | font-family: "Poppins", sans-serif;
12 | }
13 |
14 | .container {
15 | max-width: 500px;
16 | margin: 30px auto;
17 | overflow: auto;
18 | min-height: 300px;
19 | border: 1px solid steelblue;
20 | padding: 30px;
21 | border-radius: 5px;
22 | }
23 | .btn {
24 | display: inline-block;
25 | background: #000;
26 | color: #fff;
27 | border: none;
28 | padding: 10px 20px;
29 | margin: 5px;
30 | border-radius: 5px;
31 | cursor: pointer;
32 | text-decoration: none;
33 | font-size: 15px;
34 | font-family: inherit;
35 | }
36 | .btn:focus {
37 | outline: none;
38 | }
39 | .btn:active {
40 | transform: scale(0.98);
41 | }
42 |
43 | .btn-block {
44 | display: block;
45 | width: 100%;
46 | }
47 |
48 | .form-control {
49 | margin: 20px 0;
50 | }
51 |
52 | .form-control label {
53 | display: block;
54 | }
55 |
56 | .form-control input {
57 | width: 100%;
58 | height: 40px;
59 | margin: 5px;
60 | padding: 3px 7px;
61 | font-size: 17px;
62 | }
63 |
64 | .form-control-check {
65 | display: flex;
66 | align-items: center;
67 | justify-content: space-between;
68 | }
69 |
70 | .form-control-check label {
71 | flex: 1;
72 | }
73 |
74 | .form-control-check input {
75 | flex: 2;
76 | height: 20px;
77 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-app",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test",
10 | "server":"json-server --watch db.json --port 5000"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "^14.0.0",
15 | "@angular/common": "^14.0.0",
16 | "@angular/compiler": "^14.0.0",
17 | "@angular/core": "^14.0.0",
18 | "@angular/forms": "^14.0.0",
19 | "@angular/platform-browser": "^14.0.0",
20 | "@angular/platform-browser-dynamic": "^14.0.0",
21 | "@angular/router": "^14.0.0",
22 | "@fortawesome/angular-fontawesome": "^0.10.2",
23 | "@fortawesome/fontawesome-svg-core": "^6.1.0",
24 | "@fortawesome/free-brands-svg-icons": "^6.1.0",
25 | "@fortawesome/free-regular-svg-icons": "^6.1.0",
26 | "@fortawesome/free-solid-svg-icons": "^6.1.0",
27 | "json-server": "^0.17.0",
28 | "rxjs": "~7.5.0",
29 | "tslib": "^2.3.0",
30 | "zone.js": "~0.11.4"
31 | },
32 | "devDependencies": {
33 | "@angular-devkit/build-angular": "^14.0.0",
34 | "@angular/cli": "~14.0.0",
35 | "@angular/compiler-cli": "^14.0.0",
36 | "@types/jasmine": "~4.0.0",
37 | "jasmine-core": "~4.1.0",
38 | "karma": "~6.3.0",
39 | "karma-chrome-launcher": "~3.1.0",
40 | "karma-coverage": "~2.2.0",
41 | "karma-jasmine": "~5.0.0",
42 | "karma-jasmine-html-reporter": "~1.7.0",
43 | "typescript": "~4.7.2"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | // modules
2 | import { Component, NgModule } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
5 | import { AppRoutingModule } from './app-routing.module';
6 | import {HttpClientModule} from '@angular/common/http';
7 | import {FormsModule} from '@angular/forms'
8 | import { RouterModule,Routes } from '@angular/router';
9 |
10 | // containers
11 | import { AppComponent } from './app.component';
12 | import { HeaderComponent } from './conponent/header/header.component';
13 | import { ButtonsComponent } from './conponent/buttons/buttons.component';
14 | import { TasksComponent } from './conponent/tasks/tasks.component';
15 | import { TaskItemsComponent } from './conponent/task-items/task-items.component';
16 | import { AddTaskComponent } from './conponent/add-task/add-task.component';
17 |
18 |
19 | const appRouter: Routes = [
20 | { path: '', component: TasksComponent },
21 | // { path: 'about', component: AboutComponent },
22 | ];
23 |
24 | @NgModule({
25 | declarations: [
26 | AppComponent,
27 | HeaderComponent,
28 | ButtonsComponent,
29 | TasksComponent,
30 | TaskItemsComponent,
31 | AddTaskComponent
32 | ],
33 | imports: [
34 | BrowserModule,
35 | AppRoutingModule,
36 | FontAwesomeModule,
37 | HttpClientModule,
38 | FormsModule,
39 | RouterModule.forRoot(appRouter,{enableTracing:true})
40 | ],
41 | providers: [],
42 | bootstrap: [AppComponent]
43 | })
44 | export class AppModule { }
45 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/my_app'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # TO_DO_LIST
2 |
3 | This repository contains a simple TO-DO List project implemented using Angular. The TO-DO List application allows users to manage their tasks by adding, editing,
4 | and marking tasks as completed. This project is a great starting point for those who want to learn and practice Angular concepts.
5 |
6 | ## Features :
7 |
8 | - Add new tasks with a title and optional description.
9 | - Edit existing tasks to update their details.
10 | - Mark tasks as completed, and easily identify completed tasks.
11 | - Remove tasks from the list.
12 |
13 | ## Getting Started :
14 |
15 | Follow the steps below to set up the project on your local machine and run it.
16 |
17 | 1- Clone the repository to your local machine using Git:
18 |
19 | ```sh
20 | $ git clone https://github.com/yassineboujrada/TO_DO_LIST.git
21 | ```
22 |
23 | 2- Navigate to the project directory:
24 |
25 | ```sh
26 | $ cd TO_DO_LIST
27 | ```
28 |
29 | 3- Install the required dependencies:
30 |
31 | ```sh
32 | $ npm install
33 | ```
34 |
35 | Once the installation is complete, you can run the TO-DO List application using the Angular CLI.
36 |
37 | ```sh
38 | $ ng serve
39 | ```
40 |
41 | The application will be available at http://localhost:4200/ by default.
42 |
43 | ## Contributing :
44 |
45 | Contributions are welcome! If you find any issues or want to improve the application, feel free to open an issue or submit a pull request.
46 |
47 |
48 | We hope you find this Angular TO-DO List project useful for your learning and development journey.
49 | If you have any questions or feedback, don't hesitate to reach out. Happy coding! 🚀
50 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 |
51 | /***************************************************************************************************
52 | * APPLICATION IMPORTS
53 | */
54 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "my_app": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:application": {
10 | "strict": true
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular-devkit/build-angular:browser",
19 | "options": {
20 | "outputPath": "dist/my_app",
21 | "index": "src/index.html",
22 | "main": "src/main.ts",
23 | "polyfills": "src/polyfills.ts",
24 | "tsConfig": "tsconfig.app.json",
25 | "assets": [
26 | "src/favicon.ico",
27 | "src/assets"
28 | ],
29 | "styles": [
30 | "src/styles.css"
31 | ],
32 | "scripts": []
33 | },
34 | "configurations": {
35 | "production": {
36 | "budgets": [
37 | {
38 | "type": "initial",
39 | "maximumWarning": "500kb",
40 | "maximumError": "1mb"
41 | },
42 | {
43 | "type": "anyComponentStyle",
44 | "maximumWarning": "2kb",
45 | "maximumError": "4kb"
46 | }
47 | ],
48 | "fileReplacements": [
49 | {
50 | "replace": "src/environments/environment.ts",
51 | "with": "src/environments/environment.prod.ts"
52 | }
53 | ],
54 | "outputHashing": "all"
55 | },
56 | "development": {
57 | "buildOptimizer": false,
58 | "optimization": false,
59 | "vendorChunk": true,
60 | "extractLicenses": false,
61 | "sourceMap": true,
62 | "namedChunks": true
63 | }
64 | },
65 | "defaultConfiguration": "production"
66 | },
67 | "serve": {
68 | "builder": "@angular-devkit/build-angular:dev-server",
69 | "configurations": {
70 | "production": {
71 | "browserTarget": "my_app:build:production"
72 | },
73 | "development": {
74 | "browserTarget": "my_app:build:development"
75 | }
76 | },
77 | "defaultConfiguration": "development"
78 | },
79 | "extract-i18n": {
80 | "builder": "@angular-devkit/build-angular:extract-i18n",
81 | "options": {
82 | "browserTarget": "my_app:build"
83 | }
84 | },
85 | "test": {
86 | "builder": "@angular-devkit/build-angular:karma",
87 | "options": {
88 | "main": "src/test.ts",
89 | "polyfills": "src/polyfills.ts",
90 | "tsConfig": "tsconfig.spec.json",
91 | "karmaConfig": "karma.conf.js",
92 | "assets": [
93 | "src/favicon.ico",
94 | "src/assets"
95 | ],
96 | "styles": [
97 | "src/styles.css"
98 | ],
99 | "scripts": []
100 | }
101 | }
102 | }
103 | }
104 | },
105 | "cli": {
106 | "analytics": "a40f0d6c-0d50-469f-95be-b2c187e13106"
107 | }
108 | }
109 |
--------------------------------------------------------------------------------