Category: javascript

How to host a Node.Js application in a Hostinger shared hosting

I want to host a node.js application in a Hostinger shared hosting.
and i heard that i can use SSH to host a Node.js application to shared hosting, Is it Works for Hostinger as well ?
and if its works for Hostinger, can i run MongoDB as well ?

i host a JavaScript User Side app in a Hostinger shared hosting, now i use Node.js in contact form , i use nodeMailer, all things i searched about lead me that i only can use VPS hosing in Hostinger, is there any way to use SSH to run this app in same shared hosting ?

I’m having trouble with the scale of my stacked bar chart in ECharts when there’s a significant discrepancy between data values. The issue is that the chart doesn’t represent the smaller values well when there’s a large outlier.

Here’s a simplified version of my ECharts configuration:

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: [
      "Activity", "Segment", "Branch", "Filled Contact", "Mailing Contact",
      "Contacted Clients", "Clients with Email", "Clients with Call",
      "Clients with Visit", "Clients with Telegram Response",
      "Clients with Quote", "Clients with Negotiation",
      "Clients with Billing", "Billing vs Potential"
    ]
  },
  series: [
    {
      name: 'Completed',
      color: 'green',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
        0, // Activity
        257, // Segment
        244, // Branch
        148, // Filled Contact
        50, // Mailing Contact
        61, // Contacted Clients
        0, // Clients with Email
        43, // Clients with Call
        0, // Clients with Visit
        0, // Clients with Telegram Response
        34, // Clients with Quote
        13, // Clients with Negotiation
        47, // Clients with Billing
        1703515.66 // Billing vs Potential
      ]
    },
    {
      name: 'Not Completed',
      type: 'bar',
      stack: 'total',
      color: 'red',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
        327, // Activity
        70, // Segment
        83, // Branch
        177, // Filled Contact
        275, // Mailing Contact
        266, // Contacted Clients
        327, // Clients with Email
        284, // Clients with Call
        327, // Clients with Visit
        327, // Clients with Telegram Response
        293, // Clients with Quote
        314, // Clients with Negotiation
        305, // Clients with Billing
        3298438.39 // Billing vs Potential
      ]
    }
  ]
};

As you can see, there’s a significant gap between the “Billing vs Potential” values compared to the other categories. This causes the smaller values to be almost invisible on the chart.

Question: How can I adjust the ECharts configuration so that all bars are visually represented, even when there’s a large discrepancy in the values? Is there a way to apply a logarithmic scale or any other method to improve the visualization in this scenario?

Any help or suggestions would be greatly appreciated!

I’m using ml5js to train a model to predict the number of items that will be sold at a bakery given these fields:

day_of_week
next_holiday
days_until_next_holiday
avg_cloud_cover
avg_precip
avg_temp
highest_cloud_cover
highest_precip
highest_temp
lowest_cloud_cover
lowest_precip
lowest_temp

I’ve trained the model, creating the three usual files:

• model_meta.json
• model.json
• model.weights.bin

However, when I import the model and go to make a prediction using the model using a test input like this:

const input = {         
day_of_week: "Thursday",         
next_holiday: "Canada Day",          
days_until_next_holiday: 10,         
avg_cloud_cover: 0,         
avg_precip: 0,         
avg_temp: 0,         
highest_cloud_cover: 0,         
highest_precip: 0,         
highest_temp: 0,         
lowest_cloud_cover: 0,         
lowest_precip: 0,         
lowest_temp: 0     
}

I get this error:

Error: Error when checking : expected dense_Dense1_input to have shape [null,2134] but got array with shape [1,37].

I think I’m getting this error because I’m not formatting the input correctly. I normalized the data when making the model, so it created many new fields, all of which have a value of 0 or 1.

For example, of day_of_week, the start of model_meta.json looks like this:

