Category: javascript

Category Added in a WPeMatico Campaign

Firebase for Web Issues

I’m building a web app to store and retrieve data from the firebase database, they recently changed the way I’d do this and I’m having trouble figuring it out.
My file setup is as follows:

project-folder/
|-- index.html
|-- assets/
    |-- js/
        |-- setup.js

My HTML file is:

<!DOCTYPE html>
<html>
<head>
    <title>Firebase Integration</title>
</head>
<body> 
    <script type="module">
        // Import the functions you need from the SDKs you want to use
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-app.js";
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-database.js";
        import { getAuth } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-auth.js";
        
        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "stuff",
            authDomain: "stuff",
            databaseURL: "stuff",
            projectId: "stuff",
            storageBucket: "stuff",
            messagingSenderId: "stuff",
            appId: "stuff"
        };
        
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const db = getDatabase();

        function writeData(url, data) {
            const reference = ref(db, url);
            set(reference, data);
        }
    </script>

    <script src="assets/js/setup.js"></script> <!-- Corrected the path separator -->

</body>
</html>

The firebase functions work as long as they are used in the script in the HTML file. However, I’ve written the code that runs the web app in setup.js, When I attempt to use the writeData() function in setup.js I get a CROSS Origin error. I’m totally lost on how to structure this, I really prefer not to need to write all the code for the web app in the HTML file.

Tabulator in Javascript – Buggy column moving

I’m using Tabulator to display some data in my js app. When I move columns around (using movableColumns: true), it works normally. When I add a new column programmatically and then try to move that column around, it displays this behavior:

Errored Image

Any Tabulator experts know what could be going on?

World Map SVG Code – Show Name When Hovering

I just discovered the SVG framework while designing a website. I have the following code that I was able to change according to my needs using Google and ChatGPT. Pls note that im a beginner with all of this!

