Blancer.com Tutorials and projects – Page 295 – Freelance Projects, Design and Programming Tutorials

app.use(express.json()) is not working in express version [email protected] , but works fine in [email protected]

import express from "express";
const app = express();
import dotenv from "dotenv";
import path from "path";
let _dirname = path.resolve();
import cors from "cors"
import { router } from "./routes.js";
import connectDB from "./src/helper/dbConnection.js";
dotenv.config();
const PORT = process.env.PORT;

app.use(cors)
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(_dirname, "public")));
router(app);

connectDB();

app.listen(PORT, () => {
  console.log("Server listening on PORT:", PORT);
});

**
I am getting error like
TypeError: Cannot destructure property ‘name’ of ‘req.body’ as it is undefined.

I tried a fix for it
instead of writing it like

  const { name } = req.body;

I replaced it with this

  const { name } = req.body ||{};

it resolves the issue but i need the solution from the app.use(express.json()) itself

What is the replacement for app.use(express.json()) in the latest version ? Do they have any ?

how to make a floating copy text that slowly disspear for my website

so my current website https://asmophacy.github.io/website/
does this ()
then it go and copy it to clipboard this is my current js code for my email

function copyText() {
    /* Copy text into clipboard */
    navigator.clipboard.writeText("[email protected]").then(() => {
        // Optional: Add feedback here if you want
        console.log("Email copied via copyText function!");
        // alert("Email copied!"); // Simple feedback
    }).catch(err => {
        console.error("Failed to copy email via copyText function:", err);
    });
}

document.addEventListener('DOMContentLoaded', () => {
// email copy code
    const emailLink = document.querySelector('a.social-button.proton');

    if (emailLink) {


        emailLink.addEventListener('click', (event) => {
            event.preventDefault(); // Prevent navigating to the link's href
            copyText(); // Call your function here

            // Optional: Add the visual feedback logic here if needed,
            // using iconSpan and originalIconHTML like before,
            // since copyText() itself doesn't handle it.
            const iconSpan = emailLink.querySelector('span.icon');
            if (iconSpan) {
                const originalIconHTML = iconSpan.innerHTML;
                iconSpan.textContent = 'Copied';
                 setTimeout(() => {
                    iconSpan.innerHTML = originalIconHTML;
                 }, 2000);
            }
        if (svg) {
            const originalIconHTML = iconSpan.innerHTML;
            iconSpan.textContent = 'Copied';
             setTimeout(() => {
                iconSpan.innerHTML = originalIconHTML;
             }, 2000);
        }
            
            
            
    });

    } else {
        console.warn('Could not find the email link element (a.social-button.proton).');

i want it to instead be like steam where it float and slowly dissapear how do i do that? like it keep the original details there and just have a floating copied text goes up and dissapear
thanks!
(my first post)

In JavaScript how can I get the text insertion point where dragged text was dropped into a texteara?

When text is selected and then dragged into a textarea the browser moves the caret around in the textarea as you drag, showing where the dragged text will be dropped, and when the text is dropped it goes into place at that spot. This is all good default behavior, but now I want to modify the dropped text, but only if it’s dropped into an empty line. In this case I want the dropped text to be surrounded with extra newlines so it ends up on its own paragraph. If the text is dropped into the middle of an existing paragraph I don’t want to change the dropped text.

My problem is how to know where the text is dropped. During either the ‘drop’ event or the ‘dragover’ event I can’t figure out what property to access or what function to call to get the caret position. My workaround at this point is to require the user to first click in the target textarea at the position where the dragged text should be dropped, then I call event.preventDefault() during dragover so that the caret isn’t visible at all during dragover so it’s clear the insertion point can’t be changed, then during ‘drop’ I check event.target.selectionStart to know where the text was dropped.

This basically works, but it’s unnatural for the user to have to click in the desired spot ahead of time. A standard textarea lets the insertion point change during dragover, and I want my special textarea to work that way, too.

Why is my React component not re-rendering after updating state?

I’m building a React app, and I have a component that fetches data and sets it in the state. However, when the state updates, the component doesn’t seem to re-render. I expected the updated data to be shown automatically after the state change, but it’s not happening.

I tried using useState to manage the data and calling the state setter function inside an API fetch. I expected that updating the state would cause the component to re-render with the new data, but the component remains the same. I also tried forcing an update manually, but it didn’t seem to help.

Jitter problem with differential line growth

I’m trying to create a smooth animation using differential line growth.
I can have a snake on the screen grow and fill the space which I want.

It’s made up out of a number of nodes with two forces working on them (cohesion and separation)

It grows and moves as expected but it never settles down, once it fills the space certain particles (usually ones in a straight line) will jitter and jump up and down at a high speed.

I’m sure this is a common problem but I can’t figure out how to fix it.
I would like the snake to settle once it’s fully filled the space but need to fix the jittering first.

here is all the relevant code which will recreate the problem if you press play.
https://editor.p5js.org/spaciousmind/sketches/wNp-8jyop

How to display each part of a comma-separated string on a new line (or table) in HTML using JavaScript?

I’m trying to split a comma-separated string in JavaScript and display each part on a new line within an HTML page. I have the following code:

<head>
    <script>
        const testString = "Hello,World";
    </script>
</head>
<body>
    <div id="output"></div>

    <script>
        const parts = testString.split(',');
        document.getElementById('output').innerHTML = `
            <p>${parts[0]}</p>
            <p>${parts[1]}</p>
        `;
    </script>
</body>

It works in some HTML editors but not others.

I want to make it more dynamic, so it can handle any number of comma-separated values. How can I modify this code to iterate over the split parts and display each one on a new line or all values in a new row in a table, regardless of how many parts there are?

It should work in HTMLFiddle.