Category: javascript

I have a website that has a lot of games including Flash.
Im using Ruffle Emulator to emulate those games.
I have a fullscreen button thats supposed to go in Fullscreen but its not.

I have tried to use this code but it does not work

  // Get the Ruffle player element 
  const ruffle = window.RufflePlayer.newest();

  if (ruffle.fullscreenEnabled) {
    ruffle.enterFullscreen();
    alert("Press ESC to exit fullscreen.");
  } else {
    alert("Fullscreen is not supported.");
  }

If you could help me I would appreaciate it!

Thanks in advance!

‘m trying to use the Next.js Image component to load images from my Cloudflare R2 storage, but I’m encountering a connection error. Despite configuring the next.config.js to include the public URL of my Cloudflare R2 bucket, I keep receiving an ECONNREFUSED error.

Here’s the error message:

Error: connect ECONNREFUSED
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1571:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '', port: 443
}

And this is my next.config.js configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "pub-hidden.r2.dev",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

module.exports = nextConfig;

I’ve verified that the hostname (pub-hidden.r2.dev) is correct and corresponds to my public Cloudflare R2 bucket URL. However, I’m unsure why the connection is refused. Here are a few points for consideration:

The error does not specify an address, which is puzzling.
I’m not using a custom domain; I’m using the provided r2.dev domain.
My Cloudflare R2 bucket is configured for public access.
Could anyone help me understand what I might be missing or doing wrong? Any suggestions on how to troubleshoot or resolve this issue would be greatly appreciated

I want my program to send the errors specified in the catch block in the following code and display it in an EJS file inside a Bootstrap modal, latest version.

The code in my index.js file is as follows

import express from "express";
import bodyParser from "body-parser";
import pg from "pg";

const app = express();
const port = 3000;

const db = new pg.Client({
  user: 'postgres',
  host: 'localhost',
  database: 'World',
  password: 'something',
  port: 5432,
});

db.connect();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));


async function alreadyVisited() {
  const result = await db.query("SELECT country_code FROM visited_countries");
      
  let countriesVisited = [];
  result.rows.forEach((country) => {
    countriesVisited.push(country.country_code);
  });
    return countriesVisited;
}

let totalOfCountries = 0;

app.get("/", async (req, res) => {
  const countriesVisited = await alreadyVisited();
  totalOfCountries = countriesVisited.length;
  res.render('index.ejs', { countries: countriesVisited, total: totalOfCountries });
});