I want to show the name of the country that are colored in blue when hovered over.
ideally I would like to adjust the parameters of the text as well.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!--
************* Copyright (c) 2015 Pareto Softare, LLC DBA Simplemaps.com *******************     
************* Offered under the MIT License http://opensource.org/licenses/MIT ************
************* Attribution is appreciated! http://simplemaps.com ***************************
-->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   enable_background="new 0 0 1000 1001"
   height="500px"
   pretty_print="False"
   style="stroke-linejoin: round; stroke:#000; fill: none;"
   version="1.1"
   viewBox="0 0 1000 1001"
   width="500px"
   id="svg2"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="africa.svg">
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview68"
     showgrid="false"
     inkscape:zoom="0.33342098"
     inkscape:cx="603.38628"
     inkscape:cy="543.55784"
     inkscape:window-x="1456"
     inkscape:window-y="314"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2" />
  <defs id="defs4">
    <style type="text/css" id="style6">
        path { fill-rule: evenodd; fill: #00B3F0; }
        path:hover { fill: #282D7F; }
    </style>
</defs>
  <metadata
     id="metadata8">
    <views
       id="views10">
      <view
         h="1001"
         padding="0"
         w="1000"
         id="view12">
        <proj
           flip="auto"
           id="robinson"
           lon0="100.0" />
        <bbox
           h="1210.83"
           w="1011.29"
           x="-258.56"
           y="-626.99"
           id="bbox15" />
      </view>
    </views>
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <path
     inkscape:connector-curvature="0"
     id="AO"
     data-name="Angola"
     data-id="AO"
     d="m 495.3,598.6 -36,-0.2 -4.3,1.7 -3.5,-0.3 -5.1,1.9 -1.1,2.7 6,8.7 2.4,9.3 3.6,13.4 -3.8,5.5 -0.6,2.8 2.9,8.3 3.1,8.4 3.6,5 0.6,7.8 -1.4,10.3 -4,6.1 -7.1,9.1 -2.9,5.6 -4.1,12.5 -0.8,5.9 -4.3,12.7 -1.9,12.2 1,8.7 5.9,-2.7 7.2,-2.3 7.8,0.4 7.1,6.3 1.9,-1 48.8,-0.6 8.2,6.6 29.1,2 22.4,-5.7 -7.6,-8.6 -7.8,-11.3 1.6,-44 25.3,0.1 -1,-4.7 2,-5.2 -2,-6.5 1.5,-6.7 -1.2,-4.3 -5.5,-0.8 -7.6,2 -5.3,-0.3 -3,1.3 0.9,-16.5 -3.9,-5.1 -0.8,-8.5 1.9,-8.4 -2.4,-5.3 -0.1,-8.7 -14.8,0.1 1.1,-5 -6.2,0.1 -0.7,2.4 -7.6,0.5 -3.1,8.1 -1.9,3.4 -6.7,-1.9 -4,1.9 -8.1,1.1 -4.6,-7.2 -2.7,-4.5 -3.5,-8.3 -2.9,-10.3 z m -47.4,-2.7 0.4,-6 2,-3.5 4.5,-2.9 -4.6,-4.8 -3.7,2.3 -5,6 3.3,10.4 3.1,-1.5 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="BI"
     data-name="Burundi"
     data-id="BI"
     d="m 669,556.1 -0.6,-5.4 0,0 -6.5,-0.9 -3.8,7.9 -7.4,-1.1 3,6.3 0.1,2.4 4.3,13.2 0,0.6 1.2,-0.2 4.5,-5 4.9,-7.2 3,-2.9 -0.1,-4.5 -2.6,-3.2 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="BJ"
     data-name="Benin"
     data-id="BJ"
     d="m 340,356 -9.3,-8 -4.3,0.1 -4.1,4 -2.6,4.2 -6,1.2 -2.5,6.1 -4.1,1.6 -1.6,7.2 3.7,4.1 4.3,4.9 0.4,6.8 2.5,2.8 -0.5,31.8 3,9.5 10.1,-1.6 0.6,-22.3 -0.3,-8.8 2.3,-8.7 3.7,-4.3 5.9,-8.5 -1.3,-3.7 2.4,-5.6 -2.8,-8.2 0.5,-4.6 z"
     style="none" />
  <path
     inkscape:connector-curvature="0"
     id="BF"
     data-name="Burkina Faso"
     data-id="BF"
     d="m 300.7,310.8 -7.8,0 -3,-2.6 -6.7,1.9 -11.3,5.8 -2.3,4.3 -9.4,6.2 -1.7,3.6 -5.1,2.8 -5.8,-1.9 -3.4,3.4 -1.8,9.5 -9.7,11.4 0.3,4.7 -3.4,5.9 0.8,8 5.5,3 2.1,4.6 5.4,2.9 4.3,-3.4 5.7,-0.6 8.3,3.6 -1.6,-10.4 0.3,-7.9 21.1,-0.6 5.4,1 3.9,-2.2 5.6,1.1 10.7,0.3 4.1,-1.6 2.5,-6.1 6,-1.2 2.6,-4.2 0.3,-9.5 -14,-3.1 -0.4,-6.7 -6.9,-9 -1.6,-6.3 1,-6.7 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="BW"
     data-name="Botswana"
     data-id="BW"
     d="m 600.6,762.7 -2.2,-1 -6.9,3.1 -3.6,0 -7.9,5.4 -4.4,-5.7 -18.7,4.9 -9,0.4 -1.9,49.3 -11.8,0.5 -1.4,40.4 3.2,2 6.5,13.2 -1.5,8.4 2.5,4.9 8.5,-1.4 6.2,-6.2 5.8,-4.2 3.2,-6.6 6,-3.2 4.9,1.7 5.5,3.9 9.6,0.6 7.8,-3.2 1.4,-4.3 2.4,-6.6 6.5,-1.1 3.9,-5.2 4.4,-9.3 11.2,-10.3 17.3,-10.2 -7.3,-6.2 -9.2,-2.1 -3.1,-8.8 0.2,-4.9 -5.1,-1.5 -13,-15.2 -3.5,-8 -2.3,-2.4 -4.2,-11.1 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="CF"
     data-name="Central African Rep."
     data-id="CF"
     d="m 587,398.1 -1,-0.7 -4.2,-4 -0.9,-4.3 1.9,-5.7 -0.1,-5.7 -7.2,-8.6 -1.5,-5.9 -7.7,2.3 -6,5.6 -8.6,15.1 -11.3,6.4 -11.8,-0.8 -3.4,1.2 1.2,4.9 -6.3,4.8 -5.1,5.4 -15.3,5.3 -3,-3.1 -2.1,-0.3 -2.2,3.6 -10,1 -6.1,14 -2.9,2.6 -0.8,10.7 1.2,5.8 -0.9,4.1 5.8,7.3 1,4.9 4.6,7.2 5.6,4.4 0.6,6.3 1.3,4 6.3,-12.8 7.3,-7.4 8.2,2.4 7.9,0.7 1,-9.6 4.7,-7.1 6.5,-4.4 10.1,4.7 7.8,5.1 9,1.4 9.1,2.7 3.6,-8.4 1.6,-1.1 5.6,1.4 13.5,-6.9 4.9,3 3.9,-0.5 1.8,-3.3 4.5,-1.2 9.2,1.4 7.9,0.4 4,-1.5 -2,-4.4 -9.2,-5.5 -3.2,-8.3 -5.2,-6 -8.3,-7.2 -0.1,-4.5 -6.8,-5.5 -8.4,-5.4 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="CI"
     data-name="Côte d'Ivoire"
     data-id="CI"
     d="m 230.4,373.8 -5,2.1 -2.9,1.7 -1.8,-5.9 -3.5,1.6 -2.1,-0.3 -2.3,4 -9.4,-0.1 -3.3,-2.1 -1.6,1.3 -2.5,1.1 -1,4.7 2.8,5.7 3,11.1 -4.6,1.6 -1.1,1.9 0.9,2.7 -0.8,6.1 -1.9,0 -0.6,4 1.2,6.7 -2.7,6.1 3.6,3.8 3.8,0.9 5.2,5.8 0.3,5.5 -1.1,1.7 -1,11.4 2.3,0.4 12.1,-5.1 8.5,-4 14.5,-2.4 7.8,-0.2 8.5,2.7 5.6,-0.1 0.5,-5.5 -5.2,-11.9 3.2,-15.6 5.1,-11.6 -3.2,-19.7 -8.3,-3.6 -5.7,0.6 -4.3,3.4 -5.4,-2.9 -2.1,-4.6 -5.5,-3 z"
     style="none" />
  <path
     inkscape:connector-curvature="0"
     id="CM"
     data-name="Cameroon"
     data-id="CM"
     d="m 477.5,366.6 0.4,-9.2 -1,-9.1 -4.9,-8.9 -3.4,0.8 -0.4,4.4 4.9,5.5 -1.3,2.5 -0.5,4.6 -10.2,10.7 -3.1,8.8 -1.6,7.2 -2.6,3.1 -2.4,9.7 -6.4,5.7 -1.9,7 -2.7,5.6 -1.1,5.7 -8.3,4.7 -6.9,-5.7 -4.6,0.2 -7.2,8.1 -3.6,0.1 -5.7,13.4 -3.1,9.8 -0.1,3.8 3.1,2 2.5,6.2 5.6,2.3 4.8,9.2 -1.8,10.9 19.9,0.3 5.8,-0.9 7.4,1.9 7.3,-1.8 1.5,0.7 15.4,0.6 9.9,3.6 9.7,3.3 0.9,-7.5 -1.3,-4 -0.6,-6.3 -5.6,-4.4 -4.6,-7.2 -1,-4.9 -5.8,-7.3 0.9,-4.1 -1.2,-5.8 0.8,-10.7 2.9,-2.6 6.1,-14 1.8,-3.7 -3.9,-9.6 -1.8,-5.7 -5.3,-2.3 -7.2,-8.1 2.5,-6.5 5.6,1.3 3.4,-0.9 6.8,0.1 -6.8,-12.6 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="CD"
     data-name="Dem. Rep. Congo"
     data-id="CD"
     d="m 618.3,446 -9.2,-1.4 -4.5,1.2 -1.8,3.3 -3.9,0.5 -4.9,-3 -13.5,6.9 -5.6,-1.4 -1.6,1.1 -3.6,8.4 -9.1,-2.7 -9,-1.4 -7.8,-5.1 -10.1,-4.7 -6.5,4.4 -4.7,7.1 -1,9.6 -0.7,8.4 -3.6,7.4 -2.4,8.6 -1.5,12.3 0.7,7.8 -2,4.8 -0.3,5.1 -1.4,4.4 -8.1,6.7 -5.6,7.1 -5.3,13.4 0.3,11.4 -3.1,4.4 -7.2,6.8 -7.2,8.7 -4.5,-2.5 -0.8,-3.9 -6.6,-0.1 -4.2,5.3 -3.2,-1.4 -4.5,2.9 -2,3.5 -0.4,6 -3.1,1.5 1.6,4.3 5.1,-1.9 3.5,0.3 4.3,-1.7 36,0.2 2.9,10.3 3.5,8.3 2.7,4.5 4.6,7.2 8.1,-1.1 4,-1.9 6.7,1.9 1.9,-3.4 3.1,-8.1 7.6,-0.5 0.7,-2.4 6.2,-0.1 -1.1,5 14.8,-0.1 0.1,8.7 2.4,5.3 -1.9,8.4 0.8,8.5 3.9,5.1 -0.9,16.5 3,-1.3 5.3,0.3 7.6,-2 5.5,0.8 4.2,0.3 0.6,4.3 5.7,-0.3 7.7,1.3 3.9,6.2 9.7,2 7.5,-4.4 2.6,7.3 9.2,1.9 4.3,5.9 4.8,7.6 9.3,0.1 -0.6,-14.9 -3.4,2.5 -8.4,-5.4 -3.2,-2.4 1.9,-13.9 2.5,-16.4 -2.6,-6.1 3.6,-8.8 3.3,-1.7 16.4,-2.3 2.1,0.6 0.6,-2.3 -3.4,-3.7 -1.5,-7.6 -7.3,-7.6 -4.1,-9.9 2.3,-5.8 -3.2,-7.8 2.4,-22.1 0.1,0.2 -0.1,-2.4 -3,-6.3 1.2,-7.6 1.7,-1 0.5,-8.3 3.5,-3.8 0.1,-10.5 2.9,-5.3 0.6,-11.1 2.6,-6.4 4.6,-7.2 4.7,-3.7 3.9,-4.9 -4.9,-1.9 0.6,-16.1 0,0 -10.9,-9.2 -2.9,-5.9 -6.8,2.9 -5.7,-0.9 -3.2,2.3 -5.5,-1.7 -7.5,-11.4 -4,1.5 -7.9,-0.4 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="CG"
     data-name="Congo"
     data-id="CG"
     d="m 521.5,468.8 -7.9,-0.7 -8.2,-2.4 -7.3,7.4 -6.3,12.8 -0.9,7.5 -9.7,-3.3 -9.9,-3.6 -15.4,-0.6 -0.9,6.1 3.4,7.1 9.1,-1.1 3.1,2.7 -5.3,16.1 5.8,8.2 1.3,10.8 -1.6,9.2 -3.7,6.5 -10.8,-0.6 -6.5,-6.6 -1,6.1 -8.3,1.7 -4.2,3.5 4.6,9.1 -9.3,7.7 9.9,14.6 5,-6 3.7,-2.3 4.6,4.8 3.2,1.4 4.2,-5.3 6.6,0.1 0.8,3.9 4.5,2.5 7.2,-8.7 7.2,-6.8 3.1,-4.4 -0.3,-11.4 5.3,-13.4 5.6,-7.1 8.1,-6.7 1.4,-4.4 0.3,-5.1 2,-4.8 -0.7,-7.8 1.5,-12.3 2.4,-8.6 3.6,-7.4 0.7,-8.4 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="DJ"
     data-name="Djibouti"
     data-id="DJ"
     d="m 820.3,358.7 -5.3,-3.8 6.8,-3.3 0.1,-5.7 -3,-4.3 -3.6,3.4 -5.2,-1.2 -4,6.1 -3.9,6.5 1.1,3.8 0.3,4.2 6.8,0.2 2.9,-0.9 2.8,2.4 4.2,-7.4 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="DZ"
     data-name="Algeria"
     data-id="DZ"
     d="M 392.4,5.7 384.6,6.5 379.8,3.3 367.6,3.4 357,8.9 351.2,6.8 332.3,8 l -19.4,2.5 -11,4.3 -7.2,5.8 -12.4,2.4 -11.1,7.7 4.2,9 0.7,8.4 3.9,14.7 3.1,2.9 -2.2,5.4 -15.2,2.3 -5.4,5.1 -6.7,1.2 -0.6,10.2 -13.8,5.4 -4.6,7 -9.6,3.7 -11.8,2.1 -19.2,10.2 -0.2,16.3 0,1 -0.3,2.7 44.1,33.5 40,30.2 40.4,30.2 2.9,6.4 7.5,4 5.5,2.2 0.2,8.8 13.3,-1.3 16.9,-6.2 34.5,-27.1 40.5,-26.4 -5.4,-8.7 -9.6,-6.4 -5.5,2.5 -4.3,-7.7 -0.6,-5.9 -7.2,-10.1 4.6,-5.8 -1.3,-8.7 1.4,-7.6 -1,-6.3 1.8,-11.3 -0.8,-6.4 -4.1,-12.2 -5.7,-24.7 -7.3,-5.6 -0.2,-3.3 -9.7,-8.3 -1.3,-10.4 7,-7.8 2.4,-11.6 -2.3,-13.4 2.2,-7.2 z"
     style="fill:#f2f2f2" />
  <path
     inkscape:connector-curvature="0"
     id="EG"
     data-name="Egypt"
     data-id="EG"
     d="m 628.8,88.1 -11.9,-4 -11.5,-3.7 -15.6,0.2 -3.7,6.6 2.2,5.9 -2.4,8.5 4.2,11.2 2.9,49.2 2.2,50.9 48.1,0 46.4,0 47.4,0 -2.2,-2.8 -14.7,-12.4 -0.9,-9 2.2,-2.4 -11.6,-15.3 -4.4,-7.9 -4.9,-7.5 -10.5,-21.6 -8.4,-13.9 -6.1,-14.5 1.1,-1.3 10.1,19.8 5.8,6.2 4.3,4.4 2.5,-2.4 2.7,-7.2 1.6,-10.4 2.8,-5.6 -1.5,-3.5 -8.5,-20.1 0,0 -5.4,3.4 -9.2,-0.8 -9.6,-3.2 -2.3,4.5 -3.8,-6.8 -8.5,-1.8 -10.2,1.2 -4.5,3.9 -8.6,4.4 -5.6,-2.2 z"
     style="fill:#f2f2f2" />

</svg>

how react hook form handle form Changes?

I’ve recently started using React Hook Form and I’m curious about how it operates. As far as I understand, it doesn’t rely on useState to manage input states or set input values using ref.value.

Therefore, I’m wondering how React Hook Form manages input changes and reflects those changes without using useState or ref.value. How does it set input values without using these methods to achieve no re-render on input changes?

searching on google and youtube and asking from chatgpt and bard not helped me

Trying to use AJAX to delete one item

I created a list of games in HTML and implemented a JavaScript function with AJAX to allow users to delete a game when they click on the Trash Can icon.

However, it’s important to note that I have added an attribute called gameid to each game, which stores the unique code for each game. When the Trash Can is clicked, it sends this gameid to the game-delete.php script, which then executes a query to delete the corresponding game. However, it appears that the “gameid” is being received as null in this process.

    document.addEventListener("DOMContentLoaded", function () {
        var gameDelete = document.querySelectorAll(".delete-game");
        console.log(gameDelete);
        gameDelete.forEach(function (button) {
            button.addEventListener("click", function (e) {
            const gameId = e.target.getAttribute("gameid");
            if (confirm("Want delete this game?")) {
                console.log(gameId); //return null
                const xhr = new XMLHttpRequest();
                xhr.open("POST", "game-delete.php", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log("Response:", xhr.responseText); 
                    }
                };
                xhr.send("gameid=" + gameId);
            }
        })
    })
});

When I useconsole.log(e.target), it displays the values of gameid, and upon inspecting the HTML, I can confirm that gameid is present in the markup. However, it seems that the gameid is still being received as null during the AJAX request to game-delete.php.

Developer Tools: (https://i.stack.imgur.com/VLeWs.png)

My nested loop is not moving on to the next loop

My project is to make a todo list using prompt and the console. so far if i type in q/quit it will stop, and if I enter list it will list all the to do in the console. I already have 2 to-dos imbedded in the JS but when ever i enter new it should ask me what i want to add but all it does is list the to-dos. I added the pic of my code and page and console and also a pic of what my code should look like when im done

my code
answer

Is there a way to set token background color in monaco editor?

I want to customize a language with tokens that have a background color. Setting foreground color (the color of the text itself) is as simple as setting the foreground option:

{
    token: "comment.css",
    foreground: "000000", // this will make the font color black
    background: "0000ff"  // this will not make the background blue
}

However a similar background option does nothing in monaco 0.38.0 (and apparently in 0.44.0, as I tested in playground).

Can you provide any solution to this, even a hacky one?

How to get random elements of an array multiple times equally?

I have a table for a month with a row for each day of the table and an array with names. For every day there should be picked a random name from the array while every name should be picked about the same amount of times if possible.

The following function checks if every user in the array is available for the certain day and excludes the name if not.

function generateRandomSchedule(month) {
    // some more code including variable declaration here

    for(let i=1; i<daysInMonth+1; i++) {
        let date = `${moment(i, 'D').format('DD')}.${monthNumber}.`;
        // filter required keys
        const keys = Object.keys(localStorage).filter(key => key.includes(date) && !key.startsWith(month));
        let excludeUsers = [];
        keys.forEach((key) => {
            let keyValue = localStorage.getItem(key);
            // check if user is available for the certain day
            if(key.includes('Urlaub') && dutyUserArray.includes(keyValue)) {
                excludeUsers.push(keyValue);
            }
            if(key.includes('Spaet') && dutyUserArray.includes(keyValue)) {
                excludeUsers.push(keyValue);
            }
        })
        // remove unavailable users from array
        let updatedArray = dutyUserArray.filter(user => !excludeUsers.includes(user));

        // get random user from the available users
        let randomName = updatedArray[Math.floor(Math.random() * updatedArray.length)];

        // some more code to add randomName to table here
    }
}

This code works fine so far, just that it’s picking random array elements unequally, e.g. name1 has been added 6 times to the table while name2 just once and name3 4 times.

Puppeteer, Debian 11, Loading chunk failed on Odds Portal scrapping

I’m using puppeteer to scrap match data from https://www.oddsportal.com/
I’m developing my project on Windows 10 and here everything works well.

But I want my program to run on my Debian 11 server. But when I run my program on my server, with headless Chromium browser, I get these errors more or less 3 over 4 times when I load an Odds portal page:

{
    message: 'Loading chunk 4402 failed.n' +
    '(error: https://www.oddsportal.com/res/public/js/build/4402.be189ee4615a6b8d.js)',
    name: 'ChunkLoadError',
    type: 'error',
    request: 'https://www.oddsportal.com/res/public/js/build/4402.be189ee4615a6b8d.js'
}

with multiple chunks

and:

{                                                                                     
   config: {                                                                                                     
     url: '/ajax-max-odds/all/',                                                                                 
     method: 'get',                                                                                              
     headers: {                                                                                                  
       Accept: 'application/json, text/plain, */*',                                                              
       'X-Requested-With': 'XMLHttpRequest',                                                                     
       'X-XSRF-TOKEN': 'eyJpdiI6IkEyZFdweitieTdReGpIQ01Uc2ozZVE9PSIsInZhbHVlIjoiM2VqZEhqM0FES3B0czZ0K2ZZTCtJc1VIa
XVFc2NqMWJsRXYwOEJyaDhDTnBlTy84SkltVnBaNW5sRDdvdlNZV2RnQnJSdVpodEFVNFgzOGhSeWpnMVRKdmtvaVlKRWJGZyswc0JQYW9EY01EVG
U4YmMyODMxNDIxMDlmNGZiODJjOWViYTRjMDM2OTdhMTZjNmE4NGFhNGE1ZjkzZGZlYTI3N2VhIiwidGFnIjoiIn0='                      
     },                                                                                                          
     transformRequest: [ {} ],                                                                                   
     transformResponse: [ {} ],                                                                                  
     timeout: 0,                                                                                                 
     adapter: {},                                                                                                
     xsrfCookieName: 'XSRF-TOKEN',                                                                               
     xsrfHeaderName: 'X-XSRF-TOKEN',                                                                             
     maxContentLength: -1,                                                                                       
     maxBodyLength: -1,                                                                                          
     validateStatus: {},                                                                                         
     transitional: {                                                                                             
       silentJSONParsing: true,                                                                                  
       forcedJSONParsing: true,                                                                                  
       clarifyTimeoutError: false                                                                                
     }                                                                                                           
   },                                                                                                            
   request: {},                                                                                                  
   response: {                                                                                                   
     data: '',                                                                                                   
     status: 520,                                                                                                
     statusText: '',                                                                                             
     headers: {                                                                                                  
       'accept-ranges': 'bytes',                                                                                 
       age: '0',                                                                                                 
       date: 'Thu, 02 Nov 2023 21:35:34 GMT',                                                                    
       server: 'nginx',                                                                                          
       'x-cache': 'uncached',                                                                                    
       'x-deliver': 'Thu, 02 Nov 2023 21:35:34 GMT'                                                              
     },                                                                                                          
     config: {                                                                                                   
       url: '/ajax-max-odds/all/',                                                                               
       method: 'get',                                                                                            
       headers: [Object],                                                                                        
       transformRequest: [Array],                                                                                
       transformResponse: [Array],                                                                               
       timeout: 0,                                                                                               
       adapter: {},                                                                                              
       xsrfCookieName: 'XSRF-TOKEN',                                                                             
       xsrfHeaderName: 'X-XSRF-TOKEN',                                                                           
       maxContentLength: -1,                                                                                     
       maxBodyLength: -1,                                                                                        
       validateStatus: {},                                                                                       
       transitional: [Object]                                                                                    
     },                                                                                                          
     request: {}                                                                                                 
   },                                                                                                            
   isAxiosError: true,                                                                                           
   toJSON: {}                                                                                                    }

My server is only headless, so I can’t know if this is linked, but working perfectly headless on Windows. I also tried a lot of different browser args but no one solved my problem.

The thing is:

  • Why is this working well on Windows and not with Debian?
  • When I reload the page, sometimes it works, sometimes not -> why?
  • Is there a way to fix it ?

Thanks for your help!

Cannot send poost request to test paypal integration in javascript app

I am trying to integrate paypal payment into a javascript application, but i am not able to test the orders processing because when i send a post request within createOrder function I get the following error:

Access to fetch at 'https://api-m.sandbox.paypal.com/create-paypal-order' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

here is muy code:

  createOrder(data, actions) {

        // Order is created on the server and the order id is returned
        return fetch("https://api-m.sandbox.paypal.com/create-paypal-order", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            // use the "body" param to optionally pass additional order information
            // like product skus and quantities
            body: JSON.stringify({
                orderID: data.orderID
            }),
        })
        .then((response) => response.json())
        .then((order) => order.id);
    }

Any help please ?

Get weekly check in in a month through Javascript

In Javascript, how do I get the number of check ins weeks in a month? I can’t seem to find code for this anywhere.

To be more specific, I would like the number of check in of user of a weeks that have at least one day in the week (a week being defined as starting on Sunday and ending on Saturday).

For example an user can only check in 3 times in a week, but in “broken” weeks how is it possible to check if the user has already checked in 3 times?

S  M  T  W  R  F  S
         1  2  3  4
5  6  7  8  9  10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

When the user checks in on the first two days of the week it is registered, but when the month changes it is as if he had not checked in at all that week, how can I solve this?

const checkInOnWeek = await this.checkInsRepository.findByPlayerIdOnWeek(
      player_id,
      check_in_date,
    );

    const week = [];
    const current = new Date();
    // Starting Sunday not Monday
    current.setDate(current.getDate() - current.getDay());
    for (let i = 0; i < 7; i++) {
      week.push(new Date(current));
      current.setDate(current.getDate() + 1);
    }

    const datascheckin = week.map(date => {
      const firstdayFormatted = format(date, 'dd/MM');

      return firstdayFormatted;
    });

    const dataFormatada = format(check_in_date, 'dd/MM');

    const a = datascheckin.some(data => {
      return data === dataFormatada;
    });

    if (checkInOnWeek.length > 3) {
      console.log(
        `Qtd de checkins semanal atingida,
        ${checkInOnWeek[0].check_in_date}, Id ${checkInOnWeek[1].player_id}`,
      );
      throw new AppError('Weekly scheduling limit reached!', 400);
    }


    const countCheckInDate = await this.checkInsRepository.countSpacesRemaining(
      check_in_date,
    );


     const checkIn = await this.checkInsRepository.create({
       player_id,
       check_in_date,
     });

     return checkIn;

Result obtained

WordPress website with Woocommerce. super weird issue at checkout

I have a really odd issue with a website of a friend.

The website is hardingsfurniture.nz

Issue / Steps to replicate the issue

When an item is put in the cart and then you head directly to checkout.
Then Select required shipping option – values don’t change. **

**Caveat
If you are using a high resolution monitor it will work (for example 4k)
When using 1080p monitor its more likely to fail.
In this case, the calculation step performed is not being triggered.
If (in the case of a 1080p resolution screen) you zoom the page out so the whole page can be seen, the shipping works fine.

I’m lost, when I use Chrome and inspect the page (and head under network) I can see a process trigger when the page is scrolled down to the bottom and am assuming that this is the triggering process ?

Any smart people out there is any ideas i can try ?
I appreciate the help 🙂

Tried disabling all cache plugins, checked all settings.
All plugins/themes up to date.

Vue Router with Nginx Proxy Manager resulting in 404 not found error

I have a Vue.js 3 application with Vue Router 4 for client-side routing. The application is served using Nginx Proxy Manager in a Docker container.

When trying to access the URL https://www.myurln.pt/cancel-appointment, the server returns a 404 not found error. The expected behavior is for the Nginx server to properly route the request to my Vue app’s index.html so that Vue Router can handle the route.

The Nginx Proxy Manager container is set up to handle proxy hosts with the correct reverse proxy configurations. I have updated the location / block in my proxy host config file to include the ‘try_files’ directive:

location / { try_files $uri $uri/ /index.html; }

However, the issue persists.

I have followed recommended steps to troubleshoot the issue, including:

  • Clearing the browser cache and using incognito/private browsing windows.
  • Ensuring that my browser is requesting the latest version of my application after making changes.
  • Restarting the container and reloading the Nginx service.

My Vue Router is configured using history mode and works as expected in my local development environment. I only experience this issue when accessing the live site hosted with Nginx Proxy Manager.

I’m seeking help in mitigating this 404 not found error issue and ensuring that my Vue Router works correctly with Nginx Proxy Manager.

Is there a way to simplify this code creating css variables with javascript for specific breakpoints on my webpage?

I am using this bit of javascript code to create a string with css variables in it.
It helps me to specifically set a size for each breakpoint on a webpage.

This is my code:

const sizes = {
  xs: 0.9,
  md: 2,
  lg: 2.5,
  xl: 4
};

function getCssVar(size) {
  var varStr = "";

  const defaultBPs = ["xs", "sm", "md", "lg", "xl"];

  defaultBPs.forEach(bp => {
    const bpi = defaultBPs.indexOf(bp);
    var nextHigherIndex = defaultBPs.indexOf(Object.keys(size)[getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp))]);

    if (getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp)) === Object.keys(size).length) {
      nextHigherIndex = defaultBPs.length;
    }

    if (size[bp]) {
      defaultBPs.forEach(bp2 => {
        const bp2i = defaultBPs.indexOf(bp2);
        const generateVar = " --size-" + bp2 + ":" + size[bp] + ";";

        if (bp2i >= bpi && bp2i < nextHigherIndex) {
          varStr += generateVar;
        }
        
      })
    };

  });
  return varStr;
}

