Category: javascript

I have a node.js and MySQL project. the user inputs the date from a dropdown and submits the form. In the backend, i see proper date but when i fetch it, its 1 day behind. Ive read that it might be a UTC problem but i dont understand how to fix it
I have some custom js for this to avoid userinput

html:

            <label for="dob" class="form-label">Date of Birth</label>
            <input type="date" class="form-control" id="dob" name="dob" required value="{{formData.dob}}">
            <div class="invalid-feedback">Please enter your date of birth.</div>
          </div>

and the js:

  //set limit
  const dateInput = document.getElementById("dob");
  const maxDate = new Date().setFullYear(new Date().getFullYear() - 18);
  dateInput.setAttribute("max", new Date(maxDate).toISOString().split('T')[0]);

  dateInput.addEventListener("keydown", function(event) {
    event.preventDefault(); // Prevent typing
  });
  dateInput.addEventListener("input", function(event) {
    event.preventDefault(); // Prevent input
  });

1. My app is created using Vue JS 3 and firebase is installed as a
   dependency.

2. I created a firebase app to handle the backend. To
   handle the rest api calls from the Vue JS app I am creating a
   firebase function.

3. The function has following dependencies in package.json:

   “dependencies”: {
   “cors”: “^2.8.5”,
   “express”: “^4.21.2”,
   “firebase-admin”: “^12.6.0”,
   “firebase-functions”: “^6.0.1”
   },

4. The index.js in the functions folder looks like below:

const {onRequest} = require("firebase-functions/v2/https");
const {getAuth} = require("firebase-admin/auth");

const express = require("express");
const app = express();

// Add middleware to authenticate requests
app.use(async (req, res, next) => {
  const authHeader = req.headers.authorization || "";
  const token = authHeader.split("Bearer ")[1];

  if (!token) {
    return res.status(401).json({error: "Unauthorized"});
  }

  try {
    const decodedToken = await getAuth().verifyIdToken(token);
    req.user = decodedToken;
    next();
  } catch (error) {
    console.error("Error verifying token:", error);
    res.status(403).json({error: "Forbidden"});
  }
});

app.get("/hello", (req, res) => {
  res.json({message: "Hello, world!"});
});

// Expose Express API as a single Cloud Function:
exports.api = onRequest(app);

Here the function’s name is: “api”.
Now this setup works fine in local while testing.

After deploying the function the function url looks something like this: “https://REGION-MY-APP-NAME.cloudfunctions.net/api”.

Now, from the Vue JS 3 app, using axios I am trying to hit the above end point and using a firebase method to generate the token which looks like below:

    const userCredential = await signInWithEmailAndPassword(auth, emailId.value, password.value);
const token = await userCredential.user.getIdToken(); // Get the token

But this gives CORS error in the browser, (Note: I tried adding cors policy in my function code to allow all origin but it did not help)

On the other hand, in the Cloud run Function log, it says:

“The request was not authenticated. Either allow unauthenticated
invocations or set the proper Authorization header. Read more at
https://cloud.google.com/run/docs/securing/authenticating Additional
troubleshooting documentation can be found at:
https://cloud.google.com/run/docs/troubleshooting#unauthorized-client”

After getting this error, I removed below code from my index.js as well and tried. but gave the same error:

// Add middleware to authenticate requests
app.use(async (req, res, next) => {
  const authHeader = req.headers.authorization || "";
  const token = authHeader.split("Bearer ")[1];

  if (!token) {
    return res.status(401).json({error: "Unauthorized"});
  }

  try {
    const decodedToken = await getAuth().verifyIdToken(token);
    req.user = decodedToken;
    next();
  } catch (error) {
    console.error("Error verifying token:", error);
    res.status(403).json({error: "Forbidden"});
  }
});

I know, there is an option “Allow unauthenticated invocations” under the function settings. But due to some policy restriction I am unable to do so.

And I also know that there is some problem in either my token generation method in my Vue JS 3 app. I found a link to generate the token in node js (https://cloud.google.com/docs/authentication/get-id-token#node.js)

My problem is I only have a Vue JS 3 app in front-end and I want to use this 2nd gen function as my backend with express js to do backend related tasks like storing and retrieving data from Cloud FireStore and related things… But stuck at this authentication error. Need to help resolving this 403 auth error.

If any other information is needed. Please let me know, I will provide.

some webp images when saved have .jpg extension but I want to explicitly disallow webp type files because it is still too heavy in size for my storage. This is my working code in javascript that detects and disallows non jpg/png file extensions, but webp images with extensions of jpg obviously will still pass through

$.each(previousFiles, function(index, file) {

const fileExtension = file.name.split('.').pop().toLowerCase();

    if (!allowedExtensions.includes(fileExtension)) {

        alert('Only JPG and PNG files are allowed.');

            return;

    }

};

once passed through ajax, I also process it in PHP and this is my code to only allow jpeg, jpg, png files

$filePath = $uploadPath . $newName;

$fileExtension = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));

if (!in_array($fileExtension, ['jpeg', 'jpg', 'png'])) {

    return $this->response->setJSON([

    'success' => false,

    'message' => 'Only JPG and PNG files are allowed.'

    ]);

}

but the webp images still gets through most likely because these codes only detect the extension. How can I detect if it is a webp and explicitly return a message that it is not allowed?

I have tried using this code

$.each(previousFiles, function(index, file) {

const fileExtension = file.name.split('.').pop().toLowerCase();

    if (!allowedExtensions.includes(fileExtension)) {

        alert('Only JPG and PNG files are allowed.');

            return;

    }

};

once passed through ajax, I also process it in PHP and this is my code to only allow jpeg, jpg, png files

$filePath = $uploadPath . $newName;

$fileExtension = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));

if (!in_array($fileExtension, ['jpeg', 'jpg', 'png'])) {

    return $this->response->setJSON([

    'success' => false,

    'message' => 'Only JPG and PNG files are allowed.'

    ]);

}

still webp images with jpg extensions passes through. I am guessing I need more than a file extension detection code but I am at my wits end.

I have a chat widget built with React.
The button to open the widget looks like this:

I ran npm run build, which produced the build folder.
The build folder looks like this:

