Category: javascript

import React,{useState} from "react";


function Password(){

    const [pass,setPass] = useState("password")


    const handleclick =()=>{
        setPass(("password")? "text" : "password")
    
    }
    return(
        <div>
            Password:<span style={{position:"relative"}}><input type={pass} name="" id="" />
            <i onClick={handleclick} style={{position:"absolute", top:"6px" , right:"5px"}} class="fa-solid fa-eye"></i></span>
        </div>
    )
}

export default Password;

When i used the useState in react Js for password show and hide on icon click there are not working. I only show the password show once time but i need to show and hide it whenever click the icon

I need that when adding new data, the slider does not start spinning again, but continues adding new pages for new data, thanks in advance

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('http://localhost:8000/api/getData', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })

                const dataJson = await response.json()
                const groupKZ = []
                const groupRU = []

                const kz = dataJson.map(item => {
                    const {ret_ru_status, ...newItem} = item
                    return newItem
                })
                groupKZ.push(kz)

                const ru = dataJson.map(item => {
                    const {ret_status_kz, ...newItem} = item
                    return newItem
                })
                groupRU.push(ru)

                const all = [...groupKZ[0], ...groupRU[0]]

                setDataKZ(all)
            } catch (error) {
                console.error(error)
            }
        }
        fetchData()
    }, [])

    const Auto = withAutoplay(AwesomeSlider)

    return (
        <Auto play={true} cancelOnInteraction={false} interval={2000} bullets={false} buttons={false} infinite>
            {data.map((val, idx) => {
                return <div key={idx}>
                    text
                </div>
            })}
        </Auto>
    )

that is, I will have a function called every minute

Recently my boss ask me to fix bugs in our old website projects. Problem happened when I tried to silence website media when the website is hidden.
The old project used Howler.js as its audio player. This lib seem used the Web Audio APIs to handle music sources, so that there is no audio element can be handled. What’s worse is that some old projects’ source code is lost, so I cannot use Howler reference to control the global volume either.

So I want to find out if there is a way to control global Web Audio volume without specific AudioContext reference? Or at least find the audio context created inside the website?

I am new to typescript in nodejs i am have this error

import { Request, Response, NextFunction } from "express";
import * as jwt from "jsonwebtoken";

declare global {
  namespace Express {
    interface Request {
      data?: jwt.JwtPayload;
    }
  }
}

// Define a middleware function to validate JWT tokens
export const jwtMiddleware = (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  // Get the JWT token from the request headers
  const token = req.headers.authorization?.split(" ")[1];

  if (!token) {
    return res.status(401).json({ message: "No token provided" });
  }

  // Check if JWT_SECRET is defined
  if (!process.env.JWT_SECRET) {
    return res.status(500).json({ message: "JWT secret is not defined" });
  }

  // Verify and decode the token
  jwt.verify(
    token,
    process.env.JWT_SECRET,
    (err: jwt.VerifyErrors | null, decoded: jwt.JwtPayload | undefined) => {
      if (err) {
        return res
          .status(403)
          .json({ message: "Failed to authenticate token" });
      }

      // Store the decoded token in the request for further use
      req.data = decoded;
      console.log(req.data);
      next();
    }
  );
};

(err: jwt.VerifyErrors | null, decoded: jwt.JwtPayload | undefined) => {        

made nodejs application before without using typescript and never borther me but when using th etypescript this type is here this line show’s type error

No overload matches this call.
  The last overload gave the following error.
    Type '(err: VerifyErrors | null, decoded: JwtPayload | undefined) => Response<any, Record<string, any>> | undefined' has no properties in common with type 'VerifyOptions'.ts(2769)
index.d.ts(245, 17): The last overload is declared here.

how can i resolve it

i want know how resolve this type error

I have a React component created using Material-UI (MUI) that I’m trying to make mobile responsive. Currently, it looks like this:

But I want it to look like this

Here’s the relevant code for the component:

import React from 'react';
import {
  Box, Paper, useMediaQuery, useTheme, Typography, Grid, Container, Accordion, AccordionSummary, AccordionDetails, Rating,
} from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Link } from 'react-router-dom';
import LocationOnIcon from './SVGiCON';


