Category: javascript

I want to add optional controls in my game using khan academy. But I don’t know how to do it.
here the code:

https://www.khanacademy.org/computer-programming/platformer-version-1/4766341763612672

Also I tried to put

var OptionalUP = '' ;
var OptionalDOWN = '' ;
var OptionalLEFT = '' ;
var OptionalRIGHT = '' ;

but it didn’t work

it only works for UP and Down

I have a lot of tests in jest/js.
I would like to exclude some of them with tag @bug from run.

test example to exclude from run:

test("@bug Sign In - Check Wrong user credentials: status-code 400", async () => { ... });

i tried run this script:

npx jest --testNamePattern='^(?!.*@bug).*$'

but it run all tests and not exclude tests with tag @bug.

Did someone face with such behavior?

I have a Node.js server running inside a Docker container. I’m trying to connect to the server using WebSockets from a web browser, but as soon as the connection is established, I get an error:

WebSocket connection to 'wss://domain/api/websockets' failed: One or more reserved bits are on: reserved1 = 1, reserved2 = 0, reserved3 = 0.

I accessed the Docker container and tried to connect using

wscat --header "Cookie:connect.sid=session-key" -c ws://127.0.0.1:5200/api/websockets

But got the error:

error: Invalid WebSocket frame: RSV1 must be clear

I should note that during the initial connection, I receive valid data packets from the server, but shortly after, the connection drops with the aforementioned error.

Here’s the code of the server:

import WebSocket, { WebSocketServer } from "ws";
import { Server } from "http";
import { sessionParser } from "../passport";
import { User } from "../../share-types";
import { events, EventsList } from "./events";

export default async (server: Server) => {
    const wsServer = new WebSocketServer({
        noServer: true,
        path: '/api/websockets',
    });
    server.on('upgrade', (request: Express.Request, socket, head) => {
        sessionParser(request, {}, () => {
            const user: User = request.session?.passport?.user;
            if (!user?.ID) return socket.destroy();
            wsServer.handleUpgrade(request as any, socket, head, (ws) => {
                wsServer.emit('connection', ws, request, user);
            });
        })
    });


    wsServer.on('connection', function (socket: WebSocket, request: Express.Request, user: User) {

        socket.on('error', console.error);
        socket.on('message', function (message) {
            try {
                message = JSON.parse(message.toString());
                events.emit(EventsList.NEW_WEB_SOCKET_MESSAGE, { user, message });
            } catch { }

        });
    });

    return wsServer;
};

WS package version:
“ws”: “^8.16.0”

What could be the issue?

I’m working on a project with low resources and many restrictions I need to deploy an app as a subdomain for an existing website, there are already some subdomains configured, and I have to maintain them while my website deploying my website as subdomain.

With this kind of structure:

https://example.com – https://example.com/example

For the server, we are using CentOS 7, and it is configured with Apache.

There is already configured a virtualhost like this at /etc/httpd/conf.d:

<VirtualHost *:80>
        ServerName example.com
        #Redirect / https://example.com/
RewriteEngine on
RewriteCond %{SERVER_NAME} =example.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

The hosts file is also configured

127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6

I’m new to JavaScript and Node.js, so I tried this script:

import express from 'express';
import logger from 'morgan';


const port = process.env.PORT || 3000;

const app = express();
app.use(logger('dev'));


app.get('/', (req, res) => {
    res.send('Hello World');
});

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

I thought I could open other port, but I’m not sure how that could affect the SSL certificate. I have some issues modifying DNS, so my team prefered avoid to modificate it

In my first attempt, I was using Python, but I encountered too many issues with the server. I tried opening ports and was researching Name-Based Hosting and Virtual Hosting.

This is a follow-up question based on Select x and y on image in particular areas and create a border on it

What I want more to achieve it is to enable clicking directly on the image and automatically selecting a specific area (like number 81) with a border, it should like a feature that calculates which part of the image is being clicked based on the mouse click coordinates relative to the image.

