javascript – Page 8212 – Blancer.com Tutorials and projects

how to trigger JavaScript within form fields while populating pdf form

I have created pdf form. Some of the fields in this form contain JavaScript. As filling the pdf form is a frequent requirement, i am in the process of integrating it with my web application. This involves populating the pdf form with content from my web database. My developer has been successful in doing so with PDF-LIB. But the issue is with the fields with JavaScript. The JavaScript is not triggered until the pdf file is edited manually. If the pdf form is populated and encrypted with PDF-LIB and is ready for download (which is how i want it to work), the JavaScript is not triggered and the fields with JavaScript fail to work.
What would be the easiest way to trigger JavaScript in the pdf form whilst it is populated? I would like to automate this task aswell or it would defeat my purpose of shifting from manual workflow to automated.
My developer has opted for PDF-LIB mostly because it is compatible with the node js which he is using to build the web app. Or Maybe there are other options available to get this work done?
Can the expert members here please guide me through this

React navigation with components

I apologies before hand for confusion..

I have a my main App.js file which has my react stack navigation

one of the pages in the navigation is the home screen, the home screen has a list of cards that have buttons that link to different pages…

So there’s the homescreen
then there’s a flat list that renders a component from a different .js file
then that .js file has a button…

How would I make it that when a user clicks on a button, that it within this component.. it takes them to the right page, and switches the home screen page to the specified page, even though the command is coming not from the current page

Question 1: How would I send navigation of pages through props…
Question 2: How would i make the navigation coming from a component with a button change for the main page…

I don’t know how to explain…
I have tried everything I know and it when the button is clicked it crashes, or just doesn’t work…

I have to show an error message whenever a user enters a string that doesn’t match any item in the user array

When I use else if to show an error message, it says “wrong username” even when the username is correct but the password is incorrect. Except for the last username in the “user” array.

But when I remove the else if it does nothing when a user enters the wrong username.

I think the for loop is creating that problem.
Am I using the wrong loop for the wrong purpose? what should I do?

Codesandbox link
https://codesandbox.io/s/nervous-moser-ybvwb3?file=/src/App.js:1066-1203

Unable to send request from mobile to nodejs server

I am using a React client and a node js server (MERN Stack). The server runs good on my pc but when i try to connect from my mobile phone to the ipv4 of my pc with the correct port I am unable to send requests to the server. I tried to change the proxy of the React app but it doesn’t seem to work.
Do you know what the problem might be?
Thanks.

How do i update my uploaded multer image to my website/mongodb?

I’m having a problem overwriting the existing image that belongs to a product with a new one. My new image is uploaded locally but not in my database (MongoDB Atlas) The update seems to replace the original picture with a blank one. This is what my code looks like:

This is my file storage and constraints

const storage = multer.diskStorage({
destination: function (req, file, cb) {
    cb(null, process.cwd() + '/public/uploads/')
},
filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname))
}})

const upload = multer({
dest: 'uploads',
storage: storage,
fileFilter(req, file, cb) {
    if (!file.originalname.match(/.(jpg|png)$/)) {
        return cb(new Error('Please upload picture in jpg/png format'))
    }
    cb(undefined, true)
}});

This is my update route.

router.put('/edit-form/:id', upload.single('picture'), async (req, res) => {
const id = req.params.id;

const title = req.body.title;
const gender = req.body.gender;
const brand = req.body.brand;
const description = req.body.description;
const price = req.body.price;
const image = req.file.filename;

try {
    if (req.file) {
        await sharp(req.file.path)
            .resize(200, 200)
            .jpeg({ quality: 90 })
            .toFile(
                path.resolve(req.file.destination, 'resized', image)
            )
        fs.unlinkSync(req.file.path)
        Product.findOneAndUpdate(id,
            { $set: { title, gender, brand, description, price, image } },
            { new: true }
        ).then(post => {
            res.redirect('/shop/products')
            console.log(post)
        })
            .catch(err => {
                return err;
            });
    }
} catch {
    console.log('..')
}});

