Material-ui (@Mui) Theming how does it work behind the scenes passing functions to theme?

under this link: https://mui.com/styles/advanced/#theme-nesting I found a guide to customize theming…
I was just wondering about that code part:

 <ThemeProvider
          theme={(outerTheme) => ({
            ...outerTheme,
            background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
            boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',
          })}
        >

Where you basically pass a function callback to the theme property, that returns an object (with the old ...outertheme props passed to the function and getting destructured and extended..)

I was wondering how was that construct called again and how does it work behind the scenes? I think there was somethign similar in React called render props, where you pass a function to a component property that returns a JSX Expression, but that function gets passed some property from the parent component, that gets that function passed as a child and executes the function but passes additional parameters beforehand to the function as the render props. Is that right?

<Component someThing={property => (<p>This is some {property}</p>)} />

and in Component:

({someThing}) => (...create `property`, return (someThing(property)))

Editing a csv file into a customized kml archive

I’m trying to modify a .csv file to get a custom .kml file using javascript (I don’t almost nothing about programming) that displays the flight path of an aircraft with the altitude. I made the editting of the .csv manually (with Excel and others online tools) and I got this result:
Google Earth path view
The .csv look like this (but with much more lines):

latitude,longitude,altitude_feet,altitude_meters,speed_kmh,speed_kts,speed_mph,verticalSpeed_fpm,verticalSpeed_ms,heading,squawk,timestamp
-15.661926,-56.111912,0,0,5.6,3,3.5,0,0,326,0,1639064757
-15.661674,-56.112057,0,0,38.9,21,24.2,0,0,331,0,1639064777
-15.661263,-56.112274,0,0,68.5,37,42.6,0,0,334,0,1639064781
-15.661057,-56.112381,0,0,79.6,43,49.5,0,0,334,0,1639064782
-15.660778,-56.112537,0,0,92.6,50,57.5,0,0,334,0,1639064783

To make the .csv I just need the “latitude”, “longitude”, “altitude_meters” and “timestamp” columns.
For these columns to go in the .kml file they need to be edited and arranged in the following format:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">
<Document>
    <name>AZU4534 10/12/2021 (SBCY-SBAT)</name>
    <Placemark>
        <name>SBCY Airport</name>
        <Point>
            <coordinates>-56.116719,-15.652931,0</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>SBAT Airport</name>
        <Point>
            <coordinates>-56.106206,-9.866092,0</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>AZU4534</name>
        <description>SBCY-SBAT</description>
        <gx:Track>
            <extrude>1</extrude>
            <tessellate>1</tessellate>
            <altitudeMode>absolute</altitudeMode>
            <when>2021-12-10T11:41:52Z</when>
            <when>2021-12-10T11:41:57Z</when>
            <when>2021-12-10T11:42:02Z</when>
            <when>2021-12-10T11:42:05Z</when>
            <when>2021-12-10T11:42:10Z</when>
            <gx:coord>-56.117455 -15.651947 0</gx:coord>
            <gx:coord>-56.117249 -15.652027 0</gx:coord>
            <gx:coord>-56.117085 -15.652247 0</gx:coord>
            <gx:coord>-56.116959 -15.652451 0</gx:coord>
            <gx:coord>-56.116814 -15.652748 0</gx:coord>
        </gx:Track>
    </Placemark>
</Document>
</kml>

First part: the data and time
In the .kml file the “timestamp” column must be converted to a readable date (I think that with a math formula I can do that, but I don”t know to make this in javascript) in the following format: the date in yyyy-mm-dd, followed by a “T”, followed by the hour in hh-mm-ss, followed by a “Z”. All of this, in betweeen “<when>” and “</when>“.

Second part: coordinates and altitude
For the coordinates and altitude, it must follow this format: first comes the longitude, followed by a space, followed by the longitude, followed by another space, followed by the altitude. And again, all of this in between “<gx:coord>” and “</gx:coord>“.

So, any tips on how can I don that with javascript?