I don’t want to post any code here because it is on the Stackblitz

I don’t understand why people voted to close this question only because they didn’t want to look the code from the other question.

I didn’t want to create same code again and again that is why I have posted the stackblitz link.

But anyway here you have some details.

The previous question got solved but with a follow up code which needs to be done.

The idea it is to select into image and then select particular parts but only to be available to select on numbers on image and nowhere else.

The image is based on coordinates which shows particular numbers.

This is the html.

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of columns">
      <td (click)="showCorner(row)">{{ row.itemNumber }}</td>
      <td (click)="showCorner(row)">{{ row.partNumber }}</td>
    </tr>
  </tbody>
</table>

<div class="flex-1 relative">
  <div class="relative">
    <img
      #imgPath
      (click.double)="addBorder($event)"
      style="width: 832px; max-width: fit-content;"
      src="../../assets/flow-editor/Image/ev00129014.png"
    />
    <div
      id="rec1"
      class="absolute"
      [ngStyle]="{ left: coordinateX + 'px', top: coordinateY + 'px' }"
    ></div>
  </div>
</div>

And this is the TS.

export class AppComponent implements AfterViewInit {
  @ViewChild('imgPath', { static: false }) imgElementRef!: ElementRef;
  coordinateX!: number;
  coordinateY!: number;
  originalCoordinates: any; // To store original coordinates
  columns = [
    {
      itemNumber: '1',
      partNumber: '4400535240',
      coordinates: [
        {
          itemCounter: 0,
          xposition: 970,
          yposition: 375,
        },
      ],
    },
    {
      itemNumber: '2',
      partNumber: '4400541680',
      coordinates: [
        {
          itemCounter: 0,
          xposition: 1282,
          yposition: 522,
        },
      ],
    },
    {
      itemNumber: '4',
      partNumber: '4400541390',
      coordinates: [
        {
          itemCounter: 0,
          xposition: 445,
          yposition: 307,
        },
      ],
    },
  ];

  constructor() {
    // Deep copy of original columns to preserve original coordinates
    this.originalCoordinates = JSON.parse(JSON.stringify(this.columns));
  }

  ngAfterViewInit() {
    // Calculate and apply scaling when the view is initialized
    this.calculateAndApplyScaling();
  }

  private calculateOffset(): number {
    const imgElement = this.imgElementRef.nativeElement as HTMLImageElement;

    // Get various properties
    const imgTopPosition = imgElement.getBoundingClientRect().top;
    const imgOffsetTop = imgElement.offsetTop;
    const windowScrollY = window.scrollY;
    const documentClientTop =
      document.documentElement.clientTop || document.body.clientTop || 0;

    // Log the properties
    console.log('Image Element getBoundingClientRect().top:', imgTopPosition);
    console.log('Image Element offsetTop:', imgOffsetTop);
    console.log('Window scrollY:', windowScrollY);
    console.log('Document clientTop:', documentClientTop);

    return window.scrollY + imgTopPosition;
  }

  showCorner(event: any) {
    // Calculate and apply scaling
    this.calculateAndApplyScaling();

    // Use the scaled coordinates
    this.coordinateX = event.coordinates[0].xposition;
    const offsetY = this.calculateOffset();
    this.coordinateY = event.coordinates[0].yposition + offsetY - 15;

    // Log coordinates to console
    console.log('Selected Coordinates:', this.coordinateX, this.coordinateY);

    // Update the border element
    this.updateBorderElement();
  }

