Category: javascript

Currenly I learning about MERN Stack and started new project about Student Management system only using CRUD operations.
Student data viewing parts(geting data from db) and delete student data work fine.. but adding new student data to db is not working. everytime submit data to db it give me bad request(400) error.

//this is my form component

    import React, { useState } from 'react'
    import '../customComponent/custom.css'
    
    import {
       
        DialogContent,
        DialogDescription,
        DialogHeader,
        DialogTitle,
        DialogFooter
        
      } from "@/components/ui/dialog"
    
      import { Input } from "@/components/ui/input"
    
    function CustomeAlert() {
    
        const [nic,setNic]=useState("");
        const [fName,setLName]=useState("");
        .....other values.....
    
        const [err,setErr]=useState(null);
        const [emptyFields,setEmptyFields]=useState([])
    
        
    
        const submitHandler=async()=>{
            const student={nic,fName,lName,dob,gender,phone,address,email,isActive};
    
            const response=await fetch('http://localhost:4000/api/students/add/',{
                method:'POST',
                body: JSON.stringify(student),
                headers:{
                    "Content-Type":"application/json",
                }
            })
    
            const json=await response.json();
            if(!response.ok){
                setErr(json.error)
                setEmptyFields(json.emptyFields)
            }
    
            if(response.ok){
                  setNic("")
                setLName("")
                setFName("")
                 .....
    
             setIsActive(true)
             setErr(null)
             setEmptyFields([])
             alert("Student Added Successfully!");
            }
        }
      return (
        <DialogContent className='DialogContent'>
        <DialogHeader>
          <DialogTitle>Add a New Student</DialogTitle>
        </DialogHeader>
        <form>
    
        <div className="grid grid-cols-3 grid-rows-3 gap-8 w-full h-full">
        <div className='flex items-center'>
            <label htmlFor="nic" className='mr-3'>NIC: </label>
            <Input id="nic" value={nic} onChange={e=>setNic(e.target.value)}/>
        </div>
        <div className='flex items-center'>
            <label htmlFor="fname" className='mr-3'>Firstname: </label>
            <Input id="fname" value={fName} onChange={e=>setFName(e.target.value)}/>
        </div>
        <div className='flex items-center'>
            <label htmlFor="lname" className='mr-3'>Lastname: </label>
            <Input id="lname" value={lName} onChange={e=>setLName(e.target.value)}/>
        </div>
        <div className='flex items-center'>
            <label htmlFor="dob" className='mr-3'>birthDate: </label>
            <input type='date' id="dob" className='w-[15rem] p-2 rounded-md border border-slate-200'
             onChange={e=>setDob(e.target.value)}
            />
        </div>
**.....other input fields....**
      
    </div>
        </form>
        <DialogFooter>
            <div className='text-red-500'>{err?err:""}</div>
            <button className='w-[8rem]  rounded-lg border-2 border-violet-700 h-[3rem] p-1 hover:text-white hover:bg-violet-400' type="reset">Clear</button>
            <button className='w-[8rem] text-white rounded-lg bg-violet-700 h-[3rem] p-1' type="submit" onClick={submitHandler}>Submit</button>
        </DialogFooter>
      </DialogContent>
      )
    }
    
    export default CustomeAlert

//backend

//student.js

router.post('/add', addNewStudent)

//studentController.js

const addNewStudent = async(req, res) => {
    //catch data come from request body
    const { studentNic, firstName, lastName, birthdate, gender, mobileNo, Address, email, isActive } = req.body

    //create empty array for check empty request
    let emptyFields = []

    //if any field has empty push values to emptyField array
    if (!studentNic) {
        emptyFields.push('studentNic')
    }

    if (!firstName) {
        emptyFields.push('firstName')
    }

    if (!lastName) {
        emptyFields.push('lastName')
    }
    if (!birthdate) {
        emptyFields.push('birthdate')
    }
    if (!gender) {
        emptyFields.push('gender')
    }
    if (!mobileNo) {
        emptyFields.push('mobileNo')
    }
    if (!Address) {
        emptyFields.push('Address')
    }
    if (!email) {
        emptyFields.push('email')
    }
    if (isActive == undefined) {
        emptyFields.push('isActive')
    }

    //if array has data then show this error messege
    if (emptyFields.length > 0) {
        return res.status(400).json({ error: "Please fill in all the Field", emptyFields })
    }



    //add document to database
    try {
        // Convert birthdate to Date object
        const parsedBirthdate = new Date(birthdate);
        const student = await StudentModel.create({ studentNic, firstName, lastName, birthdate: parsedBirthdate, gender, mobileNo, Address, email, isActive })
        res.status(200).json(student)
    } catch (error) {
        res.status(400).json({ error: error.message })
    }
}

