Week 4 Day 5: Developed reactive forms using FormGroup and validators

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.