app.post('/add', async (req, res) => {
  const countryChosen = req.body["country"];
  console.log(countryChosen);
  
  try {
    const result = await db.query(
      "SELECT country_code FROM countries WHERE country_name = $1",
      [countryChosen]
    );
    const data = result.rows[0];
    console.log(data);
    const countryCode = data.country_code;
    console.log(countryCode);
    try {
      await db.query(
        "INSERT INTO visited_countries (country_code) VALUES ($1)",
        [countryCode]
      );
      res.redirect("/");
    } catch (err) {
      console.log(err);
      const countriesVisited = await alreadyVisited();
      res.render('index.ejs', {
        countries: countriesVisited,
        total: countriesVisited.length,
        error: "Country has already been added, try again.",
      });
    }
  } catch (err) {
    console.log(err);
    const countriesVisited = await alreadyVisited();
    res.render('index.ejs', {
      countries: countriesVisited,
      total: countriesVisited.length,
      error: `That country does not exist, try again.`,
    });
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

This is the code for my index.ejs file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Travel Tracker</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="./styles/main.css">
</head>

<body>
    <!-- Modal -->
    <% if (locals.error) { %>
    <div class="modal fade" id="errorModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">⚠️ Wait a moment... ⚠️</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <%= error %>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">Understood</button>
          </div>
        </div>
      </div>
    </div>

    <script>
        $('#errorModal').modal("show");
    </script>
    <% } %>

  <form action="/add" method="post">
    <input type="text" name="country" autofocus placeholder="Enter country name">
    <button type="submit" id="submitForm">Add</button>
  </form> 


  <h2 class="total-count">Total of Countries: <%=total%>
  </h2>
<!-- JQuery and bootstrap CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  
  <script>
    const country_codes = "<%= countries %>".split(",") 
    console.log(typeof ("<%= countries %>"))
    country_codes.forEach(code => { 
      $(`#${code}`).css('fill', 'teal');     
      // document.getElementById(code).style.fill = 'teal'
    });

  </script>

</body>

</html>

When I try to enter a country that doesn’t exist, an error appears in the terminal, but this error isn’t passed on to the modal, which is in index.ejs.

Error that appears in the terminal when I enter a non-existent country name:
TypeError: Cannot read properties of undefined (reading ‘country_code’)

When I try to insert a country that already exists in the “visited_countries” table, this error appears and it’s correct because it’s already registered in the table:
error: duplicate key value violates unique constraint “visited_countries_country_code_key”

The catch block doesn’t seems to be able to catch effectively the error.
By the way, on each case i’m trying to render custom error messages, sending it throw “res.render”, but without success.
I appreciate any help on this. Thanks.

I have NodeJS app where I connect WS server, listen for new messages –
and on each message I do aysnc job.

The problem:
the jobs takes time – and I want to run them one at a time and in the order they received.

eg:
message1 -> job(message) // 1000ms
message2 -> job2(message2) // 5000ms
messgae3 -> (received before job2 done but executed only after job2 done) -> job2(message3)

So I made this classes to simulate the beavior of the NodeJS app, and still in this code the jobs doesn’t run ordered and it looks like it doesn’t wait for previous one to finish (not sure)

class AsyncQueue {
    constructor() {
        this.active = false
        this.queue = []
    }

    async doJobs() {
        if (this.active) {
            return
        }

        this.active = true
        while (this.queue.length > 0) {
            const fn = this.queue.shift() // take first
            await fn()
        }
        this.active = false
    }

    push(fn) {
        this.queue.push(fn) // push to last
        this.doJobs()
    }
}

class Utils {
    static randInt(min, max) {
        return Math.random() * (max - min) + min
    } 
    
    static sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms))
    }
}


class WsServer {
    static async onMessage(func) {
        while (true) {
            await Utils.sleep(1000)
            func()
        }
    }
}


async function job(name) {
    console.log(`Doing job ${name}`)
    await Utils.sleep(Utils.randInt(1000, 5000)) // Fake job takes time
    console.log(`Done doing job ${name}`)
}

async function main() {
    const queue = new AsyncQueue()
    let counter = 0
    WsServer.onMessage(() => {
        counter += 1;
        queue.push(() => job(counter))
    })
}

main()

I have a react application pulling data from an API that is an array of objects.
One of the values is a boolean value and I am creating a check box that when clicked it changes the boolean value from true to false.

Example of the API data:

[{created: "Nov 10"}, { created_by: "Tim"}, {is_active: true}]
[{created: "Nov 15"}, { created_by: "Bill"}, {is_active: false}]

I created a table to map through the data. Below is the example:

const [checkedItems, setCheckedItems] = useState([])
const [data, setData] = useState([]);

{data.map((group, i) => (
<tr key={i}>
 <td> {data.created}</td>
 <td> {data.created_by}</td>
<td> <checkbox value={data.is_active}
      checked={checkedItem}
      onChange={(e) => handleCheckboxChange(e.target.checked, i)}
/></td>
<tr>
)}

I set up my handleCheckboxChange and passed through e, checked and i, but not to sure about the logic to change the value of is_active from true / false when the checkbox is clicked.
This is what I was thinking to change the state but react is not recognizing the value of the boolean accessed from the API data. I dont think the logic is correct.

const handleCheckboxChange = (e, checked, i) => {
let newChecked = checkedItems.map((x) => x);
      newChecked ? setCheckedItems(false) : setCheckedItems(true);
      setCheckedItems(newChecked)
     }

How do I use react to set state of the boolean value pulled from an API?

I have a little problem. I can’t refresh the page when I select a parameter in the drop down list… When I tried it outside my page in a new document it was not a problem and I don’t know if it’s blocked somewhere by Bootstrap.. I’m still learning JS, so I might be making a mistake somewhere, but I have no idea where. I tried to reload one parameter see below and then I want to always reload the page when I click on the option value.. Thanks

Here is part of the code

 function reloadF(obj){
                var theVal = obj.options[obj.selectedIndex].value;
                if (theVal == 'reload1') location.reload();
              }

                    <select name="autnastranku" id="autnastranku" onchange="reloadF(this);">
                      <option value="0">Aut na stránku</option>
                      <option value="1">6</option>
                      <option value="2">9</option>
                      <option value="3">12</option>
                      <option value="reload1">reload</option>
                    </select>
                  

I created a react project contains some fetch requests for getting data from servers and when i run the project i get This error:

• ERROR in ./node_modules/body-parser/lib/read.js 19:11-26 Module not found: Error: Can’t resolve ‘zlib’
  BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  This is no longer the case. Verify if you need this module and configure a polyfill for it.
  If you want to include a polyfill, you need to:
  • add a fallback ‘resolve.fallback: { “zlib”: require.resolve(“browserify-zlib”) }’
  • install ‘browserify-zlib’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “zlib”: false }

