Category: javascript

I’m struggling to get this code to work. Basically I need to verify that the user is logged in before running the code block below:

$(document).ready(() => {
  const loggedIn = '<%#(UIContext.Current != null && !string.IsNullOrWhiteSpace(UIContext.Current.AuthTokens.IdToken))%>'.toLowerCase() === "true";

  if (!loggedIn) {
      $("#breadcrumbTableContainer").css("display", "none");
      $("#priNavContainer").css("display", "none");
      $("#priNavContainerWrap").css("display", "none");
      $(".headerContainer.stepsHeaderCont").css("display", "none");
  } else {
      // UserPilot
      var uiContext = '<%# UIContext.Current %>';

      if (uiContext != null) {
          console.log('UTCDateTime: <%# DateTime.UtcNow%>');
          console.log('Association:  <%# UIContext.Current.CurrentAssociation.Name %>');
          console.log('Association ID: <%# UIContext.Current.CurrentAssociation.ID %>');
          console.log('User Name: <%#UserName%>');
          console.log('User ID: <%# UIContext.Current.CurrentUser.ID%>');
          console.log('URL: ' + window.location);

          // End UserPilot
      }
...

I understand that I’m using serverside variables and that is what is causing the problem as UIContext.Current is null. What is the proper way to approach this?

In addition if I modify the code to:

console.log('Association: ' + uiContext.CurrentAssociation.Name);

uiContext is undefined.

I have recently revised my very old app where styling with MUI is like this

const filterStyle = {
    width: "320px !important",
    margin: "0 auto",
    "@media(maxWidth: 780px)": {
        width: "80%",
    },
};

and this object is consumed in sx like this

<Stack
            role="form"
            sx={{ ...filterStyle }}
            direction="row"
            spacing={2}
            
        >

I want to use variable breakpoint VERY_SMALL_BREAKPOINT -without using theme – like this:

const filterStyle = {
    width: "320px !important",
    margin: "0 auto",
    "@media(maxWidth: VERY_SMALL_BREAKPOINT)": {
        width: "80%",
    },
};

Obviously, it does not work; but is there a way to make it work? I would not use .matches etc, would rather solve the issue with code similar to existing one. Is that possible?

I am getting the following error when writing the @Query Decorator for getAccountAssets resolver method:-

Unable to resolve signature of method decorator when called as an expression. Argument of type 'TypedPropertyDescriptor<(userTokenPayload: UserTokenPayload, accountType: AccountType) => Promise<AllAccountAssetsResponse>>' is not assignable to parameter of type 'number'.ts(1241) No overload matches this call. Overload 1 of 3, '(...pipes: (PipeTransform<any, any> | Type<PipeTransform<any, any>>)[]): ParameterDecorator', gave the following error. Argument of type '() => typeof AllAccountAssetsResponse' is not assignable to parameter of type 'PipeTransform<any, any> | Type<PipeTransform<any, any>>'. Overload 2 of 3, '(property: string, ...pipes: (PipeTransform<any, any> | Type<PipeTransform<any, any>>)[]): ParameterDecorator', gave the following error. Argument of type '() => typeof AllAccountAssetsResponse' is not assignable to parameter of type 'string'.ts(2769)

import { CustomerService } from '@app/customers/customers.service';
import { CurrentUserTokenPayload } from '@auth/decorators';
import { UserTokenPayload } from '@auth/dto/auth.interfaces';
import { GqlAuthGuard } from '@auth/guards';
import { Query, UseGuards } from '@nestjs/common';
import {
  Args, Mutation, Resolver,
} from '@nestjs/graphql';

import { AccountType } from './dto/accounts.interfaces';
import {
  UpdateThirdPartyFundingInfoInput,
} from './dto/common-account.input';
import {
  AccountResponse, AllAccountAssetsResponse,
} from './dto/common-account.response';
import { OpportunityAccountsService } from './opportunity-accounts.service';
import { StandardAccountsService } from './standard-accounts.service';

@Resolver(() => AccountResponse)
export class CommonAccountResolver {
  constructor(
    private readonly standardAccountsService: StandardAccountsService,
    private readonly opportunityAccountsService: OpportunityAccountsService,
    private readonly customerService: CustomerService,
  ) { }

  async getAccountServiceByType(params: {
    accountType: AccountType; userId: string;
  }) {
    const { accountType, userId } = params;
    const {
      customerId,
      resourceRelationships: { standardAccountId, opportunityAccountId },
    } = await this.customerService.validateCustomerRelationship({ userId });
    return {
      [AccountType.OPPORTUNITY]: {
        accountService: this.opportunityAccountsService,
        accountId: opportunityAccountId,
        customerId,
      },
      [AccountType.STANDARD]: {
        accountService: this.standardAccountsService,
        accountId: standardAccountId,
        customerId,
      },
    }[accountType];
  }



  @UseGuards(GqlAuthGuard)
  @Query(() => AllAccountAssetsResponse) // error is happening here
  async getAccountAssets(
    @CurrentUserTokenPayload() userTokenPayload: UserTokenPayload,
    @Args('accountType', { type: () => AccountType }) accountType: AccountType,
  ) : Promise<AllAccountAssetsResponse> {
    const { accountId, accountService } = await this.getAccountServiceByType({
      accountType, userId: userTokenPayload.sub,
    });

    const accountAssetDetails = await accountService.getAccountAssets({
      accountId,
    });
    return accountAssetDetails;
  }
}

response.ts :-

import {
  createUnionType, Field, ObjectType,
  registerEnumType,
} from '@nestjs/graphql';
import { Type } from 'class-transformer';
import { IsArray } from 'class-validator';

import { AssetStatus, ProductType } from '@/generated-cbms-api-client';

import { AccountType } from './accounts.interfaces';
import { OpportunityAccount } from './opportunity-account.response';
import { StandardAccount } from './standard-account.response';

registerEnumType(AssetStatus, { name: 'AssetStatus' });
registerEnumType(ProductType, { name: 'ProductType' });

export const AccountDetails = createUnionType({
  name: 'AccountDetails',
  types: () => [OpportunityAccount, StandardAccount] as const,
  resolveType:
    (accountDetails) => {
      if ('accountPurpose' in accountDetails) {
        return StandardAccount;
      }
      return OpportunityAccount;
    },
});

@ObjectType()
export class AccountResponse {
  @Field(() => AccountType)
  accountType: AccountType;

  @Field(() => AccountDetails)
  accountDetails: OpportunityAccount | StandardAccount;
}

@ObjectType()
export class AccountAssetResponse {
  @Field(() => AssetStatus)
  status: AssetStatus;

  @Field(() => ProductType)
  productType: ProductType;

  @Field(() => String)
  createdAt?: string;

  @Field(() => String)
  updatedAt?: string;

  @Field(() => String)
  assetTypeId: string;

  @Field(() => String)
  productId: string;

  @Field(() => String)
  customerId: string;

  @Field(() => String)
  currentBalance: string;

  @Field(() => String)
  availableBalance: string;

  @Field(() => String)
  parentAccountId: string;
}

@ObjectType()
export class AllAccountAssetsResponse {
  @IsArray()
  @Type(() => AccountAssetResponse)
  @Field(() => [AccountAssetResponse], { description: 'Expected investment support info' })
  accountAssets: AccountAssetResponse[];

  @Field(() => String)
  nextCursor: string;

  @Field(() => Boolean)
  hasMore: boolean;

  @Field(() => Number)
  totalCount: number;
}

I don’t know what I am missing. The Response of accountService.getAccountAssets also conforms to Promise<AllAccountAssetsResponse>.

While everything is working fine, I suddenly get this error. I delete the .expo folder, delete the node_modules folder and do npm install again. When I restart the computer later, it sometimes works fine, but sometimes I get this error. I received this error on my own phone, now I cannot run the React Native code neither on the phone nor on the emulator.

when I press r am gettşng no apps connected.

this is project repo:
https://github.com/ayazwx/React-Native-Weather-App

Thanks in advance for your answers.

So suddenly my next.js page just went blank, after a brief second, I didn’t change anything, it just happened. I tried to restart my dev server and deleted the ‘.next’ folder, nothing worked. At least I got some errors in the console. I guess the page is blank, because of some error server-side, but these errors couldn’t help me. Btw my page is using “use client”;

It’s also not a browser specific error, I tried Chrome and Edge, same results.

Only on the ‘/login’ page, I get the below errors, on my register or one time password verification page (both using “use client”), I get no errors, but all pages are blank.

And in the network tab, I don’t get any 404 errors.
And I get the same errors in production (deployed to vercel).

Here is my package.json:

{
  "name": "bazcord",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^1.5.1",
    "@hookform/resolvers": "^3.3.4",
    "@nextui-org/input": "^2.1.17",
    "@prisma/client": "5.10.2",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@tanstack/react-query": "^5.28.4",
    "@types/uuid": "^9.0.8",
    "@uploadthing/react": "^6.3.4",
    "@upstash/redis": "^1.28.4",
    "axios": "^1.6.7",
    "bcryptjs": "^2.4.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "cmdk": "^1.0.0",
    "input-otp": "^1.2.3",
    "lucide-react": "^0.354.0",
    "next": "14.1.3",
    "next-auth": "5.0.0-beta.16",
    "next-themes": "^0.2.1",
    "query-string": "^9.0.0",
    "react": "^18",
    "react-dom": "^18",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.51.0",
    "react-markdown": "^9.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "rehype-external-links": "^3.0.0",
    "rehype-raw": "^7.0.0",
    "rehype-sanitize": "^6.0.0",
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "resend": "^3.2.0",
    "socket.io": "^4.7.5",
    "socket.io-client": "^4.7.5",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "uploadthing": "^6.5.2",
    "uuid": "^9.0.1",
    "zod": "^3.22.4",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
    "@types/bcryptjs": "^2.4.6",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/react-syntax-highlighter": "^15.5.11",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "prisma": "^5.10.2",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

Maybe you can help? Thanks.

Here is the full error:

react-server-dom-web…development.js:1183 
 Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
    at new n (nodejs.mjs:1:222)
    at eval (redis.ts:3:15)
    at (app-pages-browser)/l…login/page.js:428:1)
    at options.factory (webpack.js?v=1711538661176:716:31)
    at __webpack_require__ (webpack.js?v=1711538661176:37:33)
    at fn (webpack.js?v=1711538661176:371:21)
    at eval (otp.ts:9:68)
    at (app-pages-browser)/l…login/page.js:417:1)
    at options.factory (webpack.js?v=1711538661176:716:31)
    at __webpack_require__ (webpack.js?v=1711538661176:37:33)
    at fn (webpack.js?v=1711538661176:371:21)
    at eval (page.tsx:22:67)
    at (app-pages-browser)/a…login/page.js:329:1)
    at options.factory (webpack.js?v=1711538661176:716:31)
    at __webpack_require__ (webpack.js?v=1711538661176:37:33)
    at fn (webpack.js?v=1711538661176:371:21)
    at requireModule (react-server-dom-web…velopment.js:156:23)
    at initializeModuleChunk (react-server-dom-web…velopment.js:1357:1)
    at parseModelString (react-server-dom-web…velopment.js:1665:1)
    at Object.eval (react-server-dom-web…velopment.js:2018:1)
    at JSON.parse (<anonymous>)
    at parseModel (react-server-dom-web…velopment.js:2010:1)
    at initializeModelChunk (react-server-dom-web…velopment.js:1325:1)
    at readChunk (react-server-dom-web…velopment.js:1163:1)
    at reconcileChildFibersImpl (react-dom.development.js:9854:1)
    at reconcileChildFibers (react-dom.development.js:9912:1)
    at reconcileChildren (react-dom.development.js:15627:1)
    at replayFunctionComponent (react-dom.development.js:16236:1)
    at replaySuspendedUnitOfWork (react-dom.development.js:25695:1)
    at renderRootConcurrent (react-dom.development.js:25467:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:24432:1)
    at workLoop (scheduler.development.js:256:1)
    at flushWork (scheduler.development.js:225:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:1)
app-index.js:33 
 The above error occurred in the <ServerRoot> component:

    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected]_re…[email protected][email protected]/node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected]_re…[email protected][email protected]/node_modules/next/dist/client/app-index.js:145:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