All I have now is a modification of an existing javascript: The “flightradar24-to-csv” by LuisSevillano (https://github.com/LuisSevillano/flightradar24-to-csv). And I would like to make a modification so that .kml file can be automatically generated.

What is “illegal invocation” error that stops my program from working?

I was developing a program in JavaScript, when each time the button is pressed the image should alternate on each press- if it is currently the “box open” image, it should switch to the “box closed” image.Similarly, if it is currently on closed, it should witch to the “box open”. I am however facing an “illegal invocation” error How can this be solves?

var jackbox = document.getElementById("jackbox");                                               
                                                
  function click()                                              
  {                                             
    if (this.id == "Jump out,Jack!")                                                
    {                                               
      document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";                                              
                                                
    }                                               
    else(this.id == "Jump out,Jack")                                                
    {                                               
      document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";                                              
                                                
    }                                               
                                                
  }                                             
                                                
document.getElementById("toggle").onclick = open;
<div style="text-align: center; height: 280px;">
    <img id="jackbox" src="https://www.paulneve.com/pp/jackbox-closed.jpg" />
    <br/>
    <button id="toggle">Jump out, Jack!</button>
</div>

creating a map for a field in the class

how do I build a timeTable field?

I currently have:

timeTable = (HourScheduleDefinitionModel[])[];

e.g.

[
  {
  day: '0',
  timeline: [
      { from: '01:00', to: '02:00' },
      { from: '20:00', to: '22:00' }
    ]
  },
  {
    day: '1',
    timeline: [ { from: '01:00', to: '04:00' }, { from: '20:00', to: '21:00' } ]
  }
]

and I want to

timeTable: Map<number, Array<HourScheduleDefinitionModel>>;

e.g.

{
0: [{from: '00:00', to: '23:00'}],
1: [{from:'00:00', to:'10:00'},{from:'14:00', to:'16:00'}]
}

the save button shows it
https://stackblitz.com/edit/angular-ivy-slrmqc?fbclid=IwAR3mZbHjz8TkLUZJI1kd7gsMnaPikdS0eyGzdF17RPYJ70jyHhXMOzW8x3w&file=src%2Fapp%2Fapp.component.ts

creating a new element with addEventListener and innerHTML doesnt work

I’m very new to javascript and I can’t find my mistake. I have an input field and I want to display the value entered in the input field in the section below, once the button is clicked.

I’ve added a click event listener on the button and tried to write a function, which would create a new p element, after the button is clicked, but that doesnt work.

"use strict";

let button = document.getElementById('btn');

button.addEventListener("click", function() {
    let answer = document.createElement('p');
    let input = document.getElementById('input').value;
    answer.innerHTML = "<p>" + input.value;
    console.log('log for testing')
})
body {
    margin: 0 auto;
    background-color: rgb(149, 199, 255);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
    background-color: rgb(14, 131, 240);
    height: 170px;
    width: 100%;
    position: fixed;
}

h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    letter-spacing: 2px;
    font-size: 30px;
}

#input {
    display: inline;
    width: 400px;
    border-radius: 8px;
    border: none;
    height: 40px;
    margin-right: 2px;
    padding-left: 8px;
    margin-left: 10px;
}

#btn {
    font-size: 24px;
    border: none;
    height: 42px;
    width: 42px;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.3s;
}

#btn:hover {
    cursor: pointer;
}

#btn:active {
    background-color: rgb(201, 199, 199);
}

form {
    display: inline-flex;
}

section div {
    background-color: rgb(157, 157, 240);
    height: 100%;
    width: 444px;
    color: white;
    top: 200px;
    position: fixed;
    margin: 0;
    border-radius: 8px;
    padding: 8px;
    margin-left: 10px;
}    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>input to innerHTML</title>
</head>
<body>
    <header>
        <h2>Enter your text below</h2>
        <form id="form">    
            <input id="input" type="text" placeholder="Write something here...">
            <button id="btn" type="button"> + </button>
        </form>
    </header>
    <main>
        <section>
        <div id="answer-section">
            <p></p> <!-- all the answers should go here -->
        </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

Can anybody see my mistake or point me to the right direction? Any help would be much appreciated, thanks.

why the local host debugging still cross origin after using Http-proxy-middleware

I want to debugging in the localhost:3000 port when develop a react app, my server api address is admin.example.com, I config like this in the project src/setupProxy.js file:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(createProxyMiddleware('//manage/?$/', 
  { 
    target: 'https://admin.example.com/',
    changeOrigin: true
  }));
};

but when I start the app, still give me tips that the XHR was cross origin. what should I do to make it work? Am I missing something? this is the http-proxy-middleware version "http-proxy-middleware": "^2.0.1". the full request url is: https://admin.example.com/manage/dashboard/overview.

Close other div when new div is opened (in forloop.counter)

I am trying to close the other div when I open a new div, But I am using in loop so I used forloop.counter But it is not working. And when I try to use without forloop.counter or outside the loop then it is working fine, but I want to use inside the for loop.

page.html


{% for result in results %}

    <button class="open-div-button" onclick="openDiv-{{forloop.counter}});">Open Div</button>

    <div class="div-content" id="content-{{forloop.counter}}">Content Goes Here</div>

{% endfor %}



<script>

    function openDiv(id) {
        let model = document.getElementById(`openDiv-${id}`);
        model.classList.toggle("active");
    }

</script>

