Checkbox on gridcell is not checkable using playwright Ts

I need to assert the status of this checkbox (as checked/unchecked) (arrowed in picture).

checkbox in grid cell

Code (in rectangle) is reproduced below:

<div column="0" class="webix_column  webix_first webix_select_mark" style="" xpath="1">
   <div role="gridcell" aria-rowindex="1" aria-colindex="1" class="webix_cell" style="" tabindex="0">
       <span class="webix_table_checkbox webix_icon wxi-checkbox-marked">
       </span>
   </div>
</div>

To check the status, I asserted thus:

const mapBox = page.locator("//span[@class='webix_table_checkbox webix_icon wxi-checkbox-marked']").nth(0);
await mapBox.isChecked();
//OR 
// await expect(mapBox).toBeChecked();

…but either way, I got thrown:

Error: locator.isChecked: Error: Not a checkbox or radio button
Call log:
  - waiting for locator('//span[@class='webix_table_checkbox webix_icon wxi-checkbox-marked']').first()

It turns out the selector is an {object} type as:

console.log("Map box: ", typeof mapBox);

…gives:

Map box: object

For sure, there is a way to ascertain the checkbox’s status, I just need someone to point it out. Thank you.

erro ao fazer upload para firestorage [closed]

everyone! I’m facing an issue when trying to upload files to Firebase Storage in my project. I’m using React and Firebase, and every time I attempt to upload an image, I get the following error in the console:

POST https://firebasestorage.googleapis.com/v0/b/coral-guard.appspot.com/o?name=files%2F1732663556646 net::ERR_FAILED

along with this one:

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/coral-guard.appspot.com/o?name=files%2F1732664080976' from origin 'http://localhost:3000/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

This error happens in the uploadBytesResumable function when trying to upload the image to Storage. Here’s the function I’m using for the upload:

const uploadFile = async (fileId, file) => {
    if (!file) return;

    const storageRef = ref(storage, `files/${fileId}`);
    await uploadBytesResumable(storageRef, file);
};

The rest of the flow seems to work fine, including communication with Firestore. However, the upload to Storage keeps failing. I’ve already reviewed my Firebase configuration and the firebase.js file.

What I’ve tried so far:

Verifying that the storageBucket URL is correct.
Reviewing the permissions in Firebase Storage (I left the rules open for testing).
Testing in different browsers and networks.
Despite all this, I keep getting the same error.

Modify textArea visible avalaible

How can I increase the visible area in the text field of a textArea using .css?
As seen in the image, the text is cut off on line 13, I would like to be able to control how far the content of the text area can be displayed.I would like the limit to expand to line 90, at least.
enter image description here
enter image description here

How can I dynamically add an event listener to multiple elements in JavaScript? [duplicate]

I’m working on a project where I need to dynamically add event listeners to multiple elements. The elements are generated dynamically from an API response, so they aren’t present in the DOM at the initial page load.

Here’s an example of what I’m trying to achieve:

const container = document.getElementById("container");

const elements = ["Button 1", "Button 2", "Button 3"];
elements.forEach((text) => {
  const button = document.createElement("button");
  button.textContent = text;
  container.appendChild(button);
});

