Category: javascript

I am working on a ecommerce project. This is a part of shopping cart. The shopping cart looks like [this][1]. For the plus minus button in each product I am using ajax to increment or decrement. The products are called by loop and for each index there is plus minus button.

Blade file

 @foreach(AppModelCart::totalCarts() as $cart)
 <form id="minusForm">
 @csrf
 <input type="hidden" id="id" name="id" value="{{$cart->id}}">
 <button type="submit" data-id="{{ $cart->id  }}" class="minus-button">-</button> 
 </form>         
 <input id="num" type="text" name="cqty" value="{{ $cart['product_quantity']}}">
<span class="price" >৳- <p id="price">{{ $cart->product->price * $cart->product_quantity }}</p></span>
@endforeach

First I tried this way. But only first index of the loop is working. Its properly incrementing or decrementing the product quantity but only for first product. From 2nd index nothing is works.

<script>
    $("#minusForm").submit(function(e){
        e.preventDefault();
        let id = $("#id").val();
        $('#num').html('');
        $.ajax({
            url:'/carts/minus',
            
            type: "GET",
            data:{
                id : id,
            },
            success:function(data){
                $('#num').val(data.product_quantity);
            },
            error: function() {
                    alert("Error Cart");
                }
        })
    })

I tried with only class. If I click any plus or minus button. It return the same value for every product. So I tried without Id and changed this to

$(".minus-button").submit(function(e){  //----here id to class
        e.preventDefault(); 
        let id = $(this).data('id'); //-----here
        $('#num').html('');
        jQuery.ajax({
            url:'/carts/minus' + id, //-----here
            type: "GET",
            data:{
                id : id,
            },
            success:function(data){
                $('#num').val(data.product_quantity);
            },
            error: function() {
                    alert("Error Cart");
                }
        })
    })

Now nothing is working. How can I update the data using ajax inside a loop?
[1]: https://i.stack.imgur.com/8kcQJ.png

I am working on small application

i want to display the div if the user scroll up to > 100px from the current position
and hide div if the user scroll down to > 50 px from current postion

example code

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 200) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}

<div id="myID" class="bottomMenu hide"></div>

can any one help with code in javascript

Created the multiple radio options, but it is allowing me to select more then one option.

 {item.responseType === "radio" && (
                          <div className="form-control-wrap">
                            {item.options.split(",").map((list, index) => (
                              <Form.Check
                                key={index}
                                label={list}
                                name={list}
                                type="radio"
                                id={list}
                              />
                            ))}
                          </div>
                        )}

What changes need to be done to select only one option ?

Our scenario is:
The guest user enters the site and places one or more orders without the need to register.
And after a while, he decides to register on the site.
Now how to Link Guest Orders to Customer Account after registeration?
I found the following code, but this code only works for users who have already registered but did not log in at the time of purchase.

//assign user in guest order
add_action( 'woocommerce_new_order', 'action_woocommerce_new_order', 10, 1 );
function action_woocommerce_new_order( $order_id ) {
    $order = new WC_Order($order_id);
    $user = $order->get_user();
    
    if( !$user ){
        //guest order
        $userdata = get_user_by( 'email', $order->get_billing_email() );
        if(isset( $userdata->ID )){
            //registered
            update_post_meta($order_id, '_customer_user', $userdata->ID );
        }else{
            //Guest
        }
    }
}

