Category: javascript

I’m using WordPress for my Website (Demo) with Elementor and have set a self-hosted .webm video (https url and on same site media library) as a background for a container.

I also added a black background for fallback. When I open the page via a link in an Instagram bio (Instagram Username : onur.testaccount), the site displays normally except for the video background – only the black background shows up on iOS Instagram Mobile App.

Using an .mp4 file makes it worse on mobile (iOS): aside from a larger file size on first load, the video initially appears as a small HTML video box, then expands to fill 100% of the viewport a split second later. The .webm file shows up in the correct size immediately and has a much smaller file size.

So, it doesn’t seem to be an issue with .webm or .mp4, and might be related to Instagram’s browser. Another website that uses an Elementor container video background works fine in Instagram’s browser, so I’m not sure why mine isn’t working.

Does anyone have suggestions or a workaround for this or am i allow to post the site url & instagram name?

Tried using webm / mp4 and asked on gutefrage.net / reddit communities.
Tried asking ChatGPT and on my own.
No Dev Tools in Instagram In-App Browser so iam limited.
Inspected what the other website that is using the same tools did differnt

As you can see its an normal Elementor Container – Section with 85vh Height and 100% Witdh

<div class="elementor-element elementor-element-9ada346 e-con-full e-flex e-con e-parent e-lazyloaded" data-id="9ada346" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https://onurzengin.de/wp-content/uploads/2024/10/Startseite_Video_Hintergrund.webm&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}">
        <div class="elementor-background-video-container">
                            <video class="elementor-background-video-hosted elementor-html5-video" autoplay="" muted="" playsinline="" loop="" src="https://onurzengin.de/wp-content/uploads/2024/10/Startseite_Video_Hintergrund.webm" style="width: 1400.78px; height: 787.938px;"></video>
                    </div>      <div class="elementor-element elementor-element-6eaa309 elementor-widget elementor-widget-heading" data-id="6eaa309" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;none&quot;}" data-widget_type="heading.default">
                <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">Get Fit Finally, <span style="color:red">Don't Hesitate </span>Again!</h2>       </div>
                </div>
                <div class="elementor-element elementor-element-a06c4ca elementor-widget elementor-widget-text-editor animated fadeInUp" data-id="a06c4ca" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;fadeInUp&quot;}" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                            <span style="text-decoration: line-through; color: red;">Excuses. Costs. Bindings.</span><br>
1 MONTH MMA TRIAL <br>
Start now &amp; thank yourself in a year.                       </div>
                </div>
                </div>

I want to make a game in Telegram like Hamster Kombat, I’m doing it in node.js (typescript), I’m wondering how the developers of Hamster, for example, stored the players’ progress, a database comes to mind, but I want to understand exactly how to store it.
I asked GPT, GPT said that it is possible to store progress in a smart contract, I have not dealt with smart contracts and therefore I am not sure that this is possible. Who can tell me I will be grateful

I tried to make a smart contract and some kind of nonsense, nothing worked and I began to believe less that this was being done in a smart contract. help)

I have several thousand external links that take the form ‘mysite/linkfile.php=a’. Unsurprisingly, they return page not found. What I want to do is create a file called ‘linkfile.php=a’ and use javascript to obtain the file name (they are all different), remove the ‘=a’ part of the file name (this is consistent) and then redirect the user to ‘mysite/linkfile.php’.

Something like:

<script>
    function myFunction() {
      var url = window.location.pathname; var filename = url.substring(url.lastIndexOf('/')+1);
      document.getElementById("newfilename").innerHTML = filename.replace("=r", "");
      window.location='https://www.mysite/filename';
    }  
// -->
</script>

This works OK until the last line, which cannot recognise the result of `filename.replace(“=r”, “”)` in that URL. Is this purely a syntax issue?
I’m a noobie so any help will be gratefully received.

making a guessing game, and I need help on making my guessing game have a limited number of guesses, and for it to display the amount of guesses remaining left after each guess made by the user.

I tried to create an else if statement to do this, but it doesn’t seem to work.