I copied the build folder to a FastAPI server and changed the name of the main javascript and main css to this:

I serve the files with these FastAPI routes:

In the HTML where I want to embed the widget (the host website), I put a link tag and a script tag to pull the main js and css from the FastAPI server.

I do npm run start on the host website and get this:

The brain PNG is not found. Looking in the network tab, I see this:

It’s looking for the brain image at http://localhost:3001/static/media/brain.05079b7891cefa47d585.png

What’s the proper way of embedding a React build folder to an existing React website? I tried looking in the docs but no luck.

i am following this documentation to implement faebook share using javascript sdk

https://developers.facebook.com/docs/sharing/reference/share-dialog/

here is the full code.

<body>


<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : '${grailsApplication.config.facebookAppId}',
            xfbml            : true,
            version          : 'v21.0'
        });


    };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>




<a href="#" onclick="myFacebookLogin()">Share me</a>





<script>
// Only works after `FB.init` is called
function myFacebookLogin() {

    $('#fooBar').hide();
    $('#noThanksSection').hide();
    $('#status').show();
    
    
    
    var lnk = $('input[name=referralLink]').val();
    


    FB.ui({
        method: 'share',
        href: lnk
        }, function(response){


            if(response  &&  !response.error_code){
                    $('#nextSection').show();
                    $('#noThanksSection').hide();
                    alert("Post was successful!");
                    $('#status').hide();
            }
            else{
                    alert('Error occured! Please try again!');
                $('#fooBar').show();
                $('#noThanksSection').show();
                $('#status').hide();

            }


        });



}
</script>

<body>

Clicking on the button will show the share popup window. After sharing the post, the javascript true block should execute in if(response && !response.error_code){ but the false block is executing. The response is empty.

How can we know if the facebook post was shared or the popup window was closed without sharing?

I appreciate any help! Thanks!

I’ve build a basic webpage with a countdown timer that plays 3 short sounds at different points through the countdown, once the countdown is complete, a stopwatch timer appears and waits for the user to press stop.

The .play() function doesn’t seem to work on my iPhone for both Chrome and Safari. None of the three sounds are audible at all.

It plays fine for desktops and there are no issues at all.

Is there a fix for this? The whole idea of the training tool is that it is supposed to work on mobiles so competitors can train their reaction times at home.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
    #processed-content {
        background-image: url('https://www.slslnc.org.au/wp-content/uploads/timerbackground.jpg');
        background-position: center;
        background-size: cover;
        min-height: 96vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px;
        text-align: center;
    }

    #processed-content h1,
    #processed-content p {
        color: black;
        text-shadow: 0 0 15px white;
        font-size: 2rem;
        margin:50px 0;
    }
    
    p#timerDisplay.instructions {
    font-size: 18px !important;
}

    #processed-content button {
        color: black;
        font-size: 2rem;
        margin:20px 0;
    }
    .start-button {
        background-color:#ffd520;
        border:2px solid black;
    }
    .stop-button {
        background-color:#ed1c2e;
        border:2px solid black;
    }
    .reset-button {
        background-color:#00cc36;
        border:2px solid black;
    }
    .save-button {
        background-color:#0066db;
        border:2px solid black;
    }
    
    .hidden {
        display: none;
    }
    
    @media screen and (max-width:768px) {
    p#timerDisplay.instructions {
    font-size: 18px !important;
    }
}
</style>

<div id="processed-content">
    <h1 class="text-2xl font-bold mb-4">Beach Flags Reaction Time Trainer</h1>
    <button id="startButton" class="bg-gold hover:bg-gray-200 text-black font-bold py-4 px-10 rounded mb-4 start-button">START</button>
    <p id="timerDisplay" class="text-lg mb-4 instructions">When you press START, you will have up to 15 seconds to get into position and be ready for the audio prompts...</p>
    <button id="stopButton" class="hidden bg-white hover:bg-gray-200 text-black font-bold py-4 px-10 rounded mb-4 stop-button">STOP</button>
    <button id="resetButton" class="hidden bg-white hover:bg-gray-200 text-black font-bold py-2 px-4 rounded reset-button">RESET</button>
    <button id="screenshotButton" class="hidden bg-white hover:bg-gray-200 text-black font-bold py-2 px-4 rounded mt-4 save-button">SAVE SCREENSHOT</button>
</div>

<audio id="readyAudio" src="https://www.slslnc.org.au/wp-content/uploads/competitorsready.mp3"></audio>
<audio id="headsDownAudio" src="https://www.slslnc.org.au/wp-content/uploads/headsdown.mp3"></audio>
<audio id="whistleAudio" src="https://www.slslnc.org.au/wp-content/uploads/whistle.mp3"></audio>

<script>
    const startButton = document.getElementById("startButton");
    const stopButton = document.getElementById("stopButton");
    const resetButton = document.getElementById("resetButton");
    const screenshotButton = document.getElementById("screenshotButton");
    const timerDisplay = document.getElementById("timerDisplay");

    const readyAudio = document.getElementById("readyAudio");
    const headsDownAudio = document.getElementById("headsDownAudio");
    const whistleAudio = document.getElementById("whistleAudio");

    let countdownTimeout, headsDownTimeout, whistleTimeout, stopwatchInterval;
    let startTime;

    startButton.addEventListener("click", function() {
        startButton.classList.add("hidden");
        timerDisplay.textContent = "Get ready...";

        const randomCountdown = Math.floor(Math.random() * 6) + 10;

        countdownTimeout = setTimeout(() => {
            readyAudio.play();
            
            const randomReadyTime = Math.floor(Math.random() * 2) + 3;

            headsDownTimeout = setTimeout(() => {
                headsDownAudio.play();
                
                const randomWhistleTime = Math.floor(Math.random() * 3) + 2;

                whistleTimeout = setTimeout(() => {
                    whistleAudio.play();
                    startStopwatch();
                }, randomWhistleTime * 1000);
            }, randomReadyTime * 1000);
        }, randomCountdown * 1000);
    });

    function startStopwatch() {
        startTime = Date.now();
        stopButton.classList.remove("hidden");
        
        stopwatchInterval = setInterval(() => {
            const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2);
            timerDisplay.textContent = `Time: ${elapsedTime} s`;
        }, 10);
    }

    stopButton.addEventListener("click", function() {
        clearInterval(stopwatchInterval);
        stopButton.classList.add("hidden");
        resetButton.classList.remove("hidden");
        screenshotButton.classList.remove("hidden");
    });

    resetButton.addEventListener("click", function() {
        clearTimeout(countdownTimeout);
        clearTimeout(headsDownTimeout);
        clearTimeout(whistleTimeout);
        timerDisplay.textContent = "Get ready...";
        resetButton.classList.add("hidden");
        screenshotButton.classList.add("hidden");
        startButton.classList.remove("hidden");
    });

    screenshotButton.addEventListener("click", function() {
        html2canvas(document.querySelector("#processed-content")).then(canvas => {
            const link = document.createElement('a');
            link.href = canvas.toDataURL();
            link.download = 'reaction_time.png';
            link.click();
        });
    });

    function loadHtml2Canvas() {
        const script = document.createElement("script");
        script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
        document.body.appendChild(script);
    }

    loadHtml2Canvas();
