Front End Full Stack

Welcome to the Front End Full Stack repository! This collection of projects showcases foundational web development concepts and coding practices in popular front-end technologies. Each folder contains code for a specific mini-project that demonstrates different functionalities, from simple JavaScript validation to building UIs with ReactJS and AngularJS.

Table of Contents

• About the Projects
• Project Descriptions
  • 1. AJAX (Birthday Greetings)
  • 2. AngularJS (List of Planets)
  • 3. Calculator in React
  • 4. Canvas Drawing
  • 5. JQuery (Fade In)
  • 6. JavaScript Odd/Even & Largest
  • 7. JavaScript Validation Code
  • 8. Tribute to Abdul Kalam in ReactJS
• Getting Started

---

About the Projects

This repository consists of front-end programs that demonstrate basic programming concepts and provide a solid foundation for anyone learning web development. Each project is designed with a specific framework, library, or language feature, enabling developers to explore practical use cases.

Project Descriptions

1. AJAX (Birthday Greetings)

This project uses AJAX to create a dynamic Birthday Greeting application. Users can input their birthday, and the application will fetch a customized greeting message without needing to refresh the page.

• Folder: AJAX (Birthday Greetings)
• Key Concepts: AJAX calls, asynchronous JavaScript, DOM manipulation

2. AngularJS (List of Planets)

In this project, AngularJS is used to display a list of planets in our solar system. The application demonstrates basic AngularJS concepts, including data binding, controllers, and ng-repeat for listing data.

• Folder: AngularJS (List of Planets)
• Key Concepts: AngularJS fundamentals, data binding, Angular directives

3. Calculator in React

This is a simple calculator application built with ReactJS. It performs basic arithmetic operations and showcases React concepts like state management and event handling.

• Folder: Calculator in reacts
• Key Concepts: React components, state, props, event handling

4. Canvas Drawing

This project lets users draw on an HTML canvas element with basic drawing tools, including different colors and brush sizes. The project demonstrates how to use JavaScript to manipulate the HTML5 canvas API.

• Folder: Canvas Drawing
• Key Concepts: Canvas API, JavaScript events, DOM manipulation

5. JQuery (Fade In)

A simple demonstration of the fade-in effect using jQuery. This project allows users to click a button and make a hidden element fade into view.

• Folder: JQuery (Fade In)
• Key Concepts: jQuery effects, DOM manipulation with jQuery

6. JavaScript Odd/Even & Largest

This folder contains basic JavaScript programs:

• Odd/Even Checker: Checks if a number is odd or even.
• Largest Number Finder: Finds the largest number in a given array.
• Folder: JavaScript odd_even and largest
• Key Concepts: JavaScript functions, conditionals, loops, array manipulation

7. JavaScript Validation Code

This project includes a basic form validation setup using JavaScript. The code checks for valid input fields like email, phone number, and required text fields.

• Folder: JavaScript validation Code
• Key Concepts: JavaScript form validation, event handling, regular expressions

8. Tribute to Abdul Kalam in ReactJS

This project is a simple tribute page dedicated to Dr. A.P.J. Abdul Kalam, built with ReactJS. It displays key information about his life and achievements.

• Folder: Tribute to Abdul Kalam in Reactjs
• Key Concepts: React components, JSX, simple UI creation

---

Getting Started

To run these projects on your local machine:

1. Clone the repository

   git clone https://github.com/Princepm02/front-end-full-stack.git
   cd front-end-full-stack

2. Navigate to the project folder you wish to try out.

3. Open the project files in a text editor (e.g., VSCode) and run the index.html file directly, or use a development server if required by the project.

4. For React Projects: Navigate to the React project folder, install dependencies, and start the development server:

   cd react-calculator    # or react-tribute-to-abdul-kalam
   npm install
   npm start

---

Feel free to explore the projects, enhance them, or use them as starting points for your own applications. Happy coding!