  private calculateAndApplyScaling() {
    const imgElement = this.imgElementRef.nativeElement as HTMLImageElement;
    const currentWidth = imgElement.clientWidth;
    const currentHeight = imgElement.clientHeight;

    console.log(
      'Image Current Width:',
      currentWidth,
      'Current Height:',
      currentHeight
    );

    // Use naturalWidth and naturalHeight properties
    const originalWidth = imgElement.naturalWidth;
    const originalHeight = imgElement.naturalHeight;

    const scaleX = currentWidth / originalWidth;
    const scaleY = currentHeight / originalHeight;

    console.log('Scale Factor X:', scaleX, 'Scale Factor Y:', scaleY);

    // Apply scale factors to each original coordinate
    this.columns.forEach((column, index) => {
      column.coordinates.forEach((coordinate, coordIndex) => {
        const originalCoordinate =
          this.originalCoordinates[index].coordinates[coordIndex];
        coordinate.xposition = originalCoordinate.xposition * scaleX;
        coordinate.yposition = originalCoordinate.yposition * scaleY;

        console.log(
          `Original Coordinates: (${originalCoordinate.xposition}, ${originalCoordinate.yposition}), Scaled Coordinates: (${coordinate.xposition}, ${coordinate.yposition})`
        );
      });
    });
  }

  private updateBorderElement() {
    const recElement = document.getElementById('rec1') as HTMLElement;
    if (recElement) {
      recElement.style.border = '2px solid red';
      recElement.style.width = '25px';
      recElement.style.height = '25px';
      recElement.style.left = this.coordinateX + 'px';
      recElement.style.top = this.coordinateY + 'px';

      console.log(
        'Border Element Updated:',
        `Left: ${this.coordinateX}px, Top: ${this.coordinateY}px`
      );
    }
  }

  addBorder(event: any) {
    console.log('Add Border Event:', event);
    const e = event.target.getBoundingClientRect();
    console.log('Bounding Client Rect:', e);
    const xClientH = event.screenY;
    const xClientY = event.screenX;

    this.coordinateX = xClientY;
    this.coordinateY = xClientH;
    console.log(
      'Coordinates from Event:',
      `X: ${this.coordinateX}, Y: ${this.coordinateY}`
    );

    const recElement = document.getElementById('rec1') as HTMLInputElement;
    if (recElement) {
      recElement.innerHTML =
        "<img src='../../assets/flow-editor/Image/rec.gif' style='width:25px; height:25px;'></img>";
    }
  }
}

The idea it is to select on image and then to create the border exactly the same what is being added when we select a row on table.

An input string controls the movement of a robot, “F” means move 1 step forward, “L” means turn 90 degrees to the left and “R” means turn 90 degrees to the right. E.g. “FLF” moves the robot one step forward, then turns it left by 90 degrees, then moves the robot one step forward.

Write a function that returns the minimum number of commands that the robot needs to return to it’s starting point after following all the input commands. You should return any characters that are not capital F, L, or R. HINT: You may wish to track the robots position using (X,Y) coordinates, assuming it starts at (0,0).

Example:

