Today you will taste the fruit of your hard work !

Creating a complete task management web app using HTML, CSS, JavaScript, Express, and SQLite is a comprehensive project. Below is a simplified example of a task management web app with basic functionality. Please note that this is a minimal implementation, and you can expand it as needed for your requirements.

Project Structure: #

task-manager-app/
├── public/
│   ├── index.html
│   ├── style.css
│   ├── script.js
├── app.js
├── package.json
└── package-lock.json

Follow these steps to create the task management web app:

Step 1: Set Up Your Project #

Create a project folder, initialize it, and install the required dependencies.

mkdir task-manager-app
cd task-manager-app
npm init -y
npm install express sqlite3 body-parser

Step 2: Create Your HTML File (public/index.html) #

<!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="style.css">
</head>
<body>
    <div class="task-container">
        <h1>Task Manager</h1>
        <input type="text" id="taskInput" placeholder="Add a new task">
        <button onclick="addTask()">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Create Your CSS File (public/style.css) #

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    text-align: center;
}

.task-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #ccc;
}

button {
    background-color: #d9534f;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

button:hover {
    background-color: #c9302c;
}

Step 4: Create Your Express Server (app.js) #

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 3000;
const db = new sqlite3.Database('tasks.db');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static('public'));

db.serialize(() => {
    db.run("CREATE TABLE IF NOT EXISTS tasks (id INTEGER PRIMARY KEY, task TEXT)");
});

app.get('/tasks', (req, res) => {
    db.all('SELECT * FROM tasks', (err, rows) => {
        if (err) {
            res.status(500).json({ error: err.message });
            return;
        }
        res.json({ tasks: rows });
    });
});

app.post('/tasks', (req, res) => {
    const task = req.body.task;
    const stmt = db.prepare("INSERT INTO tasks (task) VALUES (?)");
    stmt.run(task);
    stmt.finalize();
    res.sendStatus(200);
});

app.delete('/tasks/:id', (req, res) => {
    const id = req.params.id;
    const stmt = db.prepare("DELETE FROM tasks WHERE id = ?");
    stmt.run(id);
    stmt.finalize();
    res.sendStatus(200);
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Step 5: Create Your JavaScript File (public/script.js) #

document.addEventListener('DOMContentLoaded', () => {
    getTasks();
});

function getTasks() {
    fetch('/tasks')
        .then(response => response.json())
        .then(data => {
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';
            data.tasks.forEach(task => {
                const li = document.createElement('li');
                li.innerHTML = `
                    ${task.task}
                    <button onclick="deleteTask(${task.id})">Delete</button>
                `;
                taskList.appendChild(li);
            });
        });
}

function addTask() {
    const taskInput = document.getElementById('taskInput');
    const task = taskInput.value;
    if (task.trim() === '') return;
    fetch('/tasks', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ task })
    })
        .then(() => {
            taskInput.value = '';
            getTasks();
        });
}

function deleteTask(id) {
    fetch(`/tasks/${id}`, { method: 'DELETE' })
        .then(() => getTasks());
}

Step 6: Start Your Application #

Run your Node.js server:

node app.js

Access your task management web app in a web browser at http://localhost:3000. You can now add, view, and delete tasks in your web app.

This is a basic example to get you started. You can enhance this app with features like task editing, user authentication, or more advanced styling based on your requirements.

Conclusion: #

Here is How it will looks like :

Great to see you reaching this level !

Your First REAL Web App