I am trying to write merge sort algorithm myself in javascript but is see that it is not working. I am taking a sample array [9,1,5,3] and trying to sort it. But it is giving me incorrect result but console shows me [3, undefined, undefined, 5]. I am unable to figure out myself where ut is going wrong.Can anyone help me in this

        function merge(arr,start, mid,end){
            const result=[];

            let first=start;
            let index=start;
            let midNext= mid+1;

            while(first<=mid && midNext<=end){
                if(arr[first]<=arr[midNext]){
                    result[index++]=arr[first++]            
                    
                     
                }else{
                    result[index++]=arr[midNext++]            
                    console.log(result)
                }

                while(first<=mid){
                    result[index++]=arr[first++]            
                    console.log(result)
                    }

                while(midNext<=end){
                    result[index++]=arr[midNext++]            
                    console.log(result)
                    }


            }
            for(let i=0;i<=end;i++){
                arr[i]=result[i];
            }
            console.log(arr)


        }
        function mergeSort(arr, start, end){
            if(start==end){return start;}

            let midIndex=Math.floor( start+ (end-start)/2);
            mergeSort(arr,start,midIndex);
            mergeSort(arr,midIndex+1,end);
             merge(arr,start,midIndex, end)
        }```

I’m trying to use Vue Draggable Next for a Vue 3 example page.

I’ve followed guide in the repo. After failing to import Vue Draggable Next component, I’ve started using https://unpkg.com/[email protected]/dist/vue-draggable-next.global.js instead of https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js.

My HTML code is shown in this JSFiddle:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/vue-draggable-next.global.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in bbcourses" :key="item.id">
          <div style="border: 1px #000 solid">{{ item.name }}</div>
        </li>
      </ul>
      <ul>
        <li
          v-for="item in pcourses"
          :key="item.id"
          style="border: 1px #000 solid"
        >
          {{ item.name }}
        </li>
      </ul>
      <draggable
        :list="pcourses"
        group="people"
        @start="log"
        @end="log"
        itemKey="id"
        @change="log"
      >
        <div
          v-for="element in list"
          :key="element.name"
          style="border: 1px #000 solid"
        >
          {{ element.name }}{{ element.id }}
        </div>
      </draggable>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            drag: false,
            message: "Hello Vue!",
            bbcourses: [
              { id: 1, name: "First course" },
              { id: 2, name: "Second course" },
            ],
            pcourses: [
              { id: 1, name: "First course" },
              { id: 2, name: "Second course" },
            ],
          };
        },
        methods: {
          log(event) {
            console.log(event);
          },
        },
      });
      app.component("draggable", VueDraggableNext);
      app.mount("#app");
    </script>
  </body>
</html>

Provide error: "[Vue warn]: Component is missing template or render function." and doesn’t show the draggable list.

I have a website where user upload image, using JavaScript I am converting the image into base64 string..

var ctx = canvas.getContext('2d');

ctx.canvas.width = dimensions.width;

ctx.canvas.height = dimensions.height;

var img = document.getElementsByClassName('croppr-image')[0]; 
       
ctx.drawImage(img, dimensions.x, dimensions.y, dimensions.width, dimensions.height, 0, 0, dimensions.width, dimensions.height);

var base64 = canvas.toDataURL("image/png");

I am using asp.net with c# as my backend service where I again convert this base64 string to image to save it on my server.

 byte[] bytes = Convert.FromBase64String(text);

Now my question is, on android phone this worked perfect but when using iphone to upload image (taken from iphone camara) Asp.net c# throws an error “Invalid base64 length”!!

I don’t understand why??

I’m using Nextjs for a project and I’ve created the following interface to decorate other functions:

import type { NextApiRequest, NextApiResponse, NextApiHandler } from 'next';

interface ApiHandlerDecorator<T, S> {
  <Request extends NextApiRequest, Response extends NextApiResponse>(
    handler: (
      request: Request & T,
      response: Response | NextApiResponse<S>
    ) => ReturnType<NextApiHandler>
  ): (
    request: Request & T,
    response: Response | NextApiResponse<S>
  ) => ReturnType<NextApiHandler>;
}

export default ApiHandlerDecorator;

I have two decorators:

import { verify } from 'jsonwebtoken';

import type { ApiHandlerDecorator } from './interfaces';

import {
  BadRequestError,
  ExpiredCredentialsError,
  InvalidCredentialsError,
  MissingCredentialsError,
  UnexpectedError,
} from './pages/api/errors';

type AuthorizationValidationErrors =
  | MissingCredentialsError
  | InvalidCredentialsError
  | ExpiredCredentialsError
  | UnexpectedError
  | BadRequestError
  | undefined;

const authorizationValidation: ApiHandlerDecorator<
  { headers: { authorization: string } },
  AuthorizationValidationErrors
> = (handler) => async (request, response) => {
  const {
    headers: { authorization },
  } = request;

  let statusCode = 401;
  let json: AuthorizationValidationErrors = new MissingCredentialsError(
    'Missing authorization header'
  );

  if (authorization) {
    try {
      const decodedJwt = verify(authorization, process.env.SECRET_KEY);

      if (
        decodedJwt &&
        typeof decodedJwt === 'object' &&
        'roomId' in decodedJwt &&
        'playerId' in decodedJwt
      ) {
        await handler(
          { ...request, ...{ headers: { authorization } } },
          response
        );
      } else {
        statusCode = 400;
        json = new BadRequestError(
          'Malformed authorization. Missing roomId and playerId.'
        );
      }
    } catch ({ name: errorName }) {
      if (errorName === 'JsonWebTokenError') {
        statusCode = 401;
        json = new InvalidCredentialsError(
          'Invalid authorization. Authorization not signed.'
        );
      } else if (errorName === 'TokenExpiredError') {
        statusCode = 403;
        json = new ExpiredCredentialsError(
          'Expired authorization. Refresh authorization.'
        );
      } else {
        statusCode = 500;
        json = new UnexpectedError(
          'Unexpected error while processing authorization'
        );
      }
    }
  } else {
    response.status(statusCode).json(json);
  }
};

export default authorizationValidation;

and

import type { ApiHandlerDecorator } from './interfaces';

import { decode } from 'jsonwebtoken';
import { BadRequestError, MissingCredentialsError } from './pages/api/errors';

type RoomAndPlayerIdInjectionErrors =
  | BadRequestError
  | MissingCredentialsError
  | undefined;

const roomAndPlayerIdInjection: ApiHandlerDecorator<
  { roomId: string; playerId: string },
  RoomAndPlayerIdInjectionErrors
> = (handler) => async (request, response) => {
  const {
    headers: { authorization },
  } = request;

  if (authorization) {
    const decodedJwt = decode(authorization);

    if (
      decodedJwt &&
      typeof decodedJwt === 'object' &&
      'roomId' in decodedJwt &&
      'playerId' in decodedJwt
    ) {
      await handler(
        {
          ...request,
          roomId: decodedJwt.roomId,
          playerId: decodedJwt.playerId,
        },
        response
      );
    } else {
      response
        .status(400)
        .json(
          new BadRequestError(
            'Malformed authorization. Missing roomId and playerId.'
          )
        );
    }
  } else {
    response
      .status(401)
      .json(
        new MissingCredentialsError(
          'Missing authorization. Authorization header not provided.'
        )
      );
  }
};

export default roomAndPlayerIdInjection;

When I decorate a function like this:

const handler = authorizationValidation(
  roomAndPlayerIdInjection(async (request, response) => {
    // request.headers.authorization is string | undefined
  });
);

If I change call order and do:

const handler = roomAndPlayerIdInjection(
  authorizationValidation(async (request, response) => {
    // request.roomId and request.playerId is undefined
  });
);

But, when I do:

type Handler = typeof handler;

The Handler request parameter is perfectly typed.

Playground with working example

Is this a problem with Typescript or Next.js? Am I doing something wrong? Should I be using experimental decorators instead?

I’m using openssl-nodejs package to use openssl commands to generate CSR and Private key.
We are successfully generating the CSR and Private key files with below code. However, it’s always returning the error response.

async function generateCsr(){
let subject = '';
let password = 'DummyPassword';

subject = `/CN=y1212.website.com/OU=Dp-PD/O=Dummy org/L=mars/C=DJ/[email protected]`;

openssl(
    [
        'req',
        '-sha256',
        '-newkey',
        'rsa:2048',
        '-keyout',
        'y1212.website.com-privkey.pem',
        '-out',
        'y1212.website.com.csr',
        '-subj',
        `${subject}`,
        '-passout',
        `pass:${password}`
    ], function (err, buffer) {
            if (err) console.log('OpenSSL error: ' + err); // RETURNS ERROR DESPITE OF GENERATING CORRECT FIELS
            console.log("string", buffer.toString()); // THIS IS NULL
});
}

generateCsr();

Output:

OpenSSL process ends with code 0
OpenSSL error: Generating a 2048 bit RSA private key
writing new private key to 'openssl/y1212.website.com-privkey.pem'

Question: Why it is always returning the error despite of generating the correct CSR and Private keys. Due to this, we are unable to handle error handling. How can we resolve this issue?

I am making a chess game with html and javascript. The fact is that only the
black and white pawn pieces work for me, and I want to advance, starting with the
white rook. And the case is that it does not work for me, any suggestion?Hello, I am
making a chess game with html and javascript. The fact is that only the black and
white pawn pieces work for me, and I want to advance, starting with the white rook.
And the case is that it does not work for me, any suggestion?

-------------------------------

var movementPrevious=false;
var boxPrevious;
function movePiece(box1,box2){
   var temp;
   if(document.getElementById(box2).textContent=="."){
      temp=document.getElementById(box2).textContent;
      document.getElementById(box2).textContent=document.getElementById(box1).textContent;
      document.getElementById(box1).textContent=temp;
   }
}

function movementWhitePawn(box){
   var row=box.substring(1,3);
   var col=box.substring(0,1);
   var novabox;

   novabox=col+(parseInt(row)+1);
   if(document.getElementById(novabox).textContent=="")
      document.getElementById(novabox).textContent=".";
   if(parseInt(row)==2){
      novabox=col+(parseInt(row)+2);
      if(document.getElementById(novabox).textContent=="")
         document.getElementById(novabox).textContent="."; 
    }
}

function movementWhiteTower(box){
   var row=box.substring(1,3);
   var col=box.substring(0,1);
   var novabox;

   novabox=col+(parseInt(row)+2);
   if(document.getElementById(novabox).textContent=="")
      document.getElementById(novabox).textContent=".";
   if(parseInt(row)==2){
      novabox=col+(parseInt(row)+3);
      if(document.getElementById(novabox).textContent=="")
         document.getElementById(novabox).textContent="."; 
    }
}

function movementBlackPawn(box){
   var row=box.substring(1,4);
   var col=box.substring(0,1);
   var novabox;
   novabox=col+(parseInt(row)-1);
   if(document.getElementById(novabox).textContent=="")
      document.getElementById(novabox).textContent=".";
   if(parseInt(row)==7){
      novabox=col+(parseInt(row)-2);
      if(document.getElementById(novabox).textContent=="")
         document.getElementById(novabox).textContent=".";      
   }
}

function cleaningCounter(){
   var resume_table = document.getElementById("board");
      for (var i = 0, row; row = resume_table.rows[i]; i++) {
      for (var j = 0, col; col = row.cells[j]; j++) {
        if(row.cells[j].textContent==".")
         row.cells[j].textContent="";
      }
    }
}

function movement(box) {
   if(movementPrevious ==false){
    switch(document.getElementById(box).textContent){
        case"♙":
           movementWhitePawn(box);
            boxPrevious=box;
            movementPrevious =true;
            break;
        case "♟":
           movementBlackPawn(box);
            boxPrevious=box;
            movementPrevious =true;
            break;
        case "♖":
           movementWhiteTower(box);
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♜":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♗":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♝":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♘":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♞":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♕":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♛":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♔":
           boxPrevious=box;
            movementPrevious =true;
           break;
        case "♚":
            boxPrevious=box;
            movementPrevious =true;
           break;
        case "":
            boxPrevious=box;
            movementPrevious =true;
    }
}
else {
   movePiece(boxPrevious,box);
   movementPrevious =false;
   cleaningCounter();
   boxPrevious="";

   }
}

<!DOCTYPE html>
<html>
    <head>
        <title> Chess </title>
        <meta charset="UTF-8">
        <script src="chess.js"></script>

        <style>
            .chess-board { border-spacing: 0; border-collapse: collapse; }
            .chess-board th { padding: .5em; }
            .chess-board th + th { border-bottom: 1px solid #000; }
            .chess-board th:first-child,
            .chess-board td:last-child { border-right: 1px solid #000; }
            .chess-board tr:last-child td { border-bottom: 1px solid; }
            .chess-board th:empty { border: none; }
            .chess-board td { width: 2.5em; height: 2.5em; text-align: center; font-size: 32px; line-height: 0;}
            .chess-board .light { background: #ff9d00; }
            .chess-board .dark { background: #ff0000; }

                       
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <h2>Chess</h2>
                    <table class="chess-board" id="board">
                        <tbody>
                            <tr>
                                <th></th>
                                <th>a</th>
                                <th>b</th>
                                <th>c</th>
                                <th>d</th>
                                <th>e</th>
                                <th>f</th>
                                <th>g</th>
                                <th>h</th>
                            </tr>
                            <tr>
                                <th>8</th>
                                <td id="18" class="light" onclick="movement('18');">♜</td>
                                <td id="28" class="dark" onclick="movement('28');">♞</td>
                                <td id="38" class="light" onclick="movement('38');">♝</td>
                                <td id="48" class="dark" onclick="movement('48');">♛</td>
                                <td id="58" class="light" onclick="movement('58');">♚</td>
                                <td id="68" class="dark" onclick="movement('68');">♝</td>
                                <td id="78" class="light" onclick="movement('78');">♞</td>
                                <td id="88" class="dark" onclick="movement('88');">♜</td>
                            </tr>
                            <tr>
                                <th>7</th>
                                <td id="17" class="dark" onclick="movement('17');">♟</td>
                                <td id="27" class="light" onclick="movement('27');">♟</td>
                                <td id="37" class="dark" onclick="movement('37');">♟</td>
                                <td id="47" class="light" onclick="movement('47');">♟</td>
                                <td id="57" class="dark" onclick="movement('57');">♟</td>
                                <td id="67" class="light" onclick="movement('67');">♟</td>
                                <td id="77" class="dark" onclick="movement('77');">♟</td>
                                <td id="87" class="light" onclick="movement('87');">♟</td>
                            </tr>
                            <tr>
                                <th>6</th>
                                <td id="16" class="light" onclick="movement('16');"></td>
                                <td id="26" class="dark" onclick="movement('26');"></td>
                                <td id="36" class="light" onclick="movement('36');"></td>
                                <td id="46" class="dark" onclick="movement('46');"></td>
                                <td id="56" class="light" onclick="movement('56');"></td>
                                <td id="66" class="dark" onclick="movement('66');"></td>
                                <td id="76" class="light" onclick="movement('76');"></td>
                                <td id="86" class="dark" onclick="movement('86');"></td>
                            </tr>
                            <tr>
                                <th>5</th>
                                <td id="15" class="dark" onclick="movement('15');"></td>
                                <td id="25" class="light" onclick="movement('25');"></td>
                                <td id="35" class="dark" onclick="movement('35');"></td>
                                <td id="45" class="light" onclick="movement('45');"></td>
                                <td id="55" class="dark" onclick="movement('55');"></td>
                                <td id="65" class="light" onclick="movement('65');"></td>
                                <td id="75" class="dark" onclick="movement('75');"></td>
                                <td id="85" class="light" onclick="movement('85');"></td>
                            </tr>
                            <tr>
                                <th>4</th>
                                <td id="14" class="light" onclick="movement('14');"></td>
                                <td id="24" class="dark" onclick="movement('24');"></td>
                                <td id="34" class="light" onclick="movement('34');"></td>
                                <td id="44" class="dark" onclick="movement('44');">♖</td>
                                <td id="54" class="light" onclick="movement('54');"></td>
                                <td id="64" class="dark" onclick="movement('64');"></td>
                                <td id="74" class="light" onclick="movement('74');"></td>
                                <td id="75" class="dark" onclick="movement('75');"></td>
                            </tr>
                            <tr>
                                <th>3</th>
                                <td  id="13" class="dark" onclick="movement('13');"></td>
                                <td  id="23" class="light" onclick="movement('23');"></td>
                                <td  id="33" class="dark" onclick="movement('33');"></td>
                                <td  id="43" class="light" onclick="movement('43');"></td>
                                <td  id="53" class="dark" onclick="movement('53');"></td>
                                <td  id="63" class="light" onclick="movement('63');"></td>
                                <td  id="73" class="dark" onclick="movement('73');"></td>
                                <td  id="83" class="light" onclick="movement('83');"></td>
                            </tr>
                            <tr>
                                <th>2</th>
                                <td  id="12" class="light" onclick="movement('12');">♙</td>
                                <td  id="22" class="dark" onclick="movement('22');">♙</td>
                                <td  id="32" class="light" onclick="movement('32');">♙</td>
                                <td  id="42" class="dark" onclick="movement('42');">♙</td>
                                <td  id="52" class="light" onclick="movement('52');">♙</td>
                                <td  id="62" class="dark" onclick="movement('62');">♙</td>
                                <td  id="72" class="light" onclick="movement('72');">♙</td>
                                <td  id="82" class="dark" onclick="movement('82');">♙</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td  id="11" class="dark" onclick="movement('11');"></td>
                                <td  id="21" class="light" onclick="movement('21');">♘</td>
                                <td  id="31" class="dark" onclick="movement('31');">♗</td>
                                <td  id="41" class="light" onclick="movement('41');">♕</td>
                                <td  id="51" class="dark" onclick="movement('51');">♔</td>
                                <td  id="61" class="light" onclick="movement('61');">♗</td>
                                <td  id="71" class="dark" onclick="movement('71');">♘</td>
                                <td  id="81" class="light" onclick="movement('81');">♖</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                 
                
    </body>
</html>

I’m going to make a project using the Google translate api and I’m thinking of uploading this project to a server and just sharing it with my friends. But unfortunately the Api Key that I will use in the project can be accessed clearly in the JavaScript file. This is a very bad situation. To prevent this, I have limited the Google Cloud Api and as far as I understand it is only allowed to be used on the links I allow. It cannot be used on other links. Now my main question is, is this method enough to protect Api from malicious people? Do I need to do anything else? Thank you in advance for your answers.

let arr = [1,2]
let arr2 = ['first','second']

my solution with nested loops

const result = [];
for (let coachId of arr) {
  for (let managerId of arr2)
    result.push({ id1: coachId, id2: managerId });
}


//expected result
[{id1: 1, id2: 'first'}, {id1: 1, id2: 'second'}, {id1: 2, id2: 'first'}, {id1: 2, id2: 'second'}]

I am placing a div on top of an responsive image, like this:

When I resize, I lose the position of the div tag, like this:

How can I resize this overlay div so that its size is proportionally resized and its position is maintained, when the screen size changes?

so I am creating a Private Route but I am getting a partial output means all the content is not visible on the screen and I am getting a warning : You rendered descendant <Routes> (or called useRoutes()) at "/homepage" (under <Route path="/homepage">) but the parent route path has no trailing "*". and when I change path from ‘/homepage’ to ‘/homepage/* I still get partial output but without any warning..

this is the output without any content..

PrivateRoute.js

import React from 'react'
import { Route, Navigate, Routes } from 'react-router-dom'
import { useAuth } from '../Contexts/AuthContext'

export const PrivateRoute = ({ component: Component, ...rest }) => {

    const { currentUser } = useAuth()
    return(
        <Routes>
             <Route
            {...rest}
            render = {props => {
                return currentUser ? <Component {...props} /> : <Navigate to = '/' />
            }}
            >
            </Route>
        </Routes>
    )
}

App.js

<Router>
              <AuthProvider>
                <Routes>
                  <Route exact path = '/' element = {<BrandName/>}/>
                  <Route path = '/signup' element = {<SignUp />} />
                  <Route path = '/login' element = {<Login />} />
                  <Route path = '/homepage' element = {<PrivateRoute component={<HomePage />} />} />
                </Routes>
              </AuthProvider>
</Router>

can anyone solve this ?

Hi intresting moment which i didnt find in google.

How i can scroll to vertical center with flex reverse ?

Problem in example:

i have temp1.scrollHeight = 1000

but in top position of scroll property temp1.scrollTop return
‘-940’ (not -1000)

i think it calculate how scrollHeight-minus selft scroll element height:

How i can center scroll?
(temp1.scrollTop / 2) return 470px not 500px !