HTML:

   <form action="/shop/edit-form/<%=product.id %>?_method=PUT" method="POST" enctype="multipart/form-data"> <!--Edit-form page to update a product-->
  <label for="title">Title:</label>
  <input type="text"  class="form-control" placeholder="title" name="title" value="<%= product.title %>">

  <label for="gender">Gender:</label>
  <input type="text"  class="form-control" placeholder="gender" name="gender" value="<%= product.gender%>">

  <label for="brand">Brand:</label>
  <input type="text"  class="form-control" placeholder="brand" name="brand" value="<%= product.brand%>">

  <label for="description">Description:</label>
  <input type="text"  class="form-control" placeholder="description" name="description" value="<%= product.description%>">

  <label for="picture">Picture:</label>
  <input type="file"  class="form-control" placeholder="picture" name="picture" value="<%= product.picture%>">

  <label for="price">Price:</label>
  <input type="text"  class="form-control" placeholder="price" name="price" value="<%= product.price%>">

  <button class="btn btn-card" type="submit">Submit</button>
</form>

¿Hay forma de que una API pueda realizar una búsqueda en masa de datos en personas y empresas sin inconvenientes? [closed]

necesito realizar búsquedas para identificar una serie de datos de mis encargados, pero ha sido imposible con los proveedores que he contratado, ya que el archivo JSON nunca esta completo o simplemente el endpoint se cuelga constantemente…

How to make a checkered background HTML and CSS

I was on this website and really liked their checkered background. The thing is I cant figure out how they did it. I can’t seem to find the HTML or CSS that looks quite as good as this.

Was wondering if anyone had an idea on how to make a div with this checkered background. This is the website https://www.optimism.io/.

MUI Collapse component not allowing encapsulated element flex-grow

So I’m a newbie when it comes to React and thought to get familiar with the concepts utilizing mui. I’m creating a nav bar and one of the features is to have a search bar that is initially collapsed and expand once the search icon is pressed. This will also hide the typography element. My issue seems that no matter if I set flexgrow for both collapse or the text input that’s being encapsulated the element doesn’t seem to grow despite the extra space. I wonder if this is a styling issue or whether if transition is incapable of doing this, if it’s a styling issue how do I get the text input to expand the needed space?

Navbar.js