</script>

I am using Firebase Cloud Messaging (FCM) to send data-only messages in my React Native app. However, when a notification is received in the foreground, I am getting two notifications in the handler.

const getFCMToken = async () => {
  try {
    let fcmToken = await AsyncStorage.getItem('fcmToken');
    console.log('******** fcmToken 1', fcmToken);

    if (!fcmToken) {
      // Get the FCM token
      fcmToken = await messaging().getToken();
      await AsyncStorage.setItem('fcmToken', fcmToken);
    }
    let data = { fcm_token: fcmToken };
    console.log('yvguhbijn', data);
    let response = await HomeService.postFCMToken(data);
    if (response?.data?.success) {
      Toast.show('FCM set successfully');
    }
  } catch (error) {
    console.error('Error getting FCM token:', error);
  }
};

const displayBgContent = async (remoteMessage) => {
  const { data } = remoteMessage;

  // Generate a default title and body if not provided
  const title = data?.title;
  const body = data?.body;

  // Safely parse the actions field
  let actions = [];
  try {
    const parsedActions = JSON.parse(data?.actions || '[]'); // Parse or default to an empty array
    actions = parsedActions.map((action) => ({
      title: action.name.toUpperCase(), // Example: "BUY"
      pressAction: {
        id: action.name, // Example: "buy"
        launchActivity: 'default',
      },
    }));
  } catch (error) {
    console.error('Failed to parse actions:', error);
  }
  // Check if the image URL exists and is valid
  const image = data?.image && data.image.trim() !== '' ? data.image : null;

  // Display notification using notifee
  if (actions.length == 0) {
    await notifee.displayNotification({
      title,
      body,
      android: {
        channelId: 'default',
        smallIcon: 'notification_icon', // Ensure you have this icon in your project
        largeIcon: image || 'default_icon', // Fallback to a local image if no valid URL
        importance: AndroidImportance.HIGH,
        pressAction: {
          id: 'default',
        },
        badge: true,
        color: '#FF7900',
        onlyAlertOnce: true,
        style: image
          ? {
              type: AndroidStyle.BIGPICTURE, // Show a big picture style notification
              picture: image,
            }
          : undefined, // Skip style if no image
      },
      ios: {
        foregroundPresentationOptions: {
          badge: true,
          sound: true,
          banner: true,
          list: true,
        },
        categoryId: 'customCategory', // Match the category ID registered earlier
        sound: 'default', // Notification sound
        attachments: image
          ? [
              {
                url: image, // Attach image only if it exists
              },
            ]
          : [], // Empty array if no image
      },
      data, // Include the original payload for further handling
    });
  } else {
    await notifee.displayNotification({
      title,
      body,
      android: {
        channelId: 'default',
        smallIcon: 'notification_icon', // Ensure you have this icon in your project
        largeIcon: image || 'default_icon', // Fallback to a local image if no valid URL
        importance: AndroidImportance.HIGH,
        actions: actions, // Attach dynamic actions
        badge: true,
        color: '#FF7900',
        onlyAlertOnce: true,
        style: image
          ? {
              type: AndroidStyle.BIGPICTURE, // Show a big picture style notification
              picture: image,
            }
          : undefined, // Skip style if no image
      },
      ios: {
        foregroundPresentationOptions: {
          badge: true,
          sound: true,
          banner: true,
          list: true,
        },
        categoryId: 'customCategory', // Match the category ID registered earlier
        sound: 'default', // Notification sound
        attachments: image
          ? [
              {
                url: image, // Attach image only if it exists
              },
            ]
          : [], // Empty array if no image
      },
      data, // Include the original payload for further handling
    });
  }
};

const listenToInAppNotifications = async () => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    await displayBgContent(remoteMessage);
    const { messageId } = remoteMessage;

    if (!messageId) {
      return;
    }

    // Cancel the notification after displaying it
    try {
      await notifee.cancelNotification(messageId);
      console.log(`Notification with ID ${messageId} canceled successfully`);
    } catch (error) {
      console.error(
        `Failed to cancel notification with ID ${messageId}:`,
        error,
      );
    }
  });

  return unsubscribe;
};

Getting two notifications in both android and ios.I am using firebase messaging and notifee for displaying the notifications.

My site is built on WordPress, but I also have many PHP based pages. My Wiki is built from my database. I am trying to show another page of my own site (entitycard.php) in a javascript popup iframe, when hovering over a link to show stats of in-game weapons/armors/items. It works great, but for some reason entitycard.php is giving me the WordPress “Sorry, no posts matched your criteria” issue.

See video below showing the problem on my site, but it working great on localhost. Here is also a screenshot of the issue on my site versus it working in localhost. I appreciate any insight.

Working in localhost versus issue in PROD:

Website where you can see the issue:
https://www.kisnardonline.com/wiki/players.php?name=Tomek
https://www.kisnardonline.com/wiki/entitycard.php?entityid=697711

entitycard.php is just a connection to database and then output. Nothing WordPress within it.

Code below for anyone who may want to beg, borrow, steal 🙂

CSS style:

    <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
        }
    </style>