function main() {
  const minNum = 0;
  const maxNum = 100;
  const answer = Math.floor(Math.random() * (maxNum - minNum + 1));
  let attempts = 0;
  let inGame = true;
  let guess;

  while (inGame) {
    guess = readInt("guess a number between 1 and 100: ");

    if (guess == answer) {
      inGame = false;
      console.log("you have successfully found the number");
    } else if (guess < answer) {
      inGame = true;
      console.log("your guess is too low");
    } else if (guess > answer) {
      inGame = true;
      console.log("your guess is too high");
    } else if (guess == 7) {
      inGame = false;
      console.log("you have failed the guess the number");
    }
  }
}
main();

I am trying to configure my tsconfig.json for a package inside my react native project to add module resolution and make the code cleaner so instead of

import { LABELS } from "../../../constants";

I can just write

import { LABELS } from "src/constants"; or import { LABELS } from "@app-content/constants";

here is my tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@app-content/*": ["./src/*"]
        }
    },
    "include": ["__tests__/**/*", "src/**/*", "typings/*"]
}

so the folder structure is like this:

root
--src
--packages
---src
----components
----constants
---tsconfig.json

The resolution is working correctly on vs-code if I write “src/” or “@app-content/” it shows the correct folders and there are no errors at that time, also the app is running successfully but when I run the command tsc it gives error

error TS2307: Cannot find module 'src/constants' or its corresponding type declarations.

There is a problem with npm library for html minify. I downloaded and declared a library

import htmlmin from 'html-minifier'; 

but when i try to run a gulp task

export const html = () => {
  return gulp.src("source/*.html")
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest("build"));

}
but a got an error

TypeError: htmlmin is not a function

I am pretty sure there is no syntax error but I dont know what is a problem.

I tried different liabraries and more old node.js but I still got same problem

This is another issue related to my JavaScript bingo game and a follow-up to something I received help with.

In my bingo game, I have a method that saves balls that were drawn to an array (ballsDrawn). I have verified that ballsDrawn does in fact get populated with all the balls that have been drawn in the game.

I am working on a method to verify that all the spaces marked on the bingo card do in fact match balls that were drawn. If a person is claiming they have Bingo, I first want to check all the marked spaces to see if the numbers on those spaces match the numbers of the balls drawn. I am trying to filter out any spaces that don’t match, in case the player marked spaces on their card to try and cheat. Once I have all the spaces that are in fact legitimately marked, I will figure out some way to see if they have a bingo.

To check the spaces I first grab all the spaces (querySelectorAll) and then filter so that I only have the ones that are marked. I then get the textContent of those elements to get the number of the space, which I put in markedSpaces. That part is working correctly. I am then using Array.filter() and .includes to see if each number in markedSpaces is in ballsDrawn. If it is, it should be added to the const legitSpaces. I then have a console.log of legitSpaces.

When I am running the game in my browser, the console.log for legitSpaces makes it appear that legitSpaces is empty. However, if I take the numbers from that game for ballsDrawn and markedSpaces and run the code in JSFiddle, it appears that legitSpaces is populated. I’m not sure why the results are different and why legitSpaces is not populating in my code.

Here is the relevant portion of the JavaScript:

const checkIfMarksAreCorrect = () => {
    const spaces = document.querySelectorAll(".marker");
    const markedSpaces = Array.from(spaces)
        .filter((space) => space.classList.contains('marked'))
        .map((markedSpace) => markedSpace.textContent.trim());
    console.log('The marked spaces are: ' + markedSpaces);
    console.log(`checkIfMarksAreCorrect ballsDrawn: ${ballsDrawn}`);
    const legitSpaces = Array.from(markedSpaces)
        .filter((markedNumber) => ballsDrawn.includes(markedNumber));
    console.log('legitSpaces: ' + legitSpaces);
};

The results for the three console.logs in the methods in my latest code run are as follows:

The marked spaces are: 10,12,30,23,34,75
checkIfMarksAreCorrect ballsDrawn: 10,52,40,29,32,23,13,46,45,75,34,70,4,3,16,66,30,60,28,12
legitSpaces:

I put the following in JSFiddle:

const ballsDrawn = [10,52,40,29,32,23,13,46,45,75,34,70,4,3,16,66,30,60,28,12];
const markedSpaces = [10,12,30,23,34,75];
const legitSpaces = Array.from(markedSpaces)
    .filter((markedNumber) => ballsDrawn.includes(markedNumber));
console.log(`legitSpaces: ${legitSpaces}`);

And got the following console.log:

“legitSpaces: 10,12,30,23,34,75”

Any help is appreciated.

I have an SVG file with multiple, sequential animations (1. an arrow appears from left to right; 2. a tirangle grows while changing color; 3. the triangle now shrinks).
I want to include the animated SVG file in my quarto presentation (in a single slide), but I do not know how to control the sequence of the animations.

I tried several things, but I can’t figure it out. In my previous iterations, when I reached the slide that contains the animated SVG, I got one of these situations:
A) all the animation is already finished, or
B) I have to manually go to my touchpad and click into the SVG image to get the animation started (which is not what I want: I need to advance the presentation using only the usual spacebar/arrows keys).

I found many examples of how to show animated SVGs in quarto but for some reason they all include a single animation, not a sequence of events controlled by the presentation workflow.

I need more of a ppt-like slide if you will, where different objects can be animated one by one, triggered by the same default keys in all cases.

I’m working on a couple of tests for a backend created with Express and running with Node. The tests works when I run them separately / individually, but not when I run them together.

npm run test-auth  ==> Ok
npm run test-api   ==> Ok

npm test  ==> Fails

Error message:

1) Authentication
     addUser
       should register a new user:
   TypeError: Cannot read properties of undefined (reading 'execute')
    at Context.<anonymous> (file:///home/k/backend/test/test-authentication.mjs:22:26)
    at process.processImmediate (node:internal/timers:478:21)

The testfiles looks similar, in terms of app, chai.request.execute etc.:

import { use, expect } from 'chai';
import chaiHttp from 'chai-http';
import { app } from '../src/server.mjs';

const chai = use(chaiHttp);

describe('Authentication', function() {

    describe('addUser', function () {
        it('should register a new user', function (done) {
            const email = `${Math.random().toString(36).substring(7)}@disney.com`;
            chai.request.execute(app)
                .post('/graphql')
                .send({
                    query: `
                        mutation {
                            addUser(email: "${email}", password: "donaldduck") {
                                email
                            }
                        }
                    `
                })
                .end((err, res) => {
                    if (err) {
                        console.error(err);
                    }
                    expect(res).to.have.status(200);
                    expect(res).to.be.json;
                    expect(res.body).to.have.property('data');
                    expect(res.body.data).to.have.property('addUser');
                    expect(res.body.data.addUser).to.have.property('email', email);
                    done();
                });
        });
    });
});

My scripts looks like this:

  "scripts": {
    "test": "NODE_ENV=test mocha 'test/test-*.mjs' --experimental-modules --timeout 5000 --exit",
    "test-auth": "NODE_ENV=test mocha test/test-authentication.mjs --experimental-modules --timeout 5000 --exit",
    "test-api": "NODE_ENV=test mocha test/test-api.mjs --experimental-modules --timeout 5000 --exit",
    "start": "node src/server.mjs"
  },

I did try a couple of things, such as adding --flag to test, change chai.request.execute(app) to chai.request(app), etc. and am now stuck, at least if I want the tests to be in separate files.

I have a preact frontend with a FastAPI backend. Everything works fine on localhost.

But I had problems reaching my server, from another ip-address, which i solved by changing the fetches from http://localhost:8000 to the ip address of the server machine. E.g. http://192.168.0.99:8000.

I am using the server on a raspberry pi which can change network, which is why i cannot use a static ip-address in the proxy. That’s how i came up with the following solution:

vite.config.js

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import os from 'os';

function getLocalIpAddress() {
    const interfaces = os.networkInterfaces();
    for (const name of Object.keys(interfaces)) {
        for (const iface of interfaces[name]) {
            if (iface.family === 'IPv4' && !iface.internal) {
                return "http://" + iface.address + ":8000";
            }
        }
    }
    return 'http://127.0.0.1:8000';
}

function getLocalIpAddressWs() {
    const interfaces = os.networkInterfaces();
    for (const name of Object.keys(interfaces)) {
        for (const iface of interfaces[name]) {
            if (iface.family === 'IPv4' && !iface.internal) {
                return "ws://" + iface.address + ":8000";
            }
        }
    }
    return 'ws://127.0.0.1:8000';
}

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [preact()],
    server: {
        port: 3000,
        host: '0.0.0.0',
        proxy: {
            '/api': {
                target: getLocalIpAddress(), // Replace with your backend server URL
                changeOrigin: true,
                rewrite: (path) => path.replace(/^/api/, ''),
            },
            '/socket': {
                target: getLocalIpAddressWs(), // Replace with your backend server URL
                changeOrigin: true,
                rewrite: (path) => path.replace(/^/socket/, ''),
            },
        },
    },
});

Is this bad practice? Is there a better solution?

I am using Date Dropper javascript to show prices on a js calendar.

// Get pricing data (this object simulates the way you should obtain your pricing data object)
// 1. Get pricing data (this object simulates the way you should obtain your pricing data object)

let pricingData = {
  "2023/09/01": {
    price: 35,
    average: 1 //low
  },
  "2023/09/02": {
    price: 54,
    average: 2 //mid
  },
  "2023/09/03": {
    price: 76,
    average: 3 //high
  },
  "2023/09/04": {
    price: 19,
    average: 1
  },
  "2023/09/05": {
    price: 20,
    average: 1
  }
  // and so on...
};

I am not using the average so just need date and price.

When ı hardcode the dates as above, the script is working perfectly. But I need to be able to update the prices regularly so I created a table in phpAdmin.

I created a table in phpAdmin and access it to populate a php array. I change the date format to be with slashes as in the example:

<?php


include ("dbnazar.php");

$connect=mysqli_connect("$host","$username","$password","$database");
if (mysqli_connect_errno($connect))
{
    printf("Connect1 failed: %sn", mysqli_connect_error());
    exit();     
}
$query="SELECT avail_date, avail_price1 
FROM Availability
ORDER BY avail_date";

$result = $connect->query($query) or die($mysqli->error.__LINE__);

$numparam=mysqli_num_rows($result);

// GOING THROUGH THE DATA
if($result->num_rows > 0) 
{
    while($row = mysqli_fetch_object($result)) 
    {   
    $newdate = str_replace('-', '/', $row->avail_date);
    $newprice = number_format($row->avail_price1, 0);
    $priceArray[] = array('day'=>$newdate, 'price'=>$newprice);
    }
}

else 
{
    echo "No rates founds for these dates.";        
}

    ?>

Then I copy the php table to a javascript one via Json:

let pricingData = JSON.parse('<?= json_encode($priceArray); ?>');
console .log(pricingData);

and the rest of the script remains the same:

// 2. Initialize Datedropper by setting up the onRender callback

new dateDropper({
  selector: '.economy',
  range: false,
  expandable: true,
  expandedOnly: true,
  minDate: minDate,
  maxDate: maxDate,
  minYear: year,
  maxYear: yearmax,
  startFromMonday: true,
  format: "dd/mm/y",
  lang: "en",
  showArrowsOnHover: false,
  overlay: false,
  doubleView: false,
  startFromMonday: true,
  changeValueTo: '.flightdate',
  jump: "1",
  autoFill: true,
  loopAll: true,
  onRender: function(dates) {

    Object.keys(dates).forEach(function(day){

      let pickerDay = dates[day];
      let pricingDay = pricingData[day];
      console .log(pricingDay); 
      
      let average = 'low';
      
      if(pricingDay.price==0) {
        average = 'high';
        pricingDay.price="---";
      }
      if(pricingDay.price=='---') {
        average = 'high';
      }

      // Create the price node
      let customLabel = document.createElement('div');
      //customLabel.className = `price price--${averageClass(pricingDay.average)}`;
      customLabel.className = `price price--${average}`;
      if(pricingDay.price=="---") {
        customLabel.innerHTML = `${pricingDay.price}`;
      }
      else {
        customLabel.innerHTML = `${pricingDay.price} €`;
      }

      // Append the price node to the day node
      pickerDay.node.appendChild(customLabel);

    });
     
  }
});

However this does not show the prices – the console shows an error

Uncaught TypeError: Cannot read properties of undefined (reading 'price')
    at Newbookingform3.php:167:18
    at Array.forEach (<anonymous>)
    at Object.onRender (Newbookingform3.php:159:24)

I also look at my array in the console and see my date is called date but in the datedropper example in the array it seems to have no name?

let pricingData = {
  "2023/09/01": {
    price: 35,
    average: 1 //low
  },

How can I create an array in exactly the same format as above ? I just need to populate this price table somehow in a way that the data can be updated easily.

I am trying to send data through webrtc datachannel. Below is the my code

//client-side code
 // Connect to the WebSocket server
      var ID = null;
      const ws = new WebSocket("ws://localhost:8080");
      // Setting up peer connection (UDP)
      const localConnection = new RTCPeerConnection();
      const dataChannel = localConnection.createDataChannel("sendChannel");

 

      document.getElementById("Send").addEventListener('click' , function(){
        console.log("Try to sending essage...");
 dataChannel.send("Helllo")
})
      // console.log(Object.getPrototypeOf(ws));
      ws.onopen = () => {
        console.log("Connected to server");

        //const dataChannel = connection.createDataChannel("channel");

        localConnection.onicecandidate = (e) => {
          console.log("New ICE Candidate!" , localConnection.localDescription.type);
          ws.send(JSON.stringify({
                    type: "create"+ localConnection.localDescription.type,
                    data: {
                        id: ID,
                        sdp: localConnection.localDescription
                    }
                }))
         /* ws.send(JSON.stringify({
            type: "ICE",
            data: {
              sdp: localConnection.localDescription
            }
          }));*/
          //ws.send("[Server]:New Ice candidate");
        };

        localConnection.onicecandidateerror = (e) => {
          console.warn("Error: ICE Candidate", e);
        };

        dataChannel.onmessage = (e) =>
          console.log("messsage received!!!" + e.data);
        dataChannel.onopen = (e) => console.log("open!!!!");
        dataChannel.onclose = (e) => console.log("closed!!!!!!");

        // Send a message to the server
        ws.send(JSON.stringify({type: "findLobby" , "message": null}));
      };

      ws.onclose = () => {
        console.log("Disconnected from server");
      };

      ws.onmessage =  (event) => {
       // console.log(Received message from server: ${typeof event.data});
        //if (typeof event.data !== "object") return;
        var data = JSON.parse(event.data);
        switch (data.type) {
          case "createOffer":
            console.log("Creating Offer!");
            localConnection.createOffer()
            .then(o => {
                //console.log(o);
                 localConnection.setLocalDescription(o);
               /* ws.send(JSON.stringify({
                    type: "createOffer",
                    data: {
                        sdp: o
                    }
                }))*/
            });
            break;

          case "createAnswer":
            console.log("reating Answer!");
            console.log("Public session Found: Your are now joining...");
            localConnection.setRemoteDescription(data.data[1].sdp).then(a=> console.log(localConnection.remoteDescription, "Remote connection setup"))
            localConnection.createAnswer().then(a=>{
              console.log(a)
              localConnection.setLocalDescription(a).then(()=> {
                console.log('Local description is setup: ',localConnection.localDescription)
                ws.send(JSON.stringify({
                type: "answer",
                data: {
                  sessionid: data.data[0],
                  sdp: localConnection.localDescription
                }
              }))
              });
           
              
             
            });
            break;

            case "acceptAnswer":
            console.log("Accept Answer: ",event.data)
            let datax = JSON.parse(event.data);
            let answer = datax.data.sdp;
            localConnection.setRemoteDescription(answer).then(a => {
              console.log("establishing connection...");
             //dataChannel.send(JSON.stringify({message: "Hello" , data: datax}))
            })
            break;

          case "message":
            console.log(event.data)
            break;

            case "newclient":
              console.log("New client id" , event.data);
              ID = JSON.parse(event.data).id;
            break;

          default:
            console.log("Invalid Type");
            break;
        }
      };

