Category: javascript

Category Added in a WPeMatico Campaign

Creating a separate files for just CSF Stories

My current storybook file looks like the following:

text.stories.ts:

import type { Meta, StoryObj } from '@storybook/react';
import { Text } from './Text';

const meta: Meta<typeof Text> = {
  component: Text,
  tags: ['autodocs'],
  title: 'Foundations/Typography',
};
export default meta;

type Story = StoryObj<typeof Text>;

export const Default: Story = {};

export const Heading1: Story = {
  args: {
    type: 'h1',
  },
};

How can I create a separate file for just my Stories and then import it into my text.stories.tsx file? I’m trying to do something like the below. Storybook does not work when I try this.

text.examples.ts:

import type { StoryObj } from '@storybook/react';
import { Text } from './Text';

type Story = StoryObj<typeof Text>;

export const Default: Story = {};

export const Heading1: Story = {
  args: {
    type: 'h1',
  },
};

text.stories.ts:

import type { Meta } from '@storybook/react';
import { Text } from './Text';
import * from './text.examples';

const meta: Meta<typeof Text> = {
  component: Text,
  tags: ['autodocs'],
  title: 'Foundations/Typography',
};
export default meta;

How do I add elements from one array to an empty array in Javascript

I’ve been stuck trying to add some elements from one array to another. I have an array with two attributs name and image but I only want to add all the image elements to an empty array. How could I do that ?

    let characters = [
    {
    name: "character1",
    img: "image/character1.png"
   },
   {
    name: "character2",
    img: "image/character2.png"
   },
   {
    name: "character3",
    img: "image/character3.png"
   },
   {
    name: "character4",
    img: "image/character4.png"
   }
]     
let newArray = [];

Validation errors not defined. Cant find fix

I keep receiving errors that my functions for validation are not defined and I might just be stupid but I cant find the issue. Could anyone try and see what is wrong with my code. As far as I can see there are no spelling mistakes anywhere in the code.

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF"
          crossorigin="anonymous">
