Added Task-Manager-API project

dishamodi0910 · Aug 6, 2024 · 694482c · 694482c
1 parent 0815fe5
commit 694482c
Show file tree

Hide file tree

Showing 8 changed files with 421 additions and 0 deletions.
diff --git a/Existing_API_Collection/Task-Manager-API/README.md b/Existing_API_Collection/Task-Manager-API/README.md
@@ -0,0 +1,35 @@
+# Task Manager API
+
+## Project Description
+
+The Task Manager API is a simple yet effective task management application built using Flask. This application allows users to create, read, update, and delete tasks. It features a clean user interface and supports basic task management operations.
+
+## Features
+
+- Add new tasks with title and description.
+- View a list of tasks with options to edit or delete.
+- Responsive design with a modern, dark-themed UI.
+- Background image with blur effect for an enhanced visual experience.
+
+## Technologies Used
+
+- **Flask**: A lightweight WSGI web application framework for Python that provides the core functionality of the application.
+- **Werkzeug**: A comprehensive WSGI web application library that Flask uses for utility functions.
+- **JavaScript (Fetch API)**: Used for making asynchronous HTTP requests to the backend API.
+- **CSS**: Provides styling and layout for the frontend, including responsiveness and visual effects.
+- **HTML**: Structure of the user interface.
+
+## Installation
+Ensure you have a virtual environment set up and activate it. Then, install the required dependencies:
+
+pip install -r requirements.txt
+
+
+### Prerequisites
+
+- Python 3.9 or higher
+- Flask
+- Werkzeug
+
+## Screenshot
+![alt text](image.png)
diff --git a/Existing_API_Collection/Task-Manager-API/image.png b/Existing_API_Collection/Task-Manager-API/image.png
diff --git a/Existing_API_Collection/Task-Manager-API/main.py b/Existing_API_Collection/Task-Manager-API/main.py
@@ -0,0 +1,65 @@
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+import os
+
+app = Flask(__name__, static_folder='static')
+CORS(app)
+
+# Sample data: list of tasks
+tasks = [
+    {"id": 1, "title": "Task 1", "description": "Description of Task 1", "done": False},
+    {"id": 2, "title": "Task 2", "description": "Description of Task 2", "done": False}
+]
+
+# Serve the index.html
+@app.route('/')
+def index():
+    return send_from_directory(app.static_folder, 'index.html')
+
+# Get all tasks
+@app.route('/tasks', methods=['GET'])
+def get_tasks():
+    return jsonify(tasks)
+
+# Get a specific task by ID
+@app.route('/tasks/<int:task_id>', methods=['GET'])
+def get_task(task_id):
+    task = next((task for task in tasks if task["id"] == task_id), None)
+    if task is None:
+        return jsonify({"error": "Task not found"}), 404
+    return jsonify(task)
+
+# Create a new task
+@app.route('/tasks', methods=['POST'])
+def create_task():
+    if request.is_json:
+        new_task = request.get_json()
+        new_task["id"] = len(tasks) + 1
+        tasks.append(new_task)
+        return jsonify(new_task), 201
+    else:
+        return jsonify({"error": "Request must be JSON"}), 400
+
+# Update an existing task by ID
+@app.route('/tasks/<int:task_id>', methods=['PUT'])
+def update_task(task_id):
+    task = next((task for task in tasks if task["id"] == task_id), None)
+    if task is None:
+        return jsonify({"error": "Task not found"}), 404
+
+    if request.is_json:
+        updates = request.get_json()
+        task.update(updates)
+        return jsonify(task)
+    else:
+        return jsonify({"error": "Request must be JSON"}), 400
+
+# Delete a task by ID
+@app.route('/tasks/<int:task_id>', methods=['DELETE'])
+def delete_task(task_id):
+    global tasks
+    tasks = [task for task in tasks if task["id"] != task_id]
+    return '', 204
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/Existing_API_Collection/Task-Manager-API/requirements.txt b/Existing_API_Collection/Task-Manager-API/requirements.txt
@@ -0,0 +1,3 @@
+Flask==2.1.2
+Werkzeug==2.0.3
+flask-cors==3.0.10
diff --git a/Existing_API_Collection/Task-Manager-API/static/bg.jpg b/Existing_API_Collection/Task-Manager-API/static/bg.jpg
diff --git a/Existing_API_Collection/Task-Manager-API/static/index.html b/Existing_API_Collection/Task-Manager-API/static/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task Manager</title>
+    <link rel="stylesheet" href="static/styles.css">
+</head>
+<body>
+    <h1>Task Manager</h1>
+    <div class="container">
+        <div class="left">
+            <h2>Add Task</h2>
+            <div class="form-container">
+                <input type="text" id="title" placeholder="Title">
+                <input type="text" id="description" placeholder="Description">
+                <button onclick="addTask()">Add Task</button>
+            </div>
+        </div>
+        <div class="right">
+            <h2>Tasks</h2>
+            <div id="new-task"></div> <!-- Container for the new task -->
+            <div id="tasks"></div>
+        </div>
+    </div>
+    <script src="static/script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Task-Manager-API/static/script.js b/Existing_API_Collection/Task-Manager-API/static/script.js
@@ -0,0 +1,108 @@
+const apiBaseURL = 'http://127.0.0.1:5000';
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadTasks();
+});
+
+function loadTasks() {
+    fetch(`${apiBaseURL}/tasks`)
+        .then(response => {
+            console.log('Load Tasks Response:', response);
+            return response.json();
+        })
+        .then(tasks => {
+            const tasksDiv = document.getElementById('tasks');
+            tasksDiv.innerHTML = '';
+            tasks.forEach(task => {
+                const taskElement = document.createElement('div');
+                taskElement.className = 'task';
+                taskElement.innerHTML = `
+                    <div>
+                        <strong>${task.title}</strong>
+                        <p>${task.description}</p>
+                    </div>
+                    <div>
+                        <button onclick="editTask(${task.id})">Edit</button>
+                        <button onclick="deleteTask(${task.id})">Delete</button>
+                    </div>
+                `;
+                tasksDiv.appendChild(taskElement);
+            });
+        })
+        .catch(error => console.error('Error loading tasks:', error));
+}
+
+function addTask() {
+    const title = document.getElementById('title').value;
+    const description = document.getElementById('description').value;
+
+    fetch(`${apiBaseURL}/tasks`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ title, description, done: false })
+    })
+    .then(response => {
+        console.log('Add Task Response:', response);
+        return response.json();
+    })
+    .then(newTask => {
+        document.getElementById('title').value = '';
+        document.getElementById('description').value = '';
+
+        const newTaskDiv = document.getElementById('new-task');
+        newTaskDiv.innerHTML = `
+            <div class="task">
+                <div>
+                    <strong>${newTask.title}</strong>
+                    <p>${newTask.description}</p>
+                </div>
+                <div>
+                    <button onclick="removeNewTask()">Close</button>
+                </div>
+            </div>
+        `;
+
+        loadTasks();
+    })
+    .catch(error => console.error('Error adding task:', error));
+}
+
+function removeNewTask() {
+    document.getElementById('new-task').innerHTML = '';
+}
+
+function editTask(taskId) {
+    const newTitle = prompt('Enter new title:');
+    const newDescription = prompt('Enter new description:');
+
+    if (newTitle && newDescription) {
+        fetch(`${apiBaseURL}/tasks/${taskId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ title: newTitle, description: newDescription })
+        })
+        .then(response => {
+            console.log('Edit Task Response:', response);
+            return response.json();
+        })
+        .then(() => {
+            loadTasks();
+        })
+        .catch(error => console.error('Error editing task:', error));
+    }
+}
+
+function deleteTask(taskId) {
+    fetch(`${apiBaseURL}/tasks/${taskId}`, {
+        method: 'DELETE'
+    })
+    .then(response => {
+        console.log('Delete Task Response:', response);
+        loadTasks();
+    })
+    .catch(error => console.error('Error deleting task:', error));
+}