Category: javascript

Category Added in a WPeMatico Campaign

How can I access this message from the server actions to be displayed on the other component?

The server action sample code:

'use server'

import { createServerActionClient} from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"


export default async function addCustomerOrder(cart: any, total: number, formData: FormData): Promise<{ message: string }> {     
    const cookieStore = cookies()
    const supabase = createServerActionClient({ cookies: () => cookieStore })
    console.log(formData, "formData")

    try{
        
            //codes here to add the data on the database

            } else {
                // Handle the case when customerId is undefined
                return { message: "CustomerId is not available." };
            }

        return {  message: `Succesfully added the data` }
    }catch(e){
        return {message: "Failed to submit the form."}
    }

}

I want the message to be displayed here:

'use client'
import { useMemo, useState } from 'react';

const OrderComponent: React.FC<OrderComponentProps> = ({
  //codes here
}) => {

  //codes here
  return (
   //submitting the form this way
   <form action={(data) => addCustomerOrder(cart, total, data)}>
   //codes here
   </form>
     
};

export default OrderComponent;

Creating an online code editor from scratch using react

I’m working on a personal project to create a web based code editor. I decided to use ReactJS to do it, so that I can have a component of the editor and use it anywhere. I know that I can use already existing online code editor APIs to do this. But I want to do it from scratch just for the kick. I was able to create a basic layout using contenteditable div and flex div for line numbers. But then I’m stuck at this point because I don’t know how to display line numbers or other functionality. I didn’t find any helping resources on the web either and don’t know where to or what to look for.

Here’s what I was able to do until now:
App.js:

import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";

import TextEditorTest from "./Components/TextEditorTest";

function App() {
  return (
    <div className="App">
      <TextEditorTest />
    </div>
  );
}

export default App;

TextEditorTest.js:

import React from "react";
import "./TextEditorTest.css";

function TextEditorTest() {
  function handleKeyDown(e) {
    if (e.key === "Tab") {
      e.preventDefault();
    }
  }

  return (
    <div id="editor">
      {/* To generate the line numbers */}
      <div className="line-numbers">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
      </div>

      {/* The actual editor */}
      <div
        className="input-area"
        contentEditable="true"
        autoCorrect="false"
        onKeyDown={handleKeyDown}
      ></div>
    </div>
  );
}

export default TextEditorTest;

TextEditorTest.css:

#editor {
    padding-top: 25px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    width: 50vw;
    height: 100vh;
    background-color: rgb(8, 8, 8);
    margin: auto;
    display: flex;
  }

.input-area {
    height: 100%;
    width: 95%;
    background-color: rgb(34, 34, 34);
    float: right;
    text-align: left;
    font-size: 1rem;
    padding: 0 10px;
    overflow-y: scroll;
    scrollbar-gutter: 5px;
    outline: none;
}

.line-numbers {
    width: 20px;
    /* float:left; */
    font-size: 1rem;
    line-height: 1rem;
}

I’m getting a problem with the parallax effect of my website

I’m building a simple website using just HTML/CSS/JS, and I need to implement a parallax effect on it, which I’ve also done. But, the parallax effect is not going as I had expected, and when I scroll up, all the elements in the different parallax layers move up, leaving a gap below. I want the scroll to stop when I reach the end of the building-main layer. Please find my code below.

Here’s my code:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aristocat Studio</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="main-container">
      <div class="backdrop"></div>
      <div class="cloud"></div>
      <div class="silhouette"></div>
      <div class="building-one"></div>
      <div class="building-two"></div>
      <div class="building-three"></div>
      <div class="building-main">
        <img
          src="./pics/building-main.png"
          alt="building-main"
          class="building-main-img"
        />
        <div class="roof">
          <img src="./pics/roof.png" alt="roof" class="roof-img" />
        </div>

        <div class="illustration">
          <img
            src="./pics/illustration.png"
            alt="illustration"
            class="illustration-img"
          />
        </div>

        <div class="animation">
          <img
            src="./pics/animation.png"
            alt="animation"
            class="animation-img"
          />
        </div>

        <div class="content">
          <img src="./pics/content.png" alt="content" class="content-img" />
        </div>

        <div class="webdev">
          <img src="./pics/webdev.png" alt="webdev" class="webdev-img" />
        </div>

        <div class="testimonial">
          <img
            src="./pics/testimonial.png"
            alt="testimonial"
            class="testimonial-img"
          />
        </div>

        <!-- <div class="spray-painter">
          <img
            src="./pics/spray-painter.png"
            alt="spray-painter"
            class="spray-painter-img"
          />
        </div>

        <div class="disc-jockey">
          <img
            src="./pics/disc-jockey.png"
            alt="disc-jockey"
            class="disc-jockey-img"
          />
        </div> -->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