react-dom.development.js:16472 
 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js:16472:1)
    at beginWork$1 (react-dom.development.js:18410:1)
    at beginWork (react-dom.development.js:26791:1)
    at performUnitOfWork (react-dom.development.js:25637:1)
    at workLoopSync (react-dom.development.js:25353:1)
    at renderRootSync (react-dom.development.js:25308:1)
    at recoverFromConcurrentError (react-dom.development.js:24525:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:24470:1)
    at workLoop (scheduler.development.js:256:1)
    at flushWork (scheduler.development.js:225:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:1)
react-dom.development.js:26203 
 Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
    at new n (nodejs.mjs:1:222)
    at eval (redis.ts:3:15)
    at (app-pages-browser)/l…login/page.js:428:1)
    at options.factory (webpack.js?v=1711538661176:716:31)
    at __webpack_require__ (webpack.js?v=1711538661176:37:33)
    at fn (webpack.js?v=1711538661176:371:21)
    at eval (otp.ts:9:68)
    at (app-pages-browser)/l…login/page.js:417:1)
    at options.factory (webpack.js?v=1711538661176:716:31)
    at __webpack_require__ (webpack.js?v=1711538661176:37:33)
    at fn (webpack.js?v=1711538661176:371:21)
    at eval (page.tsx:22:67)
    at (app-pages-browser)/a…login/page.js:329:1)
    at options.factory (webpack.js?v=1711538661176:716:31)
    at __webpack_require__ (webpack.js?v=1711538661176:37:33)
    at fn (webpack.js?v=1711538661176:371:21)
    at requireModule (react-server-dom-web…velopment.js:156:23)
    at initializeModuleChunk (react-server-dom-web…velopment.js:1357:1)
    at parseModelString (react-server-dom-web…velopment.js:1665:1)
    at Object.eval (react-server-dom-web…velopment.js:2018:1)
    at JSON.parse (<anonymous>)
    at parseModel (react-server-dom-web…velopment.js:2010:1)
    at initializeModelChunk (react-server-dom-web…velopment.js:1325:1)
    at readChunk (react-server-dom-web…velopment.js:1163:1)
    at reconcileChildFibersImpl (react-dom.development.js:9854:1)
    at reconcileChildFibers (react-dom.development.js:9912:1)
    at reconcileChildren (react-dom.development.js:15627:1)
    at replayFunctionComponent (react-dom.development.js:16236:1)
    at replaySuspendedUnitOfWork (react-dom.development.js:25695:1)
    at renderRootConcurrent (react-dom.development.js:25467:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:24432:1)
    at workLoop (scheduler.development.js:256:1)
    at flushWork (scheduler.development.js:225:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:1)