Server Side code (websocket)

const WebSocket = require('ws');

// Create a WebSocket server listening on port 8080
const wss = new WebSocket.Server({ port: 8080 });
const freeUsers = new Map();
const connected = [];
const clients = new Map();

class PublicLobby{
  constructor(id){
    this.id = id;
    this.players = new Map();
    this.host = null;

  }
}


wss.on('connection', (ws) => {
  var sessionid = generateUniqueId();
  clients.set(sessionid , {
    isJoined: false,
    isFree: true,
    ws: ws,
    });
  // Send a welcome message to the client
  ws.send(JSON.stringify(
    {
      type: 'newclient',
      id: sessionid,
    }
  ))
  ws.send(JSON.stringify({type: 'message' , message: 'Welcome to the WebSocket server!'}));

  // Listen for messages from the client
  ws.on('message', (message) => {
    let m = JSON.parse(message);
    console.log("Free Users:" , freeUsers);
    //console.log("clients:" , clients);
    switch (m.type) {
        case "createoffer":
            if(clients.has(m.data.id)){
              let player = clients.get(m.data.id)
              player.sdp = m.data.sdp;

              if(freeUsers.has(m.data.id)){
                freeUsers.get(m.data.id).sdp = m.data.sdp;
              }
              else{
                freeUsers.set(m.data.id , {
                  isJoined: false,
                  isFree: true,
                  ws: player.ws,
                  ...m.data});

                  ws.send(JSON.stringify({type: "message" , message: "New Session has been created!" }));
              }
             
            }
          
            
            break;

            case "ICE":
             // console.log("Ice data:" , m.data);
              ws.send(JSON.stringify({type: "acceptAnswer" , message: "Ice answer" , data: m.data}))
            break;

        case "createanswer":
          //console.log(m.data);
          const freeUser = freeUsers.entries().next().value;
          if (freeUser && !freeUser[1].ans) {
              freeUser[1].ws.send(JSON.stringify({ type: "acceptAnswer", message: "Answer from client", data: m.data }));
              freeUser[1].ans = true;
          }
            break;
            case "findLobby":
                if(freeUsers.size > 0)
                    ws.send(JSON.stringify({ type: "createAnswer", message:"Lobby Found you are joining now.." , data: freeUsers.entries().next().value}));
                else
                    ws.send(JSON.stringify({ type: "createOffer", message:"No Session founnd (creating a new public session...)"}))
            break;
        default:
            break;
    }
  });

  // Handle client disconnection
  ws.on('close', () => {
    // freeUsers.get()
    console.log('Client disconnected');
  });
});