styles.css

* {
  margin: 0px;
  padding: 0px;
}

.main-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

.backdrop {
  display: flex;
  position: absolute;
  background-image: url("./pics/sky.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.cloud {
  display: flex;
  position: absolute;
  background-image: url("./pics/cloud.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.silhouette {
  display: flex;
  position: absolute;
  background-image: url("./pics/silhouette.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-one {
  display: flex;
  position: absolute;
  background-image: url("./pics/building-one.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-two {
  display: flex;
  position: absolute;
  background-image: url("./pics/building-two.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-three {
  display: flex;
  position: absolute;
  background-image: url("./pics/building-three.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-main {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.building-main-img {
  width: 100%;
  height: 100%;
}

.roof {
  display: flex;
  position: absolute;
  top: 10%;
  left: 21%;
}

.roof-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.illustration {
  display: flex;
  position: absolute;
  top: 23.5%;
  left: 15%;
}

.illustration-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.animation {
  display: flex;
  position: absolute;
  top: 32.7%;
  left: 20%;
}

.animation-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.content {
  display: flex;
  position: absolute;
  top: 46.5%;
  left: 14.5%;
}

.content-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.testimonial {
  display: flex;
  position: absolute;
  top: 72%;
  left: 25%;
}

.testimonial-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.spray-painter {
  display: flex;
  position: absolute;
  top: 83%;
  left: 6%;
}

.spray-painter-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.disc-jockey {
  display: flex;
  position: absolute;
  top: 89.25%;
  left: 73.25%;
}

.disc-jockey-img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
}

/* Media Queries */

/* Extra Small Devices, Phones (up to 576px) */
@media only screen and (max-width: 576px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23.5%;
    left: 15%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 85%;
    left: 9%;
  }

  .spray-painter-img {
    max-width: 20%;
    max-height: 20%;
    width: auto;
    height: auto;
  }
}

/* Small Devices, Tablets (576px - 768px) */
@media only screen and (min-width: 577px) and (max-width: 768px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23%;
    left: 11%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 84.5%;
    left: 8%;
  }

  .spray-painter-img {
    max-width: 30%;
    max-height: 30%;
    width: auto;
    height: auto;
  }
}

/* Medium Devices, Desktops (768px - 992px) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23%;
    left: 11%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 84.5%;
    left: 8%;
  }

  .spray-painter-img {
    max-width: 45%;
    max-height: 45%;
    width: auto;
    height: auto;
  }
}

/* Large Devices, Desktops (992px - 1200px) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23%;
    left: 11%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 84.5%;
    left: 8%;
  }

  .spray-painter-img {
    max-width: 45%;
    max-height: 45%;
    width: auto;
    height: auto;
  }
}

/* Extra Large Devices, Large Desktops (1200px and above) */
@media only screen and (min-width: 1201px) {
  .roof {
    display: flex;
    position: absolute;
    top: 10%;
    left: 21%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23.5%;
    left: 15%;
  }

  .illustration-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46.5%;
    left: 14.5%;
  }

  .content-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }
}

script.js

document.addEventListener("DOMContentLoaded", function () {
  // Select specific elements with class "parallax-layer"
  const cloudLayer = document.querySelector(".cloud");
  const silhouetteLayer = document.querySelector(".silhouette");
  const buildingOneLayer = document.querySelector(".building-one");
  const buildingTwoLayer = document.querySelector(".building-two");
  const buildingThreeLayer = document.querySelector(".building-three");
  const buildingMainLayer = document.querySelector(".building-main");

  // Set different speed ratios for the layers
  const cloudSpeed = 0.1;
  const silhouetteSpeed = 0.3;
  const buildingOneSpeed = 0.5;
  const buildingTwoSpeed = 0.7;
  const buildingThreeSpeed = 0.9;
  const buildingMainSpeed = 1.1;

  // Function to update the position of parallax layers
  function updateParallaxLayers() {
    // Get the overall scroll position
    const scrollPosition = window.scrollY;

    // Calculate the translation for the cloud layer based on its speed
    const cloudYPos = -(scrollPosition * cloudSpeed);
    cloudLayer.style.transform = `translateY(${cloudYPos}px)`;

    // Calculate the translation for the silhouette layer based on its speed
    const silhouetteYPos = -(scrollPosition * silhouetteSpeed);
    silhouetteLayer.style.transform = `translateY(${silhouetteYPos}px)`;

    // Calculate the translation for the building-one layer based on its speed
    const buildingOneYPos = -(scrollPosition * buildingOneSpeed);
    buildingOneLayer.style.transform = `translateY(${buildingOneYPos}px)`;

    // Calculate the translation for the building-two layer based on its speed
    const buildingTwoYPos = -(scrollPosition * buildingTwoSpeed);
    buildingTwoLayer.style.transform = `translateY(${buildingTwoYPos}px)`;

    // Calculate the translation for the building-three layer based on its speed
    const buildingThreeYPos = -(scrollPosition * buildingThreeSpeed);
    buildingThreeLayer.style.transform = `translateY(${buildingThreeYPos}px)`;

    // Calculate the translation for the building-main layer based on its speed
    const buildingMainYPos = -(scrollPosition * buildingMainSpeed);
    buildingMainLayer.style.transform = `translateY(${buildingMainYPos}px)`;
  }

  // Listen for the scroll event and update parallax layers on scroll
  window.addEventListener("scroll", updateParallaxLayers);

  // Initial update to set the initial positions
  updateParallaxLayers();
});

I’ve tried adjusting the speeds but nothing seems to be working. Please help. Thanks in advance.

essentia.js inconsistent results detecting features in test audio files

I would like to detect features in audio files such as note positions and pitch. Essentia.js is a library which can do this. My code is:

const Essentia = require('essentia.js');
const fs = require('fs');
const glob = require('glob');
const path = require('path');
const wav = require('node-wav');

const essentia = new Essentia.Essentia(Essentia.EssentiaWASM);
const audioDir = path.join('test', 'audio', '**', '*.wav');
const audioPaths = glob.globSync(audioDir);
const results = [];

// Loop through each file in the folder and detect audio features.
audioPaths.forEach((audioPath) => {
  console.log(`Analyzing ${audioPath}`);
  const fileBuffer = fs.readFileSync(audioPath);
  const audioBuffer = wav.decode(fileBuffer);
  const audioVector = essentia.arrayToVector(audioBuffer.channelData[0]);
  const melodia = essentia.PredominantPitchMelodia(audioVector).pitch;
  const segments = essentia.PitchContourSegmentation(melodia, audioVector);
  results.push({
    audioPath,
    durations: essentia.vectorToArray(segments.duration),
    onsets: essentia.vectorToArray(segments.onset),
    pitches: essentia.vectorToArray(segments.MIDIpitch)
  });
});

// Output attributes side-by-side for comparison.
results.forEach(result => console.log('durations', result.audioPath, result.durations));
results.forEach(result => console.log('onsets', result.audioPath, result.onsets));
results.forEach(result => console.log('pitches', result.audioPath, result.pitches));

I’m running this code using these test files:
https://github.com/kmturley/sfz-tools-core/tree/main/test/audio

However I am getting inconsistent results, different numbers of notes detected, even though the audio files contain the same number of notes:

Durations

durations test/audio/velocity-sin.wav Float32Array(10) [
  0.5224489569664001,
  0.5369614362716675,
  0.5369614362716675,
  0.5369614362716675,
  0.5369614362716675,
  0.10158730298280716,
  0.1160997748374939,
  0.14222222566604614,
  0.09868481010198593,
  0.10739228874444962
]
durations test/audio/velocity-saw.wav Float32Array(7) [
  0.5195465087890625,
  0.528253972530365,
  0.528253972530365,
  0.528253972530365,
  0.528253972530365,
  0.12480725347995758,
  0.15673469007015228
]
durations test/audio/velocity-piano.wav Float32Array(3) [
  2.983764171600342,
  2.002721071243286,
  3.0040817260742188
]

Onsets

onsets test/audio/scale-square.wav Float32Array(12) [
  0,
  0.9839455485343933,
  1.9824036359786987,
  2.9808616638183594,
  3.9851248264312744,
  4.983582973480225,
  5.604716777801514,
  5.979138374328613,
  6.65541934967041,
  6.759909152984619,
  6.977596282958984,
  7.7380499839782715
]
onsets test/audio/scale-sin.wav Float32Array(11) [
  0,
  0.9839455485343933,
  1.9824036359786987,
  2.977959156036377,
  3.982222318649292,
  4.980680465698242,
  5.784671306610107,
  5.979138374328613,
  6.977596282958984,
  7.5290703773498535,
  7.679999828338623
]
onsets test/audio/scale-saw.wav Float32Array(10) [
  0,
  0.9868480563163757,
  1.9853061437606812,
  2.983764171600342,
  3.558458089828491,
  3.689070224761963,
  3.9851248264312744,
  4.97777795791626,
  5.982040882110596,
  6.980498790740967
]

Pitches:

pitches test/audio/scale2-sin.wav Float32Array(21) [
  60, 61, 62, 63, 64, 65, 66,
  67, 68, 69, 70, 71, 86, 72,
  92, 90, 91, 88, 93, 93, 90
]
pitches test/audio/scale2-saw.wav Float32Array(19) [
  60, 61, 62, 63, 64, 65, 66,
  67, 68, 69, 70, 71, 72, 92,
  91, 89, 92, 88, 92
]
pitches test/audio/scale2-piano.wav Float32Array(11) [
  60, 61, 62, 63, 64,
  65, 66, 67, 68, 69,
  70
]

What is going on? Is this a bug or an issue with my implementation?

How to remove p-multiselect filter from options with having search input

I want my primeng multiselect to have a search/filter input, which I added via
<p-multiselect [filter]="'true'" [options]="selectOptions"></p-multiselect>. And when user type value in filter input, I get new data with api, and refresh selectOptions. But p-multiselect is doing filter on my options, and shows options without some items.

Tell me please how can I have that filter input, without dafault filter function?

Now I just refresh that options data, but I dont get the result I wont

React remix middleware and database connection

Hi i am new to remix and am facing a problem that is remix don’t have a middleware before a loader function i guess. In express we have middleware’s to authenticate a user. So i am calling isAuth function in every loader and action function for authenticating.

 export let loader = async ({ request }) => {
  await isAuth(request);
  const users = await getAllUsers();

  return json({ users }, { status: 200 });
};

and also i am connecting my database in every util functions.

export const getAllUsers = async () => {
  await dbconnect();
  return await User.find();
};

export const getUser = async (id) => {
  await dbconnect();
  return await User.findById(id);
};

So is there a better way of doing it.

mui some styles not working on first load of app || on first time load reactjs app mui button styles not working on mui modal

I’m using "@mui/material": "^5.14.2","@mui/styles": "^5.14.13", on first load of modal button and autocomplete styles not working properly. Below is just example of modal I’m using, It rendered when the component rendered but the modal visible when open will true, one open mange by React.useState hook.

 <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <form onSubmit={handleSubmit}>
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "15px",
                  border: "0px solid blue",
                }}
              >
                <Typography
                  sx={{
                    color: "#2B2A2C",
                    fontSize: "30px",
                    fontWeight: 600,
                  }}
                >
                  Add Details
                </Typography>
                <TextField
                  sx={{ width: "100%" }}
                  label="Name"
                  name="name"
                  variant="outlined"
                />
                <TextField
                  sx={{ width: "100%" }}
                  label="password"
                  variant="outlined"
                  name="password"
                />
              </Box>
              <Box sx={{ width: "100%" }}>
                <Stack
                  direction={"row"}
                  justifyContent={"right"}
                  spacing={2}
                  sx={{ width: "100%" }}
                >
                  <Button
                    sx={{
                      borderRadius: "6px",
                      background: "#1E0D61",
                      color: "#fff",
                      textTransform: "none",
                      "&:hover": { background: "#220986" },
                    }}
                    type="submit"
                  >
                    Save
                  </Button>
                  <Button
                    onClick={handleClose}
                    sx={{
                      borderRadius: "6px",
                      background: "#FE9A25",
                      color: "#fff",
                      textTransform: "none",
                      "&:hover": { background: "#e9983c" },
                    }}
                  >
                    Cancel
                  </Button>
                </Stack>
              </Box>
            </form>
          </Box>
        </Modal>