import React, { useState } from "react";
import {
  AppBar,
  Drawer,
  Box,
  IconButton,
  List,
  ListItemButton,
  ListItemText,
  Toolbar,
  TextField,
  Typography,
  Collapse,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
import ShoppingBagOutlinedIcon from "@mui/icons-material/ShoppingBagOutlined";
import { createTheme } from "@mui/material";

const Navbar = () => {
  const [drawer, setDrawer] = useState(false);
  const [drawer2, setDrawer2] = useState(false);
  const [clicked, setClicked] = useState(false);
  const theme = createTheme({
    typography: {
      fontFamily: ["Abril Fatface", "cursive"].join(","),
    },
  });
  return (
    <AppBar position="fixed" sx={{ height: 70 }} className="navbar">
      <Toolbar>
        <IconButton onClick={() => setDrawer(!drawer)} className="id">
          <MenuIcon fontSize="large"></MenuIcon>
        </IconButton>

        <Drawer open={drawer} onClose={() => setDrawer(!drawer)}>
          <Box sx={{ width: 400, backgroundColor: "red" }}>
            <List>
              <ListItemButton>
                <ListItemText primary="HI" />
              </ListItemButton>
            </List>
          </Box>
        </Drawer>
        <Collapse orientation="horizontal" in={clicked} timeout={100} unmountOnExit>
          <TextField sx={{ flexGrow: 2 }} />
        </Collapse>
        <Typography
          component="a"
          variant="h4"
          theme={theme}
          className="item"
          sx={{
            color: "black",
            flexGrow: 2,
            textAlign: "center",
            display: clicked ? "none" : "block",
          }}
        >
          APPSTUFF
        </Typography>
        <IconButton className="id">
          <PersonOutlineOutlinedIcon fontSize="large"></PersonOutlineOutlinedIcon>
        </IconButton>
        <IconButton className="id" onClick={() => setClicked(!clicked)}>
          <SearchOutlinedIcon fontSize="large"></SearchOutlinedIcon>
        </IconButton>

        <IconButton className="id" onClick={() => setDrawer2(!drawer2)}>
          <ShoppingBagOutlinedIcon fontSize="large"></ShoppingBagOutlinedIcon>
        </IconButton>
        <Drawer
          open={drawer2}
          onClose={() => setDrawer2(!drawer2)}
          anchor="right"
        >
          <Box sx={{ width: 400, backgroundColor: "red" }}>
            <List>
              <ListItemButton>
                <ListItemText primary="HI" />
              </ListItemButton>
            </List>
          </Box>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;

NavbarStyle.css

.id {
  color: black;
  margin-top: 0.5%;
  display: flex;
  flex-grow: 0;
}
.navbar {
  width: 100vw;
  box-shadow: none;
  background-color: white;
}

react-native-web with webpack: Can’t resolve fs

I developed a react native app which is functional and working fine in native devices. Now our customer wants a PWA export from the existing app. So i installed react-native-web and added required config and dependencies (webpack and Bable). But i can’t run webpack dev-server at all and i get lots of Module not found: Error: Can't resolve 'fs' in ./node_modules/bunch-of-folders errors. And i couldn’t find a solution for it. Here’s the errors list:

ERROR in ./node_modules/worker-farm/lib/fork.js
Module not found: Error: Can't resolve 'child_process' in 'C:programmingreact-nativewalletnode_modulesworker-farmlib'
 @ ./node_modules/worker-farm/lib/fork.js 3:21-45
 @ ./node_modules/worker-farm/lib/farm.js
 @ ./node_modules/worker-farm/lib/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/cacache/get.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulescacache'
 @ ./node_modules/cacache/get.js 6:11-24
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/cacache/node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulescacachenode_modulesgraceful-fs'
 @ ./node_modules/cacache/node_modules/graceful-fs/graceful-fs.js 1:9-22
 @ ./node_modules/cacache/lib/entry-index.js
 @ ./node_modules/cacache/ls.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschokidar'
 @ ./node_modules/chokidar/index.js 4:11-24
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschokidarlib'
 @ ./node_modules/chokidar/lib/fsevents-handler.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/lib/nodefs-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschokidarlib'
 @ ./node_modules/chokidar/lib/nodefs-handler.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chownr/chownr.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschownr'
 @ ./node_modules/chownr/chownr.js 2:11-24
 @ ./node_modules/cacache/lib/util/fix-owner.js
 @ ./node_modules/cacache/lib/util/tmp.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/copy-concurrently/copy.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulescopy-concurrently'
 @ ./node_modules/copy-concurrently/copy.js 8:13-26
 @ ./node_modules/move-concurrently/move.js
 @ ./node_modules/cacache/lib/util/move-file.js
 @ ./node_modules/cacache/lib/content/write.js
 @ ./node_modules/cacache/put.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/find-cache-dir/node_modules/make-dir/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesfind-cache-dirnode_modulesmake-dir'
 @ ./node_modules/find-cache-dir/node_modules/make-dir/index.js 2:11-24
 @ ./node_modules/find-cache-dir/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/fs.realpath/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesfs.realpath'
 @ ./node_modules/fs.realpath/index.js 8:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/fs.realpath/old.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesfs.realpath'
 @ ./node_modules/fs.realpath/old.js 24:9-22
 @ ./node_modules/fs.realpath/index.js
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/glob/common.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesglob'
 @ ./node_modules/glob/common.js 13:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesgraceful-fs'
 @ ./node_modules/graceful-fs/graceful-fs.js 1:9-22
 @ ./node_modules/enhanced-resolve/lib/NodeJsInputFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/infer-owner/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesinfer-owner'
 @ ./node_modules/infer-owner/index.js 2:11-24
 @ ./node_modules/cacache/lib/util/fix-owner.js
 @ ./node_modules/cacache/lib/util/tmp.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/is-wsl/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesis-wsl'
 @ ./node_modules/is-wsl/index.js 3:11-24
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/loader-runner/lib/LoaderRunner.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesloader-runnerlib'
 @ ./node_modules/loader-runner/lib/LoaderRunner.js 5:9-22
 @ (webpack)/lib/NormalModule.js
 @ (webpack)/lib/AutomaticPrefetchPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesmkdirp'
 @ ./node_modules/mkdirp/index.js 2:9-22
 @ (webpack)/lib/debug/ProfilingPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/move-concurrently/move.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesmove-concurrently'
 @ ./node_modules/move-concurrently/move.js 4:13-26
 @ ./node_modules/cacache/lib/util/move-file.js
 @ ./node_modules/cacache/lib/content/write.js
 @ ./node_modules/cacache/put.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/path-exists/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulespath-exists'
 @ ./node_modules/path-exists/index.js 2:11-24
 @ ./node_modules/find-cache-dir/node_modules/locate-path/index.js
 @ ./node_modules/find-cache-dir/node_modules/find-up/index.js
 @ ./node_modules/find-cache-dir/node_modules/pkg-dir/index.js
 @ ./node_modules/find-cache-dir/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/readdirp/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesreaddirp'
 @ ./node_modules/readdirp/index.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/rimraf/rimraf.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesrimraf'
 @ ./node_modules/rimraf/rimraf.js 6:9-22
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/schema-utils/src/validateOptions.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesschema-utilssrc'
 @ ./node_modules/schema-utils/src/validateOptions.js 8:11-24
 @ ./node_modules/schema-utils/src/index.js
 @ (webpack)/lib/IgnorePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/snapdragon/lib/source-maps.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulessnapdragonlib'
 @ ./node_modules/snapdragon/lib/source-maps.js 3:9-22
 @ ./node_modules/snapdragon/lib/compiler.js
 @ ./node_modules/snapdragon/index.js
 @ (webpack)/node_modules/micromatch/lib/utils.js
 @ (webpack)/node_modules/micromatch/index.js
 @ (webpack)/lib/optimize/SideEffectsFlagPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswatchpack-chokidar2node_moduleschokidar'
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswatchpack-chokidar2node_moduleschokidarlib'      
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/fsevents-handler.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/nodefs-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswatchpack-chokidar2node_moduleschokidarlib'      
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/nodefs-handler.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/debug/ProfilingPlugin.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswebpacklibdebug'
 @ (webpack)/lib/debug/ProfilingPlugin.js 1:11-24
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeOutputFileSystem.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswebpacklibnode'
 @ (webpack)/lib/node/NodeOutputFileSystem.js 7:11-24
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeMainTemplateAsync.runtime.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswebpacklibnode'
 @ (webpack)/lib/node/NodeMainTemplateAsync.runtime.js 16:2-15 34:3-16
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/y18n/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesy18n'
 @ ./node_modules/y18n/index.js 1:9-22
 @ ./node_modules/cacache/lib/util/y.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/NormalModule.js
Module not found: Error: Can't resolve 'module' in 'C:programmingreact-nativewalletnode_moduleswebpacklib'
 @ (webpack)/lib/NormalModule.js 7:21-38
 @ (webpack)/lib/AutomaticPrefetchPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not found: Error: Can't resolve 'module' in 'C:programmingreact-nativewalletnode_moduleswebpacklibnode'
 @ (webpack)/lib/node/NodeTargetPlugin.js 11:1-18
 @ (webpack)/lib/node sync ^./.*$
 @ (webpack)/lib/node/NodeMainTemplate.runtime.js
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

Babel.config.js:

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    ["module-resolver", {
      "alias": {
        "^react-native$": "react-native-web"
      }
    }], "react-native-reanimated/plugin"]
};

webpack.config.js:

// web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

const babelLoaderConfiguration = {
  test: /.(js|jsx)$/,
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['module:metro-react-native-babel-preset'],
      plugins: ['react-native-web']
    }
  }
};

