Category: javascript

How can I calculate the last payment for Reprofiled Amount column with 2 decimal places to make the sum of all payments to be the same value as Research Costs amount? The difference needs to be added to the last quarterly payment.

I have 3 payment values stored in numAmounts array.
Const numAmounts = [ 106017.96, 106017.96, 106017.96 ];
My code to calculate the last payment gives me 106017.96999999997 but when I pass value to my formatAsCurrency(remainningAmount, 2, 2) I get 106017.96 which if we sum all 3 numAmounts values + remainningAmount there is a difference of 1 cent. That 1 cent needs to be added to the last quarterly payment.

function formatAsCurrency(numValue, numMinimumDigits, numMaximumDigits)
        {
            try
            {
                if (!numMinimumDigits || isNaN(numMinimumDigits))
                {
                    numMinimumDigits = 0;
                }

                numValue = Number(numValue.toString().replace(/[^0-9.-]/g, ""));
                if (!isNaN(numValue))
                {
                    if (!numMinimumDigits || numMinimumDigits <= 0)
                    {
                        return Number(numValue.toFixed(0)).toString();
                    }
                    else
                    {
                        return numValue.toLocaleString("en-US", { minimumFractionDigits: numMinimumDigits, maximumFractionDigits: numMaximumDigits });
                    }
                }
                else
                {
                    return numValue;
                }
            }
            catch (ex)
            {
                alert("Error in formatAsCurrency(): " + ex.toString());
                disableAll();
                return false;
            }
        }
const RC = 424071.85;      
const numAmounts =  [ 106017.96, 106017.96, 106017.96 ];
const sum = numAmounts.reduce((acc, curr) => acc + curr, 0);
const remainningAmount = RC - sum;
console.log("remainningAmount", formatAsCurrency(remainningAmount, 2, 2));

I am getting this error when I run the script in the pipeline
TypeError: Cannot read properties of undefined (reading ‘split’)

This is the code snippet for split

       cy.url().then(url => {
            accountId = url.split('account')[1].split('/')[1];
            cy.log(accountId)
        })

I tried to run it in my local and it is working fine

I have a database where there is PlantName, datetime (just date component), price, and orderId. I want to aggregate data by facility, sum up the price for the day, and return data. A list of PlantNames is passed in for which we need to calculate the total , however, I see duplicate of PlantNames in the returned data, I was expecting unique data for each Plant

const ordersWithAggregations=db.Orders.groupBy({
      by: ['PlantName','BookDate'],
      where: {
        PlantName: {
          in: plantNames  //passed in as an array
        },
        OrderDate: {
          gte: fromDate,   //passed in
          lte: toDate   // passed in
        }
      },
      _sum: {
        TotalPrice: true
      },
      orderBy: {
        OrderDate: 'asc', 
      },
    });


