javascript – Page 2643 – Blancer.com Tutorials and projects

How to reduce a nested object array to get optional content values

There is a nested object array and I have to get all unique refIds, which are existing at any level.

I tried to iterate with for-loops, but it really gets very complicated. And also I don’t know how deep the data exactly is.
But is always an "type": "text"element with an optional "marks" field.

[
  {
    "type": "bulletList",
    "content": [
      {
        "type": "listItem",
        "content": [
          {
            "type": "paragraph",
            "content": [
              {
                "type": "text",
                "marks": [ // optional mark
                  { "type": "refId", "attrs": { "refIds": [123, 234] } } // need this values
                ],
                "text": "Item 1"
              }
            ]
          }
        ]
      },
      {
        "type": "listItem",
        "content": [
          {
            "type": "paragraph",
            "content": [
              {
                "type": "text",
                "marks": [{ "type": "refId", "attrs": { "refIds": [987] } }],
                "text": "Item 2"
              }
            ]
          }
        ]
      },
      {
        "type": "listItem",
        "content": [
          {
            "type": "paragraph",
            "content": [{ "type": "text", "text": "Item 3" }] // has no mark
          },
          {
            "type": "bulletList", // example for nested child
            "content": [
              {
                "type": "listItem",
                "content": [
                  {
                    "type": "paragraph",
                    "content": [
                      {
                        "type": "text",
                        "marks": [
                          { "type": "refId", "attrs": { "refIds": [876] } }
                        ],
                        "text": "Sub 1"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

Output should be

["123", "234", "987"]

Task :react-native-community_masked-view:compileDebugJavaWithJavac FAILED

error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an e
an exception. * What went wrong: Execution failed for task ‘:react-native-community_masked-view:compileDebugJavaWithJavac’. > Could not resolve all files conf
for configuration ‘:react-native-community_masked-view:androidJdkImage’. > Failed to transform core-for-system-modules.jar to match attributes {artifactTyrnalpe=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}. > Execution failed for JdkImageTransform: C:UsershpAppDdroiataLocalAndroidSdkplatformsandroid-34core-for-system-modules.jar. > Error while executing process C:Program FilesJavajdk-21binjlink.exe with are-paguments {–module-path C:Usershp.gradlecachestransforms-3393400499b2af28f59d755a5f301569btransformedoutputtempjmod –add-modules java.base –outdleput C:Usershp.gradlecachestransforms-3393400499b2af28f59d755a5f301569btransformedoutputjdkImage –disable-plugin system-modules} * Try: > Run wit geth –stacktrace option to get the stack trace. > Run with –info or –debug option to get more log output. > Run with –scan to get full insights. > Get mole.ore help at https://help.gradle.org. BUILD FAILED in 33s.
info Run CLI with –verbose flag for more details.

I was trying to build by app and this shows i am to this kindly help.

In attemp to assign known value to container.scrollLeft, it is getting assigned an unknown value

Following are the HTML and Javascript codes of my project. You can view them here along with CSS.

I have created 8 divs 150px wide which lie horizontally in a row flexbox of 600px width. Out of 8, only 4 are visible at a time and the rest can be viewed by scrolling using the side buttons provided. I have used requestAnimationFrame to produce a scrolling effect(600px scroll).

The commented 3 lines in the JavaScript code are of concern. Let’s say nu_value - prev_value computes to 6 so 6 will be logged in the console. After that 6 should be assigned to container.scrollLeft but it is not happening as the next line logs its value to be different(undervalue) than 6. One can also verify the same by observing that content doesn’t scroll to the right completely(<600px) when clicking the right side button.

The same problem lies with scrolling left but the only difference is that despite undervalue container.scrollLeft gets assigned overvalue. Why is this happening?

<body>
    <button id="button_left"> < </button>
    <div id="container">
        <div id="sub1" class="sub">1</div>
        <div id="sub2" class="sub">2</div>
        <div id="sub3" class="sub">3</div>
        <div id="sub4" class="sub">4</div>
        <div id="sub5" class="sub">5</div>
        <div id="sub6" class="sub">6</div>
        <div id="sub7" class="sub">7</div>
        <div id="sub8" class="sub">8</div>
    </div>
    <button id="button_right"> > </button>
</body>

let container = document.querySelector("#container");
let button_left = document.querySelector('#button_left');
let button_right = document.querySelector('#button_right');

button_left.addEventListener('click', ()=>{
    if(container.scrollLeft > 0){
        let start, elapsed, prev_value = 0, nu_value;
        requestAnimationFrame(scroll);
        function scroll(){
            if(start === undefined)
            start = new Date().getTime();
            elapsed = new Date().getTime() - start;
            if(elapsed <= 900){
                nu_value = Math.round((elapsed/900).toFixed(2) * 600);
                container.scrollLeft -= nu_value - prev_value;
                prev_value = nu_value;
                requestAnimationFrame(scroll);
            }
        }
    }
});
button_right.addEventListener('click', ()=>{
    if(container.scrollLeft >= 0){
        let start, elapsed, prev_value = 0, nu_value;
        requestAnimationFrame(scroll);
        function scroll(){
            if(start === undefined)
            start = new Date().getTime();
            elapsed = new Date().getTime() - start;
            if(elapsed <= 900){
                nu_value = Math.round((elapsed/900).toFixed(2) * 600);
                console.log(`difference = ${nu_value - prev_value}`);  //COMMENTED
                container.scrollLeft += nu_value - prev_value;         //COMMENTED
                console.log(`scrollLeft = ${container.scrollLeft}`);   //COMMENTED
                prev_value = nu_value;
                requestAnimationFrame(scroll);
            }
        }
    }
});

How To Fix The Google Map Rendering Problem?

Rendered Map With the warning:

Rendered Map With the warning

import React from 'react';
import { GoogleMap, MarkerF, useJsApiLoader } from '@react-google-maps/api';

const libraries = ['places'];
const mapContainerStyle = {
    width: '100%',
    height: '600px',
};
const center = {
    lat: 22.355650,
    lng: 88.877136,
};

const MapContainer = () => {
    const { isLoaded, loadError } = useJsApiLoader({
        googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
        libraries,
    });

    if (loadError) {
        return <div>Error loading maps</div>;
    }

    if (!isLoaded) {
        return <div>Loading maps</div>;
    }

    return (
        <div>
            <GoogleMap
                mapContainerStyle={mapContainerStyle}
                zoom={13}
                center={center}
            >
                <MarkerF position={center} />
            </GoogleMap>
        </div>
    );
};

export default MapContainer;

When I render Google Maps, a warning is displayed at the top of the map stating, “This page can’t load Google Maps correctly.” In the console, a message appears indicating that the Maps JavaScript API has been loaded directly without using ‘loading=async,’ potentially leading to suboptimal performance.

console.log(isWhiteOrBlack(square.textContent), isWhiteOrBlack(pieceSelected)) returning ” null null”

Intention in the UI:
I wish to be able to capture the chess pieces if they are different in color but it seems that capturing the pieces of the same color is also possible.

Please ignore that I have no restrictions in movement yet as this is on the way.
Please ignore too that there is move turn mechanic as this is on the way.

Root Cause:
console.log(isWhiteOrBlack(square.textContent), isWhiteOrBlack(pieceSelected)) is returning “null null” but when I check console.log(isWhiteOrBlack('♜'), isWhiteOrBlack('♖')), it returns “black white”

Question:
Was there a mistake in hoisting or referencing my declaration or expression?
Is it returning “null null” because the second click happens before the condition is evaluated?

const squares = Array.from(document.getElementsByClassName('square'));
const playWhite = document.getElementById('play-white');
const playBlack = document.getElementById('play-black');
const board = document.getElementById('board');
let gameSetup = true;
let gameOngoing = false;
// let whoseMoveTurn;

function gameStart() {
  playWhite.addEventListener('click', () => {
    playWhite.remove();
    playBlack.remove();
    board.style.display = 'grid';
    gameSetup = false;
    gameOngoing = true;
    // whoseMoveTurn = 'white';
  });

  playBlack.addEventListener('click', () => {
    playWhite.remove();
    playBlack.remove();
    board.style.display = 'grid';
    squaresArray = Array.from(squares);
    squaresArray.reverse();
    squaresArray.forEach((square, index) => {
      square.style.order = index + 1;
    });
    gameSetup = false;
    gameOngoing = true;
    // whoseMoveTurn = 'white';
  });
}

const whitePieces = ['♖', '♘', '♗', '♕', '♔', '♙'];
const blackPieces = ['♜', '♞', '♝', '♛', '♚', '♟'];

function isWhiteOrBlack(piece) {
  let isWhite = whitePieces.includes(piece);
  let isBlack = blackPieces.includes(piece);
  if (isWhite) {
    return 'white';
  } else if (isBlack) {
    return 'black';
  } else {
    return null;
  }
}

console.log(isWhiteOrBlack('♜'), isWhiteOrBlack('♖'));

let firstClick = false;
let firstClickedCoordinates;
let firstClickedSquare;
let pieceSelected;

function generalMovement() {}
squares.forEach((square) => {
  square.addEventListener('click', () => {
    if (!gameSetup && gameOngoing) {
      if (!firstClick && square.textContent !== '') {
        // When clicking a piece for the first time
        firstClick = true;
        firstClickedCoordinates = square.id;
        firstClickedSquare = document.getElementById(firstClickedCoordinates);
        pieceSelected = square.textContent;
        square.style.opacity = 0.5;
        console.log(firstClickedCoordinates);
        console.log(pieceSelected);
      } else if (firstClick && square.textContent === '') {
        // When clicking an empty square on the second click
        square.style.opacity = 0.5;
        setTimeout(() => {
          squares.forEach((opacityOfSquare) => {
            opacityOfSquare.style.opacity = 1;
          });
        }, 200);
        firstClickedSquare.textContent = '';
        square.textContent = pieceSelected;
        firstClick = false;
      } else {
        if (isWhiteOrBlack(square.textContent) === isWhiteOrBlack(pieceSelected)) {
          //When clicking another different colored piece after first click
          console.log(square.textContent, pieceSelected);
          console.log(isWhiteOrBlack(square.textContent), isWhiteOrBlack(pieceSelected)); // null null ---> why?
          console.log(isWhiteOrBlack(square.textContent) === isWhiteOrBlack(pieceSelected));
          square.style.opacity = 0.5;
          firstClickedSquare.textContent = '';
          square.textContent = pieceSelected;
          setTimeout(() => {
            squares.forEach((opacityOfSquare) => {
              opacityOfSquare.style.opacity = 1;
            });
          }, 200);
          firstClick = false;
        } else {
          //When clicking another same colored piece after first click
          firstClickedSquare.style.opacity = 1;
          firstClick = false;
        }
      }
    }
  });
});

gameStart();
generalMovement();

body {
  text-align: center;
  background-color: antiquewhite;
}

#board {
  display: none;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  column-gap: 0px;
  row-gap: 0px;
  border: 2px black solid;
  width: 400px;
  height: 400px;
  text-align: center;
  vertical-align: center;
  margin: auto;
}

.black {
  background-color: #769656;
}

.white {
  background-color: #eeeed2;
}

.square {
  border: 2px solid black;
  font-size: 25px;
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

#play-white {
  cursor: pointer;
  outline: 0;
  color: black;
  display: inline-block;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 0.25rem;
}

#play-white:hover {
  background-color: white;
  color: black;
}

#play-black {
  cursor: pointer;
  outline: 0;
  color: black;
  display: inline-block;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 0.25rem;
}

#play-black:hover {
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Chess Game</title>
</head>

<body>
  <header>
    <h1 id="page-title">Chess Game</h1>
    <button id="play-white">Play White</button>
    <button id="play-black">Play Black</button>
  </header>
  <div id="board">
    <button id="a8" class="a-col 8-row white square">
                ♜
            </button>
    <button id="b8" class="b-col 8-row black square">
                ♞
            </button>
    <button id="c8" class="c-col 8-row white square">
                ♝
            </button>
    <button id="d8" class="d-col 8-row black square">
                ♛
            </button>
    <button id="e8" class="e-col 8-row white square">
                ♚
            </button>
    <button id="f8" class="f-col 8-row black square">
                ♝
            </button>
    <button id="g8" class="g-col 8-row white square">
                ♞
            </button>
    <button id="h8" class="h-col 8-row black square">
                ♜
            </button>

    <button id="a7" class="a-col 7-row black square">
                ♟
            </button>
    <button id="b7" class="b-col 7-row white square">
                ♟
            </button>
    <button id="c7" class="c-col 7-row black square">
                ♟
            </button>
    <button id="d7" class="d-col 7-row white square">
                ♟
            </button>
    <button id="e7" class="e-col 7-row black square">
                ♟
            </button>
    <button id="f7" class="f-col 7-row white square">
                ♟
            </button>
    <button id="g7" class="g-col 7-row black square">
                ♟
            </button>
    <button id="h7" class="h-col 7-row white square">
                ♟
            </button>

    <button id="a6" class="a-col 6-row white square"></button>
    <button id="b6" class="b-col 6-row black square"></button>
    <button id="c6" class="c-col 6-row white square"></button>
    <button id="d6" class="d-col 6-row black square"></button>
    <button id="e6" class="e-col 6-row white square"></button>
    <button id="f6" class="f-col 6-row black square"></button>
    <button id="g6" class="g-col 6-row white square"></button>
    <button id="h6" class="h-col 6-row black square"></button>

    <button id="a5" class="a-col 5-row black square"></button>
    <button id="b5" class="b-col 5-row white square"></button>
    <button id="c5" class="c-col 5-row black square"></button>
    <button id="d5" class="d-col 5-row white square"></button>
    <button id="e5" class="e-col 5-row black square"></button>
    <button id="f5" class="f-col 5-row white square"></button>
    <button id="g5" class="g-col 5-row black square"></button>
    <button id="h5" class="h-col 5-row white square"></button>

    <button id="a4" class="a-col 4-row white square"></button>
    <button id="b4" class="b-col 4-row black square"></button>
    <button id="c4" class="c-col 4-row white square"></button>
    <button id="d4" class="d-col 4-row black square"></button>
    <button id="e4" class="e-col 4-row white square"></button>
    <button id="f4" class="f-col 4-row black square"></button>
    <button id="g4" class="g-col 4-row white square"></button>
    <button id="h4" class="h-col 4-row black square"></button>

    <button id="a3" class="a-col 3-row black square"></button>
    <button id="b3" class="b-col 3-row white square"></button>
    <button id="c3" class="c-col 3-row black square"></button>
    <button id="d3" class="d-col 3-row white square"></button>
    <button id="e3" class="e-col 3-row black square"></button>
    <button id="f3" class="f-col 3-row white square"></button>
    <button id="g3" class="g-col 3-row black square"></button>
    <button id="h3" class="h-col 3-row white square"></button>

    <button id="a2" class="a-col 2-row white square">
                ♙
            </button>
    <button id="b2" class="b-col 2-row black square">
                ♙
            </button>
    <button id="c2" class="c-col 2-row white square">
                ♙
            </button>
    <button id="d2" class="d-col 2-row black square">
                ♙
            </button>
    <button id="e2" class="e-col 2-row white square">
                ♙
            </button>
    <button id="f2" class="f-col 2-row black square">
                ♙
            </button>
    <button id="g2" class="g-col 2-row white square">
                ♙
            </button>
    <button id="h2" class="h-col 2-row black square">
                ♙
            </button>

    <button id="a1" class="a-col 1-row black square">
                ♖
            </button>
    <button id="b1" class="b-col 1-row white square">
                ♘
            </button>
    <button id="c1" class="c-col 1-row black square">
                ♗
            </button>
    <button id="d1" class="d-col 1-row white square">
                ♕
            </button>
    <button id="e1" class="e-col 1-row black square">
                ♔
            </button>
    <button id="f1" class="f-col 1-row white square">
                ♗
            </button>
    <button id="g1" class="g-col 1-row black square">
                ♘
            </button>
    <button id="h1" class="h-col 1-row white square">
                ♖
            </button>
  </div>

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

</html>

Error when compiling Typescript Code to Javascript

I am trying to create a simple PixiJS game using Typescript as the code base. I then compile the typescript to Javascript using “npx tsc” and finally in my html file I reference the newly created/updated javascript file from the typescript.

The error I get is “Uncaught ReferenceError: exports is not defined
at index.js:25:23” after compiling typescript and trying to run the html in browser.
Here’s the Javascript code:

Object.defineProperty(exports, "__esModule", { value: true });
const PIXI = __importStar(require("pixi.js"));
let app;
let player; //PLAYER "NODE"
let game_hold;
window.onload = function () {
    app = new PIXI.Application({
        width: 900,
        height: 700,
        background: '#1099bb'
    });
    document.body.appendChild(app.view);
};

I have tried to define “exports”, I’ve tried to clear all the other lines of code but I still get errors

This is the config.json file:

{
  "compilerOptions": {
      "esModuleInterop": true,
      "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
       "module": "commonjs",
       "target": "ES2015",
       "noImplicitAny": false,
       "sourceMap": true,
       "outDir": "src"
   },
   
   "exclude": [ "node_modules" ],
   "include": ["src"]
}

How to run JavaScript codes after CSS background-image is loaded

I want to run a JavaScript code (simple animation with addEventListener) after CSS background image is loaded.

I don’t want to use JavaScript Image() for this case because there are two background-image for small size screen and large size screen each. If I use Image(), the image cannot be switched when changing the screen size after loaded.

The background image is loaded on body in CSS, not as img tag in a specific section in html because I want to cover header and hero section (which is in main tag) with it.

body {
    background: no-repeat url("../img/bg_sp.png");
}

@media (min-width: 768px) {
    body {
        background: no-repeat url("../img/bg_pc.png");
    }
}

Thank you in advance.

I am working on scene scrubbing in react, but I am getting too much issues

import React, { useRef, useEffect, RefObject, useState } from 'react';
import './webgi.css';
import Texts from './Texts';

const frameCount = 639; // Number of frames in the animation
const frames = Array.from({ length: frameCount }, (_, i) =>
  require(`../assets/Learn-02-Egg010/scene${i + 1}.jpg`)
);

const WebGi = () => {
  const section = useRef(null);
  const [currentFrame, setCurrentFrame] = useState(0);

  useEffect(() => {
    const scrollHandler = () => {
      if (!section.current) return;

      const distance = window.scrollY - section.current.offsetTop;
      const total = section.current.clientHeight - window.innerHeight;
      let percentage = distance / total;
      percentage = Math.max(0, percentage);
      percentage = Math.min(percentage, 1);

      const frameIndex = Math.floor(percentage * frameCount);
      setCurrentFrame(frameIndex);
    };

    const throttledScrollHandler = throttle(scrollHandler, 100);

    window.addEventListener('scroll', throttledScrollHandler);
    return () => {
      window.removeEventListener('scroll', throttledScrollHandler);
    };
  }, []);

  return (
    <div className='vid' ref={section}>
      <Texts />
      <div className='holder'>
        <img src={frames[currentFrame]} alt='frame' />
      </div>
    </div>
  );
};

function throttle(func, limit) {
  let inThrottle;
  return function () {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

export default WebGi;

I tried converting scenes and doing video scrubbing but that isn’t efficient as the webpage will render whole video at each scroll. If you have some other way to play animation on scroll events , feel free to mention here…

biurwfiuwegifbewiubceiuwfg8732gfbebchdbhcbdsbfjkdsf pjhsdfyweugfyweugfbew dn dc hefbweygfyeqbdha cn hdbewyder

How to limit the number of visible pages shown in pagination with JavaScript

The pagination limit is not defined. I want to show the pagination in this format of 1/4, and the next and previous buttons will work accordingly. Also, on the first and last pages, clicks should be disabled. You can see it at the bottom of the table. Please help me in order to accomplish this. I tried but couldn’t do it. That’s why I am looking for expert help.

        const paginationNumbers = document.getElementById("pagination-numbers");
        const paginatedList = document.getElementById("paginated-list");
        const listItems = paginatedList.querySelectorAll("tbody tr");
        const nextButton = document.getElementById("next-button");
        const prevButton = document.getElementById("prev-button");

     const pageSize = 2;
        const paginationLimit = 2;
        const pageCount = Math.ceil(listItems.length / paginationLimit);
        let currentPage = 1;

        const disableButton = (button) => {
            button.classList.add("disabled");
            button.setAttribute("disabled", true);
        };

        const enableButton = (button) => {
            button.classList.remove("disabled");
            button.removeAttribute("disabled");
        };

        const handlePageButtonsStatus = () => {
            if (currentPage === 1) {
                disableButton(prevButton);
            } else {
                enableButton(prevButton);
            }

            if (pageCount === currentPage) {
                disableButton(nextButton);
            } else {
                enableButton(nextButton);
            }
        };

        const handleActivePageNumber = () => {
            document.querySelectorAll(".pagination-number").forEach((button) => {
                button.classList.remove("active");
                const pageIndex = Number(button.getAttribute("page-index"));
                if (pageIndex == currentPage) {
                    button.classList.add("active");
                }
            });
        };

        const appendPageNumber = (index) => {
            const pageNumber = document.createElement("button");
            pageNumber.className = "pagination-number";
            pageNumber.innerHTML = index;
            pageNumber.setAttribute("page-index", index);
            pageNumber.setAttribute("aria-label", "Page " + index);

            paginationNumbers.appendChild(pageNumber);
        };

        const getPaginationNumbers = () => {
            for (let i = 1; i <= pageCount; i++) {
                appendPageNumber(i);
            }
        };

        const setCurrentPage = (pageNum) => {
            currentPage = pageNum;

            handleActivePageNumber();
            handlePageButtonsStatus();

            const prevRange = (pageNum - 1) * paginationLimit;
            const currRange = pageNum * paginationLimit;

            listItems.forEach((item, index) => {
                item.classList.add("hidden");
                if (index >= prevRange && index < currRange) {
                    item.classList.remove("hidden");
                }
            });
        };

        window.addEventListener("load", () => {
            getPaginationNumbers();
            setCurrentPage(1);

            prevButton.addEventListener("click", () => {
                setCurrentPage(currentPage - 1);
            });

            nextButton.addEventListener("click", () => {
                setCurrentPage(currentPage + 1);
            });

            document.querySelectorAll(".pagination-number").forEach((button) => {
                const pageIndex = Number(button.getAttribute("page-index"));

                if (pageIndex) {
                    button.addEventListener("click", () => {
                        setCurrentPage(pageIndex);
                    });
                }
            });
        });

       .result {
        text-align: center;
        padding-bottom: 20px;
        width: 100%;
    }
    
    
    

 /* Responsive Table Start */
    
    .rstable {
        width: 100%;
        margin: 0 auto;
        padding: 16px 0px;
    }
    
    .rstable table {
        font-family: calibri, sans-serif;
        border-collapse: collapse;
        font-size: 16px;
        width: 100%;
        font-weight: 400;
    }
    
    .rstable tr {
        border-bottom: 1px solid #ccc;
    }
    
    .rstable tr td {
        text-align: left;
        padding: 9px;
        color: #333;
    }
    
    .rstable th {
        text-align: left;
        padding: 10px 9px;
        background: #004287;
        color: #fff;
        font-weight: 500;
    }
    
    .rstable tr:nth-child(even) {
        background: #f9fbfdc4;
    }
    
    .rstable tr:nth-child(odd) {
        background: #dae9f3;
    }
    
    .rstable tr td a {
        color: #004287;
        font-size: 16px;
    }
    
    @media (min-width: 768px) and (max-width: 1023px) {
        .rstable table {
            font-size: 15px;
        }
    }
    
    @media screen and (max-width: 767px) {
        .rstable table {
            font-size: 16px;
            font-weight: 400;
        }
        .rstable thead {
            display: none;
        }
        .rstable td:first-child {
            text-align: left;
            display: inline-grid;
            width: 90%;
        }
        .rstable td {
            text-align: left;
            display: inline-grid;
            width: 26%;
            vertical-align: top;
            color: #333;
            font-weight: 400;
        }
        .rstable td:before {
            content: attr(data-title);
            font-weight: 500;
            padding-bottom: 5px;
            font-size: 16px;
            color: #000;
        }
    }
    
    @media (min-width: 280px) and (max-width: 319px) {
        .rstable td {
            width: 23%;
        }
    }
    /* Responsive Table Ends */ 

   .arrow-right,
        .arrow-left {
            display: block;
            margin: 10px auto;
            width: 8px;
            height: 8px;
            border-top: 2px solid #000;
            border-left: 2px solid #000;
        }
        
        .arrow-right {
            transform: rotate(135deg);
        }
        
        .arrow-left {
            transform: rotate(-45deg);
        }
        
        .hidden {
            display: none;
        }
        
        .pagination-container {
            width: calc(100% - 0rem);
            display: flex;
            align-items: center;
            position: relative;
            bottom: 0;
            padding: 0rem 0;
            justify-content: right;
            /* text-align: center; */
        }
        
.pagination-number, .pagination-button {
    font-family: calibri, sans-serif;
    font-size: 16px;
    background-color: transparent;
    border: none;
    margin: 0.1rem 0.1rem;
    cursor: pointer;
    height: 2rem;
    width: 2rem;
    border-radius: 0.2rem;
}
        
        .pagination-number:hover,
        .pagination-button:not(.disabled):hover {
            background: #fff;
        }
        
        .pagination-number.active {
            color: #fff;
            background: #0085b6;
        }

                    <!-- Result Start -->
                    

                    
                    <!-- Result Table Starts -->
                    
                        <div class="rstable">
                        <table id="paginated-list">
                            <thead>
                                <tr>
                                    <th>Train</th>
                                    <th>Type</th>
                                    <th>Zone</th>
                                    <th>From</th>
                                    <th>Dep</th>
                                    <th>To</th>
                                    <th>Arr</th>
                                    <th>Dur</th>
                                    <th>Halts</th>
                                    <th>Runs On</th>
                                    <th>Dist</th>
                                    <th>Speed</th>
                                    <th>Classes</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-title="Train">15011 Kashi Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">97 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15012 Pushpak Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">96 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15013 Godan Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">95 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15014 Golden Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">94 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15015 Lucknow Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">93 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15016 SLN Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">92 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15017 Sitapur Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">91 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15018 Darbhanga Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">90 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>

                            </tbody>
                        </table>

                    </div>
                    
                    <div style="width: 100%; display: flex;align-items: center;">

                        <div class="pagination-container">
                            <button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
                            <span class="arrow-left"></span>
                    </button>
                            <div id="pagination-numbers">
                            </div>
                            <button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
                            <span class="arrow-right"></span>
                        </button>

                        </div>
                    </div>
                    <!-- Result Table Ends -->

Chunks not loading when script tag is added dynamically using JS instead of adding it to HTML directly

I have a react app bundled dist/ folder which is hosted on some url (http://localhost:8000).
This dist folder comprises of
main.js
vendor.js which is a chunk for node_modules
app.[fullhash].js JS Chunk of component called App
app.[fullhash].css CSS Chunk of component called App

Now I have created other react app in which I want to use this code.

When I use

<script src="http://localhost:8000/vendors.js" type="text/javascript" async></script>
<script src="http://localhost:8000/main.js" type="text/javascript" async></script>

the above part of code directly in my index.html file, It is automatically loading respective chunks(app.[fullhash].js, app.[fullhash].css) also. Which is what I wanted.

But I want to add the script dynamically using Javascript instead of adding it in HTML file.

So I used

const scriptElVendors = document.createElement('script');
scriptElVendors.src = 'http://localhost:8000/vendors.js'
scriptElVendors.type = 'text/javascript';
scriptElVendors.async = true;
document.head.appendChild(scriptElVendors);

const scriptElMain = document.createElement('script');
scriptElMain.src = 'http://localhost:8000/main.js'
scriptElMain.type = 'text/javascript';
scriptElMain.async = true;
document.head.appendChild(scriptElMain);

When I use this, It is only fetching main.js and vendors.js but not the respective chunks.

I want to add script tags dynamically using JS. And also it should automatically fetch the chunks also.

Can anyone help me solve this?

I tried using relative import from local filesystem and also from the server.
In both of these, Adding script dynamically using JS didn’t fetch respective chunks.

Check if Screen Component is being presented Modally or is within TabNavigator in React Native

Using React Native & react-native-navigation I have navigation set up as per the below;

const HomeLayout = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={HomeScreen}
      />
      <HomeStack.Screen
        name="Search"
        component={SearchScreen}
        options={{
          presentation: "fullScreenModal",
        }}
      />
    </HomeStack.Navigator>
  );
};

const TabLayout = () => {
  return (
    <Tabs.Navigator>
      <Tabs.Screen
        name="HomeLayout"
        component={HomeLayout}
      />
      <Tabs.Screen
        name="Search"
        component={SearchScreen}
      />
    </Tabs.Navigator>
  );
};

I want to check if my SearchScreen is being presented in my HomeLayout modally or it is within my Tabs Navigator, depending on this I need to do some UI customisations.

Review Request: React Google Maps Component for Production – Any Feedback Welcome

import React from 'react';
import { GoogleMap, useLoadScript, MarkerF } from '@react-google-maps/api';

const libraries = ['places'];
const mapContainerStyle = {
    width: '100%',
    height: '600px',
};
const center = {
    lat: 22.3556,
    lng: 88.87736,
};

const MapContainer = () => {
    const { isLoaded, loadError } = useLoadScript({
        googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
        libraries,
    });

    if (loadError) {
        return <div>Error loading maps</div>;
    }

    if (!isLoaded) {
        return <div>Loading maps</div>;
    }

    return (
        <div>
            <GoogleMap
                mapContainerStyle={mapContainerStyle}
                zoom={13}
                center={center}
            >
                <MarkerF position={center} />
            </GoogleMap>
        </div>
    );
};

export default MapContainer;

Hi Stack Overflow community,

I’ve been working on a React component that integrates Google Maps using the @react-google-maps/api library. The code seems to be working well during testing, and I’m considering using it in a production environment. Before doing so, I wanted to get some feedback from the community to ensure best practices and potential improvements are taken into account.

Key points of interest:

The map is centered around a specific location with a default zoom level.
I’m using the useLoadScript hook for loading Google Maps with the provided API key.
A single marker is placed at the center of the map.

If anyone could review the code and provide insights, suggestions, or identify potential issues that might arise in a production setting, I would greatly appreciate it. Additionally, if there are alternative approaches or optimizations, please feel free to share your expertise.

Thank you in advance for your time and assistance!

Multiple substitutions using the javascript keyup event

I have the following code. I would like to do multiple substitutions of the same key-word, but I don’t know why, it only allows me to do one.
I’ve tried modifying the code in several ways, but at most I get two replacements.
Since it is a textarea, I can’t know if the user will use that keyword once or twice. What am I doing wrong?

let el = document.getElementById('textarea');
el.addEventListener('keyup', function() {

    let string = this.value;
        string =  string.replace('smile', ':-)');
  
        let div_container = document.getElementById('container');
    div_container.innerHTML = string;

});

I expected the code to proceed with the replacement every time the keyword was typed, but instead it only replaces it the first time and then no longer.

Error when calling appendChild(app.view) in Javascript file

I have created a simple Javascript block of code in my HTML script, I am trying to load the newly created Pixi App but I get an error:
“Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at window.onload (index.html:18:26)”

Here’s the block of code:

<script>
    window.onload = function() {

       let app = new PIXI.Application <HTMLCanvasElement> ({
            width: 800,
            height: 600,
            background: '#1099bb'
        });
        
       document.body.appendChild(app.view); //THIS IS THE ROOT OF THE ERROR
    }

</script>

I’m using PixiJS version 7.4.0 and the program runs fine when I do any other Javascript code like adding elements or changing innerText.

I have made sure PixiJS version and the PixiJS library version match.

Access inner keys in json data

I have this following object

{
    "Monday": [
        {
            "morning": [
                {
                    "start_time": "02:00",
                    "end_time": "07:30"
                }
            ],
            "afternoon": [
                {
                    "start_time": "02:00",
                    "end_time": "05:00"
                }
            ],
            "evening": [
                {
                    "start_time": "02:30",
                    "end_time": "07:00"
                }
            ]
        }
    ],
    "Tuesday": [
        {
            "morning": [
                {
                    "start_time": "02:00",
                    "end_time": "07:30"
                }
            ],
            "afternoon": [
                {
                    "start_time": "02:00",
                    "end_time": "05:00"
                }
            ],
            "evening": [
                {
                    "start_time": "02:30",
                    "end_time": "07:00"
                }
            ]
        }
    ],
..
}

i want to loop through all object keys and values

for (var prop in this.jsonData) {
  console.log("Key:" + prop);
  console.log("Value:" + this.jsonData[prop]);
}

getting

Key:Monday value : undefined

but i need to access inner object values