Category: javascript

A simple interactive dashboard that displays a list of employee cards. Each card should show basic info and respond visually (using CSS) and behaviorally (using JavaScript) when interacted with.

Features to Implement:

1. Display employee data in cards
   Each card should show:
   Name
   Department
   Salary
   Performance Score
2. Color-coded performance badge (via CSS classes)
   If score ≥ 75 → Green badge
   If score between 50–74 → Yellow badge
   If score < 50 → Red badge
3. Filter employees by department using dropdown/select
4. Highlight card on hover (CSS effect)

I already made a dropdown in the html file that after selecting the list of department it show print out people in the department and linked it to the js file but It won’t link together

I’d like to have the loadConfig function async and just finish after the resource has been loaded. await fetchetc. How can I declare it in this object syntax as an async function?

var QMEM = QMEM || {
    config : null,
    loadConfig : function(url) {
        console.log('url = ', url);
        fetch(url)
        .then(res => res.json())
        .then(out => {
            this.config = out;
        })
        .catch(err => console.log(err));
    },
    logConfig : function() {
        console.log('current configuration:n', this.config);
    }
};
QMEM.loadConfig(myConfigUrl);
QMEM.logConfig();

I have a dataset of 5,000 webinars, and I want to display 50 webinars initially, with the remaining accessible via pagination. I also want to implement a faceted search based on categories, along with a general search functionality.

My plan is to load all the webinar details as JSON on the frontend and build the faceted search, pagination, and search entirely on the client side.

Is there any open-source JavaScript library available that supports this functionality using plain JavaScript/jquery?

Here is the case:

function printTable(n) { 
    for (let i = 1; i <= 10; ++i) {
        console.log( n + " * " +i + " = " + n * i);
    }
}

Why time complexity is O(1)? Main function is called n times.

In comparison to this example:

function findSum(n) {
    let sum = 0;
   
  // iterating over all the numbers 
  // between 1 to n
  
    for (let x = 1; x <= n; x++) {
        sum = sum + x;
    }
    return sum;
}

and here time complexity is O(n).

Is this a mistake or I do not understand something?

When I try to run TS Plus inside an iframe from my personal web site is returning error related to cookies. What should I do ?

Error: Failure by cookies

I have two handlers assigned to a konvajs shape with the shape’s on function. They respond to the ‘click’ event and ‘contextmenu’ event. After it responds to a ‘contextmenu’ event, a ‘click’ event is also emitted. I want to suppress the ‘click’ event if there is a ‘contextmenu’ event. How can I do that?

I have tried using:

e.evt.preventDefault();
e.evt.stopPropagation();
e.cancelBubble = true;

but that does not work.

const width = 400;
const height = 300;

const stage = new Konva.Stage({
      container: '.static-canvas', 
      width: width, 
      height: height
});

const layer = new Konva.Layer();

const pentagon = new Konva.RegularPolygon({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      sides: 5,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4
});

layer.add(pentagon);
stage.add(layer);

pentagon.on( 'click', (e) => {
    e.evt.preventDefault();
    e.evt.stopPropagation();
    e.cancelBubble = true;
    console.log( 'click' ) 
});

pentagon.on( 'contextmenu', (e) => {
    e.evt.preventDefault();
    e.evt.stopPropagation();
    e.cancelBubble = true;
    console.log( 'contextclick' );
});

