I would like the range to toggle itself (minimum / maximum) when I click on the label.
Is that possible with only HTML or CSS ? Do I need some JS?

I have the following code :

<label>
        This is the label text
        <input type="range" min="0" max="1" step="0.01" value="1" />
</label>

Code : https://jsfiddle.net/gjxf60s8/

I am having this unknown error but in my interface and Schema I am not defining any field with the property of ObjectId

and this is probably the first ever error of it’s kind to appear here so I really hope this gets fixed

GET /auth/discord/redirect?code=MsYzdlnjVC6upRhp37LmK5HbFP9IPW 302 7085.898 ms - 64
    /Discord Authentication/node_modules/mongoose/lib/schema/objectId.js:250
    throw new CastError('ObjectId', value, this.path, error, this);
          ^
   CastError: Cast to ObjectId failed for value "{
     id: {
      discordId: '713145789463134269',
      globalName: 'URIZEN',
        _id: new ObjectId("65536ab9bec76a177731bb99"),
       __v: 0
      }
    }" (type Object) at path "_id" for model "User"
    at SchemaObjectId.cast (/Discord   
       Authentication/node_modules/mongoose/lib/schema/objectId.js:250:11)
    at SchemaObjectId.SchemaType.applySetters (/Discord   
  Authentication/node_modules/mongoose/lib/schemaType.js:1219:12)
    at SchemaObjectId.SchemaType.castForQuery (/Discord   
  Authentication/node_modules/mongoose/lib/schemaType.js:1631:15)
    at cast (/Discord Authentication/node_modules/mongoose/lib/cast.js:304:34)
    at model.Query.Query.cast (/Discord Authentication/node_modules/mongoose/lib/query.js:4769:12)
    at model.Query.Query._castConditions (/Discord 
  Authentication/node_modules/mongoose/lib/query.js:2200:10)
    at model.Query._findOne (/Discord Authentication/node_modules/mongoose/lib/query.js:2485:8)
    at model.Query.exec (/Discord Authentication/node_modules/mongoose/lib/query.js:4291:80)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Discord Authentication/server.ts:43:16 {
  stringValue: '"{n' +
    '  id: {n' +
    "    discordId: '713145789463134269',n" +
    "    globalName: 'URIZEN',n" +
    '    _id: new ObjectId("65536ab9bec76a177731bb99"),n' +
    '    __v: 0n' +
    '  }n' +
    '}"',
  messageFormat: undefined,
  kind: 'ObjectId',
  value: {
    id: {
      discordId: '713145789463134269',
      globalName: 'URIZEN',
      _id: [ObjectId],
      __v: 0
    }
  },
  path: '_id',
  reason: BSONError: input must be a 24 character hex string, 12 byte Uint8Array, or an integer
      at new ObjectId (/Discord Authentication/node_modules/bson/src/objectid.ts:80:15)
      at castObjectId (/Discord Authentication/node_modules/mongoose/lib/cast/objectid.js:25:12)
      at SchemaObjectId.cast (/Discord Authentication/node_modules/mongoose/lib/schema/objectId.js:248:12)
      at SchemaObjectId.SchemaType.applySetters (/Discord Authentication/node_modules/mongoose/lib/schemaType.js:1219:12)
      at SchemaObjectId.SchemaType.castForQuery (/Discord Authentication/node_modules/mongoose/lib/schemaType.js:1631:15)
      at cast (/Discord Authentication/node_modules/mongoose/lib/cast.js:304:34)
      at model.Query.Query.cast (/Discord Authentication/node_modules/mongoose/lib/query.js:4769:12)
      at model.Query.Query._castConditions (/Discord Authentication/node_modules/mongoose/lib/query.js:2200:10)
      at model.Query._findOne (/Discord Authentication/node_modules/mongoose/lib/query.js:2485:8)
      at model.Query.exec (/Discord Authentication/node_modules/mongoose/lib/query.js:4291:80),
  valueType: 'Object',

I also don’t know why StackOverflow wants me to add more text and I don’t know what for

HELP ME

I’m trying to implement dark mode into my project without using material or other css frameworks. My project has a centralized resource when it comes to colors. All colors used in the project are stored in a common base file and is used across multiple components.

I’ve a predefined color palette for light mode. Now I need to implement dark mode into this project and I’m looking for a way in which I can do it in a least minimalist way.
somehow toggling the color-palette, or using different scss file when theme is changed. I’m not sure whether it possible or not

https://stackblitz-starters-34okvq.stackblitz.io

this is the minimalist version of my project.

I know scss is a css preprocessor and toggling theme happens in run time from the angular side. If the color palette switch is not possible, then what are the alternative approaches that I could follow for implementing dark mode for such a project with very large code base.

nb: I don’t intent to use any external packages or material themes etc.

I have the following code but the pointer-events: none; touch-action: none; do not work. I can click on the element under (the blue element) when the red button is clearly showing and it is over it!!

  // JavaScript click function
    function handleClick() {
        alert("Element clicked!");
    }

    // Get the element by its ID
    var clickableElement = document.getElementById("myClickableElement");

    // Attach the click event listener
    clickableElement.addEventListener("click", handleClick);

.cover {
    background: red;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fade-out 4s /*infinite*/;
    z-index: 9999999999999;
   pointer-events: none;
   touch-action: none;
   visibility: hidden;

}

@keyframes fade-out {
    0%, 85% {
        opacity: 1;
     visibility: visible;
    }
    100% {
        opacity: 0;
    visibility: hidden;
    
    }
}

.othestuff{
    background: blue;
    position: absolute;
    width: 100%;
    height: 100%;

    z-index: 999;
  
}

<div class="cover">
</div>

<div class="othestuff" id="myClickableElement">

</div>

what am I doing wrong? am I missing something?

why my question was closed without any link to another similar question????

I have found this previous answer that semi-answers my question but I want to return an array of the indexes in which they appear – in this case ** 18A38** would return the location [1,3].

Entries are only an example – the final version would have potentially hundreds of entries.

const checkArray = ['18A38'] 

const dataOject =
  [ { id:'853K83', isGo:false }
  , { id:'18A38',  isGo:true  }
  , { id:'97T223', isGo:true  }
  , { id:'18A38',  isGo:false }
  , { id:'182B92', isGo:true  }
  ];

const result = checkArray.map(val=>dataOject.findIndex(el=>el.id===val) )


console.log( JSON.stringify(result))

I have this code which generates a graph with two Y-axes, using the Plotly library in javascript.

The chart is generated correctly, but I can’t change colors to my data. I’d like to turn the bar chart data black and the line chart data red. Any help to be able to change the color of my chart data?

           TESTERL = document.getElementById('freq_cZero_ppv_v')

            var trace1 = {
                x: data.Delay,
                y: data.Amp_X_V,
                type: 'scatter',
                name: 'Vertical',
                hovertemplate: '<b>Tran:</b> %{y}<br><b>Retardo:</b> %{x}<br><extra></extra>',
                yaxis: 'y2',
            }

            var trace2 = {
                x: data.Delay,
                y: data.ZCFreq_X_V,
                type: 'bar',
                name: 'Frecuencia',
                hovertemplate: '<b>Freq:</b> %{y}<br><b>Retardo:</b> %{x}<br><extra></extra>'
            }

            var data = [trace1, trace2];
            var layout = {
                xaxis: { title: 'Retardo entre pozos en la fila (ms)', showspikes: true, spikemode: 'toaxis' },
                yaxis: { title: 'Frecuencia cruce x ZERO (Hz)', side: 'left',showspikes: true, spikemode: 'toaxis', showgrid: false, line: { color: '#252525' } },
                yaxis2: {
                    title: 'Amplificación PPV (%)',
                    overlaying: 'y',
                    side: 'right',
                    showspikes: true,
                    spikemode: 'toaxis',
                    showgrid: false
                },
                title: 'Amplificación de Vibraciones Onda Elemental (PPV) & Frecuencias c/Zero',
                showlegend: true,
                legend: {
                    "orientation": "h"
                },
                images: [{
                    'source': './../img/GBLogo.jpg',
                    'xref': 'paper',
                    'yref': 'paper',
                    'x': 0.9,
                    'y': 0.8,
                    'sizex': 0.1,
                    'sizey': 0.1,
                    'opacity': 0.8,
                    'xanchor': 'right',
                    'yanchor': 'bottom'
                }]
            }

            Plotly.newPlot(TESTERL, data, layout, { scrollZoom: true, editable: true, responsive: true, displaylogo: false })

I am trying to get values from an object, but when I use a variable, the result is undefined. In this example foundSch is undefined if I use the variable but I get the object back if I type the value in directly.
https://codepen.io/justinlafountain/pen/poGWJVZ

var routes = {
  northBoundWeekDay: [{
    station: "station1",
    times: ["7:00 AM", "7:20 AM", "7:40  AM", "8:00 AM", "8:20 AM"]
  }],
  ...
};

$("select").on("change", function() {
  var filterDirection = $("#direction").find(":selected").val();
  var filterDay = $("#day").find(":selected").val();

  var filteredSchedule = filterDirection + filterDay;

  console.log(filteredSchedule);

  var filteredSch = routes.filteredSchedule;

  console.log(filteredSch);

});

can any one explain me this behavior:

if (new Boolean(true)){            
    alert("1");
}else{
    alert("2");
}

must be alert “1”, and the response is “1”, but

if (new Boolean(false)){            
    alert("1");
}else{
    alert("2");
}

must be alert “2”, but the response is “1”. Why?,

For example:

if (false){            
    alert("1");
}else{
    alert("2");
}

Response “2”, and

if (true){            
    alert("1");
}else{
    alert("2");
}

response “1”, as we should expect….

i want random number of deg after refresh page get another number on deg

you can this ?

you can this with javascript open or refresh page get new number on deg ?

@-webkit-keyframes spinTwo {
100% {
-webkit-transform:rotate(3610deg);
}
}

I was looking to make a bunch of list items randomly rotated (and absolutely placed) on the screen and found out here that that can only be achieved with javascript, instead of css3 as my first attempts were.

I have an html page which has a background image set I would like to change this using javascript, subsequently overriding the css.

    <html>
<head>
<style>
body {
  background-image: url('mary.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

<script>

</script>
</body>

</html>

I am trying to figure out how to secure a send grid api post request in my nex tjs application.

I have the following:

export const sendEamil = async <T>(data: T) =>
  await fetch("/api/send-email", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.SENDGRID_API_KEY}`,
    },
    body: JSON.stringify(data),
  });

which is used inside my component like so:

  const onSubmit: SubmitHandler<FormValues> = async (data) => {
    try {
      const res = await sendEamil(data);
      if (res.status === 200) {
        toast.success("Your message has been sent!");
        reset();
      }
    } catch (err) {
      toast.error("Something went wrong. Please try again later.");
    }
  };

based on this article => https://docs.sendgrid.com/api-reference/how-to-use-the-sendgrid-v3-api/authentication I have applied the Authorization header but the API KEY is now exposed.

I am no familiar with authorising api requests but exposing an API key doesn’t feel right. (It’s visible in the network tab)

I’m quite new to Webpack and Webdev in general, so I’m confused about how would I redirect to a new page or “HTML” file when using Webpack and JS.

Right now my directory has a dist folder which includes index.html and app.html, as well as their respective bundles which I defined on the webpack config file like this:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    entry: {
        home: "./src/index.js",
        app: "./src/pages/app.js",
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        clean: true,
    },
    devServer: {
        static: {
            directory: path.resolve(__dirname, "dist"),
        },
        port: 3000,
        open: true,
        hot: true,
        compress: true,
        historyApiFallback: true,
    },
    module: {
        rules: [
            {
                test: /.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: "file-loader",
                    },
                ],
            },
            {
                test: /.css$/i,
                include: path.resolve(__dirname, "src"),
                use: ["style-loader", "css-loader", "postcss-loader"],
            },
            {
                test: /.svg$/,
                use: [
                    {
                        loader: "svg-url-loader",
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },
            {
                test: /.html$/i,
                loader: "html-loader",
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "src/views/index.html",
            chunks: ["home"],
        }),
        new HtmlWebpackPlugin({
            filename: "app.html",
            template: "src/views/app.html",
            chunks: ["app"],
        }),
    ],
};

On my home.js script (which handles the homepage injection) I created an a element and configured the path for the app.html file, so when I click the a element I get redirected to the new app.html file.

    import loginPage from "../views/app.html";

    ...


    const startButton = document.createElement("a");
    startButton.id = "start-button";
    startButton.innerText = "Get Started";
    startButton.href = loginPage;

However, that doesn’t work at all. Instead, when hovering my mouse on top of the a tag I just get the Raw content of app.html, that is, the code that is inside that specific file, so I’m not sure how to accomplish what I’m looking for and I’ve seen some tutorials online but I don’t understand how people redirect users to a new page with webpack and vanilla JS.

Here’s my file structure as well:

ª   .gitignore
ª   package-lock.json
ª   package.json
ª   postcss.config.js
ª   README.md
ª   tailwind.config.js
ª   webpack.config.js
ª   
+---dist
ª       app.bundle.js
ª       app.html
ª       f0389bbd28ce1918b0936a7570a77ae1.png
ª       home.bundle.js
ª       index.html
ª       
ª     
+---src
    ª   index.js
    ª   styles.css
    ª   
    +---assets
    ª   +---img
    ª           homepageDark.png
    ª           moon.svg
    ª           sun.svg
    ª           
    +---elements
    ª       bgCircles.js
    ª       
    +---functions
    ª       darkMode.js
    ª       erasePage.js
    ª       svgParser.js
    ª       
    +---pages
    ª       app.js
    ª       home.js
    ª       navbar.js
    ª       
    +---views
            app.html
            index.html          

We are using recpatcha v2 and v3 on our forms (v3 falls back to v2), and this works great.

This would be an example of that:

<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaV2onload" async defer></script>
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaV3onload&render={{ $.Site.Params.recaptcha3 }}" async defer></script>
<script>
function reCaptchaV2onload() { console.log('v2 loaded'); }
function reCaptchaV3onload() { console.log('v3 loaded'); }
</script>

Now the problem comes when we add a 3rd party web chat to our website. This webchat uses its own recaptcha with its own site key for its own purposes, and once it loads, it overrides the instance that I’ve loaded, causing my forms to fail with the error

const token = await grecaptcha.execute(window.reCaptchaSiteKey, { 'action': 'contact' });

Uncaught Error: Invalid site key or not loaded in api.js: mySiteKey

I tried to “keep” the (possibly) separate grecaptcha instances, but the object actually seems to stay the same the entire time, so something like this doesn’t appear to work

function reCaptchaV2onload() {
    window.grecaptcha2 = grecaptcha;
}
function reCaptchaV2onload() {
    window.grecaptcha3 = grecaptcha;
}

window.grecaptcha2 === window.grecaptcha and window.grecaptcha3 === window.grecaptcha are always true. I was even hoping that maybe recaptcha passes itself to the onload func, but it appears to pass 0 arguments.

How can I use recaptcha without my site key without the conflicting 3rd party loading its own with its own site key?

the div with the purple background I need to occupy space from the div with the golden background that was cut with clip-path

the div with the purple background I need to occupy space from the div with the golden background that was cut with clip-path

.container_top {
  background-image: radial-gradient(circle at 50% 50%, #ffc74d 0%, #f3a600 71%), radial-gradient(circle at 50% 50%, #a255ff, #5900c4 71%), radial-gradient(circle at 50% 50%, #f6090a, #7e0100 71%);
  clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 58%, 59% 87%, 55% 100%, 51% 87%, 8% 87%, 0 100%, 0 0);
  height: 60vh;
}

.container_middle {
  background-color: #4f027e;
  height: 45vh;
}

<div class="container-fluid container_top">
  <div class="container">
    <h1>
      Let’s Play and Win Together!
    </h1>
  </div>
</div>
<div class="container-fluid container_middle">
  <div class="container">
    <h1>
      Let’s Play and Win Together!
    </h1>
  </div>
</div>

Consider this jsfiddle: https://jsfiddle.net/utzfbjed/

code here:

.image {
  margin: auto;
  -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.image:hover {
    -webkit-transform: translate(12em, 0);
    -moz-transform: translate(14em, 0);
    -o-transform: translate(14em, 0);
    -ms-transform: translate(14em, 0);
    transform: translate(14em, 0);
  }
.container {
  width: 50%;
  display: grid;
}
.a {
  aspect-ratio : 1 / 1;
  width: 100%;
  background-color: black;
  border-radius: 50%;
}

.container > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

<div class='container'>
  <div class='a'>
  </div>
  <img class='image' src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/200px-Red_circle.svg.png" alt="Dimage">
</div>

There is a small red ring in the center of the black circle. When hovering on the ring, it moves towards the right edge of the circle.

My questions are, when adjusting the screen width:

1. How to make sure the red ring always appear on the same position on the edge of the circle after the animation?
2. The black circle shrinks as screen width changes. How to make sure the red ring is proportional to the black circle? i.e. larger when black circle gets larger, smaller when black circle gets smaller.

Thanks in advance!