{
"inputUnits":[2134],
"outputUnits":1,
"inputs":{
"day_of_week":{
"dtype":"string",
"min":0,
"max":1,
"uniqueValues":["Thursday","Wednesday","Tuesday","Monday","Sunday","Saturday","Friday"],
"legend":{"Thursday":[1,0,0,0,0,0,0],"Wednesday":[0,1,0,0,0,0,0],"Tuesday":[0,0,1,0,0,0,0],"Monday":[0,0,0,1,0,0,0],"Sunday":[0,0,0,0,1,0,0],"Saturday":[0,0,0,0,0,1,0],"Friday":[0,0,0,0,0,0,1]
}
}, 
...

I’m wondering if I need to format the input to not use strings for fields like day_of_week. But if so, I’m not sure what to replace it with.

Any assistance?

I’m working on the front end of a restaurant takeaway system, and I need to create an “infinitely” recursive nested product form wizard similar to the UberEats modal product form flow. The form should display product modifiers (via modifier groups) and have specific rules.

Here’s a simplified structure of the product data returned by our API:

Product Types:

• type: 1 = Main Product
• type: 3 = Modifier Group (e.g., size, crust type)
• type: 2 = Modifier (e.g., specific size, specific crust)

Rules:

• min = Minimum quantity for a modifier
• max = Maximum quantity for a modifier
• multi_max = Maximum times the same modifier can be chosen

For instance, a “Pizza” product might have a “Pizza Size” modifier group with modifiers like “9 inch” and “12 inch.” If “12 inch” is selected, further modifiers like “Stuffed Crust” or “Thin Crust” might appear via the nested “12 inch pizza crust” modifier group , with specific rules applied.

How can I dynamically display and hide these groups and modifiers based on the users selections, ensuring that only relevant sub-products and modifier groups appear when needed, while also enforcing the min, max, and multi_max modifier group rules for the modifiers? The products sub-products can vary in depth, so the solution needs to be flexible / “infinite”.

Below is an example of what I’ve tried so far, using JSON data for a pizza product. It somewhat works in terms of a flow but I’ve hit a kind of coder’s block. I’m not sure if my approach is correct, I am getting console errors and I’m also not sure how I advance what I’ve written so far to work with the rules and how to later submit it back to the API as form data.

Note: I’m using AlpineJS.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    
</head>
<body class="d-flex flex-column h-100 font-sans antialiased fs-7">
  
    <main class="flex-shrink-0">

        <div x-data="getProduct()">
            <h1 x-text="product.name"></h1>
            <div x-data="{
                currentProduct: product,
            }">
                <div x-data="{ 
                    currentStep: 1,
                    totalSteps: currentProduct.sub_products.length
                }">
                    <div class="row" x-init="$watch('currentProduct', value => { 
                        totalSteps = value.sub_products.length;
                        key++; // Increment key to force re-render
                    })">

                        <div class="col-12 mb-2">
                            <h4 x-text="currentProduct.name"></h4>
                            Steps: <span x-text="totalSteps"></span>
                            Current Step: <span x-text="currentStep"></span>
                        </div>

                        <div class="col-12 mb-2">
                            <nav class="nav nav-pills flex-column flex-sm-row gap-1">
                                <template x-for="(sub_product, index) in currentProduct.sub_products">
                                    <button 
                                        type="button" 
                                        class="flex-sm-fill text-sm-center nav-link border"
                                        :class="{ 'active': currentStep === index+1 }"
                                        @click.prevent="currentStep = index+1"
                                    >
                                        <span x-text="sub_product.name"></span>
                                    </button>
                                </template>
                            </nav>
                        </div>

                        <div class="col-12">
                            <!-- Back Button -->
                            <button x-show="trail.length > 0" @click="
                                let lastStep = trail.pop();
                                currentProduct = lastStep.product;
                                currentStep = lastStep.step;
                            " class="btn btn-warning mb-2">
                                Back
                            </button>
                            
                            <!-- Tab panes -->
                            <div>
                                <template x-for="(sub_product, index) in currentProduct.sub_products" :key="key + '-' + index">
                                    <div
                                        x-show="currentStep === index+1"
                                    >
                                        <div class="border rounded bg-light p-2">
                                            <div class="d-flex justify-content-between mb-2">
                                                <div>
                                                    <h5 class="mb-0"><span x-text="sub_product.name"></span></h5>
                                                </div>
                                            </div>
                                            <ul class="list-group list-group-flush mb-0">
                                                <template x-for="(deep_sub_product, index) in sub_product.sub_products" :key="key + '-' + deep_sub_product.id">
                                                    <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                                                        <label class="stretched-link" x-bind:for="deep_sub_product.id"><span x-text="deep_sub_product.name"></span></label>
                                                        <input @change="
                                                            let isChecked = $event.target.checked;
                                                            if(isChecked) {
                                                                if(deep_sub_product.sub_products && deep_sub_product.sub_products.length) { 
                                                                    trail.push({ product: currentProduct, step: currentStep }); 
                                                                    currentProduct = deep_sub_product;
                                                                    currentStep = 1;
                                                                }
                                                            }" 
                                                            class="form-check-input ms-1" type="checkbox" value="" x-bind:id="deep_sub_product.id">
                                                    </li>
                                                </template>
                                            </ul>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <script type="text/javascript">
            function getProduct() {
                return {
                    product: {
                      "id": "01j51xtwmcm4bmz2jpd2x8d1j0",
                      "type": 1,
                      "name": "Pizza",
                      "plu": "PROD-PIZ-IVUAW",
                      "min": null,
                      "max": null,
                      "multi_max": null,
                      "price": {
                        "amount": "500",
                        "currency": "GBP",
                        "formatted": "£5.00"
                      },
                      "sub_products": [
                        {
                          "id": "01j51xw86mj4zpw71qzd23yxkt",
                          "type": 3,
                          "name": "Pizza Size",
                          "plu": "MG-PIZ-GKNDC",
                          "min": 1,
                          "max": 1,
                          "multi_max": null,
                          "sub_products": [
                            {
                              "id": "01j51xxbrqyj6v0bs71503pvhz",
                              "type": 2,
                              "name": "9 inch",
                              "plu": "MOD-9IN-4O5B2",
                              "min": null,
                              "max": null,
                              "multi_max": null,
                              "price": {
                                "amount": "0",
                                "currency": "GBP",
                                "formatted": "£0.00"
                              },
                              "sub_products": []
                            },
                            {
                              "id": "01j51xxx0vaejrdnx80e2sc44m",
                              "type": 2,
                              "name": "12 inch",
                              "plu": "MOD-12I-LGK4P",
                              "min": null,
                              "max": null,
                              "multi_max": null,
                              "price": {
                                "amount": "200",
                                "currency": "GBP",
                                "formatted": "£2.00"
                              },
                              "sub_products": [
                                {
                                  "id": "01j51xz2qhze0synfzwbg8qkyp",
                                  "type": 3,
                                  "name": "12 inch pizza crust",
                                  "plu": "MG-12I-PTYOS",
                                  "min": null,
                                  "max": 1,
                                  "multi_max": null,
                                  "sub_products": [
                                    {
                                      "id": "01j51y0n1dfa1eech6rc4avx5f",
                                      "type": 2,
                                      "name": "Stuffed Crust",
                                      "plu": "MOD-STU-9H2BP",
                                      "min": null,
                                      "max": null,
                                      "multi_max": null,
                                      "price": {
                                        "amount": "100",
                                        "currency": "GBP",
                                        "formatted": "£1.00"
                                      },
                                      "sub_products": [
                                        {
                                          "id": "01j51xz2qhze0synfzwbg8qkyp",
                                          "type": 3,
                                          "name": "12 inch pizza crust DEPTH TEST",
                                          "plu": "MG-12I-PTYOS",
                                          "min": null,
                                          "max": 1,
                                          "multi_max": null,
                                          "sub_products": [
                                            {
                                              "id": "01j51y0n1dfa1eech6rc4avx5f",
                                              "type": 2,
                                              "name": "Stuffed Crust DEPTH TEST",
                                              "plu": "MOD-STU-9H2BP",
                                              "min": null,
                                              "max": null,
                                              "multi_max": null,
                                              "price": {
                                                "amount": "100",
                                                "currency": "GBP",
                                                "formatted": "£1.00"
                                              },
                                              "sub_products": []
                                            },
                                            {
                                              "id": "01j51y1crn99gg2evy2b96ytev",
                                              "type": 2,
                                              "name": "Thin Crust DEPTH TEST",
                                              "plu": "MOD-THI-0TYVD",
                                              "min": null,
                                              "max": null,
                                              "multi_max": null,
                                              "price": {
                                                "amount": "50",
                                                "currency": "GBP",
                                                "formatted": "£0.50"
                                              },
                                              "sub_products": []
                                            }
                                          ]
                                        }
                                      ]
                                    },
                                    {
                                      "id": "01j51y1crn99gg2evy2b96ytev",
                                      "type": 2,
                                      "name": "Thin Crust",
                                      "plu": "MOD-THI-0TYVD",
                                      "min": null,
                                      "max": null,
                                      "multi_max": null,
                                      "price": {
                                        "amount": "50",
                                        "currency": "GBP",
                                        "formatted": "£0.50"
                                      },
                                      "sub_products": []
                                    }
                                  ]
                                }
                              ]
                            }
                          ]
                        },
                        {
                          "id": "01j51zcdww6ekes424wse5w689",
                          "type": 3,
                          "name": "Pizza Additional Toppings",
                          "plu": "MG-PIZ-3VQTI",
                          "min": null,
                          "max": 3,
                          "multi_max": 3,
                          "sub_products": [
                            {
                              "id": "01j51zap82spt05ysm3m2fj9t4",
                              "type": 2,
                              "name": "Pepperoni",
                              "plu": "MOD-PEP-HDPL0",
                              "min": null,
                              "max": null,
                              "multi_max": null,
                              "price": {
                                "amount": "50",
                                "currency": "GBP",
                                "formatted": "£0.50"
                              },
                              "sub_products": []
                            },
                            {
                              "id": "01j51zb90ptzkb7d5w92sphx1g",
                              "type": 2,
                              "name": "Pineapple",
                              "plu": "MOD-PIN-K7ZEV",
                              "min": null,
                              "max": null,
                              "multi_max": null,
                              "price": {
                                "amount": "50",
                                "currency": "GBP",
                                "formatted": "£0.50"
                              },
                              "sub_products": []
                            },
                            {
                              "id": "01j51zbrajdmx0hz4136e41n8p",
                              "type": 2,
                              "name": "Tomato",
                              "plu": "MOD-TOM-ERSMC",
                              "min": null,
                              "max": null,
                              "multi_max": null,
                              "price": {
                                "amount": "50",
                                "currency": "GBP",
                                "formatted": "£0.50"
                              },
                              "sub_products": []
                            }
                          ]
                        }
                      ]
                    },
                    trail: [],
                    key: 0
                }
            }
        </script>

    </main>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