The following vanilla JS code is being used to export form data that has been converted to a blob, and saved to localstorage, out to a CSV file:

let ourData = localStorage.getItem("entry_list");
ourData = JSON.parse(ourData); 

const titleKeys = Object.keys(ourData[0])

const refinedData = []

refinedData.push(titleKeys)

ourData.forEach(item => {
  refinedData.push(Object.values(item))  
})

let csvContent = ''

refinedData.forEach(row => {
  csvContent += row.join(',') + 'n'
})

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8,' })
const objUrl = URL.createObjectURL(blob)
const link = document.createElement('a')
link.setAttribute('href', objUrl)
link.setAttribute('download', 'export.csv')
link.textContent = 'export'

document.querySelector('span.export').appendChild(link)

To initiate this export I use the following link on the main page:

<span class="export"></span></div>

The problem I have is that the link will only display if there is data in the blob / localstorage. For example, if user data has been entered into the form, and the page is refreshed, the link will display. If there is no user data entered into the form, the link is not displayed.

I want the link text “export” to display always, whether there is user data present or not, and I definitely need to avoid forcing the user to refresh after the enter data into a blank form.

I hope this makes sense and if you can tell me where I am going wrong, or why this behavior is occurring, I would be very grateful. I think I may have to create the empty blob first…?

