Category: javascript

What I am looking for is that the user, when clicking on any image, opens a modal with that same image in a large size.

What I have achieved so far is that only the first image is displayed, because clicking on the others does not interact with anything.

image gallery
only image that is activated

this image is from image gallery code in django
gallery code

This image is of the modal code that is displayed when clicking on an image
modal image zoom

and this image is of the js code
modal image zoom js

From now on, sorry for my bad English.
I hope you can understand me and help if you can, thank you!

I have two numbers of yesterday’s price and today’s price in the table. I want to display the price increase or decrease as a percentage next to today’s price number.

This is my table:

<table>
  <thead>
    <tr>
      <th>yesterday's price</th>
      <th>today's price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>50</td>
      <td>75</td>
   </tr>
   <tr>
     <td>100</td>
     <td>50</td>
   </tr>
   <tr>
     <td>82</td>
     <td>82</td>
   </tr>
  </tbody>
</table>

I’m going to change it like this:

By adding what JavaScript codes can I make these changes in the table? Thanks for your help

<table>
  <thead>
    <tr>
      <th>yesterday's price</th>
      <th>today's price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>50</td>
      <td class="increase">75 (+50% increase)</td>
   </tr>
   <tr>
     <td>100</td>
     <td class="decrease">50 (-50% decrease)</td>
   </tr>
   <tr>
     <td>82</td>
     <td class="nochange">82 (no change)</td>
   </tr>
  </tbody>
</table>

I am reading some existing code, and i find it interesting the way the same data is simultaneously used as argument and return value (prepareData() method) – I wonder how much of a bad practice this is.

And how we are using mergeMap and returning Observable void in loadMyData method.

Headsup that I copied code I didn’t write, and renamed variables and types, just trying to understand how correct this code is, and if you would improve it in any obvious way.

My knowledge of RxJs is very basic and I am just trying to learn.

 public prepareData(values: myTypeArr[]): Observable<myTypeArr[]> {
   return this.loadMyData().pipe(take(1),
   map(() => {
     values.forEach((value) => {
       // add value to data in store
       this.assignValueToStore(value);
     });
     return values;
   }))
 }

loadMyData() looks like this.

public loadMyData(): Observable<void> {
  this.logger.info('Loading data.');

  return this.myService.apiDataGet().pipe(
    map((responseArr: responseType[]) => {
      //Reset an internal state
      this.resetState({});
      this.logger.info(`Got ${responseArr.length} items from API.`);
      return responseArr;
    }),
    mergeMap(responseArr=> {
      return this.addItemsToStore(responseArr); //this will return Observable<void>
    })
  );
}

I’m attempting to calculate slippage of the past X number of blocks to determine if a potential trade is likely to slip beyond the threshold 1% level. If it does I will cancel the trade.

To do this, I have used web3.eth.getPastLogs() and have started to receive this error:

Error: CONNECTION ERROR: Couldn't connect to node on WS.
    at Object.ConnectionError (/Users/TrentKennelly/trading_bot_V2/node_modules/web3-core-helpers/lib/errors.js:66:23)
    at Object.InvalidConnection (/Users/TrentKennelly/trading_bot_V2/node_modules/web3-core-helpers/lib/errors.js:36:21)
    at /Users/TrentKennelly/trading_bot_V2/node_modules/web3-providers-ws/lib/index.js:161:37
    at Map.forEach (<anonymous>)
    at WebsocketProvider._onClose (/Users/TrentKennelly/trading_bot_V2/node_modules/web3-providers-ws/lib/index.js:160:28)
    at W3CWebSocket._dispatchEvent [as dispatchEvent] (/Users/TrentKennelly/trading_bot_V2/node_modules/yaeti/lib/EventTarget.js:115:12)
    at W3CWebSocket.onClose (/Users/TrentKennelly/trading_bot_V2/node_modules/websocket/lib/W3CWebSocket.js:228:10)
    at WebSocketConnection.<anonymous> (/Users/TrentKennelly/trading_bot_V2/node_modules/websocket/lib/W3CWebSocket.js:201:17)
    at WebSocketConnection.emit (node:events:513:28)
    at WebSocketConnection.drop (/Users/TrentKennelly/trading_bot_V2/node_modules/websocket/lib/WebSocketConnection.js:475:14)
    at /Users/TrentKennelly/trading_bot_V2/node_modules/websocket/lib/WebSocketConnection.js:303:18
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11) {
  code: 1009,
  reason: 'Frame size of 5607436 bytes exceeds maximum accepted frame size'
}

