Category: javascript

I’m building a dashboard with flowbite and tailwind in laravel, but I’m really struggling with pop ups.

I’m using the flowbite pop-up modal model, but when i copy and paste the code into my project and try to toggle the pop up it’s only showing a black screen.
The dropdown, tooltips etc are working correctly as almost every other component.

I’ve also tried to take another modal model from flowbite but others are not showing at all, so i assume that there must be something wrong in my configurations.

This is the modal I’m trying to use :

<button class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" data-modal-toggle="popup-modal">
  Toggle modal
</button>

<div id="popup-modal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full">
  <div class="relative p-4 w-full max-w-md h-full md:h-auto">
    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
      <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="popup-modal">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
      </button>
      <div class="p-6 text-center">
        <svg class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this product?</h3>
        <button data-modal-toggle="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
            Yes, I'm sure
        </button>
        <button data-modal-toggle="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No, cancel</button>
      </div>
    </div>
  </div>
</div>

Here’s my my webpack.mix :

const mix = require('laravel-mix');
require('laravel-mix-tailwind');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])

if (mix.inProduction()) {
  mix
   .version();

   
}

And here’s my tailwind config.js ;

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
    "/node_modules/flowbite/**/*.js",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/ui'),
    require('@tailwindcss/custom-forms'),
    require('flowbite/plugin')
  ]
}

Also, I’ve installed tailwind via npm and I’m importing in my app.js the flowbite js files like so :

require('../../node_modules/flowbite/dist/flowbite.js');

Everything is correctly working, but this pop ups are making me crazy. Is there somebody who has an idea of what is wrong with them?

Thank you

I’m currently working on a dashboard and I’m having a design issue regarding the scrollbar in the content of the page.
A preview that shows the different parts of the site can be found here.

Purely for design purposes, I would need to keep the current content in exactly the same position (for instance, I don’t believe that resizing the components using percentages would work properly in this case) but have the scrollbar totally on the right and allow scrolling in parts that are outside of the main element. In this image the parts in green represent the areas where scrolling should be enabled.

Do I need to use JavaScript (I’m using React) and a component only for the scrollbar or can I do everything in vanilla css?

I keep getting an error saying ‘push’ is undefined, however this is a global function in javascript, what is wrong here?

addMovie(id, movie) {
    const watchlist = this.getWatchlist(id); 
    const movies = watchlist.movies;
    watchlist.movies.push(movie);
  },

I learning from udemy but that course is from v5.I dont know what is equivalent to render and how to send props with it ? Also, in bottom of the code if element is undefined it should go to “NotFound” but its not working too.

<Routes>
            <Route
              exact
              path="/home"
              render={(props) => (
                <ProductList
                  {...props}
                  products={this.state.products}
                  currentCategory={this.state.currentCategory}
                  info={productInfo}
                  addToCart={this.addToCart}
                />
              )}
            ></Route>
            <Route exact path="/cart" element={<CartList />} />
            <Route element={<NotFound />} />
          </Routes>

I can’t roll back to previous versions of React, how should I overcome this error?

import { Component } from 'react' ;

import { withRouter} from "react-router-dom";

class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
      if (this.props.location !== prevProps.location) {
        window.scrollTo(0, 0)
      }
    }
  
    render() {
      return this.props.children
    }
  }
  
  export default withRouter(ScrollToTop)

I’m trying to run the command

const { Client } = require('pg');

const client = new Client({
  host: 'localhost',
  port: 5432,
  user: 'root2',
  password: 'root2',
  database: 'mycontacts',
});

client.connect();

client.query('SELECT * FROM contacts').then(console.log);

but then i got the following error:

relation "contacts" does not exist

My Postgres code:

CREATE DATABASE mycontacts;

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

CREATE TABLE IF NOT EXISTS categories (
  id UUID NOT NULL UNIQUE DEFAULT uuid_generate_v4(),
  name VARCHAR NOT NULL
);

CREATE TABLE IF NOT EXISTS contacts (
  id UUID NOT NULL UNIQUE DEFAULT uuid_generate_v4(),
  name VARCHAR NOT NULL,
  email VARCHAR UNIQUE,
  phone VARCHAR,
  category_id UUID,
  FOREIGN KEY(category_id) REFERENCES categories(id)
);

and

List of relations
 Schema |    Name    | Type  | Owner
--------+------------+-------+-------
 public | categories | table | root2
 public | contacts   | table | root2
(2 rows)

I already tried to put the schema before (public.contacts) and double quotes around it but nothing worked. Any tips?

New to Angular.. I have a simple local JSON. It’s { list: [{value: value, value: value …},{},{},{},{},{},{},{}]}, so the JSON should be valid right? I just can’t seem to get it out to the ngFor in my html… Is there any way to log what is output in the ngFor in the html? .. like inline console.log or something? Or maybe I’m doing something else wrong. here is an excerpt of my code:

local JSON formatted like (has actual data of course..):

{ list: [{value: value, value: value ...},{},{},{},{},{},{},{}]}

