Complete Full-Stack Todo application with Angular, Node.js, and MySQL

To do list har/todo-list/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

To do list har/todo-list/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

To do list har/todo-list/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

To do list har/todo-list/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

To do list har/todo-list/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

To do list har/todo-list/README.md

@@ -0,0 +1,46 @@
+# Full-Stack Todo Application
+
+This is a complete Todo management system that transitions from a simple frontend to a full-stack architecture using the **PEAN stack** (PostgreSQL/MySQL, Express, Angular, Node).
+
+## Features
+- **Frontend**: Responsive UI built with Angular 17.
+- **Backend**: RESTful API powered by Node.js and Express.
+- **Database**: Persistent storage using MySQL 5.5.
+- **Full CRUD**: Support for Adding, Viewing, Toggling, and Deleting tasks.
+- **Security**: Configured with CORS and Helmet middleware.
+
+## Project Structure
+- `/src`: Angular frontend source code.
+- `/backend`: Node.js server and API logic.
+
+## Setup Instructions
+
+### 1. Database Configuration
+Ensure MySQL is running and execute the following SQL:
+```sql
+CREATE DATABASE todo_db;
+USE todo_db;
+
+CREATE TABLE todos (
+    sno BIGINT PRIMARY KEY,
+    title VARCHAR(255) NOT NULL,
+    `desc` TEXT,
+    active BOOLEAN DEFAULT TRUE
+);
+
+### 2. Run the Backend
+- Navigate to the backend folder: cd backend
+- Install dependencies: npm install
+- Start the server: node index.js The server will run on http://localhost:3000
+
+### 3. Run the Frontend
+- Return to the root folder: cd ..
+- Install dependencies: npm install
+- Start the app: ng serve The app will be available at http://localhost:4200
+
+## Key Implementation Details
+- HttpClient: Used for communication between Angular and the Node.js API.
+- MySQL Pool: Implemented connection pooling for efficient database queries.
+- Data Persistence: Data is saved to MySQL, ensuring it survives browser refreshes and server restarts.
+
+Developed by Harshit Anand Sachdev

To do list har/todo-list/angular.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "todo-list": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/todo-list",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css",
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "todo-list:build:production"
+            },
+            "development": {
+              "buildTarget": "todo-list:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "todo-list:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

To do list har/todo-list/backend/index.js

@@ -0,0 +1,88 @@
+const express = require('express');
+const mysql = require('mysql2');
+const cors = require('cors');
+const helmet = require('helmet');
+const app = express();
+
+// 1. Security Headers (Fixes the CSP error)
+app.use(helmet({
+    contentSecurityPolicy: false, // Easiest for local development
+}));
+
+// 2. Allow Angular to connect
+app.use(cors());
+app.use(express.json());
+
+// 3. MySQL Connection Pool
+const pool = mysql.createPool({
+  host: 'localhost',
+  user: 'root',
+  password: '123456', // Ensure this matches your MySQL password
+  database: 'todo_db'
+}).promise();
+
+// 4. Root Route (Fixes the GET / 404)
+app.get('/', (req, res) => {
+    res.send("Todo Backend is Online");
+});
+
+// 5. Silences the Chrome DevTools error
+app.get('/favicon.ico', (req, res) => res.status(204).end());
+
+// 6. API Routes
+app.get('/api/todos', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM todos');
+    res.json(rows);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// POST: Add a new todo
+app.post('/api/todos', async (req, res) => {
+    console.log("Received Add Request:", req.body);
+    const { title, desc, active } = req.body;
+    const sno = Date.now(); // Unique ID for MySQL BIGINT
+
+    try {
+        await pool.query(
+            'INSERT INTO todos (sno, title, `desc`, active) VALUES (?, ?, ?, ?)',
+            [sno, title, desc, active ? 1 : 0]
+        );
+        res.status(201).json({ sno, title, desc, active });
+    } catch (err) {
+        console.error("MySQL Insert Error:", err);
+        res.status(500).json({ error: err.message });
+    }
+});
+
+// PUT: Update todo status (Toggle)
+app.put('/api/todos/:sno', async (req, res) => {
+    const { sno } = req.params;
+    const { active } = req.body;
+    try {
+        await pool.query('UPDATE todos SET active = ? WHERE sno = ?', [active ? 1 : 0, sno]);
+        res.json({ message: "Status updated" });
+    } catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+
+// DELETE: Remove a todo
+app.delete('/api/todos/:sno', async (req, res) => {
+    const { sno } = req.params;
+    try {
+        await pool.query('DELETE FROM todos WHERE sno = ?', [sno]);
+        res.json({ message: "Todo deleted" });
+    } catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+
+app.listen(3000, () => {
+    console.log('-----------------------------------------');
+    console.log('Server running on http://localhost:3000');
+    console.log('MySQL Connected & CSP Errors Resolved');
+    console.log('-----------------------------------------');
+});

To do list har/todo-list/backend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "body-parser": "^2.2.2",
+    "cors": "^2.8.5",
+    "express": "^5.2.1",
+    "helmet": "^8.1.0",
+    "mysql": "^2.18.1",
+    "mysql2": "^3.16.0"
+  }
+}

To do list har/todo-list/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "todo-list",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/router": "^17.3.0",
+    "bootstrap": "^5.3.8",
+    "jquery": "^3.7.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.17",
+    "@angular/cli": "^17.3.17",
+    "@angular/compiler-cli": "^17.3.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.4.2"
+  }
+}

To do list har/todo-list/src/app/MyComponents/add-todo/add-todo.component.html

@@ -0,0 +1,14 @@
+<div class=" my-3">
+    <h3>Add a Todo</h3>
+    <form (ngSubmit)="onSubmit()">
+        <div class="mb-3">
+            <label for="Title" class="form-label">Todo Title</label>
+            <input type="text" [(ngModel)]="title" class="form-control" id="Title" name="Title" aria-describedby="emailHelp">
+        </div>
+        <div class="mb-3">
+            <label for="desc" class="form-label">Todo Description</label>
+            <input type="text" [(ngModel)]="desc" class="form-control" id="desc" name="desc">
+        </div>
+        <button type="submit" class="btn btn-primary">Add Todo</button>
+    </form>
+</div>

To do list har/todo-list/src/app/MyComponents/add-todo/add-todo.component.spec.ts

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

To do list har/todo-list/src/app/MyComponents/add-todo/add-todo.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Todo } from '../../Todo';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-todo',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './add-todo.component.html',
+  styleUrl: './add-todo.component.css'
+})
+export class AddTodoComponent {
+  title: string = "";
+  desc: string = "";
+  @Output() todoAdd: EventEmitter<Todo> = new EventEmitter();
+
+  onSubmit() {
+    const todo = {
+      sno: 0,
+      title: this.title,
+      desc: this.desc,
+      active: true
+    }
+    this.todoAdd.emit(todo);
+  }
+}

To do list har/todo-list/src/app/MyComponents/todo-item/todo-item.component.css

@@ -0,0 +1,3 @@
+.strike{
+    text-decoration: line-through;
+}

To do list har/todo-list/src/app/MyComponents/todo-item/todo-item.component.html

@@ -0,0 +1,9 @@
+<div class="my3">
+    <h5 [ngClass]="{'strike': !todo.active}">{{todo.title}}</h5>
+    <p [ngClass]="{'strike': !todo.active}">{{todo.desc}}</p>
+    <div class="mb-3 form-check">
+    <input type="checkbox" class="form-check-input" id="exampleCheck1" (click)="onCheckboxClick(todo)" [checked]="!todo.active">
+    <label class="form-check-label" for="todo{{i}}">Done</label>
+  </div>
+    <button class="btn btn-danger" (click)="onClick(todo)">Delete</button>
+</div>

To do list har/todo-list/src/app/MyComponents/todo-item/todo-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoItemComponent } from './todo-item.component';
+
+describe('TodoItemComponent', () => {
+  let component: TodoItemComponent;
+  let fixture: ComponentFixture<TodoItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TodoItemComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TodoItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

To do list har/todo-list/src/app/MyComponents/todo-item/todo-item.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Todo } from '../../Todo';
+import { NgClass } from "@angular/common";
+
+@Component({
+  selector: 'app-todo-item',
+  standalone: true,
+  imports: [NgClass],
+  templateUrl: './todo-item.component.html',
+  styleUrl: './todo-item.component.css'
+})
+export class TodoItemComponent {
+  @Input() todo!: Todo;
+  @Input() i!: number;
+  @Output() todoDelete: EventEmitter<Todo> = new EventEmitter();
+  @Output() todoCheckbox: EventEmitter<Todo> = new EventEmitter();
+  
+  onClick(todo: Todo) {
+    console.log("onClick has been triggered");
+    this.todoDelete.emit(todo);
+  }
+  onCheckboxClick(todo: Todo) {
+    this.todoCheckbox.emit(todo);
+  }
+}

To do list har/todo-list/src/app/MyComponents/todos/todos.component.html

@@ -0,0 +1,11 @@
+  <div class="container">
+    <h1 class="text-center">Todo List by Harshit</h1>
+<app-add-todo (todoAdd)="addTodo($event)"></app-add-todo>
+<h3>Your Todos</h3>
+<div *ngIf="this.todos.length===0; else elseBlock">No Todos to Display</div>
+<ng-template #elseBlock>
+    <div *ngFor="let todo of todos; index as i">
+        <app-todo-item [todo]="todo" [i]="i" (todoDelete)="deleteTodo($event)" (todoCheckbox)="ToggleTodo($event)"></app-todo-item>
+    </div>
+</ng-template>
+</div>

To do list har/todo-list/src/app/MyComponents/todos/todos.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodosComponent } from './todos.component';
+
+describe('TodosComponent', () => {
+  let component: TodosComponent;
+  let fixture: ComponentFixture<TodosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TodosComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TodosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

To do list har/todo-list/src/app/MyComponents/todos/todos.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import { Todo } from '../../Todo';
+import { TodoItemComponent } from "../todo-item/todo-item.component";
+import { AddTodoComponent } from "../add-todo/add-todo.component";
+
+@Component({
+  selector: 'app-todos',
+  standalone: true,
+  imports: [CommonModule, TodoItemComponent, AddTodoComponent],
+  templateUrl: './todos.component.html',
+  styleUrl: './todos.component.css'
+})
+export class TodosComponent implements OnInit {
+  todos: Todo[] = [];
+  private apiUrl = 'http://localhost:3000/api/todos';
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit() {
+    this.loadTodos();
+  }
+
+  loadTodos() {
+    this.http.get<Todo[]>(this.apiUrl).subscribe(data => {
+      this.todos = data;
+    });
+  }
+
+  addTodo(todo: Todo) {
+    // 1. Log to see if the function is even being called
+    console.log("Adding todo:", todo);
+
+    this.http.post<Todo>(this.apiUrl, todo).subscribe({
+      next: (newTodo) => {
+        console.log("Server saved it!", newTodo);
+        // 2. Add to the local list so it shows up immediately
+        this.todos.push(newTodo);
+      },
+      error: (err) => {
+        console.error("Failed to save to server", err);
+      }
+    });
+  }
+  deleteTodo(todo: Todo) {
+    this.http.delete(`${this.apiUrl}/${todo.sno}`).subscribe(() => {
+      const index = this.todos.indexOf(todo);
+      this.todos.splice(index, 1);
+      console.log("Deleted from server");
+    });
+  }
+
+  ToggleTodo(todo: Todo) {
+    const updatedTodo = { ...todo, active: !todo.active };
+
+    this.http.put<Todo>(`${this.apiUrl}/${todo.sno}`, updatedTodo).subscribe(response => {
+      const index = this.todos.indexOf(todo);
+      this.todos[index].active = !this.todos[index].active;
+      console.log("Status toggled on server");
+    });
+  }
+}

To do list har/todo-list/src/app/Todo.ts

@@ -0,0 +1,6 @@
+export class Todo {
+  sno: number = 0
+  title: string = ""
+  desc: string = ""
+  active: boolean = false
+}

To do list har/todo-list/src/app/app.component.html

@@ -0,0 +1,3 @@
+<div class="container">
+  <app-todos></app-todos>
+</div>

To do list har/todo-list/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'todo-list' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('todo-list');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, todo-list');
+  });
+});

To do list har/todo-list/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TodosComponent } from "./MyComponents/todos/todos.component";
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, TodosComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'todo-list';
+}

To do list har/todo-list/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),  // Handles your navigation
+    provideHttpClient()     // Allows communication with your Node.js server
+  ]
+};

To do list har/todo-list/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

To do list har/todo-list/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>TodoList</title>
+  <base href="/">
+  <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>
+</body>
+</html>

To do list har/todo-list/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

To do list har/todo-list/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

To do list har/todo-list/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

To do list har/todo-list/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

To do list har/todo-list/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

Week-3/Day-1/Javascript-notes.md

@@ -0,0 +1,31 @@
+## JavaScript Functions
+Functions are reusable blocks of code used to perform a specific task.
+
+### Types of functions:
+- Function Declaration
+- Function Expression
+- Arrow Functions (ES6)
+
+### Benefits:
+- Code reusability
+- Better structure
+- Easier debugging
+
+## JavaScript Objects
+Objects store data in key–value pairs.
+
+const user = {
+  name: "Harshit",
+  role: "Intern",
+  skills: ["HTML", "CSS", "JS"]
+};
+
+### Object concepts:
+- Properties
+- Methods
+- Access using dot and bracket notation
+
+### Practical Learning
+- Created reusable functions
+- Accessed object properties
+- Used functions inside objects

Week-3/Day-1/Readme.md

@@ -0,0 +1,25 @@
+# Week 3 – Day 1
+## Advanced JavaScript – Functions and Objects
+
+### Date
+29 December 2025
+
+### Objective
+To understand JavaScript functions and objects for writing modular and structured code.
+
+### Topics Covered
+- Function declaration and usage
+- JavaScript objects
+- Object properties and methods
+
+### Activities Performed
+- Practiced creating functions
+- Worked with objects and methods
+- Executed JS code in browser console
+
+### Learning Outcomes
+- Improved understanding of reusable logic
+- Learned object-oriented basics in JavaScript
+
+### Status
+Completed

Week-3/Day-2/Readme.md

@@ -0,0 +1,26 @@
+# Week 3 – Day 2
+## Advanced JavaScript – ES6 Features
+
+### Date
+30 December 2025
+
+### Objective
+To learn modern JavaScript (ES6) syntax for cleaner and efficient code.
+
+### Topics Covered
+- let and const
+- Arrow functions
+- Template literals
+- Destructuring
+
+### Activities Performed
+- Practiced ES6 syntax
+- Refactored existing code
+- Used modern JS features
+
+### Learning Outcomes
+- Improved code readability
+- Learned modern JavaScript standards
+
+### Status
+Completed

Week-3/Day-2/advanced-javascript.md

@@ -0,0 +1,19 @@
+## ES6 Features
+
+### let & const
+let → block scoped
+const → cannot be reassigned
+
+### Arrow Functions
+const add = (a, b) => a + b;
+
+### Template Literals
+`Hello ${name}`
+
+### Destructuring
+const { name, role } = user;
+
+### Practical Learning
+Converted functions to arrow functions
+Used template strings
+Applied destructuring for cleaner code

Week-3/Day-2/script.js

@@ -0,0 +1,9 @@
+const user = {
+  name: "Harshit",
+  role: "Intern"
+};
+
+const greet = ({ name, role }) =>
+  `Hello ${name}, Role: ${role}`;
+
+console.log(greet(user));

Week-3/Day-3/Readme.md

@@ -0,0 +1,25 @@
+# Week 3 – Day 3
+## Introduction to Angular
+
+### Date
+31 December 2025
+
+### Objective
+To understand Angular framework fundamentals and architecture.
+
+### Topics Covered
+- Angular overview
+- SPA concept
+- Components and modules
+
+### Activities Performed
+- Studied Angular architecture
+- Explored Angular documentation
+- Understood framework structure
+
+### Learning Outcomes
+- Gained conceptual clarity of Angular
+- Prepared for hands-on Angular development
+
+### Status
+Completed

Week-3/Day-3/introduction-angular.md

@@ -0,0 +1,16 @@
+## Introduction To Angular
+
+### What is Angular?
+Angular is a TypeScript-based frontend framework developed by Google for building single-page applications (SPA).
+
+### Key Features
+- Component-based architecture
+- Two-way data binding
+- Dependency injection
+- Modular structure
+
+### Angular Concepts
+- Components
+- Modules
+- Templates
+- Directives

Week-3/Day-4/Reame.md

@@ -0,0 +1,23 @@
+# Week 3 – Day 4
+## Angular Basics
+
+### Date
+01 January 2026
+
+### Objective
+To understand Angular components and project structure.
+
+### Topics Covered
+- Angular components
+- Angular CLI
+- Project folder structure
+
+### Activities Performed
+- Studied component lifecycle
+- Explored Angular CLI commands
+
+### Learning Outcomes
+- Clear understanding of Angular building blocks
+
+### Status
+Completed

Week-3/Day-4/angular-basics.md

@@ -0,0 +1,30 @@
+## Angular Basics – Components & CLI
+
+### Angular CLI
+Angular CLI is a command-line tool that helps in:
+- Creating projects
+- Generating components
+- Running development server
+
+ng new angular-app
+ng serve
+
+### Angular Project Structure
+
+Key folders:
+- src/app → Application logic
+- app.component.ts → Main component
+- app.module.ts → Root module
+
+### Component Lifecycle (Overview)
+- ngOnInit()
+- ngOnDestroy()
+These lifecycle hooks control how components behave during creation and destruction.
+
+### Practical Understanding
+- Explored project folders
+- Studied default component files
+- Understood how Angular loads the root component
+
+### Learning Outcome
+- Gained confidence in understanding Angular project structure and CLI usage.

Week-3/Day-5/Readme.md

@@ -0,0 +1,25 @@
+# Week 3 – Day 5
+## Angular Project Setup
+
+### Date
+02 January 2026
+
+### Objective
+To set up an Angular project and understand initial project structure.
+
+### Topics Covered
+- Angular installation
+- Project creation
+- Development server
+
+### Activities Performed
+- Installed Angular CLI
+- Created Angular project
+- Ran application locally
+
+### Learning Outcomes
+- Successfully set up Angular environment
+- Ready for component development
+
+### Status
+Completed

Week-3/Day-5/angular-project-setup.md

@@ -0,0 +1,25 @@
+## Angular Project Setup
+
+### Environment Setup
+Steps followed:
+- Installed Node.js
+- Installed Angular CLI using npm
+- Created Angular project
+- Started development server
+
+### Running Angular Application
+ng serve
+This command starts a local development server.
+
+### Understanding Initial Files
+- main.ts → Entry point
+- index.html → Root HTML file
+- app.component.html → UI layout
+
+### Practical Work Done
+- Successfully ran Angular app locally
+- Observed live reload feature
+- Modified HTML and saw real-time updates
+
+### Final Learning Outcome
+By the end of Week 3, I built a strong foundation in JavaScript (ES6) and Angular basics, preparing me for advanced Angular concepts in upcoming weeks.

Week-4/Day-1/Reame.md

@@ -0,0 +1,35 @@
+# Week 4 – Day 1: Angular Components
+
+## Date
+05 January 2026
+
+## Objective
+To understand the concept of Angular components and learn how to create, structure, and reuse components in an Angular application.
+
+## Topics Covered
+- Introduction to Angular Components
+- Component Architecture
+- @Component Decorator
+- Component Files (TS, HTML, CSS)
+- Data Binding (Interpolation & Property Binding)
+- Component Communication (Basics)
+
+## Activities Performed
+- Created multiple Angular components using Angular CLI
+- Analyzed the structure of generated component files
+- Implemented interpolation and property binding
+- Embedded child components into the root component
+- Practiced modular UI design using reusable components
+
+## Tools & Technologies Used
+- Angular
+- TypeScript
+- HTML
+- CSS
+- Angular CLI
+
+## Learning Outcome
+Gained a strong understanding of Angular component architecture and how components form the foundation of Angular applications.
+
+## Status
+Completed

Week-4/Day-1/angular-components.md

@@ -0,0 +1,51 @@
+## Building Angular Components
+
+### Introduction
+Components are the core building blocks of Angular applications. Every visible part of an Angular application is controlled by a component. Understanding components deeply is essential for building scalable and maintainable applications.
+
+### What is an Angular Component?
+A component consists of:
+- TypeScript class – handles logic
+- HTML template – defines UI
+- CSS file – styles the UI
+- Decorator (@Component) – connects all parts
+
+### Creating a Component Using Angular CLI
+ng generate component header
+
+This command automatically creates:
+- header.component.ts
+- header.component.html
+- header.component.css
+- header.component.spec.ts
+
+### Component Structure (Understanding in Detail)
+
+### TypeScript File
+- Contains component logic
+- Uses @Component decorator
+- Controls data binding
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+
+### Data Binding in Components
+- Interpolation
+Used to display data in HTML.
+<h1>{{ title }}</h1>
+
+- Property Binding
+Used to bind values to HTML attributes.
+<img [src]="imagePath">
+
+### Practical Work Done
+- Created multiple components
+- Used interpolation and property binding
+- Linked components inside root component
+- Practiced component reusability
+
+### Learning Outcome
+Gained a clear understanding of how Angular components work internally and how they form the UI structure.

Week-4/Day-2/Reame.md

@@ -0,0 +1,32 @@
+# Week 4 – Day 2: Angular Services & Dependency Injection
+
+## Date
+06 January 2026
+
+## Objective
+To learn how to use Angular services for shared logic and understand Dependency Injection for better application design.
+
+## Topics Covered
+- Introduction to Angular Services
+- Creating Services using Angular CLI
+- Dependency Injection (DI)
+- Sharing Data Across Components
+- Service Lifecycle
+
+## Activities Performed
+- Created custom Angular services
+- Injected services into components
+- Implemented reusable business logic
+- Shared data between multiple components
+- Understood how Angular manages dependencies internally
+
+## Tools & Technologies Used
+- Angular
+- TypeScript
+- Angular CLI
+
+## Learning Outcome
+Learned how to separate business logic from UI logic using services and effectively use dependency injection.
+
+## Status
+Completed

Week-4/Day-2/angular-services.md

@@ -0,0 +1,34 @@
+## Angular Services & Dependency Injection
+
+### What is a Service?
+A service is used to store reusable business logic that can be shared across multiple components.
+Examples:
+- Fetching data
+- Authentication logic
+- Utility functions
+
+### Why Services are Needed?
+- Avoids code duplication
+- Improves maintainability
+- Follows separation of concerns
+
+### Creating a Service
+ng generate service data
+
+### Dependency Injection (DI)
+Angular automatically provides services to components using DI.
+constructor(private dataService: DataService) {}
+
+### Using Service Methods
+getMessage() {
+  return "Welcome to Angular Services";
+}
+
+### Practical Work Done
+- Created services
+- Injected services into components
+- Shared data between components
+- Tested service methods
+
+### Learning Outcome
+Understood how Angular manages shared logic efficiently using services and dependency injection.

Week-4/Day-3/Readme.md

@@ -0,0 +1,32 @@
+# Week 4 – Day 3: Angular Routing
+
+## Date
+07 January 2026
+
+## Objective
+To understand Angular routing and implement navigation between multiple components in a single-page application.
+
+## Topics Covered
+- Introduction to Angular Routing
+- RouterModule and Routes
+- router-outlet
+- routerLink
+- Client-side Navigation
+
+## Activities Performed
+- Configured routing module
+- Created multiple route-based components
+- Implemented navigation using routerLink
+- Used router-outlet for dynamic view rendering
+- Tested navigation without page reload
+
+## Tools & Technologies Used
+- Angular
+- TypeScript
+- Angular Router
+
+## Learning Outcome
+Gained practical experience in building single-page navigation using Angular routing.
+
+## Status
+Completed

Week-4/Day-3/angular-routing.md

@@ -0,0 +1,30 @@
+## Angular Routing – Basics
+
+### What is Routing?
+Routing allows navigation between different views without reloading the page.
+
+### Why Routing is Important?
+- Improves user experience
+- Supports Single Page Applications
+- Makes applications structured
+
+### Router Module Setup
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'about', component: AboutComponent }
+];
+
+### Router Outlet
+<router-outlet></router-outlet>
+
+### Navigation Links
+<a routerLink="/home">Home</a>
+
+### Practical Work Done
+- Created routes
+- Linked multiple components
+- Used router-outlet
+- Navigated without page reload
+
+### Learning Outcome
+Learned how Angular handles client-side navigation efficiently.

Week-4/Day-4/Reame.md

@@ -0,0 +1,32 @@
+# Week 4 – Day 4: Template Driven Forms
+
+## Date
+08 January 2026
+
+## Objective
+To learn how to create and manage user input forms using Angular's template-driven approach.
+
+## Topics Covered
+- Introduction to Angular Forms
+- Template Driven Forms
+- ngModel
+- Form Validation
+- Handling User Input
+
+## Activities Performed
+- Designed HTML forms using Angular directives
+- Implemented two-way data binding with ngModel
+- Added form validations (required, email, length)
+- Displayed validation messages
+- Practiced form submission handling
+
+## Tools & Technologies Used
+- Angular
+- HTML
+- TypeScript
+
+## Learning Outcome
+Understood how Angular simplifies form handling using template-driven forms and built validated user input forms.
+
+## Status
+Completed

Week-4/Day-4/angular-forms.md

@@ -0,0 +1,29 @@
+## Angular Forms – Template Driven Forms
+
+### Introduction to Forms
+Forms are used to collect user input and are essential in almost every web application.
+
+### Template Driven Forms
+- Simple and easy to use
+- Logic written mainly in HTML
+- Uses ngModel
+
+### Form Example
+<form>
+  <input type="text" [(ngModel)]="username" name="username">
+</form>
+
+### Form Validation
+- Required fields
+- Minimum length
+- Email format
+<input type="email" required>
+
+### Practical Work Done
+- Created input forms
+- Implemented validation
+- Handled user input
+- Displayed validation messages
+
+### Learning Outcome
+Understood how Angular handles basic forms and validation using template-driven approach.

Week-4/Day-5/Reame.md

@@ -0,0 +1,32 @@
+# Week 4 – Day 5: Reactive Forms
+
+## Date
+09 January 2026
+
+## Objective
+To understand and implement reactive forms in Angular for complex and scalable form handling.
+
+## Topics Covered
+- Introduction to Reactive Forms
+- FormGroup and FormControl
+- Validators
+- Reactive Form Submission
+- Error Handling
+
+## Activities Performed
+- Created reactive forms using TypeScript
+- Applied built-in validators
+- Implemented form submission logic
+- Displayed validation errors dynamically
+- Compared reactive forms with template-driven forms
+
+## Tools & Technologies Used
+- Angular
+- TypeScript
+- ReactiveFormsModule
+
+## Learning Outcome
+Developed a strong understanding of reactive forms and learned how to build scalable, controlled forms in Angular.
+
+## Status
+Completed

Week-4/Day-5/angular-reactive-forms.md

@@ -0,0 +1,31 @@
+## Angular Forms – Reactive Forms
+
+### What are Reactive Forms?
+Reactive forms are:
+- More scalable
+- Fully controlled using TypeScript
+- Suitable for complex forms
+
+### Form Group & Form Control
+this.form = new FormGroup({
+  name: new FormControl(''),
+  email: new FormControl('')
+});
+
+### Validators
+Validators.required
+Validators.email
+
+### Advantages of Reactive Forms
+- Better control
+- Easier testing
+- Dynamic form creation
+
+### Practical Work Done
+- Created reactive forms
+- Applied validators
+- Handled form submission
+- Displayed error messages
+
+### Final Learning Outcome
+By the end of Week 4, I gained hands-on experience in Angular components, services, routing, and forms, which are essential for building real-world Angular applications.