I have attempted to increase the maxReceivedFrameSize in my truffle-config, which is a solution offered here like so:

networks: {
    mainnet: {
      provider: () => new HDWalletProvider(mnemonic, `wss://mainnet.infura.io/ws/v3/${process.env.INFURA_API_KEY}`,
        {
            clientConfig: {
                maxReceivedFrameSize: 100000000,
                maxReceivedMessageSize: 100000000
            }
        }),
      network_id: '*', 
      gasPrice: 100000000000
    }
}

Here is the function that is producing the error. :

const determineSlippage = async (_token0, _token1, _pairContract) => {

  console.log(`Calculating Slippage...n`)

  const endpoint = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v2'

  // Set the token pair to analyze
  const token0 = _token0 
  const token1 = _token1 

  // Set the time interval to analyze (in blocks)
  const blocks = 500

async function getTradesForPair(token0, token1, blocks, uPairValue) {
  // Get the latest block number
  const latestBlockNumber = await web3.eth.getBlockNumber();

  // Determine the block range to search for trades
  const startBlockNumber = Math.max(latestBlockNumber - blocks, 0);
  const endBlockNumber = latestBlockNumber;
              
  const pair = _pairContract;

  const filter = {
    fromBlock: startBlockNumber,
    toBlock: endBlockNumber,
    topics: [web3.utils.sha3('Swap(address,uint256,uint256,uint256,uint256,address)')]
  };

  // Get the past Swap events from the Uniswap pair contract
  const events = await web3.eth.getPastLogs(filter);

  // Create an array of trades from the Swap events
  const trades = events.map(event => {
  const { amount0In, amount1In, amount0Out, amount1Out } = event.returnValues;
  const { token0, token1 } = pair.options;
  const trade = { 
    inputToken: token0.options.address === token0Address ? token0 : token1,
    outputToken: token0.options.address === token0Address ? token1 : token0,
    inputAmount: web3.utils.toBN(token0.options.address === token0Address ? amount0In : amount1In),
    outputAmount: web3.utils.toBN(token0.options.address === token0Address ? amount1Out : amount0Out)
  };

  return trade;

});

return trades;
}

As a final note, this error occurs whether blocks is 500 or 100. Doesn’t seem to matter. Any thoughts?

In AG grid react.. press tab to move next cell that time focus and editing enable on each cell I moved using tab but if I sorted grid ascending and decending after that if i click one cell editing and focusing enable on someother row.what is the solution for that?

I wrote function for oncellfocused and tired

I do have a Fiori list report developed using Fiori Elements. I need to dynamically change the column headings.
I have a filter called Period which can be selected as Monthly or Weekly.
When the user has selected the Monthly option, the columns should have headings for next four months ,
like
03/2023 04/2023 05/2023 06/2023
When the user has selected the Weekly option, the columns should have headings for next four periods ,
like

Calender 09 Calender 10 Calender 11 Calender 12 .
How can i achieve the same using javascript code in the front end ? especially for the one which developed with fiori elements.

@Fiori Elements @Fiori @UI5 @Javascript

Dynamic Column in List report developed using Fiori Elements

I have this iframe tag that is coming from server in my html page

<html>
<script>
    window.onload = () => {
...
..
  function() {
      document.getElementsByClassName("container").style.backgroundColor ="blue";
    }, 5000);
<body>
  <div id="loadiframe" />
</body>
</html>

i want to change the background color of div inside iframe

<child33

I need to get values in these text files as
Enter the text file
parent2
child1
child2
child3
and the same for parent1 and parent3 and child 33
if I use child2 i need to show undefined.

I have a Pdf and want to extract pdf and get text then search or find word from Text

try this react-native-pdf-lib

I was working through the exercises with the Odin Project and one of the tasks was to create a function that would remove specific elements from an array and return the new array without the specified elements. I created the following code which works, but seems very incorrect. Is there ever a time when something like this would be appropriate, or should I always look to do it a more elegant way.

`const removeFromArray = function(myArray, ...elements) {
    for (let i = 0; i < myArray.length; i++){
        if (elements.includes(myArray[i])){
            myArray.splice(i,1);
            i--; // Here is the part in question
        }
    }
    return myArray;
};`

Without the decrement:
myArray = [1,2,3,4]; elements = [1,2,3,4]; result = [2,4] expected = []

I know the result occurs due to the nature of the splice operation which removes the items at the specified indices and then shifts everything together so that there are no gaps.

I have since looked at the official solution provided and realize a more elegant way to do this is:

`const removeFromArray = function (myArray, ...elements) {
  const newArray = [];
  myArray.forEach((item) => {
    if (!elements.includes(item)) {
      newArray.push(item);
    }
  });
  return newArray;
};`
`

I created a search similar to the one on booking that I want to integrate into the site and I get the following error… after choosing a checkin, checkout, select the number of rooms, adults and children respectively their age and press the button de search throws me the following error in the console “Cannot read properties of null (reading ‘value’)”. And I can’t figure out where I’m going wrong. I am attaching the code below.
COD HTML

                <form id="booking-search-form" action="https://www.booking.com/searchresults.ro.html" method="get"
                    target="_blank" style="display: flex; justify-content: center;">
                    <div class="container">
                        <div class="hakolal-search-row-bk">
                            <div class="col-sm hakolal-search-conf">
                                <input type="date" id="checkin" name="checkin">
                            </div>
                            <div class="col-sm hakolal-search-conf">
                                <input type="date" id="checkout" name="checkout">
                            </div>
                            <div class="col-sm hakolal-search-conf">
                                <div class="dropdown">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        Number of guests</button>
                                    <div id="content" class="content dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <div class="list">
                                            <label for="rooms" class="list">Choose how many rooms</label>
                                            <input type="number" class="list quantity" value="0" />
                                        </div>
                                        <div class="list">
                                            <label for="adults" class="list">Choose the number of adults</label>
                                            <input type="number" class="list quantity" value="1" />
                                        </div>
                                        <div class="list" id="children-list">
                                            <label for="children" class="list">Choose the number of children</label>
                                            <input type="number" class="list quantity" value="0" />
                                            <div id="children-ages"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm hakolal-search-conf">
                                <button type="submit" class="btn btn-info hakolal-search-bk">Search</button>
                            </div>
                        </div>
                    </div>
                </form>

COD JavaScript

const form = document.getElementById("booking-search-form");
console.log("Formular:", form);

// Add event listener to children quantity input
const childrenQuantityInput = document.querySelector("#children-list input.quantity");
childrenQuantityInput.addEventListener("change", () => {
    const childrenAgesDiv = document.querySelector("#children-ages");
    childrenAgesDiv.innerHTML = ""; // Clear children ages list

    // Add input for each child age
    for (let i = 1; i <= childrenQuantityInput.value; i++) {
        const label = document.createElement("label");
        label.setAttribute("for", `child-${i}-age`);
        label.classList.add("list");
        label.innerText = `Child ${i} age:`;

        const input = document.createElement("input");
        input.setAttribute("id", `child-${i}-age`);
        input.setAttribute("name", `age-${i}`);
        input.setAttribute("type", "number");
        input.setAttribute("min", "0");
        input.setAttribute("max", "17");
        input.classList.add("list");
        input.value = "0";

        const div = document.createElement("div");
        div.appendChild(label);
        div.appendChild(input);
        childrenAgesDiv.appendChild(div);
    }

});
console.log("Input numar copii:", childrenQuantityInput);

const checkinInput = document.getElementById("checkin");
const checkoutInput = document.getElementById("checkout");

form.addEventListener("submit", (event) => {
    event.preventDefault();

    console.log(checkinInput); // check if element exists
    console.log(checkoutInput); // check if element exists
    const checkinValue = checkinInput.value;
    console.log(checkinValue); // display selected value in console log
    const checkoutValue = checkoutInput.value;
    console.log(checkoutValue); // display selected value in console log
    if (!checkinValue || !checkoutValue) {
        alert("Please enter check-in and check-out dates");
        return;
    }

    // check if is selectet an room
    const numberOfRooms = document.querySelector("#content input:nth-of-type(1)").value;
    if (numberOfRooms < 1) {
        alert("Please select at least one room");
        return;
    }
    console.log("Numarul de camere selectat:", numberOfRooms);

    // check if is selected an adult 
    const numberOfAdults = document.querySelector("#adults-list input.list.quantity").value;
    if (numberOfAdults < 1) {
        alert("Please select at least one adult");
        return;
    }
    console.log("Numarul de adulti:", numberOfAdults); // Valoarea nu se adauga, nu afiseaza nimic in consola

    const numberOfChildren = document.querySelector("#children-list input.list.quantity").value;
    const childrenAges = Array.from(document.querySelectorAll("#children-ages input"))
        .map((input) => input.value)
        .join(",");
    for (let i = 1; i <= numberOfChildren; i++) {
        const childAgeInput = document.querySelector(`#child-${i}-age`);
        if (childAgeInput.value < 1) {
            alert(`Please enter a valid age for child ${i}`);
            return;
        }
    }
    console.log("Numarul de copii:", numberOfChildren); // Valoarea nu se adauga, nu afiseaza nimic in consola
    console.log("Varsta copiilor:", childrenAges); // Valoarea nu se adauga, nu se afiseaza nimic in consola

    // Value of parametter ss is harcoded
    // ss parameter represent a location
    const url =
        `https://www.booking.com/searchresults.ro.html?ss=Romania&checkin=${checkinValue}&checkout=${checkoutValue}&nr_rooms=${numberOfRooms}&nr_adults=${numberOfAdults}&nr_children=${numberOfChildren}&group_children=${childrenAges}`;
    window.open(url, "_blank");
});