list-typings.d.ts (in same folder as list.json – is this correct? Should I import it?):

declare module "*.json" {
const value: any;
export interface list {
id: number;
name: string;
age: number;
interests: string;
}
}

My table.component.ts:

import { Component, OnInit } from '@angular/core';
import list from './../../assets/list.json';

console.log(list);

@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})

export class TableComponent implements OnInit {
listList: any = list.arrayKey;

constructor() {
console.log(this.arrayKey);
};

ngOnInit(): void {
}

Now I should be able to do *ngFor=”let list of listList” and the get all {{list.name}} inline in my html right? I’ve tried so many variants, but I can not get any output…

I am building a nested list / file tree like component. I can expand first parents height, but cannot expand again when expanding nested child’s list.

How can I access parents ref from a nested child generated by recursion to transition parents height to show nested child’s list as well?

I’m trying to kill/access a process. It should start a other bot and also be able to kill it. Here is what I’ve done.

const { Client,  Intents, DiscordAPIError } = require("discord.js");
const client = new Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES, Intents.FLAGS.GUILD_MEMBERS]
});
const fs = require('fs');
const Discord = require (`discord.js`)
const child = require (`child_process`)

module.exports = {
    name: `start`,
    description: `start the bot`,
    execute(message, args){
        child.exec(`node test.js`, (stderr, stdout) => {
          message.channel.send(`stderr: ${stderr}, stdout: ${stdout}`)
        })

        
}
}

This is the command where I want to stop the bot.

const { Client,  Intents, DiscordAPIError } = require("discord.js");
const client = new Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES, Intents.FLAGS.GUILD_MEMBERS]
});
const fs = require('fs');
const Discord = require (`discord.js`)
const child = require (`child_process`)

module.exports = {
    name: `stop`,
    description: `stop the bot`,
    execute(message, args){
      //no idea what to put here
        })

    




}
}

Can I get the process id or save something in a variable to access the process?
Thanks for helping 😉

I have created a parallax slider but I have one big problem with changing the slider. I can change the slider when my mouse is inside the blue zone

As you could understand the blue zone (or the blue block) is the swiper-wrapper class, I can set the height to 100%, but in this case my layout is destroyed.

I want to know if swiper-slider provides me with such a property so that I can change the slider outside the blue zone (or outside the swiper-wrapper)?

How do I set a .click() event in this SVG? To click automatically.

<span style="margin-right: 15px;" id="play">
 <svg class="speechace-playback-30" aria-label="Start playing example audio" aria-pressed="false" role="button" viewBox="0 0 30 30" tabindex="0" style="position: relative; cursor: pointer; vertical-align: middle; outline: 0px;">
  <circle cx="15" cy="15" r="14" style="fill: rgb(69, 97, 26); stroke: rgb(69, 97, 26); stroke-width: 1;"></circle>
  <path d="M19.5,15 L12.75,11.102885682970026 L12.749999999999998,18.897114317029974 z" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round;"></path>
 </svg>
</span>

This is the component for Dropdown:

<DropDownField
  name={formElement.name}
  label={formElement.name}
  value={formik.values[formElement.name] || ''}                     
  dropDownItems={formElement.name === 'Loan Details' ? loanEnum : formElement.enum}
  className={classes.flexGrow}
  onChange={dropDownChangeHandler}
  error={formik.touched[formElement.name] && Boolean(formik.errors[formElement.name])}
  helperText={formik.touched[formElement.name] && formik.errors[formElement.name]}
 />

and the DropDownField component:

<FormControl fullWidth>
        {/* eslint-disable-next-line */}
        <InputLabel id="simple-select-label">{props.label}</InputLabel>
        <Select labelId="simple-select-label" id="simple-select" {...props}>
            {/* eslint-disable-next-line */}
            {props.dropDownItems.map((element, index) => (
                <MenuItem key={element + index} value={element}>
                    {element}
                </MenuItem>
            ))}
        </Select>
</FormControl>

Now in the onChange function how do i get the index of the dropdown items?

I am restructuring the app and switching to monorepo using CRA and refactoring existing CRA configs.

The folder structure now looks like this.

.
├── api
│   ├── business
│   └── consumer
        └── tsconfig.json
├── apps
│   ├── business
        └── tsconfig.json
│   │   └── src
│   │       ├── components
│   │       ├── constants
│   │       ├── pages
│   │       └── reducers
│   └── consumer
        └── tsconfig.json
│       └── src
│           ├── components
│           ├── constants
│           ├── pages
│           ├── reducers
│           └── selectors
├── config
│   ├── jest
│   └── utils
├── core
│   ├── components
│   ├── helpers
│   ├── services
│   ├── static
│   │   ├── images
│   │   └── styles
│   └── utils
├── public
├── scripts
├── tsconfig.json
├── shared
│   ├── components
│   ├── constants
│   ├── hooks
│   ├── redux
│   ├── selectors
│   └── types

