সম্পূর্ণ Project — API দিয়ে User List

বাস্তব প্রজেক্ট: User List অ্যাপ

এই টপিকে আমরা সব শেখা জিনিস একসাথে ব্যবহার করে একটি সম্পূর্ণ CRUD app বানাবো।

HTML কাঠামো

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>User Manager</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>User Manager</h1>

        <form id="userForm">
            <input type="text" id="name" placeholder="নাম" required>
            <input type="email" id="email" placeholder="ইমেইল" required>
            <button type="submit">যোগ করুন</button>
        </form>

        <div id="loader" class="hidden">লোড হচ্ছে...</div>
        <div id="error" class="error hidden"></div>
        <ul id="userList"></ul>
    </div>

    <script src="app.js"></script>
</body>
</html>

CSS (style.css)

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Hind Siliguri", sans-serif;
    background: #f5f5f5;
    padding: 40px 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

h1 { margin-bottom: 24px; color: #2c3e50; }

#userForm {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

button {
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

button:hover { background: #2980b9; }

#userList { list-style: none; }

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

.delete-btn {
    background: #e74c3c;
    padding: 6px 12px;
    font-size: 0.85em;
}

.hidden { display: none; }
.error { color: #e74c3c; padding: 10px; background: #ffeaea; border-radius: 6px; margin: 10px 0; }

JavaScript (app.js)

const API = "https://jsonplaceholder.typicode.com/users";

const form = document.getElementById("userForm");
const list = document.getElementById("userList");
const loader = document.getElementById("loader");
const errorBox = document.getElementById("error");

// Helper: show error
function showError(msg) {
    errorBox.textContent = msg;
    errorBox.classList.remove("hidden");
    setTimeout(() => errorBox.classList.add("hidden"), 3000);
}

// Helper: render users
function renderUsers(users) {
    list.innerHTML = users.map(user => `
        <li data-id="${user.id}">
            <div>
                <strong>${user.name}</strong><br>
                <small>${user.email}</small>
            </div>
            <button class="delete-btn" onclick="deleteUser(${user.id})">
                মুছুন
            </button>
        </li>
    `).join("");
}

// LOAD (GET)
async function loadUsers() {
    loader.classList.remove("hidden");
    try {
        const res = await fetch(API);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const users = await res.json();
        renderUsers(users);
    } catch (err) {
        showError("User লোড করা যায়নি: " + err.message);
    } finally {
        loader.classList.add("hidden");
    }
}

// ADD (POST)
form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();

    try {
        const res = await fetch(API, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name, email })
        });

        if (!res.ok) throw new Error("Create failed");
        const newUser = await res.json();

        // Optimistic UI: নতুন user যোগ করো
        const li = document.createElement("li");
        li.innerHTML = `
            <div><strong>${newUser.name}</strong><br><small>${newUser.email}</small></div>
            <button class="delete-btn" onclick="deleteUser(${newUser.id})">মুছুন</button>
        `;
        list.prepend(li);

        form.reset();
    } catch (err) {
        showError("যোগ করা যায়নি: " + err.message);
    }
});

// DELETE
async function deleteUser(id) {
    if (!confirm("নিশ্চিত মুছতে চান?")) return;

    try {
        const res = await fetch(`${API}/${id}`, { method: "DELETE" });
        if (!res.ok) throw new Error("Delete failed");

        document.querySelector(`li[data-id="${id}"]`)?.remove();
    } catch (err) {
        showError("মুছতে ব্যর্থ: " + err.message);
    }
}

// Initial load
loadUsers();

যা যা শিখলেন

• HTML form ও semantic markup
• CSS flexbox ও styling
• JavaScript async/await
• fetch API দিয়ে REST API call
• GET, POST, DELETE methods
• JSON stringify/parse
• Loading ও error state
• DOM manipulation
• Event handling

🎉 অভিনন্দন! আপনি এখন ওয়েব ডিজাইনের সব মৌলিক টেকনোলজি জানেন — HTML, CSS, JavaScript, jQuery, AJAX, API ও JSON। এখন React, Vue, Next.js বা backend শেখার পালা!