// Adding event listener (this isn't working as expected)
const buttons = document.querySelectorAll("button");
buttons.forEach((button) => {
  button.addEventListener("click", () => {
    alert("Button clicked");
  });
});`

The event listeners don’t seem to work properly. What am I doing wrong, and how can I fix this issue? Should I be using event delegation or some other technique?

Access to XMLHttpRequest at …. from origin … has been blocked by CORS policy: No Access Controll Allow Origin header is present on the request

I am doing a project with vue.js and laravel. I am going to connect frontend and backend via Axios and doing the following call in my contactList.vue.

 import axios from 'axios';

    export default {
        name: 'ContactList',
        data() {
            return {
                contact: Array
            }
        },
        created() {
            this.getContacts();
        },
        methods: {
            async getContacts() {
                let url = 'http://localhost:8000/contacts';
                await axios.get(url).then(response => {
                    this.contact = response.data;   
                    console.log(this.contacts);
                }).catch(error => {
                    console.log(error);
                });
            }
        },
        mounted() {
            console.log('Contact List Component mounted');
        }
    }
</script>

In postman i get the correct result but the code above does not work. It returns the error

Access to XMLHttpRequest at ‘http://localhost:8000/contacts’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Any idea?

How to use a token through out an API

I am having trouble with what I believe is asynchronous functions. I have some end points pointing towards a host with some requests to get a token from my login data, and another get request that uses that token to retrieve information about my profile.

The issue I believe I am having is that the login get request runs before my token is actually saved to my header variable. Is someone able to explain a way that I can wait for the token to be received before my api sends any other requests out?

const fastify = require('fastify')({ logger: true });
const axios = require('axios');
const fs = require('fs');
require('dotenv').config();

const username = process.env.USERNAME
const password = process.env.PASSWORD
let token
const instance = axios.create({
    baseURL: process.env.URL,
    headers : {
        'Authorization': `Bearer ${token}`
    }
})


async function login() {
    const response = await instance.post('/login', {username, password})
    token = response.data['token'];
    console.log(token);
}

async function me() {
    const response = await instance.get('/me')
    console.log(response.data);
}

login().then(me())

Thanks!

AI integration to get alomost similar websites(Other input site url) html, css and js copy [closed]

I am trying to use OpenAI to generate one page template, So basically end user will put the other website url and i need the get Html,css and js almost similar design.

I have tried but OpenAI have limitation to certain limit of text length and also not matching the design.

Any help appreciated.

Thank you in advance.

Need AI api that will give me return the similar html,css and js based on the user input he url

How to achieve a smooth page redirect with an animation?

I’m trying to get an effect where a user is redirected to another page in the middle of an animation, so to the user, it would seem like there is only an animation however, the user has already been redirected to another page. This allows for a smooth page redirect instead of a load in to another page.

In my code i set it up so when i click on the button and the animations begins with the div containing an image expanding, once the image has reached full screen width and height, a redirect has been already been ran, resulting in a effect where the image covers the entire screen, and the user now enters to a different page. To conclude it, i am trying to get a super smooth redirect in the middle of an animation, redirecting the user another page without them realizing it.
Similar to (https://www.metalab.com/). “U can enter the page and click on one of the buttons to see the effect”

This is the effect I’m looking for (https://youtu.be/ME5-4Xc-V-A)
This is a simillar effect (https://youtu.be/VNLmL9CSOvk?si=D0fNXvOdZYCjVslH)
“Both are related to the effect i want where there is a smooth transition/redirect between pages animation.”

this is the effect “I have” (https://youtu.be/iHwd0k3k4J0)

<div class="buttonparent">
    <button class="hover-btn" data-target="slide1">Ro</button>
</div>
<div id="slide1" class="slide-out-div left-to-right slide1-1">
    <img src="./foto/codingpic.jpg" alt="">
</div>

<style>
    body {
        background-color: rgb(0, 0, 0);
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .buttonparent {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        top: 30%;
        left: 2%;
    }
    .hover-btn {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid transparent;
        border-radius: 50px;
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        transition: border-color 0.3s ease, color 0.3s ease;
        text-align: center;
        font-size: 14px;
        box-sizing: border-box;
        font-family: "JetBrains Mono", monospace;
        font-weight: 100;
    }
    .hover-btn:hover {
        background: transparent;
        border-color: white;
        color: white;
    }
    .slide-out-div {
        position: absolute;
        width: 300px;
        height: 150px;
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.5s ease-out, opacity 0.5s ease-out;
    }
    .slide-out-div.left-to-right {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }
    .slide-out-div.left-to-right.active {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    .slide1-1 {
        top: 20vh;
        left: 20vw;
        width: 30vw;
        height: 15vw;
    }
    .slide-out-div.expanded {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        opacity: 1;
        z-index: 1;
        border-radius: 0;
        transition: all 0.8s ease-in;
    }
    body.expanded-mode {
        overflow: hidden;
    }
    img {
        width: 100%;
        height: 100%;
    }
</style>

<script>
    const buttons = document.querySelectorAll('.hover-btn');
    const divs = document.querySelectorAll('.slide-out-div');

    buttons.forEach((button) => {
        button.addEventListener('mouseenter', () => {
            divs.forEach((div) => div.classList.remove('active'));
            const targetId = button.getAttribute('data-target');
            const targetDiv = document.getElementById(targetId);
            if (targetDiv) {
                targetDiv.classList.add('active');
            }
        });
        button.addEventListener('mouseleave', () => {
            const targetId = button.getAttribute('data-target');
            const targetDiv = document.getElementById(targetId);
            if (targetDiv) {
                targetDiv.classList.remove('active');
            }
        });
        button.addEventListener('click', () => {
            const targetId = button.getAttribute('data-target');
            const targetDiv = document.getElementById(targetId);
            if (targetDiv) {
                targetDiv.classList.add('expanded');
                document.body.classList.add('expanded-mode');
                document.querySelector('.buttonparent').style.display = 'none';
                setTimeout(() => {
                    window.location.href = 'diu.html';
                }, 800);
            }
        });
    });

    function preloadResources() {
        fetch('diu.html')
            .then(response => response.text())
            .then(data => {
                window.preloadedHTML = data;
            })
            .catch(error => console.error('Error preloading diu.html:', error));
        let link = document.createElement('link');
        link.rel = 'preload';
        link.href = 'diu.css';
        link.as = 'style';
        document.head.appendChild(link);
    }
    window.addEventListener('load', preloadResources);
</script>

At first I tried including everything into 1 html css and js file however that seemed to make things super difficult having to set changing overflows, managing other js context and switching it between pages. following some research on sites with similar effects, instead what they all do is redirect the user to another page. So I tired preloading, prefetching and some js to load and redirect to other page smoothly, however it all just turns out choppy and glitchy. Above is my code, this is the mainpage code, if u look at the javascript I mentioned the page that its supposed to redirect too when I click on the button. I cant seem to get that effect of a smooth transition to another page. it just looks glitchy and laggy even after I have preloaded the content.

can it be done with html css and vanilla js? I’m still a beginner, quite unfamiliar with js frameworks

Cross-site Scripting (XSS) in the src property

Currently in my code I have an image snippet where I pass a src with native image import within my project folder. Previously I was directly passing the image import nomenclature within the src. To try to mitigate the vulnerability, I created a control function for the src input, but even so the vulnerability continues to be pointed out in my pentests.
How can I solve this?

my import exemple:

import corporativos from "../../img/Corporativo.svg";

my icons object:

const icons = {
    Mobilidade: mobilidades,
    Eventos: eventoss,
    Passagem: passagem,
    Locação: locacao,
    Hospedagem: hospedagem,
    Corporativo: corporativos,
    Empty: empty,
    Aéreo: passagem,
  };

my function geticons validate:

const getIconSrc = (name) => {
    return icons[name] || null;
  };

my img tag:

 <img
   src={getIconSrc("Empty")}
   alt="Nenhum ModeloVCN Cadastrado!"
 />

Why is the if statement not working? Google Earth Engine (Java Script)

I have retrieved both Landsat (49) and Sentinel 2 data. Right away I assign to all the images a property called source. This source states LANDSAT_X (with X being 4, 5, 7,8 or 9) or SENTINEL_2.

After some processing I select the least cloudy image that meets the set criteria. This image is called firstImage. As you can see I added quite a few print statements in the function to assess whether the source is detected right. Every time the source is printed as should.

However, when calling the function the image is not actually added to the map. It seems that the if statements are not responding. I need the if statement because the LANDSAT and SENTINEL images have different bands and need different min/max values for their visualization.

The code should be able to work for both image, either coming from LANDSAT or Sentinel, as we do not know which one is providing the best image beforehand.

The if statement is not reading the source.. How to overcome? I have stated the code below.

// Function to add image to map for Landsat and Sentinel images
var addImageToMap = function(image) {
  // Get the 'source' from the image to determine if it's Landsat or Sentinel
  var source = image.get('source');
  print('source value:', source);

  // Function to calculate the min and max for the bands
  var getMinMax = function(image, bands) {
    return image.select(bands).reduceRegion({
      reducer: ee.Reducer.minMax(),
      geometry: image.geometry(),
      scale: 30,  // Set appropriate scale depending on dataset
      maxPixels: 1e8
    });
  };

   // For Landsat
   if (source.getInfo().slice(0,6) === "LANDSAT") { 
     print('Landsat image detected');
     var bands = ['SR_B4', 'SR_B3', 'SR_B2']; // True color bands for Landsat
     var stats = getMinMax(image, bands);

    // Retrieve the min and max values for the SR_B4 band (red band)
    var minVal = stats.get('SR_B4_min');
    var maxVal = stats.get('SR_B4_max');

    // Check if the min/max values are valid, otherwise set defaults
    minVal = minVal !== null ? minVal : 4000;
    maxVal = maxVal !== null ? maxVal : 20000;

    // Add the image to the map if the min/max values are valid
     Map.addLayer(image, {bands: bands, min: minVal, max: maxVal}, 'Landsat True          Color');
  }

  // For Sentinel-2
  else if (source.getInfo().slice(0,7) === 'SENTINEL') {
  var bands = ['B4', 'B3', 'B2']; // True color bands for Sentinel
  var stats = getMinMax(image, bands);

// Retrieve the min and max values for the B4 band (red band)
var minVal = stats.get('B4_min');
var maxVal = stats.get('B4_max');

// Check if the min/max values are valid, otherwise set defaults
minVal = minVal !== null ? minVal : 0;
maxVal = maxVal !== null ? maxVal : 3000;

// Add the image to the map if the min/max values are valid
Map.addLayer(image, {bands: bands, min: minVal, max: maxVal}, 'Sentinel True      Color');
   }
 };

 // Example image: firstImage is already defined, assuming it is a valid image    object
 print('Properties of the first image (Low Clouds):');
 print('Cloud Cover [%]: ', firstImage.get('cloud_cover'));

// Call addImageToMap function to actually add the image to the map
addImageToMap(firstImage);

current output:

source value: LANDSAT_5 and no image

I have tried many types of if statements but they did not seem to work

Telegram authentication does not match the hash

I have data from FE as follows:

{
  query_id: 'AAFSvYgIAwAAAFK9iAjHkSbN',
  user: '{"id":6585630034,"first_name":"Tan","last_name":"","username":"wmbwvrztxsjiv","language_code":"en","allows_write_to_pm":true,"photo_url":"https://t.me/i/userpic/320/jj4XB_DzjFl8biVYum2ndfZpYmRmdl4qzpGv-afJvzz6k3tt1qpriO4vZMMd2aoJ.svg"}',
  auth_date: 1732644665,
  hash: '948e7fb3d52fe4fe6586a48fdcc8fa7fe47b21e9683be5d8eb7c7049ae91eb5c',
  query_id: 'AAFSvYgIAwAAAFK9iAjHkSbN',
  auth_date: 1732644665
}

And I have Token of telegram BOT.

This is the Nodejs Telegram Hash verification code.

const urlParams: any = new URLSearchParams(data);
urlParams.delete('hash');
urlParams.sort();

let dataCheckString = '';
for (const [key, value] of urlParams.entries()) {
    dataCheckString += `${key}=${value.replace(///g, '\/')}n`;
}
dataCheckString = dataCheckString.slice(0, -1);

const secret = crypto.createHmac('sha256', 'WebAppData').update(BOT_TOKEN);
const calculatedHash = crypto.createHmac('sha256', secret.digest()).update(dataCheckString).digest('hex');
if (calculatedHash === data.hash) {
    return true;
}

For this code snippet from 2 days ago, the 2 hash functions always match each other and run smoothly. But right now it’s not possible. Hope everyone can help

How to properly customize an File Input in react.js

I have a problem when customizing <input type='file'/> element.
Since I’m new to react.js and JS I didn’t know how to change the default 'Choose File' text of the input element so I’ve found a short tutorial (‘https://3body-net.medium.com/how-to-style-a-file-input-in-react-b6a141418341’) and it worked but I still have an small error (I think) and a few questions.

This is the component for the file input customization.

import React, {useState, useRef} from "react";

const ImageInput = ({ file, setFile }) => {
  const fileInput = useRef(null);

  const onChange = async (event) => {
    if (event.target.files && event.target.files.length > 0) {
      setFile(event.target.files[0]);
    }
  }
  return (
    <>
      <input 
        type="file"
        name="image"
        ref={fileInput}
        onChange={onChange}
        style={{ display: 'none' }}
      />
      <button
        className="upload-btn"
        onClick={() => fileInput.current.click()}
        style={{ width: '40%', fontSize: '14px', marginBottom: '10px' }}
      >Upload Image</button>
    </>
  );
}
export default ImageInput;

and this is my parent component(used for creating player entity)

import React, { useState } from "react";
import axios from "axios";
import "../../assets/styles/form/adminCreatePlayerForm.css";
import ImageInput from "./ImageInput";

const CreatePlayer = () => {
  const [playerData, setPlayerData] = useState({
    firstName: '',
    lastName: '',
    photoUrl: '',
  });
  // probat izbacit playerImg, koristit samo photoUrl...u handleFileChange napravit isto sta i u handleSubmit s updatedPlayerData
  const [playerImg, setPlayerImg] = useState(null);

  const handleChange = (event) => {
    setPlayerData({
      ...playerData,
      [event.target.name]: event.target.value
    });
  };
  // *** I don't need 'handleFileChange' anymore since I've created ImageInput component
  // const handleFileChange = (event) => {
  //   setPlayerImg(event.target.files[0]);
  // };

  // *** event.preventDefault(); - stops page from reloading on submit, also if validation is done on FE
  // it stops form submission and checks the validation rules
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('playerImg', playerImg);
    
    axios.post("http://localhost:8080/files/upload", formData).then((response) => {
      console.log(response);
      const photoName = response.data.imageName;
      const updatedPlayerData = ({
        ...playerData,
        photoUrl: photoName,
      });
      axios.post("http://localhost:8080/players", updatedPlayerData).then((response) => { 
        console.log(response);
      });
    });

    // reseting form after submit
    setPlayerData({
      firstName: '',
      lastName: '',
      photoUrl: '',
    })
    setPlayerImg(null);
  };

  return (
    <div className="create-player-container">
      <h1>Add New Player</h1>
      <div className="create-player-form">
        <form onSubmit={handleSubmit}>
          <div className="create-player-form-field">
            <label htmlFor="firstName">
              First Name
            </label>
              <input
                type="text"
                name="firstName"
                value={playerData.firstName}
                onChange={handleChange}
               />
            </div>

          <div className="create-player-form-field">
            <label htmlFor="lastName">
              Last Name
              <input
                type="text"
                name="lastName"
                value={playerData.lastName}
                onChange={handleChange}
               />
            </label>
          </div>

          <div className="create-player-form-field">
            <label htmlFor="profile-picture">
            </label>
              <ImageInput file={playerImg} setFile={setPlayerImg}/>
                    </div>
          <button type="submit">Create</button>
        </form>
      </div>
    </div>
  );
}
export default CreatePlayer;
  1. My first ambiguity is why does the ImageInput recieve 2 arguments(2 props in world of react ?) when the first one file is never used?
  2. Second why is async used here const onChange = async (event) => { , does it make sense to declare it asynchronous and then not use await keyword, what is the benefit of it?

And finally the error -> when I click the ‘Upload Image’ button (before actually choosing one) instantly I can see an Axios Error in console saying detail: "Required part 'playerImg' is not present."
(On the screenshot I’ve uploaded more detailed axios response can be seen.)
Edit: stack owerflow doesn’t let me post images yet

Since I don’t have a deeper understanding I don’t understand why does it detect there is no image present before I even select one.

Toggling a ‘hamburger’ with

I’m trying to create a professional toggle event between a hamburger button and a ul element. On a desktop screen, the ul element is in a navigation bar and is horizontal (as intended); the hamburger button is not displayed (also as intended). Now when the screen reduces below a certain size, the ul element disappears and is replaced by a hamburger button (again, as intended). With JQuery, I click on the hamburger button and the hidden ul element is displayed, vertically (once again, as intended).

I am, however, getting two problems that I simply cannot resolve:

First, the vertical ul element is not pushing down the div contents below it, but instead, displaying behind the element even though the ul element has not been positioned relatively or absolutely. I want it to push the div element below it down. (Try this at the BBC website.)

Second, if I click the hamburger button and the ul element appears, and then resize the screen back to desktop size, the vertical ul element rearranges itself to a horizontal format and gets back into the navigation bar, which is good. But, if when the screen size is reduced, I click the hamburger button and the vertical ul element appears, and then I re-click the hamburger button and the vertical ul element disappears (which is as intended), when I resize the screen back to desktop size, the navigation bar is blank, and the ul element only reappears when I refresh the page. (The BBC website doesn’t do that.)

Both of these problems make my website look very amateurish. Now I have spent the best part of two days on this, researched the Web, and I’m simply getting nowhere. I would value the insight of someone who knows more in this area than I do. I enclose a code snippet (which you can run—you will need to expand the result to a full page in order to see the second problem).

nav {
  height: 2.2em;
  width: 100%;
  background-color: black;
}

#burger-button {
  display: none;
}

#list-container ul {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  align-items: left;
  justify-content: left;
}