export const CarInfo: React.FC = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const [state, setState] = React.useState({
    gilad: false,
    jason: false,
    antoine: false,
  });

  const [expanded, setExpanded] = React.useState(false);
  const [ratings, setRatings] = React.useState<number[]>([4, 5, 3, 4.5]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,
      [event.target.name]: event.target.checked,
    });
  };

  const handleExpandToggle = () => {
    setExpanded(!expanded);
  };

  const { gilad, jason, antoine } = state;
  const [value, setValue] = React.useState<number | null>(2);


  return (
    <Container>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        height="150vh"
      >
        <Paper
          elevation={3}
          sx={{
            p: 3,
            borderRadius: 2,
            textAlign: 'center',
            maxWidth: isMobile ? '100%' : 'xl',
            width: '1100px',
            height: '1000px',
            backgroundColor: 'grey !important',
          }}
        >
          {/* Car Title */}
          <Typography variant="h4" gutterBottom color={'white'}>
            Car Title
          </Typography>

          <Grid container spacing={2} alignItems="center" justifyContent="center">
            <Grid item xs={12} md={6} lg={6} xl={6}>
              {/* Add your car details here */}
              <Typography variant="body1" align="left">
                Собственик{' '}
                <Link to="/home" style={{ textDecoration: 'none', marginLeft: '10px' }}>
                  <span style={{
                    color: 'black', backgroundColor: 'green', borderRadius: '50px', padding: '10px',
                  }}>
                    Александър Иванов
                  </span>
                </Link>
              </Typography>

              <Typography variant="body1" align="left" style={{ marginLeft: '40px', marginTop: '20px', marginBottom: '20px' }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                Костинброд, София-област
              </Typography>

              <Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
                Детайли за колата:
              </Typography>

              <Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                Бензин
              </Typography>

              <Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                Черен
              </Typography>

              <Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                2022 г.
              </Typography>

              <Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                90 000 км
              </Typography>

              <FormGroup style={{ marginLeft: '40px', marginTop: '11px' }}>
                <FormControlLabel
                  style={{ marginBottom: '-10px', color: "black" }}
                  control={
                    <Checkbox
                      checked={gilad}
                      onChange={handleChange}
                      name="gilad"
                      size='small'
                      style={{ color: 'black' }} />
                  }
                  label="Реален пробег"
                />
                <FormControlLabel
                  style={{ color: "black" }}
                  control={
                    <Checkbox checked={jason}
                      onChange={handleChange}
                      name="jason"
                      size='small'
                      style={{ color: 'black' }} />
                  }
                  label="Първи собственик"
                />
              </FormGroup>

            </Grid>


            {/* Car Image (on the right for larger screens) */}
            <Grid item xs={12} md={6} lg={6} xl={6}>
              {/* Add your image component here */}
              <img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Car" style={{ width: '482px', height: '279px', marginRight: '50px' }} />
            </Grid>
          </Grid>

          <Typography variant="body1" align="left" style={{ marginLeft: '40px', marginTop: '40px' }}>
            Лиценз
          </Typography>

          <Grid container spacing={2} alignItems="flex-start" justifyContent="center">
            <Grid item xs={12} md={6}>
              <Box
                sx={{
                  position: 'relative',
                  width: '100%',
                  paddingTop: '56.25%', // 16:9 aspect ratio (modify as needed)
                  overflow: 'hidden',
                }}
              >
                {/* Add your car details here */}
                <img src="https://images.pexels.com/photos/533669/pexels-photo-533669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Car"
                  // style={{
                  // width: '454px', height: '331px', marginLeft: '40px', marginTop: '20px',
                // }} />
                  style={{
                    position: 'absolute',
                    top: 20,
                    borderRadius: 0,
                    left: 40,
                    width: '100%',
                    height: '100%',
                    objectFit: 'cover', // or 'contain' depending on your preference
                  }} />
              </Box>
            </Grid>

            {/* Car Image (on the right for larger screens) */}
            <Grid item xs={12} md={6} lg={6} xl={6} container style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
              {/* Add your image component here */}
              <Typography variant="body1" align="left" style={{ alignSelf: 'flex-start', marginTop: '20px' }}>
                Линк към документа{' '}
              </Typography>

              <Typography variant="body1" align="left" style={{ alignSelf: 'flex-start', marginTop: '20px', wordBreak: 'break-all' }}>
                <a href="https://en.wikipedia.org/wiki/Vehicle_registration_certificate#/media/File:1917_auto_registration_license.jpg" target="_blank" rel="noopener noreferrer">
                  https://en.wikipedia.org/wiki/Vehicle_registration_certificate#/media/File:1917_auto_registration_license.jpg
                </a>
              </Typography>
            </Grid>
          </Grid>

          <Grid item xs={12} md={6} lg={6} xl={6}>
            {/* ... (Existing code) ... */}

            {/* Expandable Rating Section */}
            <Accordion expanded={expanded}
              onChange={handleExpandToggle}
              style={{
              marginTop: '20px', width: '400px', textAlign: 'left', marginLeft: '40px', backgroundColor: 'transparent',
            }}>
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1bh-content"
                id="panel1bh-header"
            >
                <Typography variant="body1">Рейтинг</Typography>
              </AccordionSummary>
              <AccordionDetails>
                <div>
                  <Rating name="read-only" value={value} readOnly size="large" />
                </div>
                <div>
                  <Rating name="read-only" value={value} readOnly size="large" />
                </div>
              </AccordionDetails>
            </Accordion>
          </Grid>

          <Grid item xs={12} md={6} lg={6} xl={6}>
            {/* ... (Existing code) ... */}

            {/* Expandable Rating Section */}
            <Accordion expanded={expanded}
              onChange={handleExpandToggle}
              style={{
              marginTop: '20px', width: '400px', textAlign: 'left', marginLeft: '40px', backgroundColor: 'transparent',
            }}>
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1bh-content"
                id="panel1bh-header"
            >
                <Typography variant="body1">Коментари</Typography>
              </AccordionSummary>
              <AccordionDetails>
                <div>
                  <Rating name="read-only" value={value} readOnly size="large" />
                </div>
                <div>
                  <Rating name="read-only" value={value} readOnly size="large" />
                </div>
              </AccordionDetails>
            </Accordion>
          </Grid>
        </Paper>
      </Box>
    </Container>
  );
};
export default CarInfo;

