Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/skylar-lorena/goal-getter

A simple task manager web app created with HTML/CSS/JS project that uses a db.json file for storing data that allows users to add, edit, and delete tasks.
https://github.com/skylar-lorena/goal-getter

dbjson fetch-api html-css-javascript javascript

Last synced: 22 days ago
JSON representation

A simple task manager web app created with HTML/CSS/JS project that uses a db.json file for storing data that allows users to add, edit, and delete tasks.

Awesome Lists containing this project

README

        

# Task Manager Web App
## Author
Lorenah M.

### Designing the User Interface
Use HTML and CSS to design a responsive and visually appealing layout. You can use a framework like Bootstrap or Materialize to make it easier to create the UI.

### Reading Data from db.json File
Use JavaScript to read data from the db.json file and display it on the UI. You can use the fetch() function to make HTTP requests to the file and retrieve the data in JSON format.

### Adding New Tasks
Add functionality to allow users to add new tasks. When the user submits the form, the JavaScript code should send a POST request to the db.json file to add the new task.

### Editing Existing Tasks
Add functionality to allow users to edit existing tasks. When the user clicks on an "edit" button for a task, the JavaScript code should retrieve the task data from the db.json file and populate the form fields with the data. When the user submits the updated form, the JavaScript code should send a PUT request to the db.json file to update the task.

### Deleting Tasks
Add functionality to allow users to delete tasks. When the user clicks on a "delete" button for a task, the JavaScript code should send a DELETE request to the db.json file to remove the task.

### Testing the App
Test the app to make sure it works as expected. You can use a tool like json-server to serve the db.json file and test the app locally.

## Cloning the Repo
To clone the repo, run the following command in your terminal:
Replace `` and `` with your GitHub username and the name of the repo you want to clone.

## Setting Up on VS Code
To set up the project on VS Code, follow these steps:
1. Open VS Code.
2. Click on "File" in the top menu.
3. Click on "Open Folder" and select the folder where you cloned the repo.
4. Install the "Live Server" extension in VS Code.
5. Right-click on the "index.html" file and select "Open with Live Server".

## License
This project is licensed under the terms of the MIT license.