onmouseover hover js/php and popup iframe:

...
echo "<td><a onmouseover="showPopup(this)" onmouseout="hidePopup(this)" href="entity.php?entityid=$entity_id">$name_with_quantityplusraritystarlevel</a></td>";
...
echo "<div id="myModal" class="modal">";
    echo "<div class="modal-content">";
        echo "<iframe onload="resizeIFrameToFitContent()" id="popupcontent" height="200px" width="150px"></iframe>";
    echo "</div>";
echo "</div>";

Javascript for popup hide/show:

<script>
    // START: Code for popup on entity link hover
    var modal = document.getElementById('myModal');
    // To show the modal popup when hovering over the Entity URL link
    showPopup = function(context) {
        let link = context.href;
        link = link.replace("entity.php", "entitycard.php");
        //link example is https://www.kisnardonline.com/wiki/entitycard.php?entityid=697711
        modal.style.display = "block";
        document.getElementById("popupcontent").src = link;
        resizeIFrameToFitContent();
    };

    // When the user moves mouse off of link, close the modal
    hidePopup = function(context) {
        modal.style.display = "none";
    }
    
    // To resize the popup iFrame
    function resizeIFrameToFitContent() {
        document.getElementById("popupcontent").width  = 0;
        document.getElementById("popupcontent").height  = 0;
        document.getElementById("popupcontent").width  = document.getElementById("popupcontent").contentWindow.document.documentElement.scrollWidth + 7;
        document.getElementById("popupcontent").height = document.getElementById("popupcontent").contentWindow.document.documentElement.scrollHeight;
    }
    // END: Code for popup on entity link hover
</script>

I created an app with a react front end and go back end. I was able to store the go backend in a docker container and then deploy it to azure and create a web app for it. The backend is working successfully when i make requests on postman. The issue I’m having is when i try connecting my frontend code through my github repo, it is saying that the container didn’t respond to pings on port 8080. I’ve been searching google and asking chatgpt for solutions for the past two days with no luck. I’ve made 100’s of different modifications to my package.json for a fix. Here is my current package.json scripts section:

"scripts": {
    "start": "serve -s build -l $PORT",
    "build": "react-scripts build",
    "test": "react-scripts test --passWithNoTests",
    "eject": "react-scripts eject"
  },

It’s working locally but just won’t work when i attempt to deploy at all. Any help would be greatly appreciated.

I’m trying to figure out how to use Paypal’s javascript SDK to allow a customer to go on paypal website (or by filling in the payment form) so that I can get the credentials needed to process a payment using their backend api, but their example doesn’t explain things well. This is the code I used so far:

<!DOCTYPE HTML>
<html>
<head>
<title>.</title>
<meta charset="utf-8">
</head>
<body>
<h1>Test</h1><div ID="paypal-button-container"></div>
<script src="https://sandbox.paypal.com/sdk/js?client-id=myid&intent=authorize&commit=false&components=buttons,marks,messages,applepay&currency=CAD"></script>
<script>
paypal.Buttons({
  style: {
layout: 'vertical',
color:  'blue',
shape:  'rect',
label:  'paypal'
  }
}).render('#paypal-button-container');
paypal.Buttons({
  async createOrder() {
    const response = await fetch("/my-server/create-paypal-order", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        cart: [
        {
            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
            quantity: "YOUR_PRODUCT_QUANTITY",
        },
        ],
    }),
    });

    const data = await response.json();

    return data.id;
},
async onApprove(data) {
    // Capture the funds from the transaction.
    const response = await fetch("/my-server/capture-paypal-order", {
      method: "POST",
      body: JSON.stringify({
    orderID: data.orderID
      })
    })

    const details = await response.json();

    // Show success message to buyer
    alert(`Transaction completed by ${details.payer.name.given_name}`);
}
}).render('#paypal-button-container');


</script>
</body>
</html>

What it does is it displays the same payment choices twice but one paypal button in gold color and one in blue colour.

I have also tried:

<!DOCTYPE HTML>
<html>
<head>
<title>.</title>
<meta charset="utf-8">
</head>
<body>
<h1>Test</h1><div ID="paypal-button-container"></div>
<script src="https://sandbox.paypal.com/sdk/js?client-id=myid&intent=authorize&commit=false&components=buttons,marks,messages,applepay&currency=CAD"></script>
<script>
paypal.Buttons({
  style: {
layout: 'vertical',
color:  'blue',
shape:  'rect',
label:  'paypal'
  },
  async createOrder() {
    const response = await fetch("/my-server/create-paypal-order", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        cart: [
        {
            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
            quantity: "YOUR_PRODUCT_QUANTITY",
        },
        ],
    }),
    });

    const data = await response.json();

    return data.id;
},
async onApprove(data) {
    // Capture the funds from the transaction.
    const response = await fetch("/my-server/capture-paypal-order", {
      method: "POST",
      body: JSON.stringify({
    orderID: data.orderID
      })
    })

    const details = await response.json();

    // Show success message to buyer
    alert(`Transaction completed by ${details.payer.name.given_name}`);
}
}).render('#paypal-button-container');


</script>
</body>
</html>

but no success there either.

I have used the correct client ID but for the code here I put in myid for easier readability.

What am I doing wrong?

if (!err.email && !err.password) {
    axios.post('http://localhost:8082/login', values) //
    .then((res) => {
        if (res.data === 'Invalid Email or Password') {
            alert('No Record Found');
        } else if (res.data.status === 'Login Success') {
            localStorage.setItem('userName', res.data.name);
            navigate('/GUI/dashboard');
        } else {
            alert('Some error: ' + res.data);
        }
    })
    .catch((err) => console.error(err));
}

In code snippet, I have used Axios. There currently I have used localhost and I want to make this online. So I want to use an online database instead of localhost MySQL databse with XAMPP server. There,

With what should I replace “http://localhost:8082/login” if I want to use CleverCloud MySQL database instead of localhost MySQL version?

I have the following problem, I have the get_taxes_after_fp method of js which is used to obtain some taxes

I have the following problem because when I do the following override I am having problems with the call of the “get_tax_ids_after_fiscal_position_pos” method since even though it returns the values ​​of the correct method it seems that the information is not reaching the method in js, I think it may be because I am not using await but it does not allow me to inherit the method, how can I make it bring data from a .py method