function generateUniqueId() {
    return `session_${Math.random().toString(36).substr(2, 9)}`;
  }
console.log('WebSocket server is running on ws://localhost:8080');

I am trying to sending data through WEBRTC data-channel for simple multiplayer game. The datachannel is successfully opened but when i try to send a message through it nothing happens.
No errors were displayed in console.

not sure what is wrong with my code.

Please Help me.thanks

My application takes as input a multi-page PDF. I’d like to turn that PDF into images, all in the browser in my react application.

Then, I’d like to be be able to upload those images to my Firebase Storage instance.

Which React JS library would enable me to accomplish this?

I cant seem to figure this out. I am using Next.js, typescript, and chakraUi.

• When viewing my application through inspect tools, it works exactly as envisioned.
• When viewing my application through mobile it works as envisioned.
• But when viewing on my physical iPad instead inspect tools, it is all the way zoomed in.
• I could fix this by getting rid of ‘fixed’ in my desktop media query, but I want to keep fixed for desktop
• I have tried many things including a scoping amount of recommendations from chatgpt, but cannot solve this issue.
• Note: I have tried the chakraUI attributes such as base, md, sm, lg, but was not able to get that to work which is why I resorted to classic css styled max and min for media screen.

Is this a chakra specific issue?

< Container 
  maxW="100%"
  id="contact"
  backgroundImage={`url('/imgs/contact_banner.png')`}
  backgroundSize="cover" 
  sx={{
    backgroundAttachment: 'scroll', 
    
    // Media Queries
    '@media screen and (min-width: 390px)': {
      backgroundAttachment: 'scroll',  
    },
    '@media screen and (min-width: 481 and max-width: 768px)': {
      backgroundAttachment: 'scroll',  
      backgroundPosition: 'cover', 
    },
    '@media screen and (min-width: 1024px)': {
      backgroundAttachment: 'fixed',   
      backgroundSize: 'cover',         
      // backgroundPosition: 'center',    
    },
  }}
>

async function all(...params) {
  let result = [];
  for (let promise of params) {
    try {
      let res = await promise;
      result.push(res);
    } catch (e) {
      result.push({
        error: e
      });
    }
  }
  return result;
}

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3);
  }, 3000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(1);
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 2000);
});

all(promise1, promise2, promise3).then(console.log);

I’m working with an async function in JavaScript that processes multiple promises using a try…catch block to handle any potential errors.

I have tried debugging and found that the try catch works for if the last promise rejects and throws error if any intermediate promise rejects.

1. Why does the try…catch seem to only work if the last promise rejects?
2. How can I modify my code to correctly handle rejections for all promises without triggering unhandled promise rejections?