sai-png / assignment

TASK 1 : Shopping Cart Application

This is a basic shopping cart application built using React's useReducer hook. It allows users to add items to the cart, remove items, and update quantities.

Implementation

The application consists of the following files:

• ShoppingCart.js: Contains the main logic for the shopping cart using useReducer.

• ShoppingCart.css: Styles to enhance the user interface.

• App.js: The entry point of the application.

• index.js: Renders the App component to the root HTML element.

  

TASK 2 : Theme Toggler Project

Welcome to the Theme Toggler project! This simple React project demonstrates the implementation of a theme toggler using useContext. The application allows users to switch between light and dark themes seamlessly.

Implementation

• ThemeToggler.js: Contains the main logic for the theme toggler using useContext and useReducer. Manages the state and actions related to the theme toggler, allowing users to switch between light and dark themes seamlessly.
• ThemeToggler.css: Styles to enhance the user interface of the theme toggler. Provides CSS styles to improve the visual appearance and layout of the theme toggler components.
• App.js: The entry point of the application. Renders the main application component (ThemeToggler) and orchestrates the overall structure of the app.
• index.js: Renders the App component to the root HTML element. Serves as the entry point for the React application, mounting the App component to the root HTML element in the DOM.

TASK 3 : Timer Project

Welcome to the Timer project! This React project showcases a custom hook, useTimer, for handling a timer. The application includes a timer component that displays the elapsed time, utilizing the useEffect and useState hooks to update the time every second.

Implementation

• Timer.js: Contains the main logic for the timer component, utilizing the useEffect and useState hooks to display the elapsed time every second.
• Timer.css: Styles to enhance the user interface of the timer component. Provides CSS styles to improve the visual appearance and layout of the timer display.
• useTimer.js: A custom hook that encapsulates the timer logic. Utilizes useEffect and useState to handle the elapsed time logic, providing a reusable and modular solution.
• App.js: The entry point of the application. Renders the main application component (Timer) and orchestrates the overall structure of the app.
• index.js: Renders the App component to the root HTML element. Serves as the entry point for the React application, mounting the App component to the root HTML element in the DOM.

TASK 4 : Employee Management System

This React application is designed to manage a list of employees. Each employee comes with details such as name, position, and salary. The application incorporates buttons for modifying and deleting individual employee data.

Implementation

• EmployeeForm.js: Contains the form logic for adding or editing employee details. Includes input fields for name, position, and salary.
• EmployeeForm.css: Styles specific to the employee form. Enhances the visual appearance and layout of the form, aligning with the formal blue and white gradient color scheme.
• Employee.js: Component representing an individual employee. Displays details such as name, position, and salary. Includes buttons for modifying and deleting employee data.
• Employee.css: Styles specific to the individual employee component. Enhances the visual appearance and layout of employee details, maintaining the formal color scheme.
• EmployeeList.js: Contains the main logic for managing and displaying the list of employees. Implements functionality for modifying and deleting individual employee data.
• EmployeeManagementSystem.js: The main component orchestrating the Employee Management System. Renders the EmployeeList and EmployeeForm components to manage the overall system.
• EmployeeManagementSystem.css: Styles specific to the Employee Management System component. Provides a beautiful and formal design with a blue, white, and gradient color scheme. Includes button animations for an enhanced user experience.
• App.js: The entry point of the application. Renders the main application component (EmployeeManagementSystem) and orchestrates the overall structure of the app.