. “RF” returns 3 (robot must turn twice and move forward one step (e.g. “RRF”)
. “LFRFRFR” returns 1 (robot must step forward to return )
. “FxLxLxFx” returns 0 (robot is already back at starting point )

Execution time limit is 3 secs
Input: string directions
Output: integer

I had this interview question and I passed 7/10 tests with a long-winded approach – I couldn’t copy my code from their IDE. But I tracked the movements successfully, got the right coordinates, and the steps back were easy – (the sum of the absolute values of the x and y coordinates). But then struggled to figure out how I would factor in the minimum amount of commands when considering the direction changes. Can anyone help please? 🙂

I am trying to use the following code to grab my account information from MEXC.

const { clear } = require('console')
const Mexc = require('./dist/js/package')
const client = new Mexc.Spot()
client.config.apiKey = "xxxxx"
client.config.apiSecret = "xxxx"

const prices = client.accountInfo()
console.log(prices)

Unfortunately, I am getting the following error message, please help:

E:Tradingbotmexc-api-sdkdistjspackagenode_moduleshttp-response-objectlibindex.js:51
            throw err;
            ^

Error: Server responded to https://api.mexc.com/api/v3/account?timestamp=1710186033600&signature=dbe50886c46db2a9dd5ba8788ae1be7b353bc0d972bd8f6919f973523ac24a97 with status code 400:
{"code":700002,"msg":"Signature for this request is not valid."}
    at ...

I wonder if there is a way to achieve a structure like this:
1 .full window dimensions mask rect that will prevent pointer events
2. multiple rects with clip path that will create spots that can be clicked (html structure under mask)

It’s possible for a single element with a polygon, but no idea how to make it work with multiple dynamic rects (some way of generating polygon from rects, or is there a way to achieve it in other way without svg)

codepen:
https://codepen.io/mza/pen/poByzre?editors=1111
`

const getWindow = () => ({ w: window.innerWidth, h: window.innerHeight });

function uniqueId(prefix: string) {
  return prefix + Math.random().toString(36).substring(2, 16);
}

const Mask = ({ sizes }) => {
  const maskID = uniqueId('mask__');
  const clipID = uniqueId('clip__');
  const { w, h } = getWindow();

  const width = sizes[0]?.width;
  const height =sizes[0]?.heigh;
  const top = sizes[0]?.top;
  const left = sizes[0]?.left;

  const windowWidth = w;
  const windowHeight = h;

  return (
    <div
      style={{
        opacity: 0.7,
        left: 0,
        top: 0,
        position: 'fixed',
        zIndex: 999,
        pointerEvents: 'none',
        color: '#000',
      }}
    >
      <svg
        width={windowWidth}
        height={windowHeight}
        xmlns="http://www.w3.org/2000/svg"
        style={{
          width: windowWidth,
          height: windowHeight,
          left: 0,
          top: 0,
          position: 'fixed',
        }}
      >
        <defs>
          <mask id={maskID}>
            <rect x={0} y={0} width={windowWidth} height={windowHeight} fill="white" />

            {sizes.map(({ width, height, top, left }, index) => {
              return (
                <rect
                  key={index}
                  x={left}
                  y={top}
                  style={{
                    width,
                    height,
                    fill: 'black',
                    transition: 'width 0.1s, height 0.1s',
                  }}
                />
              );
            })}
          </mask>

          <clipPath id={clipID}>
          </clipPath>
        </defs>


        <rect
          x={0}
          y={0}
          style={{
            width: windowWidth,
            height: windowHeight,
            fill: 'currentColor',
            mask: `url(#${maskID})`,
            pointerEvents: 'none',
          }}
        />

        <rect
          x={0}
          y={0}
          style={{
            width: windowWidth,
            height: windowHeight,
            fill: 'currentcolor',
            pointerEvents: 'auto',
            clipPath: `url(#${clipID})`,
          }}
        />
      </svg>
    </div>
  );
};

const sizes = [
  {
    width: 50,
    height:50,
    top: 100,
    left: 100
  },
  {
    width: 50,
    height:50,
    top: 100,
    left: 200
  }
];

const App = () => {
  return (
    <>
      <div 
        onClick={() => {
          alert('clicked');
        }}
        style={{
          width: "100vw",
          height: "100vh"
        }}
      ></div>
      <Mask sizes={sizes} />
    </>
  )
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App/>);