when i fresh the app then all styles working properly,
please anyone help how can I resolve this issue,

at first load all mui style should work properly

how to focus on this TD javasript

my code is error td.textContent.focus is not a function

my function is like this

    var tds = document.querySelectorAll('td');
    [].forEach.call(tds, function(td) {
            
        if (td.textContent == ' Survey (Notes)') {
            td.textContent.focus();
        }
    });

when i use alert below condition of text.context is show a result
but when i’m using focus it’s show an error

i want to focus on that result when the page is loaded

thanks

Web Site track visitor but no cookies

Hi We don’t use cookies ourselves on our website except for links to Google maps and a contact form. I have been told we need a cookie disclaimer banner. Our visitors seem to land on various pages and what I don’t want is for the banner to appear on every other page they may browse through. Is it possible to “hold” the ip address ONLY during their visit and erase it when their session is completed. I don’t want to start using cookies. Any guidance would be appreciated.

react live soccer board with time

I am new to react, I am trying to call a sample api and build a live soccer score. But my time is not updating live without refresh, can you let me know how to update the time without refresh. Providing the stackblitz and code below. I looked at the console no errors, I am able to call the sample API. if you guys know any other better API also you can let me know

https://stackblitz.com/edit/react-9ypawr?file=src%2FApp.js,src%2Fstyle.css