how can i fix this issue?

I’ve compared my code do a dozen or more other questions on SO and other search results, and I have no clue what I’m missing on this (I am new to angular, so that’s probably part of it too). I can see that orders is being populated from GetOrders(), the console.log in ngOnInit shows the correct values. How do I properly implement the *ngFor in my html to show the data I want? I can see in the UI that the two sample rows are represented, so I know that the *ngFor is iterating both items in the array, but I don’t know why it’s not reading the data in the <td>‘s. I’m using Angular 17 and TS 5.2.2. Here’s everything I have:

all-orders.component.html:

<h1 id="tableLabel">All Orders</h1>

<p *ngIf="!orders"><em>Loading...</em></p>

<div *ngIf="orders">
  <table class='table table-striped' aria-labelledby="tableLabel">
    <thead>
      <tr>
        <th>Order Number</th>
        <th>Details</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let order of orders">
        <td>{{ order.OrderNumber }}</td>
        <td>{{ order.Details }}</td>
        <td>{{ order.CustName }}</td>
        <td>{{ order.CustEmail }}</td>
      </tr>
    </tbody>
  </table>
</div>

all-orders.component.ts:

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { OrderService } from '../../services/order.service';
import { Order } from '../../models/order';

@Component({
  selector: 'app-all-orders',
  templateUrl: './all-orders.component.html'
})

export class AllOrdersComponent {
  public orders!: Order[];

  constructor(private orderService: OrderService) { }

  ngOnInit(): void {
    this.orderService
      .GetOrders()
      .subscribe(result => {
        this.orders = result;
        console.log("this.orders: ", this.orders);
      });
  }
}

order.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable';
import { Order } from '../models/order';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class OrderService {
  private url = "Order"

  constructor(private http: HttpClient) { }

  public GetOrders(): Observable<Order[]> {
    return this.http.get<Order[]>(`${environment.apiUrl}/${this.url}`);
  }
}

console data (expanding the values in the console shows the correct data, I have the screenshot collapsed for brevity):

For my table, once i clicked the save button, the row in that table will have its input disabled, and the save button will disappear (this part works). When I clicked the edit button, the input field of that row will be enabled, and save button will reappears, the weird thing is that when clicking the edit button after saving, it can edit the input field again, but save button does not appears and so does the console log msg under edit button which is supposed to show when button is clicked. Even weirder is that when after refreshing the page(the saved table row is inserted into database by that point i guess?), the edit button failed to work, input field remain disabled, the console log msg that will appears when edit button is pressed will also not appeared, why pls help me figure out.

$(document).ready(function() {
        
    
        fetchAndDisplayUsers();
        
        $('#addRowButton').click(function() {
            var newRow= `<tr>
                <td><input type="text" name="username"/></td>
                <td><input type="text" name="name"/></td>
                <td><input type="text" name="phone"/></td>
                <td><input type="text" name="phoneLocation"/></td>
                <td><input type="date" name="registrationDate"/></td>
                <td><input type="text" name="organization"/></td>
                <td><input type="text" name="role"/></td>
                <td><button class="edit-btn" title="编辑"><i class="fas fa-edit" title="编辑"></i></button>  <button class="delete-btn" title="删除" ><i class="fas fa-trash"></i></button></td>
                <td><button class="save-btn">保存</button></td>
            </tr>`;
             $('.custom-table tbody').append(newRow);
         });
        $('.custom-table').on('click', '.save-btn', function() {
             var $clickedButton = $(this);
                    var userData = $clickedButton.closest('tr').find('input').serialize();
                    $.post('AddServlet', userData, function(response) {
                        
                        
                    }).done(function() {
                        
                        $clickedButton.closest('td').hide();
                        
                    });
                    
                    $(this).closest('tr').find('input').prop('disabled', true);
                });
         $(document).on('click', '.edit-btn', function() {
        console.log('Edit button clicked');
        var $clickedButton = $(this);
        $clickedButton.closest('tr').find('input').removeAttr('disabled');
        $clickedButton.closest('tr').find('.save-btn').show();
    });
     
    });

