Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kmonika26/react-forms-lists-and-keys-and-axios-library
https://github.com/kmonika26/react-forms-lists-and-keys-and-axios-library
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kmonika26/react-forms-lists-and-keys-and-axios-library
- Owner: KMONIKA26
- Created: 2024-05-14T15:53:10.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-14T16:44:14.000Z (6 months ago)
- Last Synced: 2024-05-15T07:11:08.855Z (6 months ago)
- Language: HTML
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React-Forms-Lists-and-keys-and-Axios-library
## 1. Dynamic Greeting Card Display
This project demonstrates the fundamental concepts of `rendering lists in React by creating a simple dynamic greeting card display`. It includes features such as accepting user input to add new greeting cards and rendering a list of greeting cards using the `map()` function.
## Table of Contents
- [Demo](#demo)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Components](#components)
- [Styling](#styling)
- [Contributing](#contributing)
- [License](#license)
## Demo
You can view a live demo of the project [here](#).
## Features
- Create and display greeting cards dynamically.
- User-friendly form to input new greeting cards.
- Responsive and visually appealing design.
- Utilizes React state management and `map()` function for rendering lists.
## Installation
To get a local copy up and running, follow these simple steps:
1. Clone the repository
```bash
git clone: (https://github.com/KMONIKA26/React-Forms-Lists-and-keys-and-Axios-library/blob/main/Dynamic%20Greeting%20Cards.html)
2. Open the index.html file in your preferred web browser.
## Usage
1. Open the index.html file in a web browser.
2. Enter a greeting message and a name in the form fields.
3. Click "Add Greeting Card" to add the new greeting card to the display.
## Components
- GreetingCard Component
This component accepts greeting and name as props and displays them in a styled card format.
- Styling
Basic CSS styling is applied to make the greeting cards visually appealing.
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
* Fork the Project
1. Create your Feature Branch (git checkout -b feature/AmazingFeature)
2. Commit your Changes (git commit -m 'Add some AmazingFeature')
3. Push to the Branch (git push origin feature/AmazingFeature)
4. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
### 2. ToDo List Application
This `ToDo List application` is built using React. It allows users to add, delete, and mark tasks as completed. The application is designed with a user-friendly interface and provides an intuitive experience for managing tasks.
## Features
1. Add Tasks: Users can add new tasks to the list using an input field and a submit button.
2. Delete Tasks: Each task in the list has a delete button that allows users to remove the task.
3. Mark as Completed: Each task has a checkbox to mark it as completed. Completed tasks are displayed with a strikethrough.
# Technologies Used
`React`: A JavaScript library for building user interfaces.
`HTML`: The standard markup language for creating web pages.
`CSS`: Used for styling the application.
`Babel`: A JavaScript compiler that allows you to use next-generation JavaScript.
# Getting Started
- Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
# Prerequisites
* A modern web browser (Google Chrome, Firefox, Safari, etc.)
* A text editor (VS Code, Sublime Text, Atom, etc.)
# Installation
* Clone the Repository: Clone this repository to your local machine using the following command:
git clone: (https://github.com/KMONIKA26/React-Forms-Lists-and-keys-and-Axios-library/blob/main/Todo%20Lists%20Enhancement.html)
* Navigate to the Project Directory:
- cd todo-list-react
- Open the Project in Your Text Editor.
* Open index.html in Your Web Browser: Open the index.html file in your web browser to view the application.
## Code Explanation
The code for this application is contained within the index.html file. Here's a breakdown of the key components and logic:
* HTML Structure:
The HTML structure includes a div with the ID root where the React component will be rendered.
* CSS Styling:
The CSS styles are included within the tag in the <head> section. These styles enhance the visual appearance of the application.
* React Component:
The main functionality is implemented in the ToDoList React component.
* State Management:
useState is used to manage the state of the todos array and the newTodo string.
* Event Handling:
- The addTodo function handles adding new tasks.
- The deleteTodo function handles deleting tasks.
- The toggleComplete function handles marking tasks as completed.
# License
This project is licensed under the MIT License. See the `LICENSE` file for more details.
#### 3. User Profile List Application
This is a `simple React application` that fetches user data from an API and displays it in a list. Users can search for specific users by name using the search bar.
## Features
- Fetches user data from an API (`https://jsonplaceholder.typicode.com/users`).
- Displays user profiles in a list.
- Allows users to search for specific users by name.
## Technologies Used
- React
- Babel (for JSX)
- CSS
## How to Run
1. Clone the repository.
2. Run `npm install` to install dependencies.
3. Run `npm start` to start the development server.
4. Open `http://localhost:3000` in your browser to view the application.
#### 4. Advanced Task Manager
This is a `Task Manager application built with React`. It allows users to `add`,` update`, and `delete tasks`, as well as filter tasks by completion `status` and `assigne`e.
## Table of Contents
* Usage
* Features
* Screenshots
* Technologies Used
* License
# Usage
* *Add a new task*: Fill in the task title and assignee, then click "Add Task".
* *Update a task*: Click the checkbox to toggle completion status.
* *Delete a task*: Click the "Delete" button next to the task.
* *Show incomplete tasks*: Check the "Show Incomplete Tasks" box.
* *Filter tasks by assignee*: Enter the assignee's name in the filter input.
# Features
1. Add, update, and delete tasks.
2. Filter tasks by completion status and assignee.
3. View all tasks or only incomplete tasks.
# Technologies Used
* React
* Axios
* JSON Server
# License
This project is licensed under the MIT License - see the `LICENSE` file for details.
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request with your changes.If you would like to contribute to this project, please fork the repository and submit a pull request. All contributions are welcome!
## Credits
This project was created by [K MONIKA]. You can find me on [https://github.com/KMONIKA26].