I tend to think that the problem is that the dropdown does not take the value from the number of rooms, adults and children of the respective age for each. But I’m not really sure.
The code, after selecting all the values in the form, creates a URL and makes a search in booking based on the parameters sent by the form.
Can you help me solve the problem? I can’t figure out where I’m going wrong.

The code below creates a new button element with the text “Download” and an ID of “download”, and appends it as a child element of the element with an ID of “container”.

When the button is clicked the container’s onclick is also triggered. I tried to remove it with
removeEventListener() without success.

document.getElementById('download').removeEventListener("onclick", myclick); 
document.getElementById('download').removeEventListener("click", myclick);
document.getElementById('download').removeEventListener("click", myclick, true);

I also tried all of those answers and none of them removed the onclick. (e.g. cloning etc.)
PS: the HTML code cannot be modified because it’s part of a framework.

$(document).ready(function() {
    $('#container').append(
        $(document.createElement('button')).prop({
            type: 'button',
            innerHTML: 'Download',
            id : 'download'
        })
    );
});

function myclick(e) {

   console.log('myclick');

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html id="container" onclick="myclick(event)">
</html>

I learn some JavaScript and want to rebuilt the infinity function of owl slider.

In the concept, the last slider items was attached to the beginning and the first slider items was attached to the end of the slider.

When does the function know, to jump to the right position in the slider?

There is a slider example on the start page:

https://owlcarousel2.github.io/OwlCarousel2/

I just created a google site as a landing page for a friend’s business. For being okay with cookies policy, I need to add a pop up that allows cookies, but until you agree with them, they must have to be applied. Also, I need to be able to separate it by technic and analytic to customize agreements. Any solution? I’m in Spain.
Already tried to use some banners, but it seems to be incorrect to use them as only a advise.
I´m sorry for my english.

What is the error in this? can anyone help me?

<!-- Default Statcounter code for Virtual Building Studio
https://www.virtualbuildingstudio.com/ -->
<script type="text/javascript">
var sc_project=12312312; 
var sc_invisible=1; 
var sc_security="999bc555"; 
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/12312312/0/999bc555/1/"
alt="Web Analytics"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->

I tried remove double quote but seems not working.