Getting username from computer based on which computer being used

Question

I'm creating a Task manager project for my team, what I'm trying to acheive is, when user is clikcing on "Create Task" it should display the user name from their comptuer, but all I'm getting on the browser is this

"Username: {{username}}" instead of the actual computer username.

what am I doing wrong?

here is my code so far

backend code

const http = require("http");
const fs = require("fs");
const path = require("path");
const os = require("os"); // Import the os module

const server = http.createServer((req, res) => {
    if (req.url === "/") {
        const filePath = path.join(__dirname, "task.html");
        let htmlContent = fs.readFileSync(filePath, "utf8");
        // Fetch the computer's username dynamically
        const computerUsername = os.userInfo().username;
        // Replace the {{username}} placeholder with the dynamically fetched username
        htmlContent = htmlContent.replace("{{username}}", `<span id="username">${computerUsername}</span>`);
        res.writeHead(200, { "Content-Type": "text/html" });
        res.end(htmlContent);

    } else if (req.url === "/getUsername") {
        const computerUsername = os.userInfo().username;
        res.writeHead(200, { "Content-Type": "text/plain" });
        res.end(computerUsername);

    } else if (req.url === "/task.js") {
        const filePath = path.join(__dirname, "getUsername.js"); // Correct filename
        fs.readFile(filePath, "utf8", (err, content) => {
            if (err) {
                res.writeHead(500);
                res.end("Error loading getUsername.js");
            } else {
                res.writeHead(200, { "Content-Type": "application/javascript" });
                res.end(content);
            }
        });
    }
});

const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

frontend code

document.addEventListener("DOMContentLoaded", () => {
    const createTaskBtn = document.getElementById("createTaskBtn");
    const taskModal = document.getElementById("taskModal");
    const closeModalBtn = document.querySelector(".close");
    const createTaskForm = document.getElementById("createTask");
    const cancelTaskForm = document.getElementById("cancelTask");
    const taskName = document.getElementById("taskName");
    const taskDescription = document.getElementById("taskDescription");
    const taskStatus = document.getElementById("taskStatus");
    const usernameParagraph = document.querySelector("#taskModal p");

    // Call the function to update the username
    createTaskBtn.addEventListener("click", () => {
        taskModal.style.display = "block";
        const usernameParagraph = document.querySelector("#taskModal p");
        const computerUsername = "{{username}}"; // Keep this placeholder
        usernameParagraph.textContent = "Username: " + computerUsername;     
    });

    closeModalBtn.addEventListener("click", () => {
        taskModal.style.display = "none";
    });

    cancelTaskForm.addEventListener("click", () => {
        taskModal.style.display = "none";
    });

HTML

 <div id="taskModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Create New Task</h2>
            <p id="username">Username:</p>

please help me fixing it