I have added root paths in the root tsconfig.json and extended it for every in-module tsconfig.json.The root tsconfig.json looks like this

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "core/*": [
                "core/*"
            ],
            "api/*": [
                "api/*"
            ],
            "apps/*": [
                "apps/*"
            ],
            "shared/*": [
                "shared/*"
            ],
            "types/*": [
                "shared/types/*"
            ],
            "styles/*": [
                "core/static/styles/*"
            ],
        },
        "jsx": "preserve",
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "strict": true,
        "allowJs": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "noImplicitAny": false,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "noFallthroughCasesInSwitch": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "incremental": true,
        "tsBuildInfoFile": "./buildcache/front-end",
    },
    "exclude": ["node_modules", "**/*.js"]
}

And here is the tsconfig.json for the business app.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "components/*": [
        "src/components/*"
      ],
      "constants/*": [
        "src/constants/*"
      ],
      "helpers/*": [
        "src/helpers/*"
      ],
      "pages/*": [
        "src/pages/*"
      ],
      "reducers/*": [
        "src/reducers/*"
      ],
      "selectors/*": [
        "src/selectors/*"
      ],
      "types/*": [
        "src/types/*"
      ],
      "core/*": [
        "../../core/*"
      ],
      "apps/*": [
        "../../apps/*"
      ],
      "shared/*": [
        "../../shared/*"
      ],
      "api/*": [
        "../../api/*"
      ]
    }
  },
  "extends": "../../tsconfig.json"
}

I have also refactored paths.js to match my current folder structure ( P.S. – CRA doesn’t allow to import files outside of the src so I changed paths ).
appName can be either business or consumer.I am running the app like npm start business which exposes the app name to the node process.

const grpConfig = require('./grp-config');
const parseArgv = require('./utils/parse-argv');

const args = parseArgv(process.argv);
const devMode = process.env.NODE_ENV === 'dev' || process.env.NODE_ENV === 'development';

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

const publicUrlOrPath = devMode ? '/' : `${grpConfig.CDN_URL}/${args.appName}/`;

const moduleFileExtensions = [
  'web.mjs',
  'mjs',
  'web.js',
  'js',
  'web.ts',
  'ts',
  'web.tsx',
  'tsx',
  'json',
  'web.jsx',
  'jsx',
];

// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
  const extension = moduleFileExtensions.find(extension =>
    fs.existsSync(resolveFn(`${filePath}.${extension}`)),
  );

  if (extension) {
    return resolveFn(`${filePath}.${extension}`);
  }

  return resolveFn(`${filePath}.js`);
};

// config after eject: we're in ./config/
module.exports = {
  publicUrlOrPath,
  appRoot: resolveApp('.'),
  appSrc: resolveApp(`${args.appName}/src`),
  appPath: resolveApp(`apps/${args.appName}`),
  dotenv: resolveApp('.env'),
  appPublic: resolveApp('public'),
  yarnLockFile: resolveApp('yarn.lock'),
  appHtml: resolveApp(`public/index.html`),
  appTsConfig: resolveApp(`apps/${args.appName}/tsconfig.json`),
  appJsConfig: resolveApp('jsconfig.json'),
  appPackageJson: resolveApp('package.json'),
  appNodeModules: resolveApp('node_modules'),
  appBuild: resolveApp(`build/${args.appName}`),
  appWebpackCache: resolveApp('node_modules/.cache'),
  swSrc: resolveModule(resolveApp, 'src/service-worker'),
  testsSetup: resolveModule(resolveApp, 'tests/setupTests'),
  appIndexJs: resolveModule(resolveApp, `apps/${args.appName}/index`),
  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
};

module.exports.moduleFileExtensions = moduleFileExtensions;

I am not sure what I have set up wrong, but when I am running npm start business, it throws me a lot of warnings like this.

Cannot find module ‘reducers/root-reducer’ or its corresponding type
declarations.
import { rootReducer } from ‘reducers/root-reducer’;

After reviewing dozens of Stack Overflow posts, I’m thoroughly confused. What I am trying to do is create a URL through an tag on one page that would open another webpage and run a function that requires two arguments. I thought this would be simple but I keep seeing references to “cross site scripting vulnerabilities” and I am not familiar with this potential security problem and feel like I am now playing with fire. I do not want to utilize something — even if the code works — if it opens up security risks. Could someone point me in the right direction with the correct (and most secure) way to do this? I can do my research (and learning) from there. Much appreciated.

I have to make a form that has a username and password but the password must be five or more characters. I have tried a lot of different methods but none have succeded.

Here’s my javascript:

var password = document.getElementById('password').value;
if (password.length < 5)
  alert("Password must be longer");
  return false;
}
}

and my HTML:

<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Login</title>
        <script src="js/script.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="error">

        </div>
        <form name="formname" action="/action_page.php" onsubmit="validateForm()" method="post">
<div>
    <label for="name">Username:</label>
    <input id="username" name="name" type="text" required>
</div>
<div>
    <label for="password">Password:</label>
    <input id="password" name="password" type="password">
<input type="submit" value="Submit">
</div>
    </form>
    </body>
</html>