@media screen and (max-width: 700px) {

  #burger-button {
    display: unset;
  }
  
  #list-container {
    display: none;
    margin-top: 0em;
    text-align: left;
  }

  #list-container ul {
    display: block;
    margin-left: 1em;
  }

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="CU">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta meta http-equiv="text/css; charset=utf-8">
    <meta meta http-equiv="application/javascript; charset=utf-8">
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 
  </head>
  
  <body>
    <nav>
      <div id="burger-button"><button id="hamburger">&#9776;</button></div>
      <div id="list-container" class="container-fluid">
        <ul>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
        </ul>
      </div>
    </nav>
    
    <div>I want the emerging vertical ul to push this element down, which it is not currently doing (even though the ul element has not been positioned absolutely or relatively)</div>
    
    <script>
      $("#hamburger").click(function(){
        $("#list-container").toggle();
      });
    </script>  
  </body>
</html>

When I click on the button in the javascript table

When I click on the button in the javascript table, I want to select the select value in the modal that opens and write the row whose value is equal to the table. How can I?

<!doctype html>

Hafızlık Programı

<thead>

  <div class="h4 fw-bolder bg-danger p-1 text-center text-white" style="margin-bottom: 0; ">Arif Tangör Hoca</div>

  <tr class="table-dark">

    <th class="text-nowrap" scope="col">Ad - Soyad</th>

    <th scope="col">1.D</th>

    <th scope="col">2.D</th>

    <th scope="col">3.D</th>

    <th scope="col">4.D</th>

    <th scope="col">5.D</th>

    <th scope="col">6.D</th>

    <th scope="col">7.D</th>

    <th scope="col">8.D</th>

    <th scope="col">9.D</th>

    <th scope="col">10.D</th>

    <th scope="col">11.D</th>

    <th scope="col">İşlem Ekle</th>

    <th scope="col">İşlem Sil</th>

  </tr>