Thank in advance.

I am trying to replace the second / of the following string with a
tag so that the year will break line

<span class="post-date">15/03/2024</span>

Is there any way to replace a character(or string in general) with an html tag, like the <br> tag?

I wonder to develop a JavaScript mobile application to manage applications in a cellphone.

For example, is desired to open, close running application, monitoring the time of open applications and count the times with an application as opened by period, and more few more use cases

This application should work in Android and iPhone and must be agnostic about framework, React Native, Svelte Native, Native Script, so on …

Disclaimer: I Want to avoid to user Flutter, Kotlin/Native android or Swift, so my mission is a bit complicated.

Someone can bring the light to me about its concerns

I have something like the following markup:

<dialog>
   <div>
      <input type="text">
      <input type="text">
   <div>
</dialog>

I also have an event listener on the parent element that opens the dialog/modal when a particular key is pressed. The trouble is, however, that, when the modal opens, the first input element comes into focus and the key that was used to open the dialog gets recorded in the input as well.

Is there a way to prevent this? Thanks.

I’m pretty sure I have a memory leak. When I perform certain actions (e.g. opening a menu) repeatedly, then use the 3 heap snapshots trick, there’s always leaked memory. The retainers are different each time. I spent 2 days trying to interpret the results, but I still have no idea what it means. E.g. here’s an example of a memory leak:

It’ll be great if someone knew the answers to any of these questions:

1. Is it correct to interpret this as: an HTMLInputElement is somehow referencing a function that calls useContext?

2. What do “instruction_stream”, “previous”, and “context” in the retainers mean?

3. I know “(compiled code)” means it’s V8 creating optimized versions of functions. However, it seems like Chrome is producing new optimized versions of “useContext” multiple times? I repeated the 3 heaps trick many times and “useContext” is in there every time.