my method:
enter image description here

result to console.log:
enter image description here

i need heredate method in js

I’m trying to get a couple of pages to have random titles.. Yes, yes.. I know in the year of our lord 2025..
I’ve seen examples that show how to do small arrays in page but I’m looking to randomize from a very large line separated file. I could do minimal formatting to allow JS to work but the main thing is that I need to load it from a separate file with the extension JS because JS I guess has issues with externally loading just any file extension.

No, I don’t actually know how to write JS. I do however know what a javascript file that should run looks like.. I know InnerHTML is involved to change the actual title tag itself.

Thanks for any leads anyone may have.

const titles = [
"Welcome to My Website!",
"Discover Amazing Things",
"Check Out Our Latest Offers",
"Your One-Stop Shop",
"Don't Miss Out!"
];

function changeTitleRandomly() {
const randomIndex = Math.floor(Math.random() * titles.length);
document.title = titles[randomIndex];
}

I have taken on a personal challenge. i want to expand my knowledge by creating a digital, online, custom OS Simulator, Heres how it works and whats my goal.
it will be uploaded online when complete. it uses javascript for functionality, html for GUI, CSS For theming and visuals, and XML For data storage. you will be able to export the XML as a custom user system. heres the kicker, i know how to use alert and const in js. nothing else. i have my reason though. ive been using google gemini to help me make it. except we are both stuck. i want to be able to go back to the code and learn from it. while coding it, were stuck with the virtual file system. it stores it on memory until exported which (hasnt been implimented yet) will be able to be exported into an XML Containing the computer itself. the worse part of the challenge is im not only on chromeos but on a school laptop. i cannot access inspect. a console. or half the online resources i want. im hellbent on dooing it though so im here for help once again.
File structure project
project
here is the code

<!--XML Base System Structure-->
<?xml version="1.0" encoding="UTF-8"?>
<SYSTEM>
    <Boot>
        <EMMEM>8000</EMMEM><!--Simulated memory in KB-->
        <EMSTR>12</EMSTR><!--Simulated Storage in GB-->
        <!--Warn when user exports the system. WARNING:True file size is only apparant when you export your system, if your  using all simulated system space. and you dont have enough storage on your  device. our system may save improporly or not at all-->
        <DevMode>True</DevMode><!--Activated dev mode, on while i code-->
        <!--Any other boot info-->
        <setup>True</setup><!--If this is set to false the setup mode will activate-->
    </Boot>
    <FileSystem><!--Emulated FileSystem-->
        <ROOT>
            <prog>
                <info>
                    <name>Setup</name>
                    <size>???</size>
                    <dates>
                        <created>0/0/0 00:00<!--Users timezone would be here--></created><!--Date file was created w/ time-->
                        <modified>0/0/0 00:00<!--Users timezone would be here--></modified><!--Date file was last modified w/ time-->
                        <!--Dates will be last update to website. ect. ect. these can be left blank for now-->
                    </dates>
                    <flags>
                        <flag>SystemApp</flag>
                        <flag>RunFullScreen</flag>
                        <!--Flags for the system to run by-->
                    </flags>
                </info>
                <progfiles>
                    <html></html>
                    <css></css>
                    <script></script>
                    <xmd></xmd><!--Data stored in an xml format for app specific things.-->
                </progfiles>
            </prog>
            <USERS>
                <Administrator>
                    <DisplayName>Administrator</DisplayName>
                    <Password>0000<!--We will add a encryption and decryption process for this later-->
                    <PERSONALFS>
                        <Desktop>
                            <Shortcut><!--Shortcut like an INK or Symlink file-->
                                <display>Documents</display>
                                <SPath>curusr/Documents</SPath><!--curusr/Documents >> CurrentUser(curusr)/ Documents-->
                            </Shortcut>
                        </Desktop>
                        <Documents>
                            <!--File-->
                            <file>
                                <name>Hello World</name>
                                <type>txt</type>
                                <contents>Hello mighty world!n This simulated os was helped designed by ai cuz im bad at code!!!</contents>
                                <size></size>
                                <dates>
                                    <created>0/0/0 00:00<!--Users timezone would be here--></created><!--Date file was created w/ time-->
                                    <modified>0/0/0 00:00<!--Users timezone would be here--></modified><!--Date file was last modified w/ time-->
                                </dates>
                            </file>
                        </Documents>
                    </PERSONALFS><!--User Specific FileSystem-->
                </Administrator>
            </USERS>
        </ROOT>
    </FileSystem>
</SYSTEM>

HTML

inhtmlconsole = document.getElementById('innerconsole')
window.console = {
    log: function(message) {
         inhtmlconsole.innerText += message + 'n';
    },
    logas: function(thing, message) {
        inhtmlconsole.innerText += "[" + thing + "] > " + message + 'n';
    },
    error: function(message) {
        inhtmlconsole.innerText += "[ERROR] > " + message + 'n';
    },
    warn: function(message) {
        inhtmlconsole.innerText += "[WARN] > " + message + 'n';
    },
    issue: function(message) {
        inhtmlconsole.innerText += "[ISSUE] > " + message + 'n';
    }
};

console.log("Log Working")