I attempted to include a webpack configuration file in my project and installed some dependencies using the following command:

• npm install path-browserify stream-browserify crypto-browserify browserify-zlib.
  Despite these efforts, I encountered the same errors in my project.

I am trying to load a CCT/SVC inside the react native webivew inside a bottomsheet, is this even possible? Normally the CCT/SVC is loaded as a full page on top of the app, but can we load inside only a webview?

I am trying to do something like, but I am getting null is not an object (evaluating 'RNInAppBrowser.open') when I am running this code.

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';
import { InAppBrowser } from 'react-native-inappbrowser-reborn';

const MyWebView = () => {
  const webViewRef = useRef(null);

  const openInAppBrowser = async (url) => {
    try {
      await InAppBrowser.open(url, {
        // options
        // For example:
        // toolbarColor: '#6200EA',
        // secondaryToolbarColor: 'black',
        // showTitle: false,
        // enableUrlBarHiding: true,
        // enableDefaultShare: true,
        // forceCloseOnRedirection: true,
      });
    } catch (error) {
      console.error(error.message);
    }
  };

  const handleNavigationStateChange = (newState) => {
    // Handle any necessary state changes here.
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://example.com' }}
      onNavigationStateChange={handleNavigationStateChange}
      // Add any other WebView props as needed
      onShouldStartLoadWithRequest={(event) => {
        // Intercept WebView URL loading and open in custom tab
        openInAppBrowser(event.url);
        return false; // Prevent WebView from loading the URL
      }}
    />
  );
};

export default MyWebView;

Thanks!

next.js i have this url: “http://localhost:3000/forum” and if user go “http://localhost:3000/forum/{postId}” i want to send user again “http://localhost:3000/forum”

i also used this (my folder structure is App. Not pages):
import { useRouter } from 'next/navigaiton';

and there is no problem with going to page. but i dont want to send user to new page. ı want to update the params while keeping the user on the same screen.

and i did this:

  // Function to handle selecting a topic
  const handleSelectTopic = (topicID: string) => {
    // Update the URL to include the selected topicID
    // router.replace(`/forum/${topicID}`);
    window.history.pushState({}, "", `/forum/${topicID}`)
    // window.history.pushState(null, 'test', `/forum/${topicID}`);
    // setName(`${topicID}`);
    // router.push({
    //   pathname: '/forum',
    //   query: {
    //     pageId: topicID // update the query param
    //   }
    // },
    //   undefined,
    //   { shallow: true },
    // )
  };

This is working for updateding params of url but if user have a link as that: http://localhost:3000/forum/8e90eb70-83d3-11ee-a39e-06efd237be49

and when clicked on this, Its routing to not found page how can i directly send user to “http://localhost:3000/forum” path.

I have this resources:
https://github.com/vercel/next.js/discussions/48110
https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
and i used this package: https://github.com/47ng/next-usequerystate

But i want that is there any easy way for that?

Im trying to figure out how to pass the correct data to the candleStickSeries chart from Tradingview.