const imageLoaderConfiguration = {
  test: /.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    }
  }
};

module.exports = {
  entry: [
    path.resolve(appDirectory, 'index.web.js')
  ],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    extensions: ['.web.js', '.js', '.web.jsx', '.jsx']
  }
}

package.json:

{
  "homepage": ".",
  "name": "wallet",
  "version": "1.1.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postversion": "react-native-version --never-amend",
    "start-web": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --hot",
    "build-web": "./node_modules/.bin/webpack --config ./web/webpack.config.js"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.15.14",
    "@react-native-clipboard/clipboard": "1.8.5",
    "@react-native-community/blur": "3.6.0",
    "@react-native-community/masked-view": "0.1.11",
    "@react-native-community/slider": "4.1.12",
    "@react-native-firebase/app": "14.2.4",
    "@react-native-firebase/messaging": "14.2.4",
    "@react-navigation/bottom-tabs": "6.0.9",
    "@react-navigation/native": "6.0.6",
    "@react-navigation/stack": "6.0.11",
    "axios": "0.24.0",
    "d3-shape": "3.1.0",
    "i18next": "^21.6.11",
    "moment": "2.29.1",
    "moment-jalaali": "0.9.4",
    "moment-timezone": "0.5.34",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "react-freeze": "1.0.0",
    "react-i18next": "^11.15.4",
    "react-native": "0.66.4",
    "react-native-animatable": "1.3.3",
    "react-native-camera": "4.2.1",
    "react-native-contacts": "7.0.3",
    "react-native-device-info": "8.4.8",
    "react-native-elements": "3.4.2",
    "react-native-flags": "1.0.0",
    "react-native-gesture-handler": "2.1.0",
    "react-native-keyboard-aware-scroll-view": "0.9.5",
    "react-native-linear-gradient": "2.5.6",
    "react-native-navigation-bar-color": "^2.0.1",
    "react-native-network-info": "5.2.1",
    "react-native-permissions": "3.2.0",
    "react-native-qrcode-scanner": "1.5.4",
    "react-native-reanimated": "2.4.1",
    "react-native-restart": "0.0.23",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "3.10.1",
    "react-native-splash-screen": "3.3.0",
    "react-native-svg": "12.1.1",
    "react-native-svg-charts": "5.4.0",
    "react-native-toast-message": "2.1.1",
    "react-native-touch-id": "4.4.1",
    "react-native-vector-icons": "9.0.0",
    "react-native-web": "^0.17.6",
    "react-redux": "7.2.6",
    "redux": "4.1.2",
    "redux-persist": "6.0.0",
    "redux-thunk": "2.4.1",
    "reselect": "4.1.5",
    "webpack": "4.46.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.9",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.17.6",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.66.2",
    "react-native-version": "^4.0.0",
    "react-test-renderer": "17.0.2",
    "url-loader": "^4.1.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

How to make Swipers Image slider responsive and well fited in my modal?

// Modal
// Get DOM Elements
const modals = document.querySelectorAll(".modal");
const modalBtns = document.querySelectorAll(".button");
const closeBtns = document.querySelectorAll(".close");

// Events
modalBtns.forEach((btn, index) =>
  btn.addEventListener("click", () => openModal(index))
);
closeBtns.forEach((btn, index) =>
  btn.addEventListener("click", () => closeModal(index))
);
// for closing when you click outside
modals.forEach((modal, index) =>
  modal.addEventListener("click", (e) => {
   if(e.target === e.currentTarget){
     closeModal(index);
   }
})
);

// Open
function openModal(index) {
  modals[index].style.display = "block";
}

// Close
function closeModal(index) {
  modals[index].style.display = "none";
}

// End Modal

const swiper = new Swiper('.swiper', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

/* Swiper styling */
.swiper {
    width: 800px;
    height: 300px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  

/* Modal section styling */

:root {
    --modal-duration: 1s;
    --modal-color: crimson;
  }
  
  .button {
    font-family: 'poppins', sans-serif;
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    color: crimson;
    background: none;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 50px auto;
    width: 60%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    text-align: center;
    padding: 10px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 5px 1px 5px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    font-size: 15px;
    font-weight: lighter;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .responsive {
    width: 100%;
    height: auto;
  }
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

<head>
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>

<body>
<!-- Modal Button 1 start -->
<button id="modal-btn" class="button">Modal Button</button>
<div id="my-modal" class="modal">
  <div class="modal-content">
  <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Vehicle Parking Web-Application</h3>
  </div>
  <div class="modal-body">
     <!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="images/parkit.png" alt="Slide 1">
</div>
<div class="swiper-slide">
<img src="images/InverntoryMS.png" alt="Slide 2">
</div>
<div class="swiper-slide">
<img src="images/Airi.png" alt="Slide 3">
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>

I am making a portfolio for myself. I am facing a problem while using Swiper in my modal button. Images are not well fitted and responsive in my modal body. I have looked everywhere for the solution but can’t find any proper solution anywhere. If anyone can help me with this, I will be grateful. I am attaching my code below.

Includes method doesnt return true for key extracted from Object.entries of Array

I am trying to filter objects who key’s correspond to values in an array of arrays. So 3 sets of objects each filtered by their placement in an array. (Objects are listed in an array.) I suspect this is a two-part question. Why doesn’t the Array.prototype.includes method return true, when the case is true?

boardObj =  [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

const winCol = (boardObj) => {
        const indexes = [[0,1,2], [3,4,5], [6,7,8]];
        let result = indexes.filter((ele) => {
            for (const [k, v] of Object.entries(boardObj)) {
                console.log(ele.includes(0))
                console.log(ele.includes(k))
                if (ele.includes(k)) {
                     return v
                }
            }
            
        })
        console.log(result)
    }

Better-Scroll breaks when window scrolls to elements that have tab focus

In my PWA, I use the Better-Scroll library (v2.4.2) over the native browser scroller for a most consistent experience across devices. The problem is that due to the nature of how the browser will scroll to elements with a valid tabindex, better-scroll will break I assume because the browser is triggering the scroll instead of the user, making it unaware that the page is being scrolled.

After the page is scrolled, better-scroll’s positioning is off breaking the whole scrolling experience for the user.

HTML:

<div class="itemsWrapper">
    <div class="itemsContainer">
        <ul class="items"></ul>
    </div>
</div>

CSS:

ul {
    list-style: none;
}

.itemsWrapper {
  position: relative;
  overflow: hidden;
  height: 300px;
}

JS:

import * as betterScroll from "https://cdn.skypack.dev/[email protected]";

function createScroll() {
  const itemsWrapper = document.querySelector(".itemsWrapper");

  betterScroll.createBScroll(itemsWrapper, {
    scrollbar: {
        fade: true
    },
    mouseWheel: {
        easeTime: 200
    },
    tagException: {
        tagName: /^(INPUT|TEXTAREA|SELECT|CANVAS)$/
    },
    scrollY: true,
    scrollX: false
  })
}

const items = document.querySelector(".items");
let listItems = "";

for(let i = 0; i < 50; i++) {
  listItems += `
    <li>
      <input tabindex='${i+1}' type='text'/>
    </li>
  `;
}

items.innerHTML = listItems;

createScroll()

Codepen: https://codepen.io/LeeRob97/pen/JjOvXgO

I don’t know if there is something I am missing or Better-Scroll expects us to handle those scenarios on our own. One solution that I have found is of course setting elements to a tabindex of -1, but I don’t feel that I should have to do that since that is expected behavior for accessibility reasons.

loading html via js, the css in the html does not work. bootstrap 5

Im using bootstrap 5.
In index.html, im inserting the nav.html via js.
The problem is, the navbar CSS doesnt work when loaded via js. But does work if i copy the nav.html code itself into index.html.

ie. the main.css colors for navbar and navbar-brand are not showing when nav.html is loaded into index, but the colors do show when the nav code is in index, and not using the js loading.

The nav.html gets copied into many pages, thats what i want, but there is no styling. why?

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>

    <div class="container-fluid">
      <div class="container">

            <!--Navigation bar-->
            <div id="nav-placeholder"></div>
            <script>
              $(function(){ $("#nav-placeholder").load("nav.html") });
            </script>
            <!--end of Navigation bar-->

      </div>
    </div>
  </body>
</html>

nav.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="index.html">My Co.</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="legal.html">Legal</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="faq.html">FAQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
      </li>
    </ul>
  </div>
</nav>

main.css

.navbar {
  background-color: #ff00ff;
}
.navbar-brand {
  color: #ff0000;
}

Is there way to shorten this long if statement code?

I have the code like below to return the number that makes the sum of each line the same.

let getnums = () => {
  var numsarray = [];
  var arrays = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var len = arrays.length;
  while (len > 0) {
    var rans = Math.floor(Math.random() * len);
    numsarray.push(arrays[rans]);
    arrays.splice(rans, 1);
    len = len - 1;
  }

  return numsarray;
};
let done = false
function test(num){
while (!done) {
  let output = getnums();
  if (
    output[0] + output[1] + output[2] == 15 &&
    output[1] + output[4] + output[7] == 15 &&
    output[2] + output[5] + output[8] == 15 &&
    output[0] + output[3] + output[6] == 15 &&
    output[2] + output[4] + output[6] == 15 &&
    output[3] + output[4] + output[5] == 15 &&
    output[6] + output[7] + output[8] == 15 &&
    output[0] + output[4] + output[8] == 15
  ) {
    done = true
    console.log(output)
  }
}
}
test()

The code works fine, but I am looking for ways to shorten the if statement.

My current code only will work result 3*3 because of the specific if statement , I am looking for a better and that will work for all different sizes:

E.g: 4*4, a function produces:

if(
output[0] + output[1] + output[2] +output[3]
output[4] + output[5] + output[6] +output[7]
....
)

I have already had idea or using loop to make randomnumber, but don’t know how to make if statement.

Is it possible I could use loop or other methods to create the if statement?

Any suggestions or ideas?

Thank you!

ajax wp remote send form on submit

I am making a newsletter integration with external api , and it works fine but on submit my entire page redirects to admin post php , i have tried to use it without action and adding ajax script to footer but don’t exactly know how to use my wp_remote method to send data without refreshing or redirecting my page

  <?php 
    namespace SalesManago;
    
    
    if (!defined('ABSPATH')) {
        die;
    }
 
    
    
     /**
     * Class ZH_SalesmanagoNewsletter
     */
    
     class ZH_SalesmanagoNewsletter extends ZH_Salesmanago {
        
        public function __construct() {
        
            add_shortcode( 'sm_newsletter', array($this, 'newsletter_form' ));
            add_action('admin_post_nopriv_newsletter', array($this, 'saveDataNewsletter'));
            add_action('admin_post_newsletter', array($this, 'saveDataNewsletter'));
        
        }
    
    
        public function newsletter_form() {
            return "
                <div style='height: 300px; display: block; position: relative'></div>
                <form id='ajax-newsletter-form' action='". esc_url( admin_url('admin-post.php') ) . "' method='post'>
                    <label for='email'>Email</label>
                    <input type='email' name='email' id='email' required>
                    <input type='hidden' name='action' value='newsletter'>
                    <input type='submit' name='sm-submit' value='>'>
                </form>";
        }
    
    
        public function prepareDefaultNewsletterData()
        {
            $clientId = SALESMANAGO_CLIENTID;
            $apiKey = SALESMANAGO_APIKEY;
            $apiSecret = SALESMANAGO_APISECRET;
    
            $data = [
                'clientId' => $clientId,
                'apiKey' => $apiKey,
                'requestTime' => time(),
                'sha' => sha1($apiKey . $clientId . $apiSecret),
            ];
    
            return $data;
        }
        
    
        public function parseNewsletterData(){
            $email = $_POST['email'];
            $set[0]['contact'] = array(
                'email' => $email,                
            );
        
            return $set;
        }
        
        public function saveDataNewsletter(){
            if (isset($_POST['sm-submit'])) {
    
            $set = $this->parseNewsletterData();
            $params = array(
                "upsertDetails" => $set,
                "owner" => SALESMANAGO_OWNER,
            );
    
            $data = array_merge($this->prepareDefaultSalesData(), $params);
      
            $headers = [
                'Content-Type'  => 'application/json'
            ];
    
            $result = wp_remote_post( SALESMANAGO_ENDPOINT .'/api/contact/batchupsertv2',
                array(
                    'method' => 'POST',
                    'headers' => $headers,
                    'sslverify' => false,
                    'body' => json_encode($data)
                )
            );
    
           }
    
        }
    
    
    
    }