<style>

    .content {
        padding: 10px 20px;
        display: none;
        background-color: #f1f1f1;
    }

    .content.active {
        padding: 10px 20px;
        display: block;
        background-color: #f1f1f1;
    }

</style>

I have also tried using forEach like :-

function openDiv(id) {
    let model = document.getElementById(`openDiv-${id}`);
  document.querySelectorAll(`openDiv-${id}`).forEach(function(div) {
    if (div.id == id) {
      model.classList.toggle("active");
    } else {
      model.classList.toggle("active");
    }
  });
}

but it is not working and it is not showing any error.

What I am trying to do?

I am trying to close active div when new div is open in for loop.

I have tried many times but it didn’t work. I seen many questions, but unfortunately I didn’t find any of them for forloop.counter. Any help would be much Appreciated. Thank You in Advance.

Media queries on Javascript isnt working here

Why isn’t the @media query working here?
how to fix it?
What’s wrong with the media queries?

const Size = {
  laptop: "1024px",
  laptopL: "1440px"
}

const Device = {
  laptop: `only screen and max-width: ${Size.laptop}`,
  laptopL: `only screen and max-width: ${Size.laptopL}`,
};

const GlobalStyle = createGlobalStyle `
  body{
    background: url(${BackgroundImage}) no-repeat center center/100% 100% fixed;
  }
  @media ${Device.laptop} {
    body{
      background-size: cover;
    }
  }
`;

Why is my code not working properly on other devices?

I’m made a simple javascript script and work well

Here is the code

var input = prompt("Input Your Text: ")
    if(input == "input1") {
        console.log("Input 1")
    } else if (input == "input2") {
        console.log("Input 2")
    } else {
        console.log("Another Input : " + input)
    }
  • if i enter “input1” it will output

Input 1

  • if i enter “my input” it will output

Another Input : my input

The problem is

When my friend in Russia enter “input1” it will output

Another Input : input1

And not

Input 1

Why does this happen?,
and how i fix it?

I really appreciate your answer

Pass URL parameters into the 3rd page of the funnel

We have a optin page in clickfunnels where we collect user email address & name. This information is passed into the 2nd page of the funnel through URL parameters when the user submits. Like “mydomain.com/secondpage?cf_uvid=d1def16b1797acafa8c76348cc250104”, here the parameter is “?cf_uvid=d1def16b1797acafa8c76348cc250104”.

There’s a button on the second page only which sends the user to the 3rd page of the funnel. But unfortunately, the parameters don’t get passed onto the 3rd page. I need a script or a button code that’ll collect the parameters and send it to the 3rd page when someone clicks on it.

Thanks in advance.

React: Why the count values are different in useEffect and inc event handler?

In the below code snippet, the component is rendered thrice when user clicks on the button but the count values remain the same.

import React, { useEffect } from 'react';

const wait = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 2000);
  });

export default function App() {
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    console.log('rerendered');
    console.log(count);
  });

  const inc = async () => {
    setCount(count + 1);
    setCount(count + 5);

    await wait();

    console.log(count);
    setCount(count + 1);
    console.log(count);
    setCount(count + 2);
    console.log(count);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={inc}>Increment</button>
    </div>
  );
}

I know that first two setCount() are batched and after await they are not batched. If I use setCount(prev => prev +1), I will get the updated values but my question is

Why are the count values different in inc() and useEffect()? When does the count value actually changes coz certainly not on re-render?

TypeError: Cannot read properties of undefined (reading ‘catch’)

I am trying to get channel with an id or mention, the code itself works but when user gives wrong ID it says: TypeError: Cannot read properties of undefined (reading ‘catch’)

Can anyone help me?

I tried this:

message.guild.channels.cache.find(channel => channel.id == args[0]).catch(err => {});

And this:

message.guild.channels.cache.get(args[0]).catch(err => {});

These both things give me error.

Heres the code:

if (args[0].startsWith("<#")) channel = message.mentions.channels.first();
        else channel = message.guild.channels.cache.get(args[0]).catch(err => {
    //do stuff
    })
    

OnChange not working for dropdown & radioButton

I am trying to build the signup form. I have created the onChange fn to store the values( credentials) in a state. All the textfield values are stored correctly but the selected dropdown value and radiobutton value is not getting reflected when I console the state value.

Here credentials = {
name: texfield,
email: texfield,
password: texfield,
confmpassword: texfield,
role: radiobutton,
forgetQues: dropdown,
forgetAns: texfield,
}