import React, { useState, useEffect, useRef } from 'react';

const Scoreboard = () => {
  const [homeScore, setHomeScore] = useState(0);
  const [awayScore, setAwayScore] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          'https://jsonplaceholder.typicode.com/posts'
        );
        const data = await response.json();
        setHomeScore(data[0].id);
        setAwayScore(data[1].id);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  const timeInterval = useRef(null);

  useEffect(() => {
    if (!timeInterval.current) {
      timeInterval.current = setInterval(() => {
        updateTime(); // Call the updateTime function every second
      }, 1000);
    }

    return () => {
      clearInterval(timeInterval.current); // Clear the interval when the component unmounts
    };
  }, []);

  const updateTime = () => {
    const currentTime = new Date().toLocaleTimeString();
    const hours = new Date().getHours();
    const minutes = new Date().getMinutes();
    const seconds = new Date().getSeconds();

    const formattedTime = `${hours}:${minutes
      .toString()
      .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    document.getElementById(
      'home-time'
    ).textContent = `Last updated: ${formattedTime}`;
    document.getElementById(
      'away-time'
    ).textContent = `Last updated: ${formattedTime}`;
  };

  return (
    <div className="scoreboard">
      <div className="team">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f8/Barcelona_logo.svg/220px-Barcelona_logo.svg.png"
          alt="Barcelona logo"
        />
        <h1>Barcelona</h1>
        <h2>{homeScore}</h2>
        <p id="home-time">Last updated: 00:00:00</p>
      </div>

      <div className="team">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a2/Real_Madrid_CF.svg/220px-Real_Madrid_CF.svg.png"
          alt="Real Madrid logo"
        />
        <h1>Real Madrid</h1>
        <h2>{awayScore}</h2>
        <p id="away-time">Last updated: 00:00:00</p>
      </div>
    </div>
  );
};

export default Scoreboard;

Javascript Engine Optimization

If I have the following code in Javascript:

import getTranslation from "some-library";
import getUserSettings from "some-other-library";

const getTranslatedLabel = () => {
  const translatedLabel = getTranslation("cheeseburger");
  const { enableTranslatedLabels } = getUserSettings();

  if (enableTranslatedLabels) {
     return translatedLabel;
  } else {
     return "";
  }
}

Is a javascript engine like V8 smart enough to only execute the getTranslation function if enableTranslatedLabels is true?

Bootstrap v5.3.2 Offcanvas Feature Not Working Despite JS Inclusion

I’m encountering an issue with Bootstrap v5.3.2 where the Offcanvas feature isn’t functioning as expected. I’ve ensured that I’ve included Bootstrap’s JS script () in my HTML file, but the Offcanvas doesn’t work.

To troubleshoot, I attempted adding other JS bundles, but the problem persists. I’ve checked the browser console for errors, but there are no apparent issues reported.

Is there anything specific I should be aware of with Bootstrap v5.3.2’s Offcanvas implementation? I appreciate any insights or suggestions to resolve this problem.

How could I use Material You web in an HTML/Express project?

I would like to make a web application, and I would like to use Material You web for it, but I don’t want to have to use JavaScript or Node for it. I will use Node if I have to.

Is there any way for me to use Material 3 web without JavaScript or Node? If not, how would I use it in say an Express app?

Is there maybe a CDN link I could use? I’ve looked around and I can’t find one but that doesn’t mean it doesn’t exist.

I tried installing it via NPM, but I couldn’t figure out how to get it to work using Express, which is what I am using for my project.