</body>
</html>

Example of an UberEats Pizza product, to somewhat visualise what I’m trying to achieve:

PS: Sorry if the code is messy, I’ve been tweaking this trying to figure it out for weeks now!

i am learning react native / expo so this question might sound stupid. I am trying to load data from a page (in this case inbox.js) through a context page and then if data loaded or not i show the splashscreen or the inbox.js page.

i tryed to pass usestate to false when everthing is loaded to a context then check it in my app.js

const Stack = createNativeStackNavigator();


function AppNavigator() {

  const { isLoadingContextOne ,setIsLoadingContextOne }  = useContext(LoadingContextApp);

  

 
  if (isLoadingContextOne) {
    return <SplashScreens />;
  }
  
 const{isLoggedIn,isLoadingContext,loadAsyncData,setIsLoggedIn,setIsLogoutLoading,isLogoutLoading} = useContext(AuthContext);



  
  return (
    <Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
      {isLoggedIn ? (
        <>
        
          <Stack.Screen name="inbox" component={Test} options={{ title: 'inbox Page' }} />
        </>
      ) : (
        <>
          <Stack.Screen name="auth" component={Splash} options={{ title: 'auth Page' }} />
          <Stack.Screen name="Login" component={LoginPage} options={{ title: 'Login Page' }} />
          <Stack.Screen name="Register" component={RegisterPage} options={{ title: 'Register Page' }} />
        </>
      )}
    </Stack.Navigator>
  );
}