body {
  margin: 0;
  padding: 0;
  background-color: #F0F0F0;
}
.canvas {
    float: left;
    width: 50%; 
}
.static-canvas {
    .konvajs-content {
        background: orange;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/9.0.0/konva.min.js"></script>
<div class="canvas static-canvas"></div>

<section id="what" class="bg-light py-1">
  <div class="container">
    <h2 class="m-heading text-center"><span class="text-primary">What</span> We Do</h2>
    <div class="items">
      <div class="item">
        <i class="fas fa-university fa-2x"></i>
        <h3>Investment Banking</h3>
        <p>Empowering businesses with strategic financing solutions and capital market expertise</p>
      </div>
      <div class="item">
        <i class="fas fa-book-reader fa-2x"></i>
        <h3>Portfolio Management</h3>
        <p>Optimizing asset performance through smart diversification and risk-managed investment strategies.</p>
      </div>
      <div class="item">
        <i class="fas fa-pencil-alt fa-2x"></i>
        <h3>Task & Custodial</h3>
        <p>Blending refined client experience with secure, reliable custodial financial services.</p>
      </div>
    </div>
  </div>
</section>

I have made a project of a website using html,css and JS. I have made the website for desktop but when I tried to make it responsive for widescreen or mobile screen. One section is not getting right. I had the logo on the top and below that h3 and p. Now, in the widescreen I want the logo to be on the side and the text to align to left.On the mobile screen I want to stack them. But, I figured out the logo part but h3 is not getting on top of the p.

Sorry, i really couldn’t find any discussion about that particular subject, so here’s my issue:
I have a very simple script embedded in a static html file that can sort table rows by clicking the header fields. Running the page locally (not localhost, just the static file://), sorting ~10000 table rows goes pretty much instantly (under .3s). But placing that same file on a server and running it from there, slows down each sorting to about 10 seconds, making it essentially unusable. Nothing else is being loaded after the document, all html & js data is self contained.
I understand that the browser needs to reflow the entire page, which is expensive. In fact, i’m even surprised that it runs so fast locally. DevTools give me no hint, as the browser just freezes during sorting, and leaves no trace of what happens for 10s.
Same behaviour in chrome & firefox.
Any ideas why the performance differs by almost two orders of magnitude without any client-server communication involved?
Thank you

I’m a newbie and I just starting created a code for my personal website that contains my novels. I’m having a bit of trouble transferring the results of my novel into Visual Studio Code. I pasted it, the entire paragraph, but it can’t automatically create

for each sentence.
I’ve searched several websites on Google, even asked for AI help, but it’s still limited, some parts are even omitted by AI. Can anyone help, please?

I want to make all the text code of my novel which was originally like this,

This text is just an example I created for the question I asked. There’s no need to focus on this sentence. I’ve already asked the question, so there’s no need to read it all the way through. Bruh. Did you read it all the way through?

Into this,

This text is just an example I created for the question I asked.

There’s no need to focus on this sentence.

I’ve already asked the question, so there’s no need to read it all the way through

Bruh.

Did you read it all the way through?

I can’t retype the entire text I’ve already written. Please, help me

When using Axios to fetch the API, the response doesn’t seem to look like what I expected. I have made an API to set cookies, but it seems it has no effect at all.

Here is the response with Axios:

{
  "status": "success",
  "message": "OK",
  "result": {
    "biaya_operasional": {
      "biaya_lain": {
        "accounts": [],
        "total": 0
      },
      "biaya_operasional": {
        "accounts": [
          {
            "account_code": "51700",
            "id": "b8d3fd3a-cc27-4af9-a363-9dc190018066",
            "name": "Beban Perjalanan Dinas",
            "running_balance_total": 2000000
          }
        ],
        "total": 2000000
      },
      "total_biaya": 2000000
    },
    "pendapatan": {
      "penghasilan_lain": {
        "accounts": [],
        "total": 0
      },
      "penjualan": {
        "accounts": [],
        "total": 0
      },
      "total_pendapatan": 0
    }
  },
  "meta_data": null
}

and here is the response with Postman:

{
    "status": "success",
    "message": "OK",
    "result": {
        "biaya_operasional": {
            "biaya_lain": {
                "accounts": [
                    {
                        "account_code": "53000",
                        "id": "3b1bc400-b9af-469c-8004-6f5f3091779f",
                        "name": "Beban Lain-lain",
                        "running_balance_total": 0
                    }
                ],
                "total": 0
            },
            "biaya_operasional": {
                "accounts": [
                    {
                        "account_code": "52200",
                        "id": "dc16a934-897e-42eb-89f8-7dc17c9f9cb9",
                        "name": "THR",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51100",
                        "id": "7fb5692f-b7ef-428e-91f3-a6afdc565546",
                        "name": "Biaya Pengerjaan Project",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51400",
                        "id": "b8492a66-4c16-4d95-a618-424615e9205f",
                        "name": "Beban Bunga",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51200",
                        "id": "d9f3e36e-a4f0-4b8a-b823-52e5e2868926",
                        "name": "Beban Gaji dan Upah",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51600",
                        "id": "189853e4-722f-4e4a-bd85-a2d40162a530",
                        "name": "Beban Asuransi",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51500",
                        "id": "99686063-2f02-403d-aa96-384d064e4ef4",
                        "name": "Beban Adm. Bank",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "52100",
                        "id": "f6733461-98a4-4191-a584-96c559b902a9",
                        "name": "Bonus",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51900",
                        "id": "055eb63f-6584-46e2-9e1b-545fc53e7efc",
                        "name": "Beban Internet",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51700",
                        "id": "b8d3fd3a-cc27-4af9-a363-9dc190018066",
                        "name": "Beban Perjalanan Dinas",
                        "running_balance_total": 2000000
                    },
                    {
                        "account_code": "51800",
                        "id": "c072aa38-38a1-49a1-9a4b-c159460026d0",
                        "name": "Beban Listrik",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "52400",
                        "id": "c4c7c5b2-12be-4176-9eb2-7e592d4fe82e",
                        "name": "Beban Sampah",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "52000",
                        "id": "d9292b2f-9aee-4d2c-a3d7-5f5d305da484",
                        "name": "Sumbangan",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "51300",
                        "id": "9b03c438-c33a-468d-8644-c06a92dff96d",
                        "name": "Beban Pajak Rek. Bank",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "52300",
                        "id": "4116c919-2fe9-40b7-80ba-2a3c0aa61587",
                        "name": "Beban Air Galon dan Laundry",
                        "running_balance_total": 0
                    }
                ],
                "total": 2000000
            },
            "total_biaya": 2000000
        },
        "pendapatan": {
            "penghasilan_lain": {
                "accounts": [
                    {
                        "account_code": "42000",
                        "id": "c0cfbf97-b232-4f60-8072-cdf0a16e6fc5",
                        "name": "Pendapatan Lain-lain",
                        "running_balance_total": 0
                    }
                ],
                "total": 0
            },
            "penjualan": {
                "accounts": [
                    {
                        "account_code": "41200",
                        "id": "d77e0b46-90e3-4be1-97e8-d07dd75aeb9e",
                        "name": "Pendapatan Usaha",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "41300",
                        "id": "cf3ff9b2-344c-46b5-8103-c238686ae4f0",
                        "name": "Pendapatan Bunga",
                        "running_balance_total": 0
                    },
                    {
                        "account_code": "41100",
                        "id": "7021f316-5922-414e-9ba8-7e077e256f09",
                        "name": "Pendapatan Jasa",
                        "running_balance_total": 0
                    }
                ],
                "total": 0
            },
            "total_pendapatan": 0
        }
    },
    "meta_data": null
}

This is a bit of my code:

export const api = axios.create({
  baseURL: baseUrl,
  timeout: 10000,
  withCredentials: true,
  headers: {
    Accept: "aplication/json",
    "Content-Type": "aplication/json",
  },
});

api.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const token = localStorage.getItem("auth-token");

    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

const response = await api
        .get<SingleResponse<any, {}>>("report/laba-rugi", {
          params,
        })
        .then((response) => {
          console.log(response.data?.result);
          return response.data;
        })
        .catch((error) => {
          throw new Error(error);
        });

I’m trying to load my development client created with: eas build --platform android --profile development.

When loading this on my phone after typing: npx expo start I get the following error:
node_modulesexpoAppEntry.js: Cannot read properties of undefined (reading ‘next’)

It might have to do with the AppEntry.js file which looks like this:

import { registerRootComponent } from 'expo';
import App from '../../App';

registerRootComponent(App);

What am I doing wrong?

I also have an index.js file in my root directory which looks like this:

import { registerRootComponent } from 'expo';
import App from './App'; // Assumes App.js is in the root directory

// Register the main component so Expo can run the app
registerRootComponent(App);

Any help would be greatly appreciated!

I’ve tried deleting the index.js file but to no avail (blank screen).

I’m making a tube ar experience using THREEjs. I’m having an issue where 10% of the trains are not following the rotation as expected. I have tried using the lookAt() however that didn’t work so created this custom function, see snippet below. The function takes in three parameters where from and to are world positions of the fromStation and toStation. The tol parameter is the precision tolerance to clamp it to a certain direction.

Code snippet:

const getDirection = (from, to) => {
  const x = from.x - to.x
  const y = from.y - to.y
  const z = from.z - to.z
  const total = (x + y + z) / 3
  const dir = total < 0 ? -1 : 1
  return dir
}

const getNormVal = (value, inv, tol) => {
  const inversion = inv ? -1 : 1
  if (value < tol && value > -tol) return 0
  if (value < 0) return -1 * inversion
  if (value > 0) return 1 * inversion
}

const getRotation = (from, to, tol) => {
  const dir = new THREE.Vector3()
  dir.x = getNormVal(from.x - to.x, false, tol)
  dir.y = getNormVal(from.y - to.y, false, tol)
  dir.z = getNormVal(from.z - to.z, false, tol)

  let rotation = 0
  if (dir.x === 1) rotation += 3.14
  if (dir.z === -1 && dir.x === 0) rotation += 1.57
  if (dir.z === 1 && dir.x === 0) rotation += -1.57
  if (dir.x === 1 && dir.z !== 0) rotation += -0.785 * dir.z
  if (dir.x === -1 && dir.z !== 0) rotation += 0.785 * dir.z

  return rotation
}

Image:
image of tube rotation bug

Im working on my own project and just want to build it around full duplex HTTP connections. By the time my project will be finished – i hope that all major browsers will already implement this feature. Major server JS platforms like Deno and Node already implement it but is there any browser where i can work with full duplex HTTP connections right now?

I need help choosing a method for integrating my widget into my client’s application.

My system needs to recognize each user of my client. For simplicity, let’s say my client’s domain is client.com and my domain is widget.com.

The idea is: when a user logs in to the api.client.com backend, a cookie is generated. Every fetch request sent from the client.com frontend (using my widget’s script injected into the page) to api.widget.com must send this cookie to identify the user.

I originally set this cookie to httpOnly: true, but since it’s third-party, it’s blocked in most cases (the cookie domain is .client.com and my API is api.widget.com). I’ve also considered iframes, but they are increasingly blocked and unstable.

So currently, I have two ideas:

1. CNAME approach: My client creates a DNS CNAME like widget.client.com pointing to api.widget.com. My widget sends requests to widget.client.com to allow first-party cookies, which are then forwarded. But this requires heavy work by my client: setting up CNAME, reverse proxy, SSL certificates, etc., which defeats the purpose of an easy-to-use widget.

2. Plain JavaScript access: The user recognition cookie is set with httpOnly: false, so my widget can read it via document.cookie and send it to api.widget.com in headers. This works, but if there’s an XSS vulnerability or malicious browser extension, an attacker could steal the cookie and impersonate the user. It only exposes the user’s chatbot conversations and campaigns, but I still want it secure. I thought of adding:

   • a refreshToken (httpOnly) to refresh the non-httpOnly cookie every 15 minutes,
   • restricting one cookie per IP,
   • reconnecting the user if their IP changes.

This helps, but it’s not bulletproof (if an attacker shares the same IP, it still breaks).

I’ve considered many other methods, but they all have issues with browser blocking. I’m stuck thinking about this constantly and can’t proceed with deployment, documentation, or the project.

Can someone experienced with cookies and web security please help me figure out the best approach?

I really need help choosing a method for integrating my widget into my client’s application.

Basically, my system needs to be able to recognize each user of my client. To reduce confusion, let’s say my client’s domain is client.com and my domain is widget.com.
The idea is this: when a user logs in to the api.client.com backend, a cookie is generated. And then every fetch request sent from the client.com frontend (using my widget’s script injected into the page) to api.widget.com must send this cookie to identify the user.
I originally set this cookie to httpOnly:true, but I realized it’s third-party and therefore blocked in 95% of cases. (The cookie domain is .client.com and my API is api.widget.com). I’ve been thinking a lot about this, considering other methods like iframes, etc., but these too are increasingly blocked by browsers and very unstable.
So currently, I only have two ideas:

1. My client creates a DNS CNAME that goes from widget.client.com to api.widget.com, and my widget sends its requests to widget.client.com to send first-party cookies, which are then forwarded to api.widget.com. But the problem is that this requires a very heavy implementation by my client (not just the CNAME, but also a reverse proxy to configure, SSL/TSL certificate, etc.), all this to install a widget that’s supposed to be easy to use. It would become a real technical ordeal, like AWS.

2. Much simpler: the user recognition cookie is set to httpOnly:false, so my widget retrieves it before each request via document.cookie and sends it to api.widget.com in the headers. It works very well, the problem is that if there’s an XSS flaw or a fraudulent web extension, an attacker can get their hands on this cookie and impersonate the victim (it would be useless, it would just display the victim’s conversations with the chatbot, and their received in-app campaigns, but that’s no reason to do something insecure). I have a few ideas to secure this: additionally generate a refreshToken httpOnly:true that would refresh the cookie httpOnly:false every 15 minutes to limit the attack duration, restrict 1 cookie per 1 IP address, and reconnect the user to their real account each time their IP address changes. This would make the technique more secure, but not foolproof (for example, if the attacker and the target share the same IP address, the flaw is still available).

In short, I really need help. I’ve thought about a lot of methods that I won’t detail here, but they all have a problem, especially with browser blocking. It’s a mess in my head; I spend 16 hours a day thinking about this thing, and even when I sleep, I think about it by accident because until I’ve determined how my client will integrate my system, I can’t deploy, finish the documentation, or move forward with the project.
Please, could someone who knows a lot about cookies/web security help me?