I try test mark by getelemetbyId and ternary operators
does’t take “success”, but just take “failed”

how solve it.

<p>kindly input a mark :</p>
<label>
    <input id="mark" type="text">
</label>
<button type="button" onclick="myFunction()">Test Input</button>
<p id="result"></p>

<script>
    function myFunction() {
        const status = document.getElementById('mark');
        const test = document.getElementById('result');
              status.innerHTML >= 50 ? test.innerHTML ="success" : test.innerHTML ="failed";
    }
</script>

I am new to programming and am currently working in JavaScript. I am trying to put together a simulation of rolling dice using a for loop. The program works but output also outputs undefined after the generated number every time. I don’t know what is causing the undefined output.

I worked through a few of my bugs, but I was not expecting to see an undefined in my output.
**Below is my program: **

function rollDie () {
    roll = Math.floor(Math.random () * 6) + 1;  
    return console.log (roll);  
};

// use a for loop to emulate multiple dice being thrown.

let num = 4;
for (let i=1; i <= num; i++) {
    console.log (rollDie());
};

Output I get is below:

6
undefined
6
undefined
2
undefined
4
undefined

The ship defined in the ship variable generates within the proper coordinates. The other two ships, battleShip and destroyer, generate far out of the proper grid. Battleship and destroyer coordinates generate outside of the grid, but the ship defined as ship is generating correctly. Much of the code is setting the values for the 3 ships. The x and y coordinates are defined in shipRow and shipCol, along with battleShipRow, BattloeShipCol, and destroyerRow and destroyerCol.
I tried adjusting the shipRow and shipCol values, but that did not solve the problem.

//Create a random location for the ship's x and y position
let shipRow = Math.floor(Math.random() * 9);
let shipCol = Math.floor(Math.random() * 10);

let battleShipRow = Math.floor(Math.random() * 7);
let battleShipCol = Math.floor(Math.random() * 10);

let CELL_HEIGHT = 27;
let CELL_WIDTH = 37;


if(battleShipRow >= shipRow && battleShipRow <= shipRow + 2)
    if (battleShipCol === shipCol)
{
    battleShipRow = Math.floor(Math.random() * 2);
    battleShipCol = Math.floor(Math.random() * 2);
}

let destroyerRow = Math.floor(Math.random() * 2);
let destroyerCol = Math.floor(Math.random() * 2);


//create map

let map = 
[
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
map[battleShipRow][battleShipCol] = 1;
map[battleShipRow + 1][battleShipCol] = 1;
map[battleShipRow + 2][battleShipCol] = 1;
map[battleShipRow + 3][battleShipCol] = 1;

map[destroyerRow][destroyerCol] = 2;
map[destroyerRow + 1][destroyerCol] = 2;
map[destroyerRow + 2][destroyerCol] = 2;

map[shipRow][shipCol] = 3;
map[shipRow + 1][shipCol] = 3;

let shipY = shipRow * CELL_HEIGHT + CELL_HEIGHT;

let shipX = shipCol * CELL_WIDTH + CELL_WIDTH;

let battleShipY = battleShipRow * CELL_HEIGHT + CELL_HEIGHT;
let battleShipX = battleShipRow * CELL_HEIGHT + CELL_HEIGHT;
let destroyerY = destroyerRow * CELL_HEIGHT + CELL_HEIGHT;

let destroyerX = destroyerCol * CELL_WIDTH + CELL_WIDTH;

//Then set the style top and style left for each ship using the above calculations.
let vbattleShip = document.querySelector("#battleShip");
vbattleShip.style.top = battleShipY + CELL_HEIGHT + CELL_WIDTH +  "px";
vbattleShip.style.left = battleShipX * CELL_WIDTH + CELL_WIDTH  + "px";

let vdestroyer = document.querySelector("#destroyer");
vdestroyer.style.top = destroyerY + CELL_HEIGHT + CELL_WIDTH + "px";
vdestroyer.style.left = destroyerX + CELL_WIDTH + CELL_WIDTH + "px";

let vship = document.querySelector("#ship");
vship.style.top = shipY + CELL_HEIGHT + CELL_HEIGHT + "px";
vship.style.left = shipX + CELL_WIDTH + CELL_WIDTH +"px";

//variables for the user's guess
let guessX = 0;
let guessY = 0;

//variable to keep track of guesses
let guesses = 0;

//game state variable
let gameWon = false;

let ship = document.createElement("img");
ship.setAttribute("class", "ship");

let battleShip = document.createElement("img");
battleShip.setAttribute("class", "battleShip");

let destroyer = document.createElement("img");
destroyer.setAttribute("class", "destroyer");




//Game object variable








//set the location of the ship div tag on the screen
battleShip.style.visibility = "visible";
destroyer.style.visibility = "visible";
ship.style.visibility = "visible";

//Input and output variables
let inputX = document.querySelector("#inputX");
let inputY = document.querySelector("#inputY");
let output = document.querySelector("#output");

var button = document.querySelector("#fire");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);