I’ve tried a lot of different things, but I’m facing challenges achieving the desired mobile responsiveness. Can someone provide guidance on how to structure the styles or any MUI-specific considerations to achieve the desired mobile layout?

Any help or suggestions would be greatly appreciated. Thank you!

I have the following module class and to make it work similar to non module functional javascript, I have to bind all the functions to the correct this scope and explicitly use this for class members.

previous javascript:

var globalVariable = 10;
var button = document.getElementById("button");
button.addEventListener("click", buttonClicked); 
function buttonClicked(event) {
    var newValue = globalVariable + globalVariable;
    alert("Hello world");
}

The same thing in a module class is the following:

export App class {
    classVariable = 10;
    button = null;

    constructor() {

      try {
         this.bindProperties(App);
         this.button = document.getElementById("button");
         this.button.addEventListener("click", this.buttonClicked);
      }
      catch(error) {
         this.log(error);
      }
   }

   buttonClicked(event) {
      var newValue = this.globalVariable + this.globalVariable;
      alert("Hello world");
   }

   bindProperties(mainClass) {
      var properties = Object.getOwnPropertyNames(mainClass.prototype);
      for (var key in properties) {
         var property = properties[key]
         if (property!=="constructor") {
            this[property] = this[property].bind(this);
         }
      }
   }
}

What I’d like to know is if there is a setting to allow this:

export App class {
    classVariable = 10;
    button = null;

    constructor() {

      try {
         button = document.getElementById("button");
         button.addEventListener("click", buttonClicked);
      }
      catch(error) {
         console.log(error);
      }
   }

   buttonClicked(event) {
      var newValue = globalVariable + globalVariable;
      alert("Hello world");
   }
}

Basically, is there an option to remove the need for adding this and for binding this class members.

I’m using typescript it is aware of or by default adds this to any class members with code complete. And it flags it if it doesn’t have it.

The confusing part for newbies might be the need to bind the this on class modules. But maybe I’m missing something.

Also, side note, possibly because of the binding method above, the super class members do not call the subclass members if the sub class method is extended.

So if baseclass.log() is called and app class extends base class the base class method is called and not the class method that extends it. But that’s another issue (but related).

I am working on a project where I need to implement a single-row calendar layout, and I have a specific design in mind. I have an image that illustrates the desired result, and I’m struggling to figure out the best approach to achieve this.

The image shows a calendar with a single row, displaying days horizontally. Each month has its corresponding days, and the layout spans across the screen horizontally. I’m using PHP, and I’m unsure about the best way to structure the HTML and CSS to achieve this responsive and visually appealing layout.