`

This is the code I currently have, the commented code was my initial try and the movements for the bullet are taken from ChatGPT, but the game continues to crash upon input, please help

'use strict'





const game = new Phaser.Game(1675, 800, Phaser.AUTO, 'game-canvas', { preload, create, update })

let tma
let hp
let dude
let fon
let cursor
let bot
let de1
let de2
let de3
let counter=0
let epc=0
let bul

function preload() {
game.load.image("de1","de1.png")
game.load.image("de2","de2.png")
game.load.image("de3","de3.png")
game.load.image("ba","ba.png")
game.load.image("ts","16x16_tileset_platfprms_sunset(1).png")
game.load.image("bul","bullet.png")
game.load.tilemap("tm",'tm1.json',null,Phaser.Tilemap.TILED_JSON)
game.load.spritesheet('dude','dude-green.288x40.9x1.png',288/9,40/1)
game.load.image("bul","bullet.png")

}

function create() {

crmap()
dudee()
  enemy_spawn()
  enemy_move()
  game.physics.arcade.enable(bul)
}




function update() {
    game.physics.arcade.collide(dude, bot)
dude_move()
counter ++
console.log('counter')


if (game.input.activePointer.isDown && counter>=100) {
    bullet()
    counter=0

}
// if ( cursor.left.isDown) {
//     bul_move_l ()
// }
// else if (cursor.right.isDown) {
//     bul_move_r ()
// }
// else if (cursor.up.isDown) {
//     bul_move_u ()
// }
// else if (cursor.down.isDown) {
//     bul_move_d ()
// }
// if (bul) {

//     if (bul.direction === 'left') {
//         bul_move_l();
//     } else if (bul.direction === 'right') {
//         bul_move_r();
//     } else if (bul.direction === 'up') {
//         bul_move_u();
//     } else if (bul.direction === 'down') {
//         bul_move_d();
//     }
// }
}
function crmap(params) {
     tma = game.add.tilemap('tm')
     tma.addTilesetImage("tileset",'ts')

    bot= tma.createLayer("bot")

    tma.setCollisionBetween(1, 999, true)
}
function dudee() {
dude=game.add.sprite(game.width/2,game.height/2,"dude")
dude.scale.setTo(2)
dude.frame=4
dude.animations.add('left',[0,1,2,3],10,false)
dude.animations.add("right",[5,6,7,8],10,false)
cursor=game.input.keyboard.createCursorKeys()

game.physics.arcade.enable(dude)
dude.body.gravity.y=400
dude.body.collideWorldBounds=true
game.physics.arcade.collide(dude,bot)
}
function dude_move() {
    if(cursor.right.isDown){
        dude.body.velocity.x= 200
        dude.animations.play("right")
    } if(cursor.left.isDown){
        dude.body.velocity.x=-200
        dude.animations.play("left")
    }
    if(cursor.up.justDown ){
        dude.body.velocity.y=-200
        
    }
    if (game.input.keyboard.createCursorKeys().down.isUp && game.input.keyboard.createCursorKeys().right.isUp && game.input.keyboard.createCursorKeys().left.isUp  && game.input.keyboard.createCursorKeys().up.isUp) {
        dude.body.velocity.x=0
       
        dude.frame=4
    }
}
function enemy_spawn() {
   de1= game.add.sprite(game.rnd.integerInRange(0,1675 - 94.5),0, 'de1')
   de1.scale.setTo(0.3)
   game.physics.arcade.enable(de1)
   de1.body.collideWorldBounds=true
game.physics.arcade.collide(de1,bot)
}
function enemy_spawn2 () {
   de2= game.add.sprite(game.rnd.integerInRange(0,1675 - 94.5),0, 'de2')
   de2.scale.setTo(0.3)
   game.physics.arcade.enable(de2)
   de2.body.collideWorldBounds=true
game.physics.arcade.collide(de2,bot)
}
function enemy_spawn3 () {
   de3= game.add.sprite(game.rnd.integerInRange(0,1675 - 94.5),0, 'de3')
   de3.scale.setTo(0.3)
   game.physics.arcade.enable(de3)
   de3.body.collideWorldBounds=true
game.physics.arcade.collide(de3,bot)
}
function enemy_move() {

    de1.body.velocity.setTo(game.rnd.integerInRange(100, 200),0)
    de1.body.bounce.setTo(1)

    de3.body.velocity.setTo(game.rnd.integerInRange(400, 500))
    de3.body.bounce.setTo(1)
}
function enemy_poof1() {
    de1.destroy()
    epc +=1
    enemy_spawn2()
}
function enemy_poof2() {
    de2.destroy()
    epc +=1
    enemy_spawn3()
}
function enemy_poof3() {
    de3.destroy()
    epc +=1
}
function bullet() {
    bul= game.add.image(dude.x,dude.y,"bul")
 
    const playerX = dude.x;
    const playerY = dude.y;

    // Get the game input location (where the user clicks)
    const inputX = game.input.x;
    const inputY = game.input.y;

    // Calculate the direction vector from the player to the input location
    const directionX = inputX - playerX;
    const directionY = inputY - playerY;

    // Normalize the direction vector
    const length = Math.sqrt(directionX * directionX + directionY * directionY);
    const normalizedDirectionX = directionX / length;
    const normalizedDirectionY = directionY / length;

    // Set the velocity of the bullet based on the normalized direction
    const bulletSpeed = 100; // Adjust as needed
    bul.body.velocity.setTo(normalizedDirectionX * bulletSpeed, normalizedDirectionY * bulletSpeed);

}
function bul_move (){

}
// function bul_move_l (){
//     bul.body.velocity.setTo(-100,0)
// }
// function bul_move_r (){
//     bul.body.velocity.setTo(100,0)
// }
// function bul_move_u (){
//     bul.body.velocity.setTo(0,-100)
// }
// function bul_move_d (){
//     bul.body.velocity.setTo(0,100)
// }
function bullet_destroy (){
    bul.destroy()
}

i tried all of the said above but google keeps telling me either bul’s body or its’ velocity is undefined.
I am trying to make it so upon a click the bullet will go from the dude’s location to that of the active pointer in the time of the click

I am using Fuse for my react application. I have one component with some multiple tab and, inside one of this tab, I want to rendere something similar to the Tasks module available on the Fuse React Material (https://react-material.fusetheme.com/apps/tasks/0fcece82-1691-4b98-a9b9-b63218f9deef). (I do not have a deep knowledge of JS and React).

To do that, I have defined this:

const Root = styled(FusePageSimple)(({ theme }) => ({
    '& .FusePageSimple-header': {
        backgroundColor: theme.palette.background.paper
    }
}));

/**
 * The variant tab.
 * @author giraand
 */
function VariantTab(props: VariantTabProps) {
    const { product } = props;
    const routeParams = useParams();
    const [rightSidebarOpen, setRightSidebarOpen] = useState(false);
    const isMobile = useThemeMediaQuery((theme) => theme.breakpoints.down('lg'));

    useEffect(() => {
        setRightSidebarOpen(Boolean(routeParams.id));
    }, [routeParams]);
    
    /* <VariantApp variants={product !== undefined ? product.variants : null} /> */
    /* <VariantsTable variantRows={product !== undefined ? product.variants : null} /> */
    return (
        <Root
            header={<VariantHeader variants={product !== undefined ? product.variants : null} />}
            content={<VariantList variants={product !== undefined ? product.variants : null} />}
            rightSidebarContent={<VariantSidebarContent />}
            rightSidebarOpen={rightSidebarOpen}
            rightSidebarOnClose={() => setRightSidebarOpen(false)}
            rightSidebarWidth={640}
            scroll={isMobile ? 'normal' : 'content'}
        />
    );
}

All the elements are correct and filled with data, but, on the page there I cannot see anything. Do you have any idea? I do not see any error on the console.

If I render the elements without Root with the FusePageSimple I can see the data.

I came across a site named “FurAffinity“, and was toying around with userscripts. I discovered something strange with while being on that site that this JS code does not work (it happens on both on a userscript, and on the devtool’s console):

Array.from(new Set([1,2,2,3]))
// returns "[]" instead of "(3) [1, 2, 3]"

Entering that code on the default page of the browser (appears when you create a new tab) will do the latter result as expected, but not while on FurAffinity.

Is there any explanation of why this occurs? If so, is there any way to re-override it to do the default array method? Also if so, is there any way to prevent websites from overriding any JS methods of the userscript? I already know you can convert a set into an array using a spread syntax ([...ExampleSet]) as a workaround, however I’m concerned about other commonly-used JS methods and functions like String.<Insert method name here> and /<regex>/.test(String) could get altered and not behave as it supposed to do.

Title: CORS Policy Issue: Blocked XMLHttpRequest Access from localhost:4200 to localhost:5000

Problem:
I’m encountering an issue where I keep getting bombarded with the following error:

Access to XMLHttpRequest at 'http://localhost:5000/compare-with-csv' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. :5000/compare-with-csv:1
Failed to load resource: net::ERR_FAILED
core.mjs:7494 ERROR HttpErrorResponse

Context:
I’m currently working on a project where I have a frontend running on localhost:4200 and a backend on localhost:5000. The frontend is attempting to make a request to the backend, specifically to the endpoint compare-with-csv.

What I’ve Tried:
I’ve already implemented CORS handling on my backend, yet the error persists. I’ve ensured that the CORS middleware is correctly configured to allow requests from localhost:4200. Despite this, the error continues to occur, causing the XMLHttpRequest to fail.

Code Snippets:
Here’s a snippet of my CORS middleware configuration on the backend:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import Chart from 'chart.js/auto';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  //declaring
// Overview Data
  
  // Demographics Section
 

  // Academic Performance Section
  


  // Intervention Insights Section
 
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fetchData();
  }

  fetchData(): void {
    this.http.get<any>('http://localhost:5000/compare-with-csv')
      .subscribe((data: any) => {
        // Overview Data


// Demographics Section

//assing data 
// Academic Performance Section


// Intervention Insights Section


        // Intervention Insights Section
        // Assuming studentsAtRiskData, studentsAtRiskLabels, interventionTrendsData, 
      });

    // Assigning values fetched from backend to variables
consolloging data

// Overview Data

// Demographics Section

// Academic Performance Section

// Intervention Insights Section

  }
}

Question:
What else could be causing this CORS policy error even after ensuring that CORS is correctly implemented on my backend? Is there any additional configuration or troubleshooting step I might be missing?

Any insights or guidance would be greatly appreciated! Thank you in advance.
send me dm if you want the full code

I attempted to resolve the CORS policy error by implementing CORS middleware in the backend code. Specifically, I configured the CORS middleware to allow requests from localhost:4200, which is where my frontend is hosted. Additionally, I ensured that the CORS middleware is correctly configured to allow the appropriate HTTP methods and headers.

My expectation was that by implementing CORS correctly, the error message indicating that the XMLHttpRequest is blocked due to CORS policy would no longer occur. I expected the frontend request to the backend endpoint compare-with-csv to be successfully processed without encountering any CORS-related issues. However, despite implementing CORS, the error persisted, which led me to seek further assistance in troubleshooting the issue.

Is there a way to use Shadcn components in a simple project without any framework?

I tried Vite and manual installation structures. They create .vue and .tsx files for components. I want to know if there is a way to have .js files for components.

I have this sun svg image that switches the page to dark mode:

<svg onclick="myFunction()" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  </path>
</svg>

this is the JavaScript:

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

and this is some CSS:

.dark-mode {
  background: #333;
}

.dark-mode path {
  fill: #fff;
  stroke: #fff;
}

however, I want the svg itself to be switched, too, after clicking on it as a replacement. This is the other svg to be switched to, which is a moon svg image:

<svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
  <path d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  </path>
</svg>

how can this be done, please?

I’m developing a web application that uses the Google Maps API along with the MarkerClustererPlus library to group markers. I’m experiencing an unwanted behavior: whenever I zoom into the map and several clusters dissolve at once, especially when it involves large volumes of markers, the map automatically moves (“pans”) towards the largest sets of ungrouped points. This results in a less than pleasant user experience, as the map moves without direct user intervention.

I want to be able to zoom in on the map and dissolve clusters without the map making automatic movements (“pan”). Is there a way to disable or manually control this behavior so that the map remains static while users zoom in, allowing them to explicitly control the map movement for a smooth and pleasant navigation experience?