function clickHandler()
{
  validateInput();
}

function validateInput()
{
  guessRow = parseInt(inputX.value);
  guessCol = parseInt(inputY.value);
  
  if(isNaN(guessX) || isNaN(guessY) )
  {
    output.innerHTML = "Please enter a number.";
  }
  else if(guessX > 300 || guessY > 300)
  {
    output.innerHTML = "Please enter a number less than 300.";
  }
  else
  {
    playGame();
  }
}

function playGame()
{
    guesses++;
    if(guessX >= shipX && guessX <= shipX + 13)
    {
        //Yes, it's within the X range, so now let's
        //check the Y range
     
        if(guessY >= shipY  && guessY <= shipY + 55)
        {
            //It's in both the X and Y range, so it's a hit!
            gameWon = true;
            endGame();
        }
    else if(guessX >= battleShipX && guessX <= battleShipX + 31)
        //Yes, it's within the X range, so now let's
        //check the Y range
     
        if(guessY >= battleShipY  && guessY <= battleShipY + 209)
        {
            //It's in both the X and Y range, so it's a hit!
            gameWon = true;
            endGame();
        }
    else if(guessX >= destroyerX && guessX <= destroyerX + 20)
        //Yes, it's within the X range, so now let's
        //check the Y range
     
        if(guessY >= destroyerY  && guessY <= destroyerY + 100)
        {
            //It's in both the X and Y range, so it's a hit!
            gameWon = true;
            endGame();
        }
    }   else
    {
        output.innerHTML = "Miss!" 
    }
}

function endGame()
{
    ship.style.visibility = "visible";
    battleShip.style.visibility = "visible";
    destroyer.style.visibility = "visible";
    if(gameWon)
    {
        output.innerHTML = "You hit my patrol ship! It took you " + guesses + " guesses";
    }
}

I tried hovering over each option in select2 and returning a corresponding popover. For example, when I hover over “Low effort” it returns this:

titlePop1
textPop1

and when I hover over “High effort” it returns this:

titlePop2
textPop2

But the effect is being applied to the entire container, i.e. to .select-results and not to each option.

Code:

<head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js'></script>
  <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css' rel='stylesheet' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/animate.css@3/animate.min.css'>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/wNumb.min.js'></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>

  <section>
    <div id='pickerDivA1'>
      <h6>fadeIn</h6>
      <select id="testId">
        <option value="AL">Low effort</option>
        <option value="WY">High effort</option>
      </select>
    </div>
  </section>

  <script>

    $(document).ready(function() {

      $('#testId').select2({
        dropdownParent: $("#pickerDivA1"),
        minimumResultsForSearch: Infinity,
        dropdownPosition: 'below'
      }).on('select2:open', function(e) {

        $('.select2-dropdown').addClass('animated flipInX');

        let titles = ['titlePop1', 'titlePop2'];
        let contents = ['textPop1', 'textPop2'];

        let $lis = $(this).data('select2').$dropdown.find('.select2-results__options');

        $lis.each(function(i) {
          if (!$(this).hasClass('select2')) {
            $(this).popover({
              html: true,
              sanitize: false,
              title: titles[i],
              content: contents[i],
              trigger: 'hover',
              placement: 'right',
              container: 'body'
            })
          };
        });

      }).on('select2:closing', function(e) {
        $('.select2-dropdown').removeClass('animated flipInX');
      });

    });

  </script>