Using dayJs, i want to disable overflow e.g :

-> 32-12-2023 16:00 //invalid with format dd-mm-yyyy HH:ss

We can do this using strict mode = true :

dayjs(date, format, true);

But in this case, this date becomes invalid :

-> 3-12-2023 16:00 //invalid

Can I keep a flexible format while disabling overflow ?

Thank you

I’m not really expert at javascript, but i have a school project where i need to use python flask to make a website.
the problem is that when i input on html, i put the value on javascript array, and then i need to send it to python where i can process the data. Anyone knows how?

Here’s the code:
HTML:

<html>
   <head>
      <title>4 Years</title>
      <meta name='viewport' content='width=device-width, initial-scale=1'>
      <script src="https://kit.fontawesome.com/7006f68f03.js" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="static/category.css">
   </head>
   <body>
      <img src="static/test.jpeg" height="70">
      <hr>
      <form class="content" action="/category/list" method="post" id="myform">
         <div class="genres-input">
            Genres:
            <div class="genres-box">
               <ul id="genreul">
                  <input class="input-text" type="text" name="genres" list="genre">
               </ul>
               <datalist id="genre">
                  <option value="Action"></option>
                  <option value="Adventure"></option>
                  <option value="Animation"></option>
                  <option value="Biography"></option>
                  <option value="Comedy"></option>
                  <option value="Crime"></option>
                  <option value="Documentary"></option>
                  <option value="Drama"></option>
                  <option value="Family"></option>
                  <option value="Fantasy"></option>
                  <option value="Film-Noir"></option>
                  <option value="Game-Show"></option>
                  <option value="History"></option>
                  <option value="Horror"></option>
                  <option value="Music"></option>
                  <option value="Musical"></option>
                  <option value="Mystery"></option>
                  <option value="News"></option>
                  <option value="Reality-TV"></option>
                  <option value="Romance"></option>
                  <option value="Sci-Fi"></option>
                  <option value="Short"></option>
                  <option value="Sport"></option>
                  <option value="Talk-Show"></option>
                  <option value="Thriller"></option>
                  <option value="War"></option>
                  <option value="Western"></option>
               </datalist>
            </div>
         </div>
         <div class="age-input">
            Ages:
            <div class="ages-box">
               <input class="input-text" type="number" name="ages" placeholder=" 0 - 99" min="0" max="99">
            </div>
         </div>
         <div class="keywords-input">
            Keywords:
            <div class="keywords-box">
               <ul id="keyul">
                  <input class="input-text" type="text" name="keywords">
               </ul>
            </div>
         </div>
         <div class="type-input">
            Types:
            <div class="types-box">
               <input class="input-text" type="text" name="types" list="type">
               <datalist id="type">
                  <option value="Movie"></option>
                  <option value="TV Series"></option>
                  <option value="Short"></option>
                  <option value="TV Episode"></option>
                  <option value="TV Mini Series"></option>
                  <option value="TV Movie"></option>
                  <option value="TV Special"></option>
                  <option value="TV Short"></option>
                  <option value="Video Game"></option>
                  <option value="Video"></option>
                  <option value="Music Video"></option>
                  <option value="Podcast Series"></option>
                  <option value="Podcast Episode"></option>
            </div>
         </div>
         <div class="search">
            <input class="submit" onclick="search_value()" type="button" name="search" value="Search">
         </div>
      </form>
      <script src="static/category.js"></script>
      <script src="static/disable_enter.js"></script>
   </body>
</html>

JS:

var ul1 = document.querySelector("ul#genreul"),
input1 = ul1.querySelector("input");
let genre_list = [];
var ul2 = document.querySelector("ul#keyul"),
input2 = ul2.querySelector("input");
let keyword_list = [];
function createTag1(){
   ul1.querySelectorAll("li#genres").forEach(li => li.remove());
   console.log(keyword_list.slice().reverse());
   genre_list.slice().reverse().forEach(genre =>{
      let liTag1 = `<li id='genres'>${genre} <i class="fa-solid fa-x" onclick="remove1(this,'${genre}')"></i></li>`;
      ul1.insertAdjacentHTML("afterbegin", liTag1);
   });
}
function createTag2(){
   ul2.querySelectorAll("li#keywords").forEach(li => li.remove());
   console.log(keyword_list.slice().reverse());
   keyword_list.slice().reverse().forEach(keyword =>{
      let liTag2 = `<li id='keywords'>${keyword} <i class="fa-solid fa-x" onclick="remove2(this,'${keyword}')"></i></li>`;
      ul2.insertAdjacentHTML("afterbegin", liTag2);
   });
}
function remove1(element, genre){
   let index1 = genre_list.indexOf(genre);
   genre_list = [...genre_list.slice(0, index1), ...genre_list.slice(index1 + 1)];
   element.parentElement.remove();
}
function remove2(element, keyword){
   let index2 = keyword_list.indexOf(keyword);
   keyword_list = [...keyword_list.slice(0, index2), ...keyword_list.slice(index2 + 1)];
   element.parentElement.remove();
}
function addTag1(e){
   if(e.key == "Enter"){
      let genre = e.target.value.replace(/s+/g, ' ').replace(',','');
      if(genre.length > 1 && !genre_list.includes(genre)){
         genre_list.push(genre);
         createTag1();
      }
      e.target.value = "";
   }
}
function addTag2(e){
   if(e.key == "Enter"){
      let keyword = e.target.value.replace(/s+/g, ' ').replace(',','');
      if(keyword.length > 1 && !keyword_list.includes(keyword)){
         keyword_list.push(keyword);
         createTag2();
      }
      e.target.value = "";
   }
}
function search_value() {
   console.log(genre_list);
   console.log(keyword_list);
   document.getElementById("myform").submit();
}
input1.addEventListener("keyup", addTag1);
input2.addEventListener("keyup", addTag2);

Python:

from flask import Blueprint,request,render_template
Category = Blueprint('category',__name__,static_folder='static',template_folder='templates')
@Category.route('/category')
def category_html():return render_template('category.html')
@Category.route('/category/list',methods=['POST','GET'])
def category_value():
   #genre =
   ages = request.form["ages"]
   #keyword = 
   types = request.form['types']
   print(ages,types)
   return render_template('list.html',text2=ages,text4=types)

from what i researched, i’ve tried to using xmlhttprequest(), but it seems didn’t work well

Changed JS:

var ul1 = document.querySelector("ul#genreul"),
input1 = ul1.querySelector("input");
let genre_list = [];
var ul2 = document.querySelector("ul#keyul"),
input2 = ul2.querySelector("input");
let keyword_list = [];
function createTag1(){
   ul1.querySelectorAll("li#genres").forEach(li => li.remove());
   console.log(keyword_list.slice().reverse());
   genre_list.slice().reverse().forEach(genre =>{
      let liTag1 = `<li id='genres'>${genre} <i class="fa-solid fa-x" onclick="remove1(this,'${genre}')"></i></li>`;
      ul1.insertAdjacentHTML("afterbegin", liTag1);
   });
}
function createTag2(){
   ul2.querySelectorAll("li#keywords").forEach(li => li.remove());
   console.log(keyword_list.slice().reverse());
   keyword_list.slice().reverse().forEach(keyword =>{
      let liTag2 = `<li id='keywords'>${keyword} <i class="fa-solid fa-x" onclick="remove2(this,'${keyword}')"></i></li>`;
      ul2.insertAdjacentHTML("afterbegin", liTag2);
   });
}
function remove1(element, genre){
   let index1 = genre_list.indexOf(genre);
   genre_list = [...genre_list.slice(0, index1), ...genre_list.slice(index1 + 1)];
   element.parentElement.remove();
}
function remove2(element, keyword){
   let index2 = keyword_list.indexOf(keyword);
   keyword_list = [...keyword_list.slice(0, index2), ...keyword_list.slice(index2 + 1)];
   element.parentElement.remove();
}
function addTag1(e){
   if(e.key == "Enter"){
      let genre = e.target.value.replace(/s+/g, ' ').replace(',','');
      if(genre.length > 1 && !genre_list.includes(genre)){
         genre_list.push(genre);
         createTag1();
      }
      e.target.value = "";
   }
}
function addTag2(e){
   if(e.key == "Enter"){
      let keyword = e.target.value.replace(/s+/g, ' ').replace(',','');
      if(keyword.length > 1 && !keyword_list.includes(keyword)){
         keyword_list.push(keyword);
         createTag2();
      }
      e.target.value = "";
   }
}
function search_value() {
   console.log(genre_list);
   console.log(keyword_list);
   var xhr = new XMLHttpRequest();
   var url = 'http://127.0.0.1:5000/category';
   xhr.open('POST', url, true);
   xhr.setRequestHeader('Content-Type', 'application/json');
   var jsonData = JSON.stringify({ data: genre_list });
   xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
         console.log(xhr.responseText);
      }
   };
   xhr.send(jsonData);
 }
 
 document.getElementById("myform").addEventListener("submit", search_value);
 input1.addEventListener("keyup", addTag1);
 input2.addEventListener("keyup", addTag2);