export default function App({navigation}) {

  const [IsReady, SetIsReady] = useState(false);
  

  const loadFontsAsync = async () => {
    await Font.loadAsync({
      test: require('./fonts/Unbounded-Bold.ttf'),
      
      
    });
  };
  

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={loadFontsAsync}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }
  

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NotifierWrapper>
      <LoadingProvider>
        <AuthProvider>
          
          <NavigationContainer>
            <AppNavigator />
            <Toast ref={(ref) => Toast.setRef(ref)} />
          </NavigationContainer>
        </AuthProvider>
          </LoadingProvider>

      </NotifierWrapper>
    </GestureHandlerRootView>
  );
}

Then in my inbox.js

useEffect(() => {
    if (
      !loadingInfoDeLuser &&
      !isLoading &&
      !isLoadingmessage &&
 
    ) {
     
      setIsLoadingContextOne(false); // This will remove the splash screen when all conditions are met
      
    }
  }, [
    loadingInfoDeLuser,
    isLoading,
    isLoadingmessage,
   
  ]);

and the context

import React, { useContext, createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';
import SplashScreens from './splashFinal';

const LoadingContextApp = createContext();

export const LoadingProvider = ({ children }) => {
  const [isLoadingContextOne, setIsLoadingContextOne] = useState(true);
  

  const setLoaded = () => {
    setIsLoadingContextOne(false);
  };


  
  

  return (
    <LoadingContextApp.Provider value={{ isLoadingContextOne,  setIsLoadingContextOne }}>
      {children}
    </LoadingContextApp.Provider>
  );
};

export default LoadingContextApp;

thank you

I have added a StringOption to a slash command in my Discord.js bot that I wish to validate before the command is sent.

I can limit the length of the string with .setMaxLength() and .setMinLength() but I would like to further restrict what can be input.

There are too many valid entries (approximately 600) to use Choices and I would prefer not to break it up and add several Required Options to an already Option-heavy Command.

Is there a way to validate user string input (perhaps using RegEx) inside the SlashCommandBuilder or is my only option to wait until the command is sent and reply with a message saying their input was invalid?

I’ve been having so much trouble getting my JavaScript to check that the emails in my HTML form match and display results. I’ve tried doing it like the zyBook for my class shows, but I just get nothing.

I tried to have the function compare the input of #email and #cemail and change the background color of the field to green when they matched and to red when they didn’t match. I tried to create an event listener to run the function whenever the input for #cemail changed. I’m using Visual Studio, and one of the main problems that I notice is that when I add “.value” or “.style” or anything like it, they don’t get suggested as a method of the objects in the function. It seems like I’m referencing something that doesn’t exist, but the IDs match, so I don’t know why it doesn’t register.

Here is the relevant code:

<form id="userInfo">
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" placeholder="John"><br>
    <label for="lname">Last Name:</label>,
    <input type="text" id="lname" name="lname" placeholder="Doe"><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" placeholder="abc123@gmail
.com"><br>
    <label for="cemail">Confrim Email:</label>
    <input type="text" id="cemail" name="cemail"
placeholder="[email protected]"><br>
    <label for="question">Write Question:</label>
    <textarea id="question" name="question" size="50"
    placeholder="My question is..."></textarea><br>
    <input type="submit" value="Submit">
</form>
<script>
    let cemail = document.querySelector("#cemail").value;
    let formWidget = cemail.addEventListener("change", checkEmail)


    function checkEmail(){
        let email = document.querySelector("#email").value;

        if (email.trim() === cemail.trim()) {
            email.style.backgroundColor = "green";
            cEmail.style.backgroundColor = "green";
            return true;
        } else {
            email.style.backgroundColor = "red";
            cEmail.style.backgroundColor = "red";        }

    }
</script>

I’m working on a project that requires a self-balancing AVL tree with additional support for range queries. Specifically, I need to:

1. Insert and delete elements while maintaining the AVL tree properties.
2. Efficiently perform range queries to find all elements within a given range [low, high].

I’m struggling with the range query part. How can I augment the AVL tree to support efficient range queries? Any advice on the algorithms or data structures to use would be greatly appreciated. Sample code or pseudocode would be extremely helpful.

I’ve started by implementing a standard AVL tree that supports basic insertion and deletion operations while maintaining its balanced properties.

Recently I’ve create and app and needed to use workers in it but faced some annoying problem.

So, here is an example of how I use it. Everything looks like it works fine, but it seems that worker couldn’t pick up any vite’s configuration. Because of that my aliased import not working in worker scope, and also I need to pass execArgv: ["--require", "ts-node/register"], in order to compile it properly.

Example:

const w = new Worker(
  new URL(process.cwd() + "/src/workers/testScript.ts", import.meta.url),
  {
    execArgv: ["--require", "ts-node/register"],
  }
);

w.on("message", (data) => {
  console.log(data);
});

Is there any way to fix that?

I’m using echarts for some small, dashboard-style, charts.
What are my options for avoiding situations like this?

Notice how the slice label for CityC and the legend for CityB overlap.

option = {
  title: {
    text: 'Weather Statistics',
    subtext: 'Fake Data',
    left: 'center'
  }
}

Codepen

Ideally, I want the chart to shrink to fit the available space w/o overflowing into the legend. Seems like “grid” can be used for this, but isn’t supported for pie.

Next best would be to disable the slice labels when they overlap or responsively at a certain breakpoint. Possible?

My only remaining idea is to set the radius as a %, but I’d ideally have different values for different sizes and I can’t always predict the container size my chart will end up in.

Other ideas?

I’m using Homebridge and everything connected is controlled by mqtt. So that’s fine for everybody using a Mac or an iPhone, but I want to be able to controls things from a browser. Using websockets (Paho mqttws31.js) that is working fine. The only thing is that on opening the page there is no information about the current state of things. It always starts with all buttons in the default state. As soon as I change anything either in the home app or by sending a command through an mqtt client, the page is updated. (But of course only for the item that was changed externally).
I know the mqtt broker discards all messages as soon as they are delivered, so that makes things difficult. And since javascript is browser side my http server has no knowledge of what was has been going on in mqtt.
Is there any way to get the initial state of the page correct after opening? Maybe a script running on the server that keeps track of every topic in an xml-file so I can read that file on opening the page and set things right?
Or am I missing something very obvious and can this be done in a simpler way?

I am trying to revise the html/java code for this so it has a small footprint. I have no clue when it comes to JAVA so any help would be massively appriecated.

<div class="fotocdn-integrator">
  <div class="fotocdn-integrator-guestbox" data-language="eng" data-backlink-url="" data-target="https://lifetimemoments.gotphoto.co.uk"></div>
</div>
<script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//integration.fotocdn.de/fotocdn-integration/8ka6dwg2.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","fotocdn-sdk");
</script>

I’ve looked online and tried a few different things but nothing seems to work.

I am having problems with the rendering of merged cells in iOS applications such as Numbers.

Here’s a sample of my code. The resulting file will contain three cells that are merged. If you open this file in Excel, the frame around the merged cells is drawn correctly. If we use the table preview in macOS or the “numbers” program, we will see that the borders are drawn incorrectly.

const XLSX = require('xlsx-js-style');

const workbook = XLSX.utils.book_new();
const worksheet = {};

const borderStyle = {
        border: {top: { style: 'thin', color: { rgb: '000000' } },
        bottom: { style: 'thin', color: { rgb: '000000' } },
        left: { style: 'thin', color: { rgb: '000000' } },
        right: { style: 'thin', color: { rgb: '000000' } },
    }
};
const cellObj = { v: 'cell', s: borderStyle };

for (let row = 1; row <= 3; row++) {
    const cellAddress = A${row};
    worksheet[cellAddress] = { v: Row ${row}, s: borderStyle };
}

worksheet['!merges'] = [{ s: { c: 0, r: 0 }, e: { c: 0, r: 2 } }];

worksheet['!ref'] = 'A1:A3';

worksheet['A1'] = cellObj;
worksheet['A2'] = cellObj;
worksheet['A3'] = cellObj;

XLSX.utils.book_append_sheet(workbook, worksheet, 'testSheet');

XLSX.writeFile(workbook, 'test.xlsx');

The task is to find a way to draw the frame in such a way that the Numbers application displays the frame correctly.

(The project that has this bug is very large and I cannot replace the library. Only if it has an identical API. For example SheetJs or its forks. I tried some popular forks, but the problem was also reproduced there.)

I know for sure that when saving, the cells that are merged exist until the file is created. I also tried several libraries with the same API (forks from sheetJs).
Also the exceljs library doesn’t have the same problem. But I can’t use this library.

If you correct the cell boundaries manually in the Numbers program and export the result to xlsx, the frame will be drawn correctly. I think this means that Numbers can be made to display the frames correctly using the xlsx-js-style library.

I want to add a button on the middle of the iframe and the background a image of my selection. Like i said, it’s on the middle and the button says “Play Now”, when clicked, it loads the iframe. I want it to be like KBH Games. It doesn’t matter if it uses python or whatever other language.

I tried to do the iframe but i can’t get to put a button nor image inside it. Im asking here in hope of a solution.

I’m trying to show a tooltip open by default when the component mounts and then close it after 3 seconds using setState and the defaultIsOpen prop. However, the tooltip remains visible after 3 seconds. Here’s the CodeSandbox link . Any idea what I’m missing?