function readSingleFile(e) {
    console.logas("DATA LOADER", "readSingleFile function started");
    var file = e.target.files[0];
    if (!file) {
        console.logas("DATA LOADER", "No file selected");
      return;
    }
    var reader = new FileReader();
    reader.onload = function(e) {
        console.logas("DATA LOADER", "File loaded");
        var contents = e.target.result;
        displayContents(contents);
    };
    reader.readAsText(file);
   console.logas("DATA LOADER", "Reading file");
  }
  
  function displayContents(contents) {
    console.logas("DATA DISPLAYER", "displayContents function started");
    var element = document.getElementById('file-content');
    element.textContent = contents;
    parse(contents);
  }
  
    document.getElementById('file-input')
    .addEventListener('change', readSingleFile, false);
    function parse(content) {
        console.logas("BOOTDATAPARSER", "parse function started");
        // Create a parser
        var parser = new DOMParser();
        console.logas("BOOTDATAPARSER", "Parser created");
        xmlDoc = parser.parseFromString(content, "text/xml");
        console.logas("BOOTDATAPARSER", "XML Parsed");
         if(!xmlDoc || !xmlDoc.documentElement) {
             console.error("XML Document could not be parsed", xmlDoc)
          
         }else{
           console.logas("XML", "documentElement: " + xmlDoc.documentElement.nodeName);
           console.logas("XML","xmlDoc.documentElement.children: " + xmlDoc.documentElement.children)
            if(xmlDoc.documentElement.children){
                 const children = Array.from(xmlDoc.documentElement.children);
                children.forEach(child => {
                console.logas("XML", "Child nodeName:" + child.nodeName);
                });
            }
         }
    
        let EMMEM = 'Not found';
        let EMSTR = 'Not found';
        let DEVMODE = 'Not found';
        let SETUP = 'Not found';
    
        try {
            const emmemNode = xmlDoc.evaluate("//SYSTEM/Boot/EMMEM", xmlDoc).iterateNext();
            console.logas("BOOTDATAPARSER", "EMMEM Node retrieved " + emmemNode);
            EMMEM = emmemNode ? emmemNode.textContent : 'Not found';
        } catch (err) {
           console.error("Error getting EMMEM" , err);
        }
        try {
          const emstrNode = xmlDoc.evaluate("//SYSTEM/Boot/EMSTR", xmlDoc).iterateNext();
          console.logas("BOOTDATAPARSER","EMSTR Node retrieved " + emstrNode);
          EMSTR = emstrNode ? emstrNode.textContent : 'Not found';
        } catch (err) {
           console.error("Error getting EMSTR" , err);
        }
        try {
            const devModeNode = xmlDoc.evaluate("//SYSTEM/Boot/DevMode", xmlDoc).iterateNext();
            console.logas("BOOTDATAPARSER","DEVMODE Node retrieved " + devModeNode);
            DEVMODE = devModeNode ? devModeNode.textContent : 'Not found';
        } catch (err) {
          console.error("Error getting Developer Mode State", err);
        }
        try {
           const setupNode = xmlDoc.querySelector("SYSTEM > Boot > setup");
            console.logas("BOOTDATAPARSER", "SETUP Node retrieved " + setupNode?.textContent);
            SETUP = setupNode ? setupNode.textContent : 'Not found';
        } catch (err) {
            console.error("Error getting Setup Status", err);
        }
    
        document.getElementById("EMMEM").innerText = "Simulated Memory: " + EMMEM + "KB";
        document.getElementById("EMSTR").innerText = "Simulated Storage: " + EMSTR + "GB";
        document.getElementById("DevMode").innerText = "Running in DevMode? : " + DEVMODE;
        document.getElementById("Setup").innerText = "Is Setup?: " + SETUP;
        console.logas("BOOTDATAPARSER","After setting InnerText");
//________________The issue code is below________________________
         window.fileSystem = createInMemoryFileSystem(xmlDoc)
         console.logas("FSYS", "File System created: " + JSON.stringify(window.fileSystem, null, 2))
    
         try {
            const helloWorldFile = window.fileSystem.root.USERS.Administrator.Documents["Hello World"];
             console.logas("FSYS","Hello world file: " + helloWorldFile)
              if(helloWorldFile){
                document.getElementById('innerconsole').innerText += "n" + helloWorldFile.content
             }
          } catch (error) {
              console.error("Could not access file:", error)
          }
    }

   function createInMemoryFileSystem(xmlDoc) {
        console.logas("FSYS","createInMemoryFileSystem started");
          let xmlElement;
        if (xmlDoc && xmlDoc.documentElement && xmlDoc.documentElement.nodeName === "HTML") {
          console.logas("FSYS","XML is within HTML element")
           xmlElement  = xmlDoc.querySelector('SYSTEM')
         }else{
           console.logas("FSYS","XML is the root element");
             xmlElement = xmlDoc;
         }
         fileSystem = {};
         const fileSystemRoot = xmlElement.querySelector("FileSystem > ROOT")
         console.logas("FSYS","fileSystemRoot: " + fileSystemRoot);
       if(fileSystemRoot){
             function processElement(element, parent) {
                const nodeType = element.nodeName;
    
                if (nodeType === "ROOT" ) {
                    parent.type = "folder";
                    parent.name = "root";
                    parent.children = {};
                console.logas("FSYS","ROOT Folder Found");
                for (const child of element.children) {
                    processElement(child, parent.children);
                }
                }else if (nodeType === "prog" || nodeType === "USERS" || nodeType === "Administrator" || nodeType === "PERSONALFS" ) {
                console.logas("FSYS","processing Folder: " + nodeType);
                const folder = {};
                folder.type = "folder";
                folder.name = nodeType;
                folder.children = {};
                for (const child of element.children) {
                    processElement(child, folder.children);
                }
                parent[nodeType] = folder
                }else if (nodeType === "Desktop" || nodeType === "Documents" ) {
                 console.logas("FSYS","processing Folder: " + nodeType);
                const folder = {};
                folder.type = "folder";
                folder.name = nodeType;
                folder.children = {};
                for (const child of element.children) {
                    processElement(child, folder.children);
                }
                parent[nodeType] = folder
                }
                else if(nodeType === "file"){
                console.logas("FSYS","processing File: " + nodeType);
                const file = {}
                file.type = "file"
                file.name = element.querySelector('name')?.textContent || 'Unnamed File';
                file.content = element.querySelector('contents')?.textContent || '';
                file.size = element.querySelector('size')?.textContent || '';
                file.dates = {
                    created: element.querySelector('dates > created')?.textContent || '',
                    modified: element.querySelector('dates > modified')?.textContent || ''
                    }
                parent[file.name] = file;
                }else if(nodeType === "Shortcut"){
                console.logas("FSYS","processing Shortcut: " + nodeType);
                const shortcut = {};
                shortcut.type = "file";
                shortcut.name = "shortcut";
                shortcut.content = {
                    display: element.querySelector('display')?.textContent || 'Unnamed File',
                    SPath: element.querySelector('SPath')?.textContent || ''
                }
                parent[shortcut.name] = shortcut;
                }else{
                console.logas("FSYS","other element: " + nodeType)
                }
            }
            processElement(fileSystemRoot, fileSystem);
        }else{
           console.error("Error no file system root found");
        }
    
        console.logas("FSYS","createInMemoryFileSystem finished");
        return fileSystem;
    //___________________problem code end__________________
}