Changed Python:

from flask import Blueprint,request,render_template
Category = Blueprint('category',__name__,static_folder='static',template_folder='templates')
@Category.route('/category')
def category_html():return render_template('category.html')
@Category.route('/category/list',methods=['POST','GET'])
def category_value():
   genre = request.get_json(force=True)
   print(genre)
   ages = request.form["ages"]
   #keyword = 
   types = request.form['types']
   print(ages,types)
   return render_template('list.html',text2=ages,text4=types)

What could cause queryselector to not find an element in such a scenario

function load_home(){
    //this function has a lot of fetch calls and creates a lot of divs
}

document.addEventListener("DOMContentLoaded", ()=>{
    load_home();

    let divs = document.querySelectorAll("div"); //doesnt contain any of the divs that should have                 been created
    console.log("Count", divs.length); 
})

i have something similar to the above…. i call a function, load_home when the DOM is loaded that creates some divs… on the next line i try to count the divs on the page… but i cant find all the divs that have been created in load_home …

assuming load home functions properly, and i properly query for all the divs on the page, what could cause me to not find the divs created in load_home ?

really, i want to know if there are any feature in javascript that could cause such a thing ie and I’m just making stuff up here maybe functions with fetch calls run on another thread (dont even really know what these are) and as such load_home might not be done yet or the DOMContentLoaded has some weird feature that wont let what I’m doing work or maybe fetch calls cause some unexpected behaviour or created stuff cant be accessed normally in EventListeners ?….

Background:
I’m building a web application using Vue 2 and Leaflet. I’m trying to share a single Leaflet map instance across multiple components in my application.

Issue:
I’m looking for a way to create a Leaflet map instance in one place and access and use it across multiple components in the entire application.

Code Example:
This is a method I have tried, but I don’t know if this way of writing is appropriate. Maybe there is a better way:

App.vue

  provide() {
    return {
      parent: this
    };
  },
  mounted() {
 this.map = L.map('map',{})
}

components

 inject: ["parent"]

Is there a more appropriate way?

I’m trying to set the persistence to ‘Session’ using typescript/react, but getting type errors.

Here is some of code:

import { auth } from "../auth/firebase";
import {
  createUserWithEmailAndPassword,
  sendPasswordResetEmail,
  setPersistence,
  signInWithCustomToken,
  signInWithEmailAndPassword,
  updateProfile,
} from "firebase/auth";

This is my useEffect:

  useEffect(() => {
    console.log("here useEffect");
  
    auth.setPersistence(auth.Auth.SESSION.NONE); //Property 'Auth' does not exist on type 'Auth'.

    const unsubscribe = auth.onAuthStateChanged((user: any) => //this works fine

I tried a different solution I found here, that looked like this:

setPersistence(auth, {type: 'LOCAL'});

This didn’t work either.

I am working on a cache buster where the query parameter would be the last modified date of my js file.
But I am having some trouble getting the last modified date of my js file.

I have tried File() constructor and tried to use it’s lastModified property:

const file = new File([], "index.js");
    let script = document.getElementById('my-js');
    script.setAttribute('src', `index.js?v=${file.lastModified}`);

But I soon figured out that it won’t work because, if you don’t set the lastModified attribute of the File() constructor, it will assign the lastModified attributw to be Date.now().

This is not what I am looking for as I would still like to store the js file on cache unless any modifications have been made to the file but my current code will refresh cache every time the page is reloaded.

How can I create a status features just like the one on WhatsApp using html css JavaScript.

I tried making it in a way that the user can click on a status and it will open and show the full picture or video and for it to move to the next one just like the one in whatsapp.

I’m looking for guidance on deploying my web application with Apache. Currently, I have server and client parts connected via localhost and ports. Although it might be a basic question, my experience with Apache is limited, and I’d appreciate any advice or recommended articles to implement this effectively. I assume I need at least two Apache services for communication between the two parties, but I’m not entirely sure.

I assume I need at least two Apache services for communication between the two parties