</head>
<style>
    .errorMsg {
        color:red;
        font-weight: bold;
    }
    .required {
        color:red;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4">
            <h1 class="mt-3">Contact Us</h1>
            <p>
                Complete the form below to send us a message.
            </p>
            <div id="respMsgAlert" class="alert alert-danger visually-hidden" role="alert">
                <div id="respMsgText"></div>
            </div>
            <form name="formOne" action="https://placeholder.com/placeholder.php" method="get">
                <div class="mb-3">
                    <label for="firstName" class="form-label"><span class="required">*</span> First Name</label>
                    <input type="text" class="form-control" name="firstName" id="firstName" onfocus="clearFirstNameValidation()" onblur="validateFirstName()">
                    <div id="firstNameValidation" class="errorMsg"></div>
                </div>
                <div class="mb-3">
                    <label for="lastName" class="form-label"><span class="required">*</span> Last Name</label>
                    <input type="text" class="form-control" name="lastName" id="lastName" onfocus="clearLastNameValidation()" onblur="validateLastName()">
                    <div id="lastNameValidation" class="errorMsg"></div>
                </div>
                <div class="mb-3">
                    <label for="emailAddress" class="form-label"><span class="required">*</span> Email Address</label>
                    <input type="email" class="form-control" name="emailAddress" id="emailAddress" onfocus="clearEmailAddressValidation()" onblur="validateEmailAddress()">
                    <div id="emailAddressValidation" class="errorMsg"></div>
                </div>
                <div class="mb-3">
                    <label for="phoneNumber" class="form-label"><span class="required">*</span> Phone Number</label>
                    <input type="tel" class="form-control" name="phoneNumber" id="phoneNumber" onfocus="clearPhoneNumberValidation()" onblur="validatePhoneNumber()">
                    <div id="phoneNumberValidation" class="errorMsg"></div>
                </div>
                <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>
            </form>
            <span class="required">*</span> denotes a value is required to proceed.
        </div>
        <div id="" class="col-4"></div>
    </div>
</div>
<script>
   const NAME_MAX_LENGTH = 20;
const EMAIL_MAX_LENGTH = 50;
const PHONE_MAX_LENGTH = 15;
let pageIsValid = false;

/**
 * Submit form if valid
 */
function submitForm() {
  if (pageIsValid) {
    // clear alert info and hide
    document.getElementById('respMsgText').innerHTML = '';
    document.getElementById('respMsgAlert').classList.add('visually-hidden');
    // submit the form info
    document.formOne.submit();
  } else {
    // set alert text and show
    document.getElementById('respMsgText').innerHTML = 'Form is not valid. Please correct errors before submitting.';
    document.getElementById('respMsgAlert').classList.remove('visually-hidden');
  }
}

/**
 * Clear validation for name
 */
function clearFirstNameValidation() {
  document.getElementById('firstNameValidation').innerHTML = '';
}


/**
 * Validate the name provided
 */
function validateFirstName() {
  let firstName = document.getElementById('firstName').value;
  if (firstName.length === 0) {
    document.getElementById('firstNameValidation').innerHTML = 'First Name is required!';
    pageIsValid = false;
  } else if (firstName.length > NAME_MAX_LENGTH) {
    document.getElementById('firstNameValidation').innerHTML = `First Name cannot exceed ${NAME_MAX_LENGTH} characters!`;
    pageIsValid = false;
  } else {
    pageIsValid = true;
  }
}
/**
 * Clear validation for last name
 */
function clearLastNameValidation() {
  document.getElementById('lastNameValidation').innerHTML = '';
}

/**
 * Validate the last name provided
 */
function validateLastName() {
  let lastName = document.getElementById('lastName').value;
  if (lastName.length === 0) {
    document.getElementById('lastNameValidation').innerHTML = 'Last name is required!';
    pageIsValid = false;
  } else if (lastName.length > NAME_MAX_LENGTH) {
    document.getElementById('lastNameValidation').innerHTML = `Last name cannot exceed ${NAME_MAX_LENGTH} characters!`;
    pageIsValid = false;
  } else {
    pageIsValid = true;
  }
}

/**
 * Clear validation for email
 */
function clearEmailAddressValidation() {
  document.getElementById('emailAddressValidation').innerHTML = '';
}

/**
 * Validate the email provided
 */
function validateEmailAddress() {
  let emailAddress = document.getElementById('emailAddress').value;
  const emailRegex = /^S+@S+.S+$/;
  if (emailAddress.length === 0) {
    document.getElementById('emailAddressValidation').innerHTML = 'Email Address is required!';
    pageIsValid = false;
  } else if (emailAddress.length > EMAIL_MAX_LENGTH) {
    document.getElementById('emailAddressValidation').innerHTML = `Email Address cannot exceed ${EMAIL_MAX_LENGTH} characters!`;
    pageIsValid = false;
  } else if (!emailRegex.test(emailAddress)) {
    document.getElementById('emailAddressValidation').innerHTML = 'Please enter a valid email address!';
    pageIsValid = false;
  } else {
    pageIsValid = true;
  }
}

/**
 * Clear validation for phone number
 */
function clearPhoneNumberValidation() {
  document.getElementById('phoneNumberValidation').innerHTML = '';
}

/**
 * Validate the phone number provided
 */
function validatePhoneNumber() {
  let phoneNumber = document.getElementById('phoneNumber').value;
  const phoneRegex = /^d{10}$/;
  if (phoneNumber.length === 0) {
    document.getElementById('phoneNumberValidation').innerHTML = 'Phone Number is required!';
    pageIsValid = false;
  } else if (phoneNumber.length > PHONE_MAX_LENGTH) {
    document.getElementById('phoneNumberValidation').innerHTML = `Phone Number cannot exceed ${PHONE_MAX_LENGTH} digits!`;
    pageIsValid = false;
  } else if (!phoneRegex.test(phoneNumber)) {
    document.getElementById('phoneNumberValidation').innerHTML = 'Please enter a valid phone number (10 digits only)!';
    pageIsValid = false;
  } else {
    pageIsValid = true;
  }

Tried changing around validation names and nothing worked. Continued to get the same errors

TypeORM ManyToMany relation returning undefined after saving

Here’s my model:

@Entity()
export class Node extends BaseEntity {
@PrimaryColumn()
nodeName: string

@Column()
@Generated('increment')
id: number;


@JoinTable()
@ManyToMany((type) => Node, (node) => node.children, {cascade:true,
})
parents: Node[]

@ManyToMany((type) => Node, (node) => node.parents)
children: Node[]

}

Here’s my Controller:

private async updateStations(NodestoAdd: string[]): Promise<Node[]> {
    const nodes = [];
    let prevNode: Node | undefined;
    for (let i = 0; i < NodestoAdd.length; i++) {
        const nodeName = NodestoAdd[i];
        let node = await this.nodeRepo.findOne({
            where: {
                nodeName: nodeName,
            },
        });
        if (!node) {
            node = this.nodeRepo.create({ nodeName: nodeName });
        }
        nodes.push(node)
        if (prevNode) {
            // Set the current station's parent to the previous station
            if (!node.parents) {
                node.parents = [prevNode];
            } else {
                //station.parents returning undefined here
                node.parents.push(prevNode);
            }
            this.nodeRepo.save(node)
        }
        prevNode = node;
    }
    return nodes;
}

This is a helper function for me to add a path (list of nodes) with a name to the path.
Nodes can be on multiple paths. If I add [node1, node2, node3], then [node4, node2, node5], the functionality I want is that node2 has parents [node1, node4] and children [node3, node5].

However, when I check if a node already has parents, it’s always returning undefined, even if I check and see that [node] is its parent right after adding and saving.
Is this an issue with saving, or calling back node.parents?

I’ve tried this.nodeRepo.save[node, prevNode] right after, and using this.nodeRepo.merge(node, {//updateparents}).

updating ORDER BY with ajax is returning a clone of the html

Hi I am trying to use ajax to change the ORDER BY clause on my html/php page using the select & option tags, so by default $sort = 'id' but my select/options should update by 'SFprice' when the relevant option is selected, my code appears to be somewhat working in the fact that it returns the divs in the selected order but it is returning the whole html page (or “cloning” it) inside the id=”results” div instead of just updating the ORDER BY clause, I believe this is due to the append but I cant think of any other way.

This is what I have on my html/php page

<form method="post" id="sort-form">
  <label for="sort">Sort by:</label>
  <select name="sort" id="sort">
    <option value="SFprice ASC">Low to high</option>
    <option value="SFprice DESC">High to low</option>
  </select>
</form>


<div class="row">

<?php
  // Initialize $sort variable with default value
  $sort = "id";
  
  // Check if form has been submitted
  if(isset($_POST["sort"])) {
    $sort = $_POST["sort"];
  }
  
  // Prepare and execute the SQL statement with the selected sorting option
  $stmt = $dbh->prepare("SELECT * FROM `products-table` ORDER BY $sort LIMIT 8");
  $stmt->execute();
  $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

  <?php foreach ($result as $fetch) { ?>
    <div id="results" class="col-md-3 col-6 mb-2 mt-2">
      <div class="card">
        <div class="card-title">
          <h6><?php echo $fetch['title'];?></h6>
        </div>
        <div class="card-body">
          <center>
            <img src="/images/products/<?php echo $fetch['ProdImg'];?>">
          </center>
          <p>Starting from: <?php echo $fetch['SFprice'];?></p>
        </div>
        <div class="card-footer">
          <a href="Item?title=<?php echo $fetch['title'];?>">Take a look</a>
        </div>
      </div>
    </div>
  <?php
  }
  ?>
</div>

<script type="text/javascript">
$(document).ready(function() {
  // Listen for changes to the select element
  $('#sort').on('change', function() {
    // Get the selected value
    var sortValue = $(this).val();
    
    // Send an AJAX request to update the results
    $.ajax({
      type: 'POST',
      url: '',
      data: { sort: sortValue },
      success: function(response) {
        // Update the results with the new data
        $('#results').empty().append(response);
      }
    });
  });
});
</script>

I have tried moving the id="results" but this just returns my html page into a different section. I have also tried moving it inside the foreach and this just returns the html inside the col-md-4, I also tried using a class instead of an id since they would need to be unique for each item in the table but this returns nothing.

How can I change my (TypeScript Definition) .d.ts file to a (JavaScript) .js file?

I have found many articles on how to convert a file from .js –> .d.ts but not from .d.ts –> .js

I have this .d.ts code and I want it to be javascript code. Can anyone help?

import { ReactElement } from 'react';
export interface MapConsumerProps {
    children: (map: Map) => ReactElement | null;
}
export function MapConsumer({ children }: MapConsumerProps): ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null;

How to handle with dynamic approach with regexp

Intention of this question is getting help on dynamic integration with regexp.

I am trying to find the subset of zeros from the string. To find the single zeros and double zero existence. my code works. but I am duplicating the code as 2 time.

here is it:

const str = '0000';

const count1 = /0{1}/;
const reg1 = new RegExp(count1, 'g');
const match1 = str.match(reg1);
console.log(match1);

const count2 = /0{2}/;
const reg2 = new RegExp(count2, 'g');
const match2 = str.match(reg2);
console.log(match2);

But how to i avoid this duplicatation, by dynamically updating count and count2 something like this:

for(i=1;i<=2;i++){
const count1 = /0{i}/; //here is the dynamic update
const reg1 = new RegExp(count1, 'g');
const match1 = str.match(reg1);
console.log(match1);
}

or how to handle this kind of scenarios?

How to get the last element of specific class or attribute without using querySelectorAll

Cannot get the last element with specific class or attribute using querySelector.

My Current Code:

<div id="wrapper">
    <div class="abc" db="box"></div>
    <div class="abc" db="box"></div>
    <div class="abc" db="box"></div>
    <div class="def"></div>
    <div class="abc" db="box"></div>
    <div class="ghi"></div>
    <div class="abc" db="box"></div>
    <div class="ghi"></div>
    <div class="ghi"></div>
</div>
<script>
    console.log(document.querySelector('#wrapper>[db="box"]:last-child')); // showing null
    console.log(document.querySelector('#wrapper>div.abc:last-child')); // showing null
</script>

I’ve found some solutions like:

const elements = document.querySelectorAll('#wrapper>div.abc');
console.log(elements[elements.length - 1]);

The above code works but it gets all of the elements first and then retrieves the last one from it.

document.querySelector('#wrapper>[db="box"]:last-child')

If anyone could make the above query correct then it will search for the last one only.

React js project not wroking Getting a white screen on browser

I’m new to react and tried to make a todos website and right now I’m not seeing any error on vs code but the website is not displaying theres only a white screen
enter image description here

These are the erros I’m getting in browser
enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

The code should have run and a website to be displayed
pakage.jason

{
  "name": "todo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@material-ui/core": "^4.11.3",
    "@material-ui/pickers": "^3.2.10",
    "@mui/material": "^5.11.13",
    "@mui/styles": "^5.11.13",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "bootstrap-icons": "^1.4.0",
    "date-fns": "^2.17.0",
    "firebase": "^8.10.1",
    "moment": "^2.29.4",
    "randomcolor": "^0.6.2",
    "react": "^17.0.1",
    "react-bootstrap-icons": "^1.10.2",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "react-spring": "^9.7.1",
    "save": "^2.9.0",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist":[
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  
}

Unable to Render the page

app.get(“/:customListName”, async(req,res) =>{
const customListName = req.params.customListName;

await List.findOne({name: customListName}).then(function(err, foundList){
    if(!err) {
        if(!foundList) {
        // Create a new list.
        const list = new List({
            name: customListName,
            items: default_items
        });
        
    list.save();
  
    res.redirect("/"+ customListName);
}  
 else{ 
  //Showing as existing list

  res.render("list", {listTitle: "Today" , newListItems: foundList.items});
}
}
});

i tired to console log on random things on else block, but it just doesnt seem to work.

Modifying VSCode extension configuration does not report (‘key’ in obj); how?

Developing a VS Code extension, I’m passing a configuration object with {around:1} to a library. The library has the following code (slightly simplified for this question):

if (!('before' in opts))  opts.before  = ('around' in opts) ? opts.around : 0;
if (!('before1' in opts)) opts.before1 = ('before' in opts) ? opts.before : 0;

After this code runs, opts.before === 1, and opts.before1 === 0. How is this possible? What’s going on?

The configuration object comes from:

vscode.workspace.getConfiguration(extName).get(settingName)[name];

…where name is something like "docs" and the value of the setting is:

{
   "docs": {"wrap":true, "around":1, "indent":"  "},
   // other values here
}

Javascript animations in HTML webpage do not work

I want to toggle an animation in CSS using a JavaScript file. However, the animation does not work. Can someone help me with it?
This is the JavaScript file.

const menu= document.querySelector('#mobile-menu')
const menuLinks = document.querySelector('.navbar__menu')

menu.addEventListener('click', function(){
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
.navbar__container{
    display: flex;
    justify-content: center;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0;
}

.navbar__menu{
    display: grid;
    grid-template-columns: auto;
    margin: 0;
    width: 100%;
    position: absolute;
    top: -1000px;
    opacity: 0;
    transition: all 0.5s ease;
    height: 50vh;
    z-index: -1;
}

.navbar__menu .active{
    background: #131313;
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99;
    height: 50vh;
    font-size: 1.6rem;
}

#navbar__logo{
    padding-left: 25px;
}

.navbar__toggle .bar{
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.5s ease-in-out;
    background-color: #fff;
}

.navbar__item{
    width: 100%;
}

.navbar__links{
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;
}

#mobile-menu{
    position: absolute;
    top: 20%;
    right: 5%;
    transform: translate(5%, 20%);
}

.navbar__btn{
    padding-bottom: 2rem;
}

.button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80px;
    margin: 0;
}

.navbar__toggle .bar{
    display: block;
    cursor:pointer;
}

#mobile-menu.is-active .bar:nth-child(2){
    opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
}

#mobile-menu.is-active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
}

I was expecting a menu that shows when you click a button. The button transitions into a cross when clicked.

Dark mode and light mode

im having some troubles to make a dark and light mode when i tried to switch my latters dont change and i really dont know why can you guys explain me why and how to make it work? heres my code im using flask u.u

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bs-dark: #212529;
  --bs-light: #fff;
}

.theme-container {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.theme-container:hover {
  opacity: 0.8;
}

.shadow-dark {
  background: linear-gradient(145deg, #23282c, #1e2125);
  box-shadow: 17px 17px 23px #1a1d20,
    -17px -17px 23px #282d32, inset 5px 5px 4px #1e2226,
    inset -5px -5px 4px #24282c;
}

.shadow-light {
  box-shadow: 7px 7px 15px -10px #bbcfda, -4px -4px 13px #ffffff,
    inset 7px 7px 3px rgba(209, 217, 230, 0.35),
    inset -11px -11px 3px rgba(255, 255, 255, 0.3)
}

@keyframes change {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.4);
  }
}

.change {
  animation-name: change;
  animation-duration: 1s;
  animation-direction: alternate;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Inter', sans-serif;
}
.formbold-mb-3 {
  margin-bottom: 15px;
}

.formbold-img {
  display: block;
  margin: 0 auto;
  display: flex;
}

.formbold-form-select {
  margin: 0 auto;
  background-color: #fff;
  align-content: center;
  
}

.formbold-main-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.formbold-form-wrapper {
  margin: 0 auto;
  max-width: 570px;
  width: 100%;
  padding: 40px;
}

.formbold-img {
  display: block;
  margin: 0 auto 45px;
}

.formbold-input-wrapp > div {
  display: flex;
  gap: 20px;
}

.formbold-input-flex {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.formbold-input-flex > div {
  width: 50%;
}
.formbold-form-input {
  width: 100%;
  padding: 13px 22px;
  border-radius: 5px;
  border: 1px solid #dde3ec;
  background: #ffffff;
  font-weight: 500;
  font-size: 16px;
  color: #536387;
  outline: none;
  resize: none;
}

.formbold-form-input::placeholder,
select.formbold-form-input,
.formbold-form-input[type='date']::-webkit-datetime-edit-text,
.formbold-form-input[type='date']::-webkit-datetime-edit-month-field,
.formbold-form-input[type='date']::-webkit-datetime-edit-day-field,
.formbold-form-input[type='date']::-webkit-datetime-edit-year-field {
  color: rgba(83, 99, 135, 0.5);
}

.formbold-form-input:focus {
  border-color: #747478;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

.formbold-form-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  display: block;
  margin-bottom: 10px;
  color: var(--bs-light); /* texto negro por defecto */
}

.formbold-form-file-flex {
  display: flex;
  align-items: center;
  gap: 20px;
}
.formbold-form-file-flex .formbold-form-label {
  margin-bottom: 0;
}
.formbold-form-file {
  font-size: 14px;
  line-height: 24px;
  color: #a2a2a2;
}
.formbold-form-file::-webkit-file-upload-button {
  display: none;
}

.formbold-form-file:before {
  content: 'Upload file';
  display: inline-block;
  background: #ffffff;
  box-shadow: inset 0px 0px 2px rgba(193, 193, 193, 0.25);
  border-radius: 10px;
  padding: 2px 15px;
  outline: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  color: #464646;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  margin-right: 10px;
}

.formbold-btn {
  text-align: center;
  width: 100%;
  font-size: 16px;
  border-radius: 5px;
  padding: 14px 25px;
  border: none;
  font-weight: 500;
  background-color: #6a64f1;
  color: white;
  cursor: pointer;
  margin-top: 25px;
}
.formbold-btn:hover {
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

.formbold-w-45 {
  width: 45%;
}

javascript

document.body.style="background-color: var(--bs-dark);transition: 0.5s;"

const sun = "https://www.uplooder.net/img/image/55/7aa9993fc291bc170abea048589896cf/sun.svg";
const moon = "https://www.uplooder.net/img/image/2/addf703a24a12d030968858e0879b11e/moon.svg"

var theme = "dark";
  const root = document.querySelector(":root");
  const container = document.getElementsByClassName("theme-container")[0];
  const themeIcon = document.getElementById("theme-icon");
  container.addEventListener("click", setTheme);
  function setTheme() {
    switch (theme) {
      case "dark":
        setLight();
        theme = "light";
        break;
      case "light":
        setDark();
        theme = "dark";
        break;
    }
  }
  function setLight() {
    root.style.setProperty(
      "--bs-dark",
      "linear-gradient(318.32deg, #c3d1e4 0%, #dde7f3 55%, #d4e0ed 100%)"
    );
    container.classList.remove("shadow-dark");
    setTimeout(() => {
      container.classList.add("shadow-light");
      themeIcon.classList.remove("change");
    }, 300);
    themeIcon.classList.add("change");
    themeIcon.src = sun;
  }
  function setDark() {
    root.style.setProperty("--bs-dark", "#212529");
    container.classList.remove("shadow-light");
    setTimeout(() => {
      container.classList.add("shadow-dark");
      themeIcon.classList.remove("change");
    }, 300);
    themeIcon.classList.add("change");
    themeIcon.src = moon;
  }

i really tried everything i know like add more const and even use chatgpt but nothing

const themeBtn = document.querySelector('.theme-container');

themeBtn.addEventListener('click', function() {
document.body.classList.toggle('light-mode');
});

and css properties

.theme-container.light-mode .formbold-form-input,
.theme-container.light-mode .formbold-form-label,
.theme-container.light-mode .formbold-form-file {
color: #212529;
}

How to pass string parameter uing HMTL through in a razor page

I have a quick question which is proving more difficult then I expected. I am using blazor webassembly on the visual studio .net 6.0 framework. On one of my razor pages I have a grid that was constructed through the components of a library called devexpress. My cell display template has a button to ‘delete’ records. I created a method to handle all edit/delete/add functions/actions but i need to pass a string through the parameter of a onclick event call.

When the button is clicked (in this case the button is a image) I need to pass a static string through. What would be the proper syntax. I’ve tried double quotes, single quotes, different tags nothing seems to work. Here is the tag and the syntax I have wrapped in it:

<img src="../images/icons/btnDeleteBG.png" class="custom-image-button" @onclick="() => HandlePanelActions(ClickEventRowDetail, //--string goes here--//)"/>