I have tried document.on and “tableClassName”.on for the edit button, same things, all my function is under the $(document).ready(function() { too. My delete and add button works but not edit under the same condition

Okay I have changed the $clickedButton.closest(‘td’).hide(); to $clickedButton.hide() when hiding the save button; this allow me to show the save button after clicking the edit button, but when the page reload. The input field still stay disabled, and the save button also does not shows up, I have tried removing .closest(‘tr’) for edit button but it does not work too, this suggest that the edit button is still not working

I am new to JavaScript for the most part and looking to convert this line into an import statement.

var sass = require(‘gulp-sass’)(require(‘sass’));

I’ve already converted the other requires into imports but couldn’t find an example of this syntax.

I am new to mobile development, and I am trying to create a simple React-Native app in which I can ask a user for permission to read its events on Google Calendar, using the Google Calendar API.
I have been trying for over a week but cannot make it work on my own.

Does anyone know any good documentation, or any repo that talks about this in depth? Thanks

This is my current code

async function handleSignInWithGoogle() {
    const user = await AsyncStorage.getItem("@user");
    // if user is not logged in, send req to google api
    if (!user) {
      if(response?.type === "success") {
        const { accessToken } = response.authentication;
        setAccessToken(accessToken);
        await getUserInfo(accessToken)
        await getUsersCalendarList(accessToken);
      }
      
    } else { // else use already existing info
      setUserInfo(JSON.parse(user));
    }
  }
const getUsersCalendarList = async (accessToken) => {
    if (!accessToken) return
    let calendarsList = await fetch('https://www.googleapis.com/calenda/v3/users/me/calendarList', {
    headers: { Authorization: `Bearer ${accessToken}`},
    });
    return calendarsList.json();
    
}


const getUserInfo = async (token) => {
    if (!token) return
    try {
      const response = await fetch(
        "https://www.googleapis.com/userinfo/v2/me",
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );

      const user = await response.json();
      await AsyncStorage.setItem("@user", JSON.stringify(user));
      setUserInfo(user)
    } catch (error) {
      
    }
  }

return (
    <SafeAreaView style={styles.safeArea}>
      <Header />
      <Text>{JSON.stringify(userInfo, null, 2)}</Text>
      <Text>{JSON.stringify(events)}</Text>
      <View style={styles.container}>
        <Text style={styles.introText}>To get started:</Text>
        <Button title='Sign in with Google' onPress={() => promptAsync()} />
        <GoogleCalendarButton onPress={() => getUsersCalendarList()}/>
        <GmailButton onPress={handleGmailConnect} />
        <SpeechButton />
        <FlatList
          data={events}
          renderItem={({ item }) => (
            <View>
              <Text>{item.summary}</Text>
              <Text>{item.start.dateTime}</Text>
            </View>
          )}
          keyExtractor={(item) => item.id}
        />
      </View>
    </SafeAreaView>
  );
}

By path parameters, I mean myurl.com/my-parameter.

my-parameter is a valid path parameter.

I’ve seen some other questions similar to this with answers like: /^[^/]+$/.
But that won’t do. I don’t want queries like @segment@ to pass, but queries like segment?a=123&b=456 should. Also, queries like my/simple/path or /path should not pass.

To be more specific, special characters like @ or whitespace are not allowed unless they are encoded (example: %40segment%40). The only exception to this rule is when declaring query parameters, ? and & would be allowed in that scenario.

In other words, any string of text that can come after myurl.com/a/b/c/ (under the URL standard) without further “nesting” is considered valid.

How can I write a regex that can validate such queries?

My current code is like this which alternates between showing every 2 then every 1 item inside loop. I want it to show every 3 then every 1 item.

I use Adonis JS template engine (Edge)

<div class="column">
    @each( PRO in products )

    <div>{{ PRO.id }}</div>

    @if($loop.index % 3 !== 0 && $loop.index + 1 !== products.length)
</div>
<div class="column">
    @endif
    @endeach
</div>

Its current result is like this:

<div class="column">
    <div>1</div>
    <div>2</div>
</div>
<div class="column">
    <div>3</div>
</div>
<div class="column">
    <div>4</div>
    <div>5</div>
</div>

and I want it to become like this:

<div class="column">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<div class="column">
    <div>4</div>
</div>
<div class="column">
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

I have checkbox values saved in my mysql database and a view results tab that will display the results of the saved values. However the results don’t display on page refresh.

A user needs to check or uncheck one of the checkboxes in order for the results to repopulate. I have tried to use javascript to check / uncheck a text box on click of the view results button but the results still don’t display but the checkbox does change when the button is clicked.

If I was to manually check or uncheck the checkbox it would display the results fine.

Is there anyway i can get the results to load on button click instead of checkbox click?

Here is some of my code.. please let me know if you need any more information or examples

thanks

<input class="form-check-input" type="checkbox" id="checkbox" checked />
<button
  class="nav-link col-md-12"
  id="result-tab"
  data-bs-toggle="tab"
  data-bs-target="#result-tab-pane"
  type="button"
  role="tab"
  aria-controls="result-tab-pane"
  aria-selected="false"
  onclick="checkUncheck()"
>
  View Result
</button>

javascript

function checkUncheck() {
  var checkbox = document.getElementById("checkbox");
  if (checkbox.checked) {
    checkbox.checked = false;
  } else {
    checkbox.checked = true;
  }
}

Here is an overview example of the problem i am trying to solve-
https://youtu.be/dxMz71u6VEM

I have tried to view the results without a user having to check / uncheck a checkbox

So I have a js script that would check/uncheck a checkbox on a button click but it still isn’t displaying the results unless I manually click the checkbox.

I am trying to create a function where it can read an encoded message from a .txt file and return it into a string. Basically, the format of the txt follows a number and a word so for example:

3 love
6 computers
2 dogs
4 cats
1 I
5 you

the first thing I want it to do is arrange the numbers in a pyramid order like so:

  1
 2 3
4 5 6

the numbers should match the words on the .txt file and once it’s organized, the end of the pyramid should write out a sentence so for example using the above list 1: I 3: love 6: computers writes out “I love computers”.

So far this is what I got but it’s only returning one value and I do not know why

function decode(message_file) {
  const fs = require("fs");
  const data = fs.readFileSync(message_file, "utf8");
  const lines = data.split("n").filter(Boolean);
  const message_words = [];
  let current_line = 1;
  let current_num = 1;
  for (const line of lines) {
    const [num, word] = line.split(" ");
    if (parseInt(num) == current_num) {
      message_words.push(word);
      current_line++;
      current_num = (current_line + 1) / 2;
    }
  }
  return message_words.join(" ");
}

const decoded_message = decode("message.txt");
console.log(decoded_message);

I’m needing to return an array with the name of people in an array who’s value is 0
I’m trying to figure out where I’m going wrong any help is greatly appreciated
Thank You!

what i have so far:

function getClientWithNoMoney(array) {

const zeroBal = [];
for (let property in array){
if (  `${array[property]}`== 0){
 zeroBal.push(`${property}`);
};
};
return zeroBal;
};

the goal is to build a function that returns an array that contains the string(‘name’) of people in the array that have a balance(value of) 0 .

i’ve been trying to redirect links, to a dynamic route, link. I used React Router DOM to do this, and it works, but now i want to do with vanilla JS, but i don’t know how

I tryed solutions in other forums and more solutions, but don’t works
This is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="goto123()">Go to 123</button>

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

and my vanilla JS script

function goto123(){
    let current = window.location.href
    let setNewCurrent = '/123'
    window.location.replace(`${current}` + setNewCurrent)
}

The URL writes correctly, but the document gives me this error: Cannot GET /index.html/123
Any solution will be received, Thanks

I’ve got the code to find the neighbors of specific matrix nodes (north, south, east, west) working fine, and while some features of my functions to traverse trenches and identify trenches are working well, I’m still having issue with detecting T-shaped branches that should result in these functions returning false values.

Here’s my full program code.

// Function to find neighbors
function findNeighbors(node, matrix) {

    // Results array
    const res = [];

    // Current row
    const row = node[0];

    // Current column
    const col = node[1];

    // North, if row is greater than zero
    if (row > 0) {

        // Set matrix coordinate as a northern value
        const nVal = matrix[row - 1][col];

        // If deeper than -5, push
        if (nVal < -5) res.push([row - 1, col]);

    };

    // South, if row less than matrix height
    if (row < matrix.length - 1) {

        // Set matrix coordinate as a southern value
        const sVal = matrix[row + 1][col];

        // If deeper than -5, push
        if (sVal < -5) res.push([row + 1, col]);

    };

    // East, if column less than matrix height
    if (col < matrix[0].length - 1) {

        // Set matrix coordinate as an eastern value
        const eVal = matrix[row][col + 1];

        // If deeper than -5, push
        if (eVal < -5) res.push([row, col + 1]);

    };

    // West, if column creater than zero
    if (col > 0) {

        // Set matrix coordinate as western value
        const wVal = matrix[row][col - 1];

        // If deeper than -5, push
        if (wVal < -5) res.push([row, col - 1]);

    };

    // Return neighbors
    return res;

};

// Function to traverse trenches
function trenchTraversal(node, matrix, visited) {

    // Get coordinates of node passed in
    const [row, col] = node;

    // If node depth less than -5, return false
    if (matrix[row][col] >= -5) return false;

    // Set stack equal to node passed in
    const stack = [node];

    // Add node passed in to visited set
    visited.add(node);

    // Path array
    const pathArr = [];

    // While the stack has length
    while (stack.length) {

        // Get current node from stack
        const current = stack.pop();

        // Push current node to path array
        pathArr.push(current);

        // Set current coordinates to the current node
        const [currentRow, currentCol] = current;

        // Get current node value from matrix
        const currentNode = matrix[currentRow][currentCol];

        // Find neighbors of current node
        const neighbors = findNeighbors(current, matrix);

        // Loop through neighbors
        neighbors.forEach(neighbor => {

            // Get neighbor coordinates
            const neighborCoord = [neighbor[0], neighbor[1]];

            // If the visited note doesn't have neighbor coordinates
            if (!visited.has(neighborCoord)) {

                // Push the neighbor onto the stack
                stack.push(neighbor);

                // Add neighbor coordinates to visisted set
                visited.add(neighborCoord);

            };

            // Check if trench is T-shaped
            if (!visited.has(neighbor[0] - 1 && neighbor[1] - 1)) return false;

        });

        // If the path is three or more nodes long, return true
        if (pathArr.length >= 3) return true;

    };

    // Return false
    return false;

};

// Function to identify trenches
function identifyTrench(trenchMatrix) {

    // Create set to hold visited coordinates
    const visited = new Set();

    // Loop for rows
    for (let i = 0; i < trenchMatrix.length; i++) {

        // Inner loop for columns
        for (let j = 0; j < trenchMatrix[0].length; j++) {

            // If the coordinate is deeper than -5
            if (trenchMatrix[i][j] < -5) {

                // If a valid trench exists, return true
                if (trenchTraversal([i, j], trenchMatrix, visited)) return true;

                // Else return false
                else return false;

            };

        };

    };

    // Return false if no valid trenches are found
    return false;

};

// Local test

// // Example 0
const sonar_0 = [
    [-5, -5, -5],
    [-6, -5, -8],
    [-5, -7, -5]
]

// Log neighbors of coordinates
console.log(findNeighbors([1,1], sonar_0)); // => Expect [[2, 1], [1, 0], [1, 2]];

// Initialize visited nodes set
const test_visited = new Set();

// Add to visited nodes test set
test_visited.add([2, 1]);

// Traverse trench with test node
console.log(trenchTraversal([0, 1], sonar_0, test_visited));

// First matrix example
const sonar_1 = [
          [-5,-5,-5,-5,-5],
          [-5,-8,-8,-9,-7],
          [-5,-5,-5,-5,-8],
          [-5,-5,-5,-5,-5]
];

// Log whether trenth in in matrix
console.log(identifyTrench(sonar_1)) // <- Expect 'true'

// Second matrix example
const sonar_2 = [
          [-5,-5,-5,-7,-5],
          [-5,-8,-8,-9,-5],
          [-5,-5,-5,-7,-5],
          [-5,-5,-5,-5,-5]
];

// Log if second matrix has trenches
console.log(identifyTrench(sonar_2)) // <- Expect 'false'

// Third matrix example
const sonar_3 = [
          [-5,-5,-5,-5,-5],
          [-5,-5,-5,-5,-5],
          [-5,-9,-9,-5,-5],
          [-5,-5,-5,-5,-5]
];

// Log if third matrix has trenches
console.log(identifyTrench(sonar_3)) // <- Expect 'false'

I’m having particular issue with this portion of the code to detect T-shaped branches.

// Check if trench is T-shaped
if (!visited.has(neighbor[0] - 1 && neighbor[1] - 1)) return false;

The second and third examples should return false, but they return false true values.

I’ve tried code such as this to detect more than two neighbors:

if (visited.size > 2) return false;.

But it doesn’t work, either and yields the same results.

My program is supposed to take in a string and split it into an array of diffrent lines.The format of the string is shown bellow (it has no explicit n, just a new line created through the enter key). How should I achieve my desired outcome?

    2PT 3PT FTM FTA PTS REB AST BLK STL GP
Mehmet Acikel Senior    15  —   4   9   34  —   —   —   —   10
Justin Baker Senior —   6   5   8   23  —   —   —   —   8
Saul Brauns Junior  3   3   4   4   19  6   1   1   —   11
Benjamin Derman Sophomore   1   1   —   —   5   1   —   —   1   3
Ayotunde Fagbemi Sophomore  44  —   4   13  92  16  —   1   3   14
Andrew Garrod Sophomore 1   —   —   1   2   3   —   —   —   4
Evan Oliver Junior  7   3   8   13  29  9   3   —   —   12
Shane Sampson Sophomore —   4   2   4   14  3   1   —   1   4
Zach Shirodkar  22  32  11  15  154 5   4   —   3   13
Nicholas Sikellis Senior    6   —   4   5   16  8   1   —   —   7
Jaden Simon Junior  32  28  12  16  157 8   2   —   4   14
Isaac Stein Junior • G  18  4   15  26  63  5   5   —   6   13
Dylan Wapner Senior • G 31  10  30  48  114 7   10  —   11  14
Total:  180 91  99  162 722 71  27  2   29  127

//Initialize String

const textAreaElement = document.getElementById('myTextArea');
const homeData = textAreaElement.value;

//Attempt to split String at new line, (unsuccessful as the format desired does not have //an explicit new line token such as n)

var lines = homeData.split(/rn|r|n/g);

//Log first line to test if split worked correctly 

console.log(lines[0]);

I have an Astro component where I want to write text with tags. The problem is that the tags like “characteristic1” are not converted into HTML code, they stay as a string.

This component has a field for the characteristics of a product and it may have different size depending on the product:

<Plan
  title="title here" 
  subtitle="subtitle here" 
  characteristics={["characteristic1", 
                    "characteristic2",
                    ...
                   ]}
/>

This is represented by the following code in other file:

---
const { title, subtitle, characteristics } = Astro.props;
---

<p class="title">{title}</p>
<p class="subtitle">{subtitle}</p>

{characteristics?.map((item) => (
  <p class="text">{item}</p>
))}

It’s supposed that when you write HTML code in a string in JS it’s treated as HTML code but I don’t know why it’s treated as a string.

How can I convert the tags into HTML code? Thanks in advance.

I need help. I don’t understand how to use the @solana/spl-token library so that it is available in the browser. I am writing a project related to NFT transactions from one wallet to another using Phantom and there I need to use createTransferCheckedInstruction function and then add it to the transaction. But how to do it? I can’t use import in .js files which I then plug into my html file. Thanks

I can use such functions as PublicKey, getbalance, etc. because I have index.iife and index.iife.min in the project folder where the functions are located. Like this:

script src="js/libs/jquery-3.6.0.min.js" charset="utf-8"></script

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

script src="js/index.iife.min.js?d"></script