</body>

I’m working on a Yeoman generator, and I need to delete some files programmatically without prompting for confirmation in the terminal. Currently, when I use this.fs.delete(${rootDestinationPath}/${filePath});`, it prompts the user to confirm deletion with “ynarxdeiH” on terminal. Is there a way to bypass this confirmation prompt and delete the file directly without user input?

Here’s the code snippet where I’m encountering this issue:

this.fs.delete(`${rootDestinationPath}/${filePath}`);

Any insights or alternative methods would be greatly appreciated! Thank you.

I have tried to find options to pass to the function ‘delete’ to force deletion without requiring confirmation.

hi i am writing this code to hide a div after the user clicks on it and display on the same time an other div so my click jacking attack becomes more interractive with the user i have looked and tried my best but in the end i could not i hope u could guide me through this
note : i am not attacking any one or causing any harm i am just learning on burpsuite labs
thanks in advance

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>clickjacking attack</title>
</head>
<body>


  <style type="text/css">
    #clickme{
      position: absolute;
      text-align:center;
      padding:9px;
      width:200px;
      background-color:gray;
      border-radius:10px;
      color:white;
      top:470px;
      left:185px;
      font-size:20px;
      z-index:1;
      }
  </style>

  <div id="clickme" onclick="funci()">click me1</div>
  <div id="clickme" onclick="funci()">click me2</div>
  <iframe src="https://0ab300bd03a9e99780ab3f8400a800c1.web-security-academy.net/login" style="opacity:0.1;position:relative;width:100%;height:1000px;z-index: 2;"></iframe>
    <script type="text/javascript">
    function funci(){
    var c = document.getElementById('clickme');
    c.style.display = "none";}
  </script>
</body>
</html>

The Problem

I want to add Electron to my existing Vue Project. I ran in a problem which I can’t find a solution for.

If I run the following configuration with npm run dev (test in browser and auto reload) it works fine. But if I build it (npm run build) and start Electron (npm run electron:start) the page is blank and the console shows me this error:

A solution with new problems

A possible solution will be adding base: path.resolve(__dirname, './dist/') to the vite.config.js file. But now, on npm run dev the URL changes to http://localhost:5173/home/username/Desktop/projectname/dist instead of http://localhost:5173. So, the VueRouter starts loading nothing. The user have to click on a link to show content. This happens also on npm run electron:start (after building).

The question

How can I config my project, that I can access the pages directly at the URLs http://localhost:5173/ (HomeView.vue) and http://localhost:5173/about (AboutView.vue) in npm run dev and get a running Electron app with npm run electron:serve?

EDIT: Difference to other questions

There was a suggestion from the community from another question: (Electron renders blank page once I implemented vue-router). If I replace createWebHistory() with createWebHashHistory(), the problem seems solved at first. But the long URL-path is still there. Is there no solution for a “classic” short path (see “The question”)?

Folder structure

index.html
index.js
preload.js
vite.config.js
package.json
src/
|- router/
|  |-- router.js
|- views/
|  |- Main.vue
|  |- About.vue
|- App.vue
|- main.js

Source code

index.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  win.loadFile("dist/index.html");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

preload.js

window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ["chrome", "node", "electron"]) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  // Adding base results in long path
  // Removing base results in blank Electron app page
  base: path.resolve(__dirname, './dist/'),
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

package.json

{
  "name": "vue-router-electron",
  "version": "0.0.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:start": "electron ."
  },
  "dependencies": {
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "electron": "^30.0.1",
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.8"
  }
}

src/App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>

  <RouterView />
</template>

<style scoped>
</style>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'

const app = createApp(App)

app.use(router)

app.mount('#app')

src/router/router.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

I have nextjs application, I am trying to implement rbac using NextJS Middleware but when i am signing-in, I am getting error:

this is my middleware.js:

import { NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export async function middleware(request) {
  const token = await getToken({ req: request, secret: process.env.NEXTAUTH_SECRET });

  if (!token) return NextResponse.redirect(new URL("/sign-in", request.url));

  switch (token.role) {
    case "Administrator":
      break;

    case "Store_Manager":
      // Add the paths that the nurse can access here
      if (!request.nextUrl.pathname.startsWith("/Dashboard")) {
        return NextResponse.redirect(new URL("/Dashboard/unauthorized", request.url));
      }
      break;

    case "Sales_Department":
      if (!request.nextUrl.pathname.startsWith("/Dashboard/Sales")) {
        return NextResponse.redirect(new URL("/Dashboard/unauthorized", request.url));
      }
      break;

    case "Inventory_Manager":
      // Add the paths that the pathologist can access here
      if (
        !request.nextUrl.pathname.startsWith("/Dashboard/Order") &&
        !request.nextUrl.pathname.startsWith("/ui-components/manageorder") &&
        !request.nextUrl.pathname.startsWith("/ui-components/viewinventory")
      ) {
        return NextResponse.redirect(new URL("/ui-components/noAccess", request.url));
      }
      break;

    case "Kitchen_Manager":
      // Add the paths that the pathologist can access here
      if (
        !request.nextUrl.pathname.startsWith("/Dashboard/Order") &&
        !request.nextUrl.pathname.startsWith("/ui-components/manageorder") &&
        !request.nextUrl.pathname.startsWith("/ui-components/viewinventory")
      ) {
        return NextResponse.redirect(new URL("/Dashboard/unauthorized", request.url));
      }
      break;
    case "Finance_Department":
      // Add the paths that the pathologist can access here
      if (
        !request.nextUrl.pathname.startsWith("/Dashboard/Finance") &&
        !request.nextUrl.pathname.startsWith(
          "/Dashboard/TransactionAndPayments"
        ) &&
        !request.nextUrl.pathname.startsWith("/Dashboard/Sales")
      ) {
        return NextResponse.redirect(new URL("/Dashboard/unauthorized", request.url));
      }
      break;

    case "Marketing_Department":
      // Add the paths that the pathologist can access here
      if (!request.nextUrl.pathname.startsWith("/Dashboard/Marketing")) {
        return NextResponse.redirect(new URL("/Dashboard/unauthorized", request.url));
      }
      break;

    default:
      return NextResponse.redirect(new URL("/sign-in", request.url));
  }
}

export const config = {
  matcher: [
    // Match all routes except the ones that start with /sign-in, /sign-up, api, and the static folder
    "/((?!api|_next/static|_next/image|favicon.ico|sign-in|sign-up).*)",
  ],
  
};

is there any way to solve this, I am unable to login, whenever I login I get this error.
I want to give access to user based on their role when they login.

I was creating a Chrome extension for the autofill, this is my code
extension
webpage sample code
webpage
select2 dropdown with no select an option tag and, s the input value stored inside the span tag, and also according to user action on entering input the class name is changed in some tags and for some class name is removed (for example herf tag class changes from two class name to one and, for div tag it adds up a new class name to it ). I don’t much about select2 and I don’t get any details about this type 🙂

this code works but the var fill as the placeholder not as the input value

import React, { useState, useRef, useEffect } from 'react';
import { jwtDecode } from 'jwt-decode';
import axios from 'axios';
import { FcGoogle } from 'react-icons/fc';

const GoogleOneTapLogin = ({ setNavigateHome }) => {
    const googleButton = useRef(null);

    const [displayType, setDisplayType] = useState('flex');
    const [gBtnDisplay, setGBtnDisplay] = useState('none');

    const handleResponse = async (response) => {
        const token = response.credential;
        const { sub: uid, email, name, picture: photoURL } = jwtDecode(token);
        const username = email.split('@')[0];
        const config = {
            headers: {
                'Content-type': 'application/json',
            },
        };
        await axios
            .post(
                `${import.meta.env.VITE_APP_SERVER_URL}/api/user/googleSignUp`,
                {
                    uid,
                    email,
                    name,
                    photoURL,
                    username,
                },
                config
            )
            .then((result) => {
                const user = result.data.result;
                window.localStorage.setItem(
                    'sketchApp',
                    JSON.stringify({ email: user.email, isSignedIn: true })
                );

                setNavigateHome((prev) => !prev);
            })
            .catch((error) => {
                console.log(error);
                alert('Something went wrong, please try again later.');
            });
    };

    const handleGoogleLogIn = () => {
        try {
            window.google.accounts.id.initialize({
                client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
                use_fedcm_for_prompt: true,
                auto_select: true,
                cancel_on_tap_outside: false,
                callback: handleResponse,
                prompt_parent_id: 'googleButtonId',
                itp_support: true,
                ux_mode: 'popup',
            });

            window.google.accounts.id.prompt();
            window.google.accounts.id.renderButton(googleButton.current, {
                theme: 'outline',
                size: 'large',
                logo_alignment: 'left',
                locale: 'en_US',
                text: 'continue_with',
                width: 280,
                click_listener: () => {
                    console.log('clicked');
                    window.google.accounts.id.cancel();
                    setDisplayType('none');
                    setGBtnDisplay('flex');
                },
            });
        } catch (error) {
            console.log(error);
            alert('Log In Failed. Please try again');
        }
    };
    return (
        <React.Fragment>
            <button
                className="googleButton bg-green-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded flex justify-center items-center"
                style={{
                    display: displayType,
                    width: 'fit-content',
                    marginTop: '1rem',
                }}
                onClick={handleGoogleLogIn}
            >
                <FcGoogle className="mr-2 text-2xl" />
                Login with Google
            </button>
            <div style={{ display: gBtnDisplay }} ref={googleButton}></div>
        </React.Fragment>
    );
};

export default GoogleOneTapLogin;

This is my code for google sign In.
Here, the one tap login works but , normal google login does not works.

Upon doing some console.logs, i found that, the click_listener function is not been called when user clicks on cross button in one tap login.

Also, I guess the problem might be due to some FedCM new restrictions.

Thanks in advance

I am trying to create a sidebar with collapsible button.

When a button is clicked then the sidebar is collapsed, when the button is clicked again the sidebar will expand. This idea is already coded. Full code is here in fiddle

Now I want to make it stay collapsed when this button is clicked :

<i class="bx bx-menu toggle-sidebar"></i>

which will trigger the followings :

const toggleSidebar=document.querySelector('nav .toggle-sidebar');
const allSideDivider = document.querySelectorAll('#sidebar .divider');

if (sidebar.classList.contains('hide')){
    allSideDivider.forEach(item=>{
        item.textContent='-'
    })

    allDropdown.forEach(item=>{
        const a = item.parentElement.querySelector('a:first-child');
        a.classList.remove('active');
        item.classList.remove('show');
    })
    
}else{
    allSideDivider.forEach(item=>{
        item.textContent=item.dataset.text;
    })
}

toggleSidebar.addEventListener('click',function(){
    sidebar.classList.toggle('hide');
    if (sidebar.classList.contains('hide')){
        allSideDivider.forEach(item=>{
            item.textContent='-'
        })
        allDropdown.forEach(item=>{
            const a = item.parentElement.querySelector('a:first-child');
            a.classList.remove('active');
            item.classList.remove('show');
        })
    }else{
        allSideDivider.forEach(item=>{
            item.textContent=item.dataset.text;
        })
    }
})

and it stays collapsed when the page is refreshed (or open to other pages) until the button is clicked to expand.

Please advise if there is missing code I wrote or is there additional codes to write to aim the objective. Much appreciate.

I am trying to preload an image before my main Layout is rendered but I am still getting a flash of the image background which I have set to red for debugging. Here is my code.

function RootLayout() {
  const colorScheme = useColorScheme();
  const { user, userLoading } = useAuth();
  const { languageLoading, getStoredLanguage } = useLanguage();
  const { cityLoading, getStoredCity } = useCity();
  const [assetsLoading, setAssetsLoading] = useState(true);

  useEffect(() => {
    const loadAssets = async () => {
      try {
        await Asset.loadAsync([require("./assets/images/onboard.jpg")]);
      } catch (error) {
        console.error(error);
      } finally {
        setAssetsLoading(false);
      }
    };
    loadAssets();
  }, []);

  function initializeLayout() {
    Promise.all([getStoredLanguage(), getStoredCity()]).catch((error) => {
      console.log(error);
    });
  }

  useEffect(() => {
    initializeLayout();
  }, []);

  if (userLoading || languageLoading || cityLoading || assetsLoading) {
    return <Splash />;
  }

  return (
    <NavigationContainer theme={colorScheme === "light" ? DefaultTheme : DarkTheme}>
      {user ? <SignedInLayout /> : <AuthLayout />}
    </NavigationContainer>
  );
}

RootLayout is rendered in the App component in-between other providers.

Here is my screen from the AuthLayout;

return (
    <View style={{ flex: 1, paddingBottom: insets.bottom }}>
      <ImageBackground
        source={require("../../../assets/images/onboard.jpg")}
        style={{ flex: 1, backgroundColor: "red" }}
        contentFit="cover"
      /> ...

I have a WordPress Menu and for mobile screens the submenus should be hidden. Using Vanilla Javascript, I need to click on the links to toggle them.

If there’s a class .menu-item-has-children, hide the ul.sub-menu. When click on the li with the class .menu-item-has-children, show the .sub-menu. If click again, hide the .sub-menu.

How can I do that?

$(window).on('resize', function() {
  if($(window).width() > 768px) {
    
    document.querySelectorAll("li.menu-item-has-children").forEach(e => {
        e.addEventListener("click", t => {
            e.closest("ul.sub-menu").style = "display: none";
        })
    })
  }
})

<div class="main-navigation">
    <ul>
        <li id="" class="menu-item">
            <a href="/">Product 1</a>
        </li>
        <li id="" class="menu-item menu-item-has-children">
            <a href="/">Product 2</a>
        <ul class="sub-menu">
            <li id="" class="menu-item">
                <a href="/">Product 2.1</a></li>
        </ul>
        </li>
        <li id="" class="menu-item menu-item-has-children">
            <a href="/">Product 3</a>
            <ul class="sub-menu">
                <li id="" class="menu-item"><a href="/">Product 3.1</a></li>
                <li id="" class="menu-item menu-item-has-children">
                    <a href="/">Product 3.1</a>
                    <ul class="sub-menu">
                        <li id="" class="menu-item">
                            <a href="/">Product 3.1.1</a>
                        </li>
                        <li id="" class="menu-item">
                            <a href="/">Product 3.1.1</a>
                        </li>                     
                    </ul>
                </li>
            </ul>
        </li>
    </ul>   
</div>

so I made a login form for my website Valodoka Games, and I added an hCaptcha verification on it, and a submit button with it.

I wanted the button to have a command where if you click it after the verification has a checkmark when done, it goes to the page you are making the button go to a specific link. But if it doesn’t work, a text under or above the verification tells you to please do the verification and it is required. I was wondering what code from HTML, CSS, or Javascript code I have to do for the code.

Thanks.

I’m using this library to add Signature into PDF file by using p12 certificate.

The library documentation says i could use fs but unfortunately Angular not allowing that so i decided to use Buffer the get the Uint8Array from the file provider.

The buffer is not null, but when i pass it to p12Signer it throws an error”Buffer is not defined”.

Here is how i used Buffer and p12Signer..

  const certificatePath = ('sign_cert.p12');
  const buffer = new Buffer(certificatePath);
  const signer = new P12Signer(buffer);

The buffer result:

Is there any way i can use fs and stick with examples provider by the author of the package ?