Below is the code

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const SignupPage = () => {
  const navigate = useNavigate();

  const goToLogin = () => {
    navigate("/login");
  };

  const [credentials, setCredentials] = useState({
    name: "",
    email: "",
    password: "",
    confmpassword: "",
    role: "",
    forgetQues: "",
    forgetAns: "",
  });

  const onChange = (e, key) => {
    setCredentials((prevCredentials) => ({
      ...prevCredentials,
      [key]: e.target.value,
    }));
    //console.log(credentials);
  };

  return (
    <>
      <div className="container my-3">
        <div id="loginbody">
          <div className="mt-3">
            <h2 className="my-3 display-3">Create your account here </h2>
            <form className="login-form p-5">
              <div className="mb-3">
                <label htmlFor="name" className="form-label">
                  Name
                </label>
                <input
                  type="text"
                  className="form-control"
                  id="name"
                  name="name"
                  value={credentials.name}
                  onChange={(e) => onChange(e, "name")}
                  aria-describedby="emailHelp"
                />
              </div>

              <div className="mb-3">
                <label htmlFor="email" className="form-label">
                  Email{" "}
                </label>
                <input
                  type="email"
                  className="form-control"
                  id="email"
                  name="email"
                  value={credentials.email}
                  onChange={(e) => onChange(e, "email")}
                  aria-describedby="emailHelp"
                />
              </div>

              <div className="mb-3">
                <label htmlFor="password" className="form-label">
                  Password
                </label>
                <input
                  type="password"
                  className="form-control"
                  id="password"
                  name="password"
                  minLength={5}
                  value={credentials.password}
                  onChange={(e) => onChange(e, "password")}
                  required
                />
              </div>
              <div className="mb-3">
                <label htmlFor="confmpassword" className="form-label">
                  Confirm Password
                </label>
                <input
                  type="password"
                  className="form-control"
                  id="confmpassword"
                  name="confmpassword"
                  value={credentials.confmpassword}
                  onChange={(e) => onChange(e, "confmpassword")}
                  minLength={5}
                  required
                />
              </div>

              {/* ------see here----------------- */}

              <div className="mb-3 col-md">
                <label htmlFor="role" className="form-label">
                  <strong>Role</strong>
                </label>
                <div className="form-check form-check-inline mx-4">
                  <input
                    className="form-check-input"
                    type="radio"
                    name="roleOptions"
                    id="role1"
                    value={credentials.role}
                    onSelect={(e) => console.log(e)}
                  />
                  <label className="form-check-label" htmlFor="role1">
                    Admin
                  </label>
                </div>
                <div className="form-check form-check-inline">
                  <input
                    className="form-check-input"
                    type="radio"
                    name="roleOptions"
                    id="role2"
                    value={credentials.role}
                    onChange={(e) => onChange(e, "role")}
                  />
                  <label className="form-check-label" htmlFor="role2">
                    Client
                  </label>
                </div>
                <div className="form-check form-check-inline">
                  <input
                    className="form-check-input"
                    type="radio"
                    name="roleOptions"
                    id="role3"
                    value={credentials.role}
                    onChange={(e) => onChange(e, "role")}
                  />
                  <label className="form-check-label" htmlFor="role3">
                    Guest
                  </label>
                </div>
              </div>



              <div className="mb-3 row">
                <div className="form-floating col-6">
                  <select
                    className="form-select"
                    id="forgetQues"
                    name="forgetQues"
                    value={credentials.forgetQues}
                    aria-label="Floating label select example"
                    onChange={(e) => onChange(e, "forgetQues")}
                    required
                  >
                    <option>Open this select menu</option>
                    <option value={credentials.forgetQues} >Favourite Sport</option>
                    <option value={credentials.forgetQues} >Favourite Food</option>
                    <option value={credentials.forgetQues} >Favourite City To Visit</option>
                  </select>
                  <label htmlFor="forgetQues">Select Question</label>
                </div>

                {/* -------------upto here---------- */}


                <div className="col-6">
                  <div className="form-floating mb-3">
                    <input
                      type="email"
                      className="form-control"
                      id="forgetAns"
                      name="forgetAns"
                      value={credentials.forgetAns}
                      onChange={(e) => onChange(e, 'forgetAns')}
                    />
                    <label htmlFor="forgetAns">Answer</label>
                  </div>
                </div>
              </div>

              <div className="d-grid gap-2 my-4 col-6 mx-auto">
                <button type="submit" className="btn btn-success ">
                  SignUp
                </button>
              </div>
              <hr />
              <div className="mb-3 text-center">
                <div id="emailHelp" className="form-text center my-3">
                  Already have an account ?
                </div>
                <div className="d-grid gap-2 my-3 col-6 mx-auto">
                  <button onClick={goToLogin} className="btn btn-success ">
                    Login
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default SignupPage;

I am solving this error for last one hour but it is not getting resolved. Can I get help?