</thead>

<tbody>

  <tr>

    <th class="text-nowrap" scope="row">Kazım Yılmaz</th>

    <td class="catid" value="1">2000</td>

    <td class="catid" value="2">2000</td>

    <td class="catid" value="3">2000</td>

    <td class="catid" value="4">2000</td>

    <td class="catid" value="5">2000</td>

    <td class="catid" value="6"></td>

    <td class="catid" value="7"></td>

    <td class="catid" value="8"></td>

    <td class="catid" value="9"></td>

    <td class="catid" value="10"></td>

    <td class="catid" value="11"></td>

    <td style="padding-left: 0; padding-right: 0; border: 0; " class="text-nowrap">

Para Ekle

Sil

  <tr>

    <th class="text-nowrap" scope="row">Ömer Tangör</th>

    <td class="catid" value="1">2000</td>

    <td class="catid" value="2">2000</td>

    <td class="catid" value="3">2000</td>

    <td class="catid" value="4">2000</td>

    <td class="catid" value="5">2000</td>

    <td class="catid" value="6"></td>

    <td class="catid" value="7"></td>

    <td class="catid" value="8"></td>

    <td class="catid" value="9"></td>

    <td class="catid" value="10"></td>

    <td class="catid" value="11"></td>

    <td style="padding-left: 0; padding-right: 0; border: 0; " class="text-nowrap">