HTML

<!DOCTYPE HTML>
<link href="boot.css" rel="stylesheet">
<p>Booting...</p>
<input type="file" id="file-input" />
<div id="EMMEM">Simulated Memory: </div>
<div id="EMSTR">Simulated storage: </div>
<div id="DevMode">In Dev Mode?: </div>
<div id="Setup">Is Setup?: </div>
<p style="color: aliceblue; background-color: black;" id="innerconsole">Console<br></p>
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>



<script src="boot.js"></script>

CSS

body {
    background-color: blue;
}
text {
    color: aliceblue;
}

since the only way i can view the html of the page without inspect is downloading the page as an mhtml here is the data

From: <Saved by Blink>
Snapshot-Content-Location: ___
Subject: 
Date: Mon, 6 Jan 2025 19:11:00 -0500
MIME-Version: 1.0
Content-Type: multipart/related;
    type="text/html";
    boundary="----MultipartBoundary--AptXrjHXhKeP8Y05qusXmVHzTL2WgLvzs1Yu3FK5LC----"


------MultipartBoundary--AptXrjHXhKeP8Y05qusXmVHzTL2WgLvzs1Yu3FK5LC----
Content-Type: text/html
Content-ID: <[email protected]>
Content-Transfer-Encoding: quoted-printable
Content-Location: ___
<!DOCTYPE html><html><head><meta http-equiv=3D"Content-Type" content=3D"tex=
t/html; charset=3Dwindows-1252"><link href=3D"___" rel=3D"stylesheet">
</head><body><p>Booting...</p>
<input type=3D"file" id=3D"file-input">
<div id=3D"EMMEM">Simulated Memory: 8000KB</div>
<div id=3D"EMSTR">Simulated Storage: 12GB</div>
<div id=3D"DevMode">Running in DevMode? : True</div>
<div id=3D"Setup">Is Setup?: True</div>
<p style=3D"color: aliceblue; background-color: black;" id=3D"innerconsole"=
>Console<br>Log Working<br>[DATA LOADER] &gt; readSingleFile function start=
ed<br>[DATA LOADER] &gt; Reading file<br>[DATA LOADER] &gt; File loaded<br>=
[DATA DISPLAYER] &gt; displayContents function started<br>[BOOTDATAPARSER] =
&gt; parse function started<br>[BOOTDATAPARSER] &gt; Parser created<br>[BOO=
TDATAPARSER] &gt; XML Parsed<br>[XML] &gt; documentElement: SYSTEM<br>[XML]=
 &gt; xmlDoc.documentElement.children: [object HTMLCollection]<br>[XML] &gt=