4. Where can I find more about what “(code relocation info)”, “(code deopt data)”, “(source position table)”, etc mean?

I have written a program that intends to add songs to my own spotify playlist.

The below is the auth code:

const { SpotifyWebApi } = require('spotify-web-api-node');

module.exports = async (req, res) => {
  const spotifyApi = new SpotifyWebApi({
    clientId: process.env.SPOTIFY_CLIENT_ID,
    clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
    redirectUri: `${process.env.VERCEL_URL}/api/callback`,
  });

  const scopes = ['playlist-read-private', 'playlist-read-collaborative', 'playlist-modify-public', 'playlist-modify-private', 'user-read-playback-state', 'user-modify-playback-state', 'user-read-currently-playing', 'playlist-read-collaborative', 'user-read-playback-position', 'user-library-modify'];
  const authorizeURL = spotifyApi.createAuthorizeURL(scopes, null);
  res.writeHead(302, { Location: authorizeURL });
  res.end();
};

While you’d think I’d only need playlist-modify-public and private, I included them all after testing to make sure. The /callback function returns the refresh token which I include in my code.

Yet, when I try await spotifyApi.addTracksToPlaylist(playlistId, [`spotify:track:${songId}`]);, I get the following error:
"An error occurred while communicating with Spotify's Web API.nDetails: Insufficient client scope."

I don’t see how I can have the incorrect client scope?? I’ve made sure the tokens are correct. I don’t know what to do.

I am trying to integrate vscode settings.json into webstrom. I have a settings.json into vscode, When I save files, its automatically formatted code into vscode, How can I interrogate this formatting into webstorm?

For example, here is a settings.json in vscode?

{
  "eslint.validate": [
    "javascript"
  ],
  "eslint.format.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.formatOnSave": false,
  "editor.tabSize": 2,
  "stylelint.validate": [
    "scss",
    "css",
    "less"
  ],
  "css.validate": false,
  "scss.validate": false,
  "stylelint.config": null,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll": "explicit"
  }
}

I am trying to sort an array of objects by ‘title’ property. How can I switch sorting by Asc and Desc by a button toggle?

I have the below, but the data doesn’t sort by toggle

  const [text, setText] = useState('');

  const [data, setData] = useState([]);
  const [toggleFilter, setToggleFilter] = useState(false);

  const sortedArray = useMemo(
    () =>
      toggleFilter
        ? [...data].sort((a, b) => a.title - b.title)
        : [...data].sort((a, b) => b.title - a.title),
    [data, toggleFilter],
  );

  return (
    <View>
      <FlatList
        style={styles.flatlist}
        data={sortedArray}
        renderItem={({ item }) => <Text>{item.title}</Text>}
        keyExtractor={(item) => item.id}
      />
      <View style={styles.container}>
    
        <Pressable
          style={styles.button}
          onPress={() => setToggleFilter(!toggleFilter)}
          testID="sort-direction">
          <Text style={styles.text}>{toggleFilter ? '⬇️' : '⬆️'}</Text>
        </Pressable>

      </View>
    </View>
  );
};

When I provided the contents in different md files called post1 and post2, I would like to add each content to my components called Service. When I do it like I describe below, I am having an error on my component page says title is not defined. How can I add those content automatically?

my page file:

---
import Layout from '../layouts/Layout.astro';
import { getCollection } from "astro:content";
const allPosts = await getCollection("posts");
import Service from "../components/Service.astro";
---

<Layout title="Serwis">
    <ul>
        {
             allPosts.map((post, index) => (
                <Service key={index} title={post.title} price={post.price} description={post.description}/>
            ))
          }
    </ul>
</Layout>

post1 md file:

---
title: Konserwacja Klimatyzatora    
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, lacus sit amet ullamcorper feugiat, neque augue vulputate dui, vel condimentum justo nunc a ipsum.
price: Już od ...PLN
---

my component:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Service">
    <div>
        <h2>{title}</h2>
        <p>{price}</p>
    </div>
    <p>{description}</p>
</Layout>

I’m currently developing a WordPress website with Elementor Pro. My client is asking for up and down buttons to navigate the homepage. I’m guessing that I need to use javascript to do this but I have almost no javascript knowledge. Can someone please help me about this? I can embed the javascript in HTML widget. My buttons’ IDs are #button-up and #button-down. There’re 5 sections in the page and all sections’ height is 100vh. Thanks in advance! I’ve scroll snap activated in the page.

Thanks in advance!

I tried various javascript codes but couldn’t make it work.