<button onclick=”settext(this) class=”btn btn bg-success text-white fw-bolder” data-bs-toggle=”modal” data-bs-target=”#exampleModal”>

Para Ekle

Sil

  </tr>

  <tr>

    <th class="text-nowrap" scope="row">Fatih Baş</th>

    <td class="catid" value="1">2000</td>

    <td class="catid" value="2">2000</td>

    <td class="catid" value="3">2000</td>

    <td class="catid" value="4">2000</td>

    <td class="catid" value="5">2000</td>

    <td class="catid" value="6"></td>

    <td class="catid" value="7"></td>

    <td class="catid" value="8"></td>

    <td class="catid" value="9"></td>

    <td class="catid" value="10"></td>

    <td class="catid" value="11"></td>

    <td style="padding-left: 0; padding-right: 0; border: 0; " class="text-nowrap">

Para Ekle

    <td style="padding-left: 0; padding-right: 0;" class="text-nowrap">

Sil

  </tr>

</tbody>
<div class="modal-dialog">

  <div class="modal-content">

    <div class="modal-header">

      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

    </div>

    <div class="modal-body">

      <label for="" class="fw-bolder form-label">Hangi Döneme Eklenecek?</label>

      <select name="" class="form-select" id="fordata1" required>

        <option value="">Seçiniz</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>

        <option value="6">6</option>

        <option value="7">7</option>

        <option value="8">8</option>

        <option value="9">9</option>

        <option value="10">10</option>

        <option value="11">11</option>

      </select>

      <label for="" class="mt-3 fw-bolder form-label">Eklenecek Tutar</label>

      <input type="text" id="fordata2" class="form-control">

Vazgeç

Ekle&Kaydet

    </div>

  </div>

</div>

<scriptsrc=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”
integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz”
crossorigin=”anonymous”>

How can I? How can I?

Uncaught SyntaxError: Unexpected token ‘{‘ (at LL.js:15:18 [closed]

I was following a tutorial and copying code entirely but for some reason there is the problem with my curly bracket at insertFirst class and i dont know why cuz im copying code but it still doesnt work
edit:
jonrsharpe thank you for pointing out it should be a method, so i probably have to put it inside LinkedList class

class Node {
    constructor(data,next=null) {
        this.data = data;
        this.next = next;
    }
}

class LinkedList{
    constructor() {
        this.head = null;
        this.size = 0;
    }
}

insertFirst(data){
    this.head = new Node(data, this.head);
}

const ll = new LinkedList()

ll.insertFirst(5);
console.log(ll);

document.getElementById("demo").innerHTML = "yay";

I copied code and expected it to work