; Child nodeName:parsererror<br>[XML] &gt; Child nodeName:Boot<br>[XML] &gt=
; Child nodeName:FileSystem<br>[BOOTDATAPARSER] &gt; EMMEM Node retrieved [=
object Element]<br>[BOOTDATAPARSER] &gt; EMSTR Node retrieved [object Eleme=
nt]<br>[BOOTDATAPARSER] &gt; DEVMODE Node retrieved [object Element]<br>[BO=
OTDATAPARSER] &gt; SETUP Node retrieved True<br>[BOOTDATAPARSER] &gt; After=
 setting InnerText<br>[FSYS] &gt; createInMemoryFileSystem started<br>[FSYS=
] &gt; XML is the root element<br>[FSYS] &gt; fileSystemRoot: [object Eleme=
nt]<br>[FSYS] &gt; ROOT Folder Found<br>[FSYS] &gt; processing Folder: prog=
<br>[FSYS] &gt; other element: info<br>[FSYS] &gt; other element: progfiles=
<br>[FSYS] &gt; processing Folder: USERS<br>[FSYS] &gt; processing Folder: =
Administrator<br>[FSYS] &gt; other element: DisplayName<br>[FSYS] &gt; othe=
r element: Password<br>[FSYS] &gt; createInMemoryFileSystem finished<br>[FS=
YS] &gt; File System created: {<br>"type": "folder",<br>"name": "root",<br>=
"children": {<br>"prog": {<br>"type": "folder",<br>"name": "prog",<br>"chil=
dren": {}<br>},<br>"USERS": {<br>"type": "folder",<br>"name": "USERS",<br>"=
children": {<br>"Administrator": {<br>"type": "folder",<br>"name": "Adminis=
trator",<br>"children": {}<br>}<br>}<br>}<br>}<br>}<br>[ERROR] &gt; Could n=
ot access file:<br></p>
<h3>Contents of the file:</h3>
<pre id=3D"file-content">&lt;?xml version=3D"1.0" encoding=3D"UTF-8"?&gt;
&lt;SYSTEM&gt;
    &lt;Boot&gt;
        &lt;EMMEM&gt;8000&lt;/EMMEM&gt;&lt;!--Simulated memory in KB--&gt;
        &lt;EMSTR&gt;12&lt;/EMSTR&gt;&lt;!--Simulated Storage in GB--&gt;
        &lt;!--Warn when user exports the system. WARNING:True file size is=
 only apparant when you export your system, if your  using all simulated sy=
stem space. and you dont have enough storage on your  device. our system ma=
y save improporly or not at all--&gt;
        &lt;DevMode&gt;True&lt;/DevMode&gt;&lt;!--Activated dev mode, on wh=
ile i code--&gt;
        &lt;!--Any other boot info--&gt;
        &lt;setup&gt;True&lt;/setup&gt;&lt;!--If this is set to false the s=
etup mode will activate--&gt;
    &lt;/Boot&gt;
    &lt;FileSystem&gt;&lt;!--Emulated FileSystem--&gt;
        &lt;ROOT&gt;
            &lt;prog&gt;
                &lt;info&gt;
                    &lt;name&gt;Setup&lt;/name&gt;
                    &lt;size&gt;???&lt;/size&gt;
                    &lt;dates&gt;
                        &lt;created&gt;0/0/0 00:00&lt;!--Users timezone wou=
ld be here--&gt;&lt;/created&gt;&lt;!--Date file was created w/ time--&gt;
                        &lt;modified&gt;0/0/0 00:00&lt;!--Users timezone wo=
uld be here--&gt;&lt;/modified&gt;&lt;!--Date file was last modified w/ tim=
e--&gt;
                        &lt;!--Dates will be last update to website. ect. e=
ct. these can be left blank for now--&gt;
                    &lt;/dates&gt;
                    &lt;flags&gt;
                        &lt;flag&gt;SystemApp&lt;/flag&gt;
                        &lt;flag&gt;RunFullScreen&lt;/flag&gt;
                        &lt;!--Flags for the system to run by--&gt;
                    &lt;/flags&gt;
                &lt;/info&gt;
                &lt;progfiles&gt;
                    &lt;html&gt;&lt;/html&gt;
                    &lt;css&gt;&lt;/css&gt;
                    &lt;script&gt;&lt;/script&gt;
                    &lt;xmd&gt;&lt;/xmd&gt;&lt;!--Data stored in an xml for=
mat for app specific things.--&gt;
                &lt;/progfiles&gt;
            &lt;/prog&gt;
            &lt;USERS&gt;
                &lt;Administrator&gt;
                    &lt;DisplayName&gt;Administrator&lt;/DisplayName&gt;
                    &lt;Password&gt;0000&lt;!--We will add a encryption and=
 decryption process for this later--&gt;
                    &lt;PERSONALFS&gt;
                        &lt;Desktop&gt;
                            &lt;Shortcut&gt;&lt;!--Shortcut like an INK or =
Symlink file--&gt;
                                &lt;display&gt;Documents&lt;/display&gt;
                                &lt;SPath&gt;curusr/Documents&lt;/SPath&gt;=
&lt;!--curusr/Documents &gt;&gt; CurrentUser(curusr)/ Documents--&gt;
                            &lt;/Shortcut&gt;
                        &lt;/Desktop&gt;
                        &lt;Documents&gt;
                            &lt;!--File--&gt;
                            &lt;file&gt;
                                &lt;name&gt;Hello World&lt;/name&gt;
                                &lt;type&gt;txt&lt;/type&gt;
                                &lt;contents&gt;Hello mighty world!n This =
simulated os was helped designed by ai cuz im bad at code!!!&lt;/contents&g=
t;
                                &lt;size&gt;&lt;/size&gt;
                                &lt;dates&gt;
                                    &lt;created&gt;0/0/0 00:00&lt;!--Users =
timezone would be here--&gt;&lt;/created&gt;&lt;!--Date file was created w/=
 time--&gt;
                                    &lt;modified&gt;0/0/0 00:00&lt;!--Users=
 timezone would be here--&gt;&lt;/modified&gt;&lt;!--Date file was last mod=
ified w/ time--&gt;
                                &lt;/dates&gt;
                            &lt;/file&gt;
                        &lt;/Documents&gt;
                    &lt;/PERSONALFS&gt;&lt;!--User Specific FileSystem--&gt=
;
                &lt;/Administrator&gt;
            &lt;/USERS&gt;
        &lt;/ROOT&gt;
    &lt;/FileSystem&gt;
&lt;/SYSTEM&gt;</pre>



</body></html>
------MultipartBoundary--AptXrjHXhKeP8Y05qusXmVHzTL2WgLvzs1Yu3FK5LC----
Content-Type: text/css
Content-Transfer-Encoding: quoted-printable
Content-Location: ____

@charset "windows-1252";

body { background-color: blue; }

text { color: aliceblue; }
------MultipartBoundary--AptXrjHXhKeP8Y05qusXmVHzTL2WgLvzs1Yu3FK5LC------

built in console output

Console
Log Working
[DATA LOADER] > readSingleFile function started
[DATA LOADER] > Reading file
[DATA LOADER] > File loaded
[DATA DISPLAYER] > displayContents function started
[BOOTDATAPARSER] > parse function started
[BOOTDATAPARSER] > Parser created
[BOOTDATAPARSER] > XML Parsed
[XML] > documentElement: SYSTEM
[XML] > xmlDoc.documentElement.children: [object HTMLCollection]
[XML] > Child nodeName:parsererror
[XML] > Child nodeName:Boot
[XML] > Child nodeName:FileSystem
[BOOTDATAPARSER] > EMMEM Node retrieved [object Element]
[BOOTDATAPARSER] > EMSTR Node retrieved [object Element]
[BOOTDATAPARSER] > DEVMODE Node retrieved [object Element]
[BOOTDATAPARSER] > SETUP Node retrieved True
[BOOTDATAPARSER] > After setting InnerText
[FSYS] > createInMemoryFileSystem started
[FSYS] > XML is the root element
[FSYS] > fileSystemRoot: [object Element]
[FSYS] > ROOT Folder Found
[FSYS] > processing Folder: prog
[FSYS] > other element: info
[FSYS] > other element: progfiles
[FSYS] > processing Folder: USERS
[FSYS] > processing Folder: Administrator
[FSYS] > other element: DisplayName
[FSYS] > other element: Password
[FSYS] > createInMemoryFileSystem finished
[FSYS] > File System created: {
"type": "folder",
"name": "root",
"children": {
"prog": {
"type": "folder",
"name": "prog",
"children": {}
},
"USERS": {
"type": "folder",
"name": "USERS",
"children": {
"Administrator": {
"type": "folder",
"name": "Administrator",
"children": {}
}
}
}
}
}

THE ISSUE,
we are able to access everything up until PersonalFS.
after reviewing it I see that the processElement function is failing to build the PERSONALFS part of the file system structure.

Me and the ai have tried like 50 variations of the code. we CANNOT figure it out :/

what was the one thing you learned that made programming finally “click” for you? I’m struggling right now and looking for ideas to improve and become a better programmer.

I’ve been trying different resources like online courses, documentation, and tutorials. I expected to feel more comfortable and confident when coding, but I still feel stuck and struggle to apply what I learn in real projects.