const result: IDataVisualize[] = ordersWithAggregations.map(agg => ({
      PlantName: agg.Plant,
      data: [
        {
          date: format(agg.OrderDate),
          grandTotalPrice: agg._sum.TotalPrice || 0
        }
      ]
    }));
    ``` 
One other thing, if the OrderDate has a time component, I want to ignore it , and use the date part only

Any idea what I am missing and I am getting data like

[ { plantName: ‘Kolfe’, data: [{} ] },
{ plantName: ‘Lafto’, data: [{} ] },
{ plantName: ‘Kolfe’, data: [{} ] }] //repeated

My current code is:
server (Node js)

app.post("/create-payment-intent", async (req, res) => {
    const { email, name } = req.body;
    const customer = await stripe.customers.create({
        email: email,
        name: name
    });
    const paymentIntent = await stripe.paymentIntents.create({
      customer: customer.id,
      setup_future_usage: "off_session",
      amount: 2499,
      currency: "usd",
      automatic_payment_methods: { enabled: true }
    });
    await stripe.customers.update(customer.id, {
      email: email,
      name: name
    });
    res.send({ clientSecret: paymentIntent.client_secret });
});

client

<body>
    
    <form id="payment-form">
        
        <div id="payment-element"></div>
        <input type="email" id="email" placeholder="Enter email address" required/>
        <input type="text" id="name" placeholder="Full Name" required/>
        <button class="str" id="submit">
            <div class="spinner hidden" id="spinner"></div>
            <span id="button-text">Submit</span>
        </button>
        <div id="payment-message" class="hidden"></div>
    </form>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    ...
    const {clientSecret} = await fetch("/create-payment-intent", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
    }).then((r) => r.json())

    const appearance = { theme: 'flat' };
    const elements = stripe.elements({ clientSecret, appearance });
    const paymentElement = elements.create('payment')
    paymentElement.mount('#payment-element')

    const form = document.getElementById("payment-form")
    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        const email = document.getElementById("email").value;
        const name = document.getElementById("name").value;
    
        await fetch("/create-payment-intent", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email: email, name: name })
        }).then((r) => r.json())

        const {error} = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: (endpoint)
            }
        })
        if(error) {
        const message = document.getElementById("payment-message")
        message.innerText = error.message;
        }
    })
})
</script>
</body>

So the problem is if I remove the first payment intent – payment form load will fail.

If I remove the second – then I do not get email and name, but payment will be successful and redirect to the thank you page.

If I use both at the same time -then I see created customer with email and name but second payment will attach and it will tell me on Dashboard that customer did not enter payment detail, but customer did (at first payment) (I understand stripe attach that I gave inside submit).

I’m use Payment Element https://stripe.com/docs/payments/quickstart?lang=node

I want to achieve the next solution – customer load website, enter email, name and payment details (in my case card or can use apple/google Pay) press button “buy” and will redirect to thank you page. Then I can see on Stripe Dashboard at the customer section – this customer with email and name that customer entered and also saved payment details for future charges if needed.

Note: I’m not a software engineer and all my code I wrote alone by watching youtube lessons, stipe github page(with examples) and code AI platforms. I understand the logic that I need but I don’t have enough skills and unfortunately even the chat GPT can’t help me resolve this problem. The solution I guess is inside the submit event I need to pass only email and name without creating a payment intent but i can’t figure out how to make that.

I keep having this issue that Solid.js says “React is not defined” when the package being used dosent rely on React? I had the issue with Solid-spinner and solid-query.

Uncaught (in promise) ReferenceError: React is not defined
    at TailSpin (TailSpin.jsx:4:5)
    at dev.js:528:12
    at untrack (dev.js:428:12)
    at Object.fn (dev.js:524:37)
    at runComputation (dev.js:709:22)
    at updateComputation (dev.js:692:3)
    at devComponent (dev.js:534:3)
    at createComponent (dev.js:1265:10)
    at get children [as children] (CheckoutModal.jsx:67:2)
    at Show.createMemo.name [as fn] (dev.js:1461:27)

I have tried uninstalling the package and installing it again but it didnt help.

I see in console in chrome error: content-script.js:95 Failed to get subsystem status for purpose. I used solidjs, vite

I don’t know how to solve it. I have this error on any project on Vitejs
I have this on any project on Vitejs

I have an fbx model that i exportet as an embedded gltf in blender. When i load it into a map with threebox then it looks wrong but in the gltf viewer of threejs it looks right. What am i doing wrong?

Some parts seem to work but some are completely white or partly transparent which is not in the original model and not in the GLTFViewer.

The code is pretty straightforward:

const pokemonOptions = { obj: 'models/pokemon/beedrill/model.gltf', type: 'gltf', scale: 2, units: 'meters', rotation: { x: 0, y: 0, z: 0 } };

this.tb.loadObj(pokemonOptions, (model) => {
     model.setCoords([this.player.lng, this.player.lat]);
     this.tb.add(model);
});

And i also tried loading it with threejs manually but it still looks wrong.

const DownloadFile  = async (params) => {
    return await axios.get<string>(`${}/url`, {
        params: {
            params: params,
        },
        onDownloadProgress(progressEvent) {
        var percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total)
            console.log(percentCompleted )    // gets infinte as progressEvent.total is 0
        },
    })
    .then(res => {
        return res.data;
    });
};

Iam trying to show progress barin reactjs using onDownloadprogress event, but the total value is coming as 0 when i check in console,also there is no responseHeader[content-length] to use instead ,is there any other way to get the percentage
Here progressevent.total is coming as zero and hence results in infinity

import { useNavigate } from 'react-router-dom';
import { getFutureMeditations } from '../Helpers/RestCalls';
import React, { useEffect, useState, useRef } from 'react';
import '../CSS/Home.css';
import tree from '../images/tree.webp';

// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();

function Home() {
    const swiperElRef = useRef(null);
    // Now you can use Swiper
    const [events, setEvents] = useState([]);
    const navigate = useNavigate();
    useEffect(() => {
        //swiper configuration
        swiperElRef.current.addEventListener('progress', (e) => {
            const [swiper, progress] = e.detail;
            console.log(progress);
        });

        swiperElRef.current.addEventListener('slidechange', (e) => {
            console.log('slide changed');
        });

        getFutureMeditations().then((result) => {
            setEvents(result);
            console.log(result);
        });
        //Refresh Future Meditations every 10 seconds
        setInterval(() => {
            getFutureMeditations().then((result) => {
                setEvents(result);
                console.log(result);
            });
        }, 10000);
    }, []);

    return (
        <div className='homeScreen'>
            <swiper-container ref={swiperElRef} navigation='true' pagination='true'>
                {events.map((event) => {
                    return (
                        <swiper-slide>
                            <div className='slideContent'>
                                <h5>{event.title}</h5>
                                <p>{event.description}</p>
                                <p>
                                    {event.date.substring(0, 10) +
                                        ' - ' +
                                        event.date.substring(11, 16)}
                                </p>
                                <a
                                    onClick={() => navigate('room/' + event._id)}
                                    className='btn'
                                >
                                    Go to Room
                                </a>
                            </div>
                        </swiper-slide>
                    );
                })}
            </swiper-container>

            {/* <img src={tree} alt='tree' /> */}
            <div className='templeTitle'>Tempel</div>
        </div>
    );
}

export default Home;

body {
    background-color: #ffffff;
}

.homeScreen {
    display: flex;
    height: 100vh;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.slideContent {
    background-color: green;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.templeTitle {
    color: black;
    position: absolute;
    top: 40px;
    right: 100px;
    font-size: 50px;
}

I am using swiper elements, just as explained here:
https://swiperjs.com/element

The weird thing is, if i swipe, the navigation shows the next page but the content from the first page is still shown. The css attribute even changes to swiper-slide-active.

My setup is so simple that i can’t imagine the mistake. And i couldn’t find any help online.

If anyone wonders. the mapping i do of the event works. it has two objects and in the dom i see that the slides actually contain the element’s content.

I tried changing the slideContent’s css properties, but that doesn’t seem to be the problem.

Edit: only the html and css part should be enough to find the problem.

When a div is rendered to the screen through an onclick event, I am trying to determine if the div is partially outside of the right viewport.

If it is outside of the right viewport I am trying to change its position with (left, translateX, or whatever will work). I have been attempting to use refs with getBoundingClientRect like many solutions have suggested, but this will not consistently work as the div will inevitably ad temporarily for some screen sizes fall outside the viewport and produce a scroll.

Is there a reliable and consistent way to accomplish something like this in React? Greatly appreciate any suggestions. I have included my current code below which does not work consistently on screen sizes when expanding the screen.

import React, { useState, useEffect, useRef } from 'react';

const App2 = () => {
    const [showDiv, setShowDiv] = useState(false);
    const divRef = useRef(null);

    const handleButtonClick = () => {
        setShowDiv(!showDiv);
    };

    useEffect(() => {
        const handleResize = () => {
            if (showDiv) {
                const div = divRef.current;
                const rect = div.getBoundingClientRect();
                const isOutsideViewport = rect.right > window.innerWidth;

                if (isOutsideViewport) {
                    const availableWidth = window.innerWidth - rect.width;
                    const newLeft = Math.min(rect.left, availableWidth);
                    div.style.left = `${newLeft}px`;
                } else {
                    const isLeftOutsideViewport = rect.left < 0;
                    if (isLeftOutsideViewport) {
                        div.style.left = '0';
                    } else {
                        div.style.left = 'auto';
                    }
                }
            }
        };

        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, [showDiv]);

    const divStyle = {
        width: '200px',
        height: '200px',
        background: 'red',
        position: 'absolute',
        right: '-35px',
    };

    return (
        <div>
            <button onClick={handleButtonClick}>Toggle Div</button>
            {showDiv && (
                <div ref={divRef} id="myDiv" style={divStyle}>
                    <div>
                        The left property is a positioning property that specifies the horizontal position of an element relative to its containing element. When you set the left property to a specific value, such as right: '-35px', it positions the element to the left side of its containing element, offset by the specified value. The element's position is adjusted within the document flow, affecting how it interacts with other elements.
                    </div>
                </div>
            )}
        </div>
    );
};

export default App2;

hoping this is a simple question.

I have a If statement that runs a for loop inside of it:

if(createRequest.data.status == "COMPLETE"){
                
                for(let f = 0; f <= createRequest.data.results.length; f++){
                    testHubInfo.push(createRequest.data.results[f].id)
                    associationArray.push({
                        "from": {
                            "id": `${createRequest.data.results[f].id}`
                        },
                        "to": {
                            "id": `${eventID}`
                        }
                    })
                }

                testHubInfo.push("Ugh")
                testHubInfo.push(associationArray)
            }
            

the problem with this, is that this runs, it gets to the for loop and adds to testHubInfo & associationArray arrays , but then after that it just ends execution of that function and none of the following things get ran, such as the “Ugh”. It even refuses to run the code after the If statement:

            testHubInfo.push("Got here to assoc?")
            await batchCreateAssociations(associationArray, eventID)

            context.log("SUCCESS")
            context.log("==============")
            return true;

so hoping someone can help assist! Appreciate the help! 🙂

Hello I am using react js and made a button to transfer between pages using navigate in react
<div className={Style['navbar__button']} onClick={() => navigate('/dashboard')}> Dashboard </div>
but I read that it is bad for SEO because the search engine may not be able to crawl the links

so I added in the start of the component these lines the links without text so they don’t appear on the page
<div className='links_for_seo'> <a href={/dashboard}></a> <a href={/pricing}></a> <a href={/login`}>

    </div>`

so will search engines be able to crawl and will this be good for SEO

i having problems converting an array of hierarchy data into the right Object format.

I trying to convert this:

[
    {"PARENT_ID": 0,"CHILD_ID": 1,"NAME": "Quality","LEVEL_A": 0},
    {"PARENT_ID": 1,"CHILD_ID": 2,"NAME": "Machine","LEVEL_A": 1},
    {"PARENT_ID": 1,"CHILD_ID": 3,"NAME": "Method","LEVEL_A": 1},
    {"PARENT_ID": 1,"CHILD_ID": 4,"NAME": "Material","LEVEL_A": 1},
    {"PARENT_ID": 1,"CHILD_ID": 5,"NAME": "Man Power","LEVEL_A": 1},
    {"PARENT_ID": 1,"CHILD_ID": 6,"NAME": "Measurement","LEVEL_A": 1},
    {"PARENT_ID": 1,"CHILD_ID": 7,"NAME": "Milieu","LEVEL_A": 1},
    {"PARENT_ID": 1,"CHILD_ID": 10,"NAME": "Metal Lathe","LEVEL_A": 1},
    {"PARENT_ID": 2,"CHILD_ID": 3,"NAME": "dasd","LEVEL_A": 2},
    {"PARENT_ID": 2,"CHILD_ID": 8,"NAME": "Mill","LEVEL_A": 2},
    {"PARENT_ID": 2,"CHILD_ID": 9,"NAME": "Mixer","LEVEL_A": 2},
    {"PARENT_ID": 4,"CHILD_ID": 11,"NAME": "Masonite","LEVEL_A": 2},
    {"PARENT_ID": 4,"CHILD_ID": 12,"NAME": "Meat","LEVEL_A": 2},
    {"PARENT_ID": 4,"CHILD_ID": 13,"NAME": "Marscapone","LEVEL_A": 2},
    {"PARENT_ID": 5,"CHILD_ID": 20,"NAME": "Manager","LEVEL_A": 2},
    {"PARENT_ID": 5,"CHILD_ID": 21,"NAME": "Magician","LEVEL_A": 2},
    {"PARENT_ID": 5,"CHILD_ID": 22,"NAME": "Magister","LEVEL_A": 2},
    {"PARENT_ID": 5,"CHILD_ID": 24,"NAME": "Massage Artist","LEVEL_A": 2},
    {"PARENT_ID": 6,"CHILD_ID": 25,"NAME": "Malleability","LEVEL_A": 2},
    {"PARENT_ID": 7,"CHILD_ID": 26,"NAME": "Marine","LEVEL_A": 2},
    {"PARENT_ID": 12,"CHILD_ID": 19,"NAME": "Mutton","LEVEL_A": 3},
    {"PARENT_ID": 13,"CHILD_ID": 14,"NAME": "Malty","LEVEL_A": 3},
    {"PARENT_ID": 13,"CHILD_ID": 15,"NAME": "Minty","LEVEL_A": 3},
    {"PARENT_ID": 14,"CHILD_ID": 17,"NAME": "Minty","LEVEL_A": 4},
    {"PARENT_ID": 17,"CHILD_ID": 16,"NAME": "spearMint","LEVEL_A": 5},
    {"PARENT_ID": 17,"CHILD_ID": 18,"NAME": "pepperMint","LEVEL_A": 5},
    {"PARENT_ID": 22,"CHILD_ID": 23,"NAME": "Malpractice","LEVEL_A": 3}
]

to:

{
        "PARENT_ID": 0,
        "CHILD_ID": 1,
        "NAME": "Quality",
        "LEVEL_A": 0,
        "children": [
            {
                "PARENT_ID": 1,
                "CHILD_ID": 2,
                "NAME": "Machine",
                "LEVEL_A": 1,
                "children": [
                    {
                        "PARENT_ID": 2,
                        "CHILD_ID": 3,
                        "NAME": "Banana",
                        "LEVEL_A": 2,
                        "children": []
                    },
                    {
                        "PARENT_ID": 2,
                        "CHILD_ID": 8,
                        "NAME": "Mill",
                        "LEVEL_A": 2,
                        "children": []
                    },
                    {
                        "PARENT_ID": 2,
                        "CHILD_ID": 9,
                        "NAME": "Mixer",
                        "LEVEL_A": 2,
                        "children": []
                    }
                ]
            },
            {
                "PARENT_ID": 1,
                "CHILD_ID": 3,
                "NAME": "Method",
                "LEVEL_A": 1,
                "children": []
            },
            {
                "PARENT_ID": 1,
                "CHILD_ID": 4,
                "NAME": "Material",
                "LEVEL_A": 1,
                "children": [
                    {
                        "PARENT_ID": 4,
                        "CHILD_ID": 11,
                        "NAME": "Masonite",
                        "LEVEL_A": 2,
                        "children": []
                    },
                    {
                        "PARENT_ID": 4,
                        "CHILD_ID": 12,
                        "NAME": "Meat",
                        "LEVEL_A": 2,
                        "children": [
                            {
                                "PARENT_ID": 12,
                                "CHILD_ID": 19,
                                "NAME": "Mutton",
                                "LEVEL_A": 3,
                                "children": []
                            }
                        ]
                    },
                    {
                        "PARENT_ID": 4,
                        "CHILD_ID": 13,
                        "NAME": "Marscapone",
                        "LEVEL_A": 2,
                        "children": [
                            {
                                "PARENT_ID": 13,
                                "CHILD_ID": 14,
                                "NAME": "Malty",
                                "LEVEL_A": 3,
                                "children": [
                                    {
                                        "PARENT_ID": 14,
                                        "CHILD_ID": 17,
                                        "NAME": "Minty",
                                        "LEVEL_A": 4,
                                        "children": [
                                            {
                                                "PARENT_ID": 17,
                                                "CHILD_ID": 16,
                                                "NAME": "spearMint",
                                                "LEVEL_A": 5,
                                                "children": []
                                            },
                                            {
                                                "PARENT_ID": 17,
                                                "CHILD_ID": 18,
                                                "NAME": "pepperMint",
                                                "LEVEL_A": 5,
                                                "children": []
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "PARENT_ID": 13,
                                "CHILD_ID": 15,
                                "NAME": "Minty",
                                "LEVEL_A": 3,
                                "children": []
                            }
                        ]
                    }
                ]
            },
            {
                "PARENT_ID": 1,
                "CHILD_ID": 5,
                "NAME": "Man Power",
                "LEVEL_A": 1,
                "children": [
                    {
                        "PARENT_ID": 5,
                        "CHILD_ID": 20,
                        "NAME": "Manager",
                        "LEVEL_A": 2,
                        "children": []
                    },
                    {
                        "PARENT_ID": 5,
                        "CHILD_ID": 21,
                        "NAME": "Magician",
                        "LEVEL_A": 2,
                        "children": []
                    },
                    {
                        "PARENT_ID": 5,
                        "CHILD_ID": 22,
                        "NAME": "Magister",
                        "LEVEL_A": 2,
                        "children": [
                            {
                                "PARENT_ID": 22,
                                "CHILD_ID": 23,
                                "NAME": "Malpractice",
                                "LEVEL_A": 3,
                                "children": []
                            }
                        ]
                    },
                    {
                        "PARENT_ID": 5,
                        "CHILD_ID": 24,
                        "NAME": "Massage Artist",
                        "LEVEL_A": 2,
                        "children": []
                    }
                ]
            },
            {
                "PARENT_ID": 1,
                "CHILD_ID": 6,
                "NAME": "Measurement",
                "LEVEL_A": 1,
                "children": [
                    {
                        "PARENT_ID": 6,
                        "CHILD_ID": 25,
                        "NAME": "Malleability",
                        "LEVEL_A": 2,
                        "children": []
                    }
                ]
            },
            {
                "PARENT_ID": 1,
                "CHILD_ID": 7,
                "NAME": "Milieu",
                "LEVEL_A": 1,
                "children": [
                    {
                        "PARENT_ID": 7,
                        "CHILD_ID": 26,
                        "NAME": "Marine",
                        "LEVEL_A": 2,
                        "children": []
                    }
                ]
            },
            {
                "PARENT_ID": 1,
                "CHILD_ID": 10,
                "NAME": "Metal Lathe",
                "LEVEL_A": 1,
                "children": []
            }
        ]
    }

But I have no idea how to make it work. I have found a Code in this Post, but I don’t know how to apply this to my usecase.

Can anyone help me with this?

I would be very grateful for any advice!

Kind Regards
Jegor

I am implementing the Google Maps geocode API with JavaScript. I have a point which is an object of a latitude and longitude coordinates. As the map first display I have a hardcoded point. But as I insert an address in my input field I get the latitude and longitude values in the corresponding inputs.

What I need to do is to change my point variable values to the new latitude and longitude.

I´ve tried passing the values of my HTML elements being parsed to a number but it is not working.

jQuery(document).ready(function ($) {

    var searchInput = 'sf_address';
    var latitudeField = document.getElementById('sf_latitude');
    var longitudeField = document.getElementById('sf_longitude');
    var map;
    var marker;

    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)),{
        types: ['geocode']
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function(){
        var near_address = autocomplete.getPlace();
        console.log(near_address.geometry.location.lat(), near_address.geometry.location.lng());
        latitudeField.value = near_address.geometry.location.lat();
        longitudeField.value = near_address.geometry.location.lng();
        
    });

    function displayMap() {
        var latitudeField = document.getElementById('sf_latitude');
        var longitudeField = document.getElementById('sf_longitude');
        var point = { lat: -34.5956145, lng: -58.4431949 };
        var map = new google.maps.Map(document.getElementById('sf_geocode_map'), {
            zoom: 10,
            center: point
        });
        marker = new google.maps.Marker({
            position: point,
            map: map
        });

        google.maps.event.addListener(map, 'click', function (event) {
            var clickedLocation = event.latLng;
            latitudeField.value = clickedLocation.lat();
            longitudeField.value = clickedLocation.lng();
        });
    }

    displayMap();
});

jQuery(document).on('change', '#'+searchInput, function(){
    document.getElementById('sf_latitude_input').value = '';
    document.getElementById('sf_longitude_input').value = '';
    document.getElementById('sf_latitude').innerHTML = '';
    document.getElementById('sf_longitude').innerHTML = '';
});

I’m trying to configure Eslint in astro but I can’t, then I will tell you the steps I followed after starting the project:

npm create astro@latest

npm install --save-dev eslint eslint-plugin-astro

luego creé el archivo .eslintrc.js con la siguiente configuración:

module.exports = {
  // ...
  extends: [
    // ...
    "plugin:astro/recommended",
  ],
  // ...
  overrides: [
    {
      // Define the configuration for `.astro` file.
      files: ["*.astro"],
      // Allows Astro components to be parsed.
      parser: "astro-eslint-parser",
      // Parse the script in `.astro` as TypeScript by adding the following configuration.
      // It's the setting you need when using TypeScript.
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
      },
      rules: {
        // override/add rules settings here, such as:
        // "astro/no-set-html-directive": "error"
      },
    },
    // ...
  ],
}

after that I saved in vscode to see if it made the changes according to the rules but it didn’t, can you help me please?