function getNextHighestIndex(arr, value) {
  var i = arr.length;
  while (arr[--i] > value);
  return ++i; 
}


console.log(getCssVar(sizes));

The Output is the following:

 --size-xs:0.9; --size-sm:0.9; --size-md:2; --size-lg:2.5; --size-xl:4;

This is technically the correct answer and this code already works but I am still wondering if there is any way to improve my code.

I want it to be a shorter and more compact but with the same output.

Any help will be appreciated.
Thanks.

iterate array using map and display state and checkbox

I am trying to lean react by solving a problem in react. Providing the react code challenge below.
I am trying to iterate the array and trying to print state and checkbox.

I googled but still no luck, not sure how to solve it. Providing my code below and stackblitz. Can you guys help me.

Type ‘void[]’ is not assignable to type ‘ReactNode’.

https://stackblitz.com/edit/stackblitz-starters-ngl4yu?description=React%20%20%20TypeScript%20starter%20project&file=src%2Fcomponents%2FstateDropdown.css,src%2Fcomponents%2FStateDropdown.tsx,src%2FApp.tsx,src%2Fcomponents%2FStates.tsx&title=React%20Starter

import { useState } from 'react';
import './stateDropdown.css';
import { states } from './States';
export function StateDropdown() {
  const [isDropDownDisplayed, setIsDropdowndisplayed] = useState(false);
  return (
    <fieldset className="state-dropdown">
      <button
        className=""
        onClick={() => setIsDropdowndisplayed((prevState) => !prevState)}
      >
        -- Select your states --
      </button>
      {isDropDownDisplayed && (
        <div className="panel">
          {states.map((state) => {
            <>
              <input type="checkbox" />
              <label>{state.name}</label>
            </>;
          })}
        </div>
      )}
    </fieldset>
  );
}

https://www.youtube.com/watch?v=V2zEAXLQbF4&t=794s