Because the data that i have is based on timeframes (lets say i retrieved 4 candlesticks within the same timeframe, they all have the same timestamp.

My data:

const myData = [
    // this 4 sticks have the same timestamp
    { open: 10, high: 15, low: 8, close: 12, time: 1642426800 }, 
    { open: 12, high: 18, low: 10, close: 13, time: 1642426800 },
    { open: 15, high: 18, low: 10, close: 14, time: 1642426800 }, 
    { open: 30, high: 18, low: 10, close: 12, time: 1642426800 },
    // ... more of the same data but different timestamps
];

How would i pass that to tradingView e.g:

const chart = createChart(document.getElementById('candle'))
const candleStickSeries = chart.addCandlestickSeries()
candleStickSeries.setData(// this function wants timestamps to be unique and ordered ASC)

What am i supposed to do here? Do a Min/Max on open,close prices etc? So i end up having one candlestick per timestamp?

I really dont know why is this happening, i thought was a mistake writing the class name but no, the class name is actually correctly written, so idk why is this happening.

Js code:

var menu = document.querySelector('.menu');
var menuBtn = document.querySelector('.menu-btn');
var closeBtn = document.querySelector('.close-btn');

menuBtn.addEventListener('click', ()=>{
    menu.classList.add('active');
});

closeBtn.addEventListener('click', ()=>{
    menu.classList.remove('active');
});

and here is the html so you can see the class name i correct:

    <div class="menu">
        <div class="btn">
            <i class="fas fa-times close-btn"></i>
        </div>
        <a href="#">1</a>
        <a href="#">1</a>
        <a href="#">1</a>
        <a href="#">1</a>
        <a href="#">1</a>
    </div>
    <div class="btn">
        <i class="fas fa-bars menu-btn"></i>
    </div>

Saving input value causes “Uncaught TypeError: Cannot read properties of null (reading ‘value’)”, even if it’s not empty. App works ok, if input is empty it doesn’t save anything into object (as it should), but it causes this error which is really annoying. How to prevent this error or just don’t read read an empty input?

I’m using:

userData.firstAndLastName = document.getElementById("name").value;

I’ve tried placing if statement before (if null don’t do nothing), but it doesn’t work.

So I’m new to the programing world and I’ve been busting my head around this situation that I can’t seem to figure out..
I have an HTML button and a function (if – else) and I want the function to “stop” and show the error when the input is not according to the format I want for the input

<script type="text/javascript" src="../Scripts/script.js"></script>

let numecomplet = /^[A-Za-z ]*$/;
let formatemail = /^([A-Za-z0-9_-.])+@([A-Za-z])+.([A-Za-z]{2,4})$/;
let numeprodus = /^[A-Za-z0-9]*$/;

function checkform() {
  var a = document.getElementById("nume").value;
  var b = document.getElementById("email").value;
  var c = document.getElementById("produs").value;

  if (a.match(numecomplet)){
    document.getElementById("nume").innerHTML = "";
  }else {
    document.getElementById("numegresit").innerHTML = "Nume incorect";
  }

  if (b.match(formatemail)){
    document.getElementById("email").innerHTML = "";
  } else {
    document.getElementById("emailgresit").innerHTML = "Email incorect";
  }
  
  if (c.match(numeprodus)) {
    document.getElementById("produs").innerHTML = "";
 } else {
    document.getElementById("prodgresit").innerHTML = "Nume produs incorect";
 }
}

<form>
  <label for="nume">Nume:</label>
      <input type="text" id="nume" name="nume" value="";><br>
          <p id="numegresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="email">Email:</label>
      <input type="email" id="email" name="email" autocomplete="on" value="";><br>
          <p id="emailgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="produs">Produs:</label>
      <input type="text" id="produs" name="produs" value="";><br>
          <p id="prodgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <button onclick="checkform()"> Submit </button>
</form>

I tried:

• button > onclick=submit instead of onclick=checkform;
• return false; at the end of the syntax (prior to last {}), after each else syntax
• return true; + return false; after if, respectively else
• without <form></form>

Also tried looking on Google, but since I’m newbie level some of the solutions seem too advanced and didn’t understand much from them.

So I hope I can be clear enough with what I want the webpage to display… I want to see error text from <p> to stay on the webpage when else is “true”, but the behavior I have now is that I see the text, but after that the page sort of reloads and the text disappears.

First and foremost thank you in advance for reading and hopefully helping out!
i got JS program ( using sheetJS https://sheetjs.com/) generating a xlsx file. All go`s well i get the file and it opens but!
in google spread sheet my formulas go ==ifsum and in excel i get the following error:

Removed Records: Formula from /xl/worksheets/sheet1.xml part

im super confused and kinda stressing as this is kinda important for me that this program will generate a good file that works without repairing!

import { RESULTS_COLS, RESULTS_TEAM_ROW_START, TITLE_ROW_PROPS, TOURNAMENT_TYPE_TEAMS, getFont } from './sheetConstants.js'
// sheet 1 Results
const generateTitleRows = (worksheet) => {
// ROW 1
  worksheet.addRow({ A: 'BUHURT INTERNATIONAL' })

  worksheet.getCell('A1').fill = TITLE_ROW_PROPS.fill
  worksheet.getCell('A1').alignment = TITLE_ROW_PROPS.alignment
  worksheet.getCell('A1').font = getFont(16, true)
  // ROW 2
  worksheet.addRow({ A: 'Event Scoring Sheet' })

  worksheet.getCell('A2').fill = TITLE_ROW_PROPS.fill
  worksheet.getCell('A2').alignment = TITLE_ROW_PROPS.alignment
  worksheet.getCell('A2').font = getFont(12, true)

  worksheet.mergeCells('A1:Z1')
  worksheet.mergeCells('A2:Z2')
}

const generateHeaderRows = (worksheet, eventName, date, location) => {
  const row3 = worksheet.addRow({
    A: 'Event Name:',
    B: eventName,
    T: 'Event Date:',
    W: date,
    Y: 'Event Tier:',
    Z: 'Classic'
  })

  row3.font = getFont(11, true)
  worksheet.getCell('Z3').dataValidation = {
    type: 'list',
    allowBlank: true,
    formulae: ['"Classic,Regional,Conference"']
  }
  worksheet.mergeCells('B3:S3')
  worksheet.mergeCells('T3:V3')
  worksheet.mergeCells('W3:X3')

  const row4 = worksheet.addRow({
    A: 'Event Location:',
    B: location,
    T: 'Finals Type:',
    W: 'Round Robin',
    Y: 'Tier Mult.',
    Z: { formula: '=IF(Z3="Regional",1.5,IF(Z3="Conference",2,1))' }
  })

  row4.font = getFont(11, true)
  worksheet.getCell('W4').dataValidation = {
    type: 'list',
    allowBlank: true,
    formulae: ['"Round Robin,Bracket"']
  }
  worksheet.mergeCells('B4:S4')
  worksheet.mergeCells('T4:V4')
  worksheet.mergeCells('W4:X4')
}

const generateTeamHeaders = (worksheet, tournamentType) => {
  const headerFont = getFont(11, true)
  const wrapAlignment = { vertical: 'middle', horizontal: 'center', wrapText: false }
  // Add headers for row 5 with common font and alignment
  const row5 = worksheet.addRow({
    A: 'No.',
    B: tournamentType === TOURNAMENT_TYPE_TEAMS ? 'Team' : 'Fighter',
    C: 'T',
    D: 'Fights',
    I: 'Rounds',
    N: 'Score',
    T: 'Cards',
    W: 'Points',
    X: 'Placement',
    Y: 'Rank adj. Points',
    Z: 'Final Awarded Points'
  })

  row5.font = headerFont
  row5.alignment = wrapAlignment

  // Add headers for row 6 and styles
  const row6 = worksheet.addRow({
    // Fights
    D: 'Won',
    E: 'Loss',
    F: 'Total',
    G: 'Win Ratio',
    // H: '', // will not be used but keep it ?
    // Rounds
    I: 'Win',
    J: 'Draw',
    K: 'Loss',
    L: 'Total',
    M: 'win ratio',
    // Active/Grounded
    N: 'Active',
    O: 'per round',
    P: 'Grounded',
    Q: 'per round',
    R: 'A/G difference', // active versus ground difference
    S: 'A/G Ratio', // active ground ratio read "kill/death Ratio"
    // penaties
    T: 'Yellow',
    U: 'Red',
    V: 'Total'
  })

  row6.font = headerFont
  row6.alignment = wrapAlignment

  worksheet.mergeCells('A5:A6')
  worksheet.mergeCells('B5:B6')
  worksheet.mergeCells('C5:C6')
  worksheet.mergeCells('D5:H5')
  worksheet.mergeCells('I5:M5')
  worksheet.mergeCells('N5:S5')
  worksheet.mergeCells('W5:W6')
  worksheet.mergeCells('X5:X6')
  worksheet.mergeCells('Y5:Y6')
  worksheet.mergeCells('Z5:Z6')
  worksheet.mergeCells('T5:V5')

  worksheet.getColumn('H').hidden = true
}

// generates the team names + id
const generateTeamDataRows = (worksheet, teams) => {
  teams.forEach((team, index) => {
    const rowIndex = index + RESULTS_TEAM_ROW_START
    const addedRow = worksheet.addRow({
      A: index,
      B: team.name,
      C: 1,
      D: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$I:$I)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$I:$I)` },
      E: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$J:$J)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$J:$J)` },
      F: { formula: `=SUM(D${rowIndex}:E${rowIndex})` },
      G: { formula: `=iferror(D${rowIndex}/F${rowIndex})` },
      H: { formula: `=F${rowIndex}/C${rowIndex}` },
      I: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$K:$K)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$K:$K)` },
      J: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$L:$L)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$L:$L)` },
      K: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$M:$M)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$M:$M)` },
      L: { formula: `=SUM(I${rowIndex}:K${rowIndex})` },
      M: { formula: `=iferror(I${rowIndex}/L${rowIndex})` },
      N: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$O:$O)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$O:$O)` },
      O: { formula: `=iferror(N${rowIndex}/L${rowIndex})` },
      P: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$P:$P)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$P:$P)` },
      Q: { formula: `=iferror(P${rowIndex}/L${rowIndex})` },
      R: { formula: `=N${rowIndex}-P${rowIndex}` },
      S: { formula: `=iferror(N${rowIndex}/(L${rowIndex}*5))` },
      T: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$R:$R)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$R:$R)` },
      U: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$S:$S)+SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$S:$S)` },
      V: { formula: `=T${rowIndex}+(2*U${rowIndex})` },
      W: { formula: `=SUMIF(pools!$B:$B,$A${rowIndex},pools!$I:$I)+(SUMIF(brackets!$B:$B,$A${rowIndex},brackets!$I:$I)*2)` },
      X: { formula: `=IF($W$4="Round Robin",RANK.EQ(D${rowIndex},$D$7:$D$100)+COUNTIFS($D$7:$D$100,D${rowIndex},$M$7:$M$100,">"&M${rowIndex})+COUNTIFS($D$7:$D$100,D${rowIndex},$M$7:$M$100,M${rowIndex},$S$7:$S$100,">"&S${rowIndex})+COUNTIFS($D$7:$D$100,D${rowIndex},$M$7:$M$100,M${rowIndex},$S$7:$S$100,S${rowIndex},$V$7:$V$100,"<"&V${rowIndex}),IFERROR(MATCH(A${rowIndex},brackets!$X$2:$X$5,0),"NA"))` },
      Y: { formula: `=IF(X${rowIndex}=3;W${rowIndex}+2;IF(X${rowIndex}=2;W${rowIndex}+4;IF(X${rowIndex}=1;W${rowIndex}+6;W${rowIndex})))` },
      Z: { formula: `=Y${rowIndex}*$Z$4` }
    })
    addedRow.font = getFont(11, false)
  }
  )
}

const generateResultsSheet = (workbook, { eventName, date, location, teams, tournamentType }) => {
  const resultsSheet = workbook.addWorksheet('results')
  resultsSheet.columns = RESULTS_COLS
  generateTitleRows(resultsSheet)
  generateHeaderRows(resultsSheet, eventName, date, location, teams)
  generateTeamHeaders(resultsSheet, tournamentType)
  generateTeamDataRows(resultsSheet, teams)
}

export default generateResultsSheet

im curiouse if any one can help me out much thanks for reading this and hopefull some one can help me out!

file open in excel
Image above is after i generate the file.

techincal error detail
google spreadsheet

I’m making a video sharing website and I want to create YouTube shorts like videos.How can I do that?