ninja forms remove on blur validation

I’m trying to make my forms only do the validation on submit(which it already does by default), I made a hook to push a script to unlist the blur event so that the form can do its default validation but it just doesn’t remove them.

I used the dev pages from ninja forms and marionette docs

https://developer.ninjaforms.com/codex/client-side-field-validation/

https://developer.ninjaforms.com/codex/fields/

https://marionettejs.com/docs/master/backbone.radio.html

most of it works since I can see the fields id when it validates on the console

my hook:

< ? php

namespace App Hooks;

use function add_action;

class NJFormsDisableOnChangeValidation extends Hook {
  public $priority = 9;
  protected $type = 'filter';

  protected $actions = [
    'wp_enqueue_scripts'
  ];

  public
  function __invoke() {
    add_action('wp_footer', function() {
      ?
      >
      <
      script type = "text/javascript" >
        jQuery(document).ready(function($) {
          console.log('Script loaded correctly');

          var ValidationController = Marionette.Object.extend({
            initialize: function() {
              console.log('ValidationController init');

              var fieldChannel = Backbone.Radio.channel('fields');
              var submitChannel = Backbone.Radio.channel('submit');

              // Deactivate validations on change and blur
              fieldChannel.off('change:modelValue');
              fieldChannel.off('blur');

              // Maintain validation only in submit
              this.listenTo(submitChannel, 'validate:field', this.validate);

              console.log('Modified validation events: change and blur disabled..');
            },

            validate: function(model) {

              // Check the field type.
              if (1 != model.get_setting('required')) return;

              console.log('Validation only in submit executed for the field with ID:', model.get('id'));
            }
          });

          new ValidationController();
        }); <
      /script> <
      ? php
    });
  }
}

Extracting class name only if it contains certain value

I want to be able to extract a certain part of the classes only if it contains a certain value.

Let’s say I have <div class=”aa bb blog-xxx”></div>

I want to be able to only extract blog-xxx

{{Click Classes}} is a variable from Google Tag Manager

I have tried the following code:

function blogChecker(string) {
var el = {{Click Classes}};
if (el.includes("blog")) {
return el;
}
}

which extracts “aa bb blog-xxx” but I only want “blog-xxx”

Why my React-Native-Safe-Area-Context library not working

I’m making mobile app with react-native I install react-native-safe-area-context library after installation my project behaves unexpected.

At first when i install this library my autolinking.json file get empty so i manually add code of autolinking.json file.

Now this issue resolve not properly when i install my project autolinking.json file get empty i manually add configruation same happpen when i uninstall this library.

To fix this issue I copy my entire autolinking.json file before installing this library and after installing this library and at the time of building project when my autolinking.json file get empty i pasted configuration which i was earlier copied.

but new issue arised and issue is that I’m facing this problem

ViewManagerResolver returned null for either RNCSafeAreaProvider or RCTRNCSafeAreaProvider, existing names are: [DebuggingOverlay, RCTSafeArea View, RCTModal HostView, RCTTextInlineImage, AndroidProgressBar, AndroidHorizontal ScrollView, RCTImageView, RCTText, Android Horizontal ScrollContentView, UnimplementedNativeView, RCTScrollView, RCTView, Android DrawerLayout, AndroidSwitch, RCTVirtualText, AndroidSwipeRefreshLayout, RCTRawText, Android TextInput]

code of filter.tsx file
importing useful imports

import {
    SafeAreaView,
} from "react-native-safe-area-context";
import { FlatList, StatusBar, StyleSheet, Text, View } from "react-native";
const DATA = [
    {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'All',
    },
    {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Programming',
    },
    {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Sports & Fitness',
    }
];
type ItemProps = {title: string};

const Item = ({title}: ItemProps) => (
    <View style={styles.item}>
        <Text style={styles.title}>{ title }</Text>
    </View>
);

const Filter = () => (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={({item}) => <Item title="item.title" />}
                keyExtractor={item => item.id}
            />
        </SafeAreaView>
);

stylesheet

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },

    item: {
        backgroundColor: 'blueviolet',
        color: 'black',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },

    title: {
        fontSize: 32,
    },
});

export default Filter;

code of App.tsx file

import React from "react";


import Filter from "./component/filter";
import { StyleSheet } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

function MainApp():React.JSX.Element {
  return (
    <SafeAreaProvider style={styles.container}>
      <SafeAreaView>
        <Filter />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
  }
});

export default MainApp;

when i uninstall this library my project runs fine.

I’m creating filter button my project is based on bloging app basically I’m making mobile app of blog app project.

Why this happen and how to fix this error.

Unexpected import error in turborepo package

I am working on my first demo project with TurboRepo. Plan is to create a types named internal package which will share types to the UI as well as to the Server. I followed these steps to create types package:

  • Created a directory named types in packages
  • Created a package.json file with following content:
{
  "name": "@repo/types",
  "type": "module",
  "private": true,
  "exports": {
    ".": "./index.ts"
  },
  "version": "1.0.0",
  "main": "./index.ts",
  "types": "./index.ts",
  "files": [
    "./index.ts"
  ],
  "scripts": {
    "dev": "tsc --watch"
  },
  "devDependencies": {
    "@types/node": "^20.8.10",
    "body-parser": "^1.20.2",
    "esbuild": "^0.19.5",
    "tsx": "^3.14.0",
    "typescript": "^5.5.4",
    "@repo/typescript-config": "workspace:*"
  },
  "dependencies": {
    "zod": "^3.22.4"
  }
}
  • Created a tsconfig.json file:
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "../typescript-config/nextjs.json",
  "compilerOptions": {
    "outDir": "dist"
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

If I use "extends": "@repo/typescript-config/nextjs.json", in extends, then it throws an error, so I used the relative path.

  • Added a few types at packages/types/types/abc.ts file. I also have created an index.ts file at packages/types/ to export everything from the file.

Now the problem is when I import types from the package, TS throws an error saying

typescript: Cannot find module '@repo/types' or its corresponding type declarations. [2307]

The app works as expected, but I am unable to fix this TS error. I’m not sure what am I missing here. Could you please guide me in the right direction?

TS shouldn’t show the 2307 error.

I have added types package in web app like this:

"@repo/types": "workspace:*",

and importing the type like this:

import type { InventoryItem } from "@repo/types";

3rd party cookies in Android 14/New Chrome using Angular/Firebase Auth/Hosting and NodeJs in Server

https://issuetracker.google.com/issues/383751192

We have this issue from the link above.

I’m sure it appears due to Chrome’s new strict policies automatically blocking 3rd party cookies. Since on Android 13 (which I have in the car = using https://garagem-1f07e.web.app/link-account) and on the old Chrome that I have on Ubuntu 20.10 and on the new Firefox (Releasing all third party cookie options, using = https://garagem-1f07e.web.app/login) I don’t have this issue.

The photo below refers to this project:https://developers.home.google.com/codelabs/smarthome-washer?hl=pt-br#1

and can help us resolve my issue.

However, this project (washer) had its front-end and back-end all done in nodejs. I don’t want that. I want to do the front-end in Angular, as per the original project:
https://medium.com/google-developers/smart-home-cloud-services-with-google-part-2-3901ab39c39c

enter image description here

Based on Washer’s project (whose picture I posted above) I need to use document.cookie = ‘__session=’ + token + ‘;max-age=3600’;
in my Angular Project. I need help to implement this in my Angular project.

If you know of another solution (using SameSite=Strict, Secure in firebase.json, using CHIPS, etc…) I am open to solutions

Note-01:

According to the links below (from my project) I am using signInWithRedirect, as you cannot use signInWithPopUp in applications for Chrome mobile:
https://github.com/neuberfran/firebasefunction/blob/main/web/src/app/link.component.ts#L57
https://github.com/neuberfran/firebasefunction/blob/main/web/src/app/login.component.ts#L36

Note-02:

As below, I’m using Angular 7 (I accept update suggestions as long as you support me on issues that may appear if I do the update):

ng version

     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △  | '_  / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   __| |_|__, |__,_|_|__,_|_|       ____|_____|___|
                |___/
   

Angular CLI: 7.3.10
Node: 18.20.5
OS: linux x64
Angular: 7.2.16
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.10
@angular-devkit/build-angular     0.12.4
@angular-devkit/build-optimizer   0.12.4
@angular-devkit/build-webpack     0.12.4
@angular-devkit/core              7.3.10
@angular-devkit/schematics        7.3.10
@angular/cdk                      7.3.7
@angular/cli                      7.3.10
@angular/fire                     5.4.2
@angular/material                 7.3.7
@ngtools/webpack                  7.2.4
@schematics/angular               7.3.10
@schematics/update                0.13.10
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.28.4**strong text**

Is there a way to make a text box look different from my input fields

I made a simple website that takes in two arugments and gives the output of the third. To style the inputs, I used input styling on text inputs. However, my result is also in a text field and looks exactly like an input (which to html it is). I think there is a better way. Here are my text fields

<label for "messageBox"> Message: </label>
<input type="text" id="messageBox" placeholder="This is the message">
<br>
<label for "keyBox"> Key: </label>
<input type="number" id="keyBox" placeholder="This is the key">
<br>
<input type="submit" value = "Encrypt" id="encrypt" >
<input type="submit" value = "Decrypt" id="decrypt" >

<br>
<input type="text" id="resultBox" placeholder="Lambda result will appear here" readonly>

The CSS is:

input {
        padding: 10px;
        width: 800px;
        margin: 10px;
    }

How to write unit tests to verify logic in yup schema?

I have some non-trivial validation rules for a Vue app that uses VeeValidate, Yup, and Vitest. I would like to write unit tests for my Yup schema, but the examples that I’ve seen involve using undocumented APIs (at least from the standpoint of the official documentation on GitHub). Every time I try searching for how to test Yup validations, it refers to the test() method (source), which appears to be a custom validation rather than a unit test.

This isn’t the exact schema I’m using, but serves as a simple example:

const schema = yup.object().shape({
    firstName: string().required().max(10),
    age: number().required()
});

The validation frameworks I’ve used in other tech stacks allow you to test the result of a single property, so that’s the perspective I have walking into testing Yup schemas. I am really new to this, so I could simply be trying to use the framework in a way it was never meant to be used.

My test code:

const model = {
    firstName: '01234567891' // 11 characters, should be invalid
};

try {
    schema.validate(model);
}
catch (error) {
    // Now I need to assert that firstName is too long
    // and I don't care about the age property in this test
}

I’m having trouble with the assertion; I have no idea who to write it. Ideally I would like to pass the minimal information to trigger the one validation error I’m interested in (the firstName is too long), but I am getting an error from a property that I don’t care about in my test. In my real application, I have a schema with 20+ properties, and it would be a major pain to need to specify 20 valid values and one invalid value in all the tests I need to write.

I am running tests from the command line using npm run test:unit, which is the default setup for Vitest.

How do I write a proper unit test for Yup schemas such that I don’t need to specify a huge valid object with one invalid property, and make an assertion for one single validation rule?

Global events triggering es6 module handlers

While attempting to understand es6 module nuances, this resource specifically states that in the following example the global event will fail to trigger the listener, and suggests that an “export” is required. However, when tested, the handler does respond to the event.

Also, my understanding is that due to the module’s context, the event shouldn’t be accessible by the module.

What might I be misunderstanding?

main.js

<!DOCTYPE html>
<html>
<body>
    <button id="myButton">Click me</button>
    <script src="module.js" type="module"></script>
</body>
</html>

module.js

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

html form request send message to email [closed]

setup ensures user inputs are securely captured via an intuitive form and transmitted using the nodemailer library. Ideal for contact forms, feedback submission, or inquiry handling, it combines a clean front-end interface with a robust server-side email delivery mechanism.
Responsive HTML Form: Designed to be user-friendly and adaptable to various devices.
Secure Data Handling: Ensures that all user inputs are validated before processing.
Backend Integration: Uses Node.js with nodemailer for efficient and reliable email delivery.

Select2 Not Working in Bootstrap Modal During Remote Desktop Session, Works Locally

I’m encountering an issue where Select2 dropdowns do not work correctly when used in a Bootstrap Modal during a Remote Desktop Session (RDP). However, the same functionality works perfectly when accessed locally.

Problem Description

I have a form within a Bootstrap modal that uses Select2 for dropdowns. When users access the application locally (directly on the machine), everything works as expected. However, when accessing it through an RDP session, Select2 fails:

  • The dropdown doesn’t open or doesn’t respond to clicks.
  • Sometimes the dropdown appears outside the visible area or behind other elements.
  • Input events like typing or clicking don’t seem to be registered properly.

Technical Details

Frontend libraries:

  • Bootstrap 5.2
  • Select2 v4.1

Server environment: Windows Server 2019 with Remote Desktop Services (RDS) enabled.

Client environment: Windows 10/11, using the standard Remote Desktop Client (mstsc.exe).

Browsers: The issue persists in Chrome, Edge, and Firefox during RDP sessions.

What Have We Tried?

  1. Disabling modal focus enforcement:
    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false,
        focus: false
    });
  1. Adjusting dropdown positioning: Configuring dropdownParent to ensure the dropdown renders inside the modal:
    $('.select2').select2({
        dropdownParent: $('#myModal')
    });
  1. Reinitializing Select2 on modal show: Destroying and reinitializing Select2 when the modal opens:
$('#myModal').on('shown.bs.modal', function() {
    $('.select2').select2('destroy').select2({
        dropdownParent: $(this)
    });
});
  1. Adjusting z-index and CSS: Increasing the z-index of the Select2 container to prevent rendering issues:
.select2-container {
    z-index: 1055; /* Ensures it appears above other elements */
}
  1. Testing simpler alternatives: Using a standard HTML element without Select2 works without any issues, indicating the problem is specific to Select2.

  2. Modifying RDP settings:

Enabled hardware acceleration on both the RDP server and client.

Disabled visual effects such as compression and graphical optimizations.

  1. Tried other dropdown libraries: Libraries like Choices.js work fine but don’t fully meet the requirements of the application.

Questions for the Community

  • Are there known compatibility issues with Select2 in Remote Desktop Sessions?
  • How can we ensure Select2 behaves consistently in an RDP environment?
  • Are there specific configurations or workarounds to resolve focus or rendering issues in this scenario?

Additional Details

Here’s a simplified example of the modal and Select2 setup:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Form</h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <form>

                    <label for="exampleSelect">Select an option:</label>

                    <select class="form-control select2" id="exampleSelect">

                        <option value="1">Option 1</option>

                        <option value="2">Option 2</option>

                        <option value="3">Option 3</option>

                    </select>

                </form>

            </div>

        </div>

    </div>

</div>

And the initialization for Select2:

$('.select2').select2({
    dropdownParent: $('#myModal')
});

Summary

It seems that Select2 has issues with focus or rendering when used in Bootstrap modals during RDP sessions. How can we resolve or work around this to make the functionality behave as expected in both environments?

JSON, fetch, javascript in HTML and undefined or empty string [duplicate]

I was searching a forum for issues related to JSON and fetch function. There is bunch of them but i have hard time to understand this. What do i need is to fetch “/api” url that returns:

{"lux": 0, "pressure": 0.0, "TVOC": 0, "temp": 0.0, "hum": 0.0, "AQI": 0, "eCO2": 0}

I want to populate fields in a HTML table with these values. I started with simple thing in my HTML code:

<script>
async function get_data() {
  await fetch('/api')
    .then(resolve => resolve.json())
    .then(data => jdata = data);
  return jdata;
}

const JD = () => {
  fetch('/api')
    .then(resolve => resolve.json())
    .then(data => jdata = data);
}

//let raw_data='{"lux":0, "pressure":0, "TVOC":0, "temp":0, "hum":0, "AQI":0, "eCO2":0}';
//jdata=JSON.parse(raw_data);
let raw_data = get_data();
jdata = JSON.parse(raw_data);

console.log(raw_data);
console.log(jdata);
console.log(JD);
console.log(jdata.lux);

document.getElementById("dane_temp").innerHTML = jdata.temp;</script>

When i do this then I get error

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
line

so i comment JSON.parse line out. The issue is that raw_data is a promise object and i can’t get that JSON data right to assign to jdata variable.
I’m generally having issue to get out these nested objects to something that i can parse. When i assign string, as in commented out section, then I can do JSON.parse and all works, but then raw_data is not an object it is simply the string. But with this async function this is what sits in the raw_data:

Promise { <state>: "pending" }
​
<state>: "fulfilled"
​
<value>: Object { lux: 0, pressure: 0, TVOC: 0, … }
​
<prototype>: Promise.prototype { … }

JD gets a function object and i don’t see any data in it.
I went through different posts on this forum and due to fact that i typically do not program in JS i’m having issues to understand how to pull out a string from that promise object.
Can you help me with this?

Data model duplication issue in bokeh (the library is possibly not prepared for this use case)

I want to implement a stepping logic for a multi-timeframe charting solution with bokeh library. I need to export a static HTML file with all the data, therefore the size of the HTML export matters.

In this solution multiple timeframes can be visualized at the same time, the charts of different timeframes are drawn on each other, BUT only until a given point in time (let’s call this trigger_date).

time_tracker = ColumnDataSource(data=dict(trigger_date=[max_dt]))

I’m using ColumnDataSource to store the data for each timeframe and I need to generate at least 2 buttons (backward step, forward step) for each timeframe.
To each button I need to pass all the data, which means every data source of all timeframes and every dataframe of all timeframes for implementing the step logic (to show the charts until a given point in time only and emit() changes properly).

Important: The number of timeframes (aggregation units) is unknown in advance. It’s determined by the input only. Can not be listed in a constant list.
e.g.: 30s, 1m, 5m, 15m, 30m, 1h, 4h, 1d, ...

It’s simply impossible to define such thing:

step_buttons[timeframe]['prev'].js_on_click(CustomJS(
    args = dict(
        time_tracker            = time_tracker,
        direction               = -1,
        min_dt                  = min_dt,
        max_dt                  = max_dt,

        # ALL TIMEFRAMES CAN NOT BE LISTED HERE BECAUSE IT'S UNKNOWN

        datasource_5m  = ...,
        datasource_15m = ...,
        datasource_30m = ...,
        datasource_1h  = ...,
        datasource_4h  = ...,
        ?????????????? = ...,
    ),
    code = JS_CODE_STEP_LOGIC,
))

Therefore I HAVE TO wrap all possible data sources for each timeframe into a more complex data structure which can be passed to the button as a single argument:

js_data[timeframe] = {
    'data_source' : ColumnDataSource(dataframes[timeframe]),
    'candle_data' : dataframes[timeframe].to_dict(orient="list"),
}

# or
# data_sources = {}
# candle_data  = {}
# for timeframe in dataframes.keys():
#     data_sources[timeframe] = ColumnDataSource(dataframes[timeframe])
#     candle_data[timeframe]  = dataframes[timeframe].to_dict(orient="list")

# ...

for tf in timeframes:

    # I'VE A LOT OF THESE BUTTONS
    # THE ARGUMENT LIST CAN NOT BE FIXED HERE
    # I'VE TO PUT DATA SOURCES INTO A HIERARCHY WITH TIMEFRAME KEYS (candle_data_and_sources )
    # AND IMPLEMENT A DYNAMIC LOGIC ON JS SIDE
    # THE TIMEFRAMES ARE NOT KNOWN IN ADVANCE
    # THIS IS WHAT DUPLICATES THE DATA
    # AND INCREASES THE SIZE OF THE GENERATED HTML

    step_buttons[tf]['prev'].js_on_click(CustomJS(
        args = dict(
            candle_data_and_sources = js_data,         # need to use complex structure here

            # or
            # data_sources = data_sources
            # candle_data  = candle_data

            time_tracker            = time_tracker,
            direction               = -1,
            timeframe               = tf,
            min_dt                  = min_dt,
            max_dt                  = max_dt,
        ),
        code = JS_CODE_STEP_LOGIC,
    ))
    step_buttons[tf]['next'] = ...

BUT in this case the model will be obviously duplicated and will result a much larger file size then required. This will cause performance issues during visualization. The browser will fail to open this file.

QUESTIONS:

  • How could I pass all available data only once to each button without duplicating the model here?
  • Do I feel correctly that hardcoding all possible timeframes into the button’s arguments feels not the good way to implement this (and in my case it might be even impossible)..

Additional information 1:
I’ve tried to workaround this limitation with setting this complex data structure as a global variable on JS side, but I could not find a working solution.
See the details here: Initialize global variable in bokeh and use it in handler code?

Additional information 2:
The step logic being used is similar to this:

JS_CODE_STEP_LOGIC = """
    const trigger_date = new Date(time_tracker.data['trigger_date'][0]);
    let new_date       = new Date(trigger_date);
    new_date.setDate(new_date.getDate() + 1 * direction * get_tf_value(timeframe));
    if (direction < 0){
        new_date = new Date(Math.max(min_dt, new_date));
    } else if (direction > 0){
        new_date = new Date(Math.min(max_dt, new_date));
    }
    time_tracker.data['trigger_date'][0] = new_date.toISOString();

    // I NEED TO DO THE FOLLOWING LOGIC FOR EACH TIMEFRAME
    // THE NUMBER/VALUE OF TIMEFRAMES HERE ARE DYNAMIC
    // THEREFORE THEY ARE ADDRESSING THE DATASOURCE IN THE HIERARCHY 

    for (const [timeframe, data] of Object.entries(candle_data_and_sources)) {

        const filtererd_obejcts = {};
        for (const [key, value] of Object.entries(data['candle_data'])) {
            if(!filtererd_obejcts[key]){
                filtererd_obejcts[key] = [];
            }
        }

        for (let i = 0; i < data['candle_data'].trigger_dt.length; i++) {
            if (new Date(data['candle_data'].trigger_dt[i]) <= new_date) {
                for (const [key, value] of Object.entries(data['candle_data'])) {
                    filtererd_obejcts[key].push(value[i]);
                }
            }
        }

        data['data_source'].data = filtererd_obejcts;
        data['data_source'].change.emit();
    }
    time_tracker.change.emit();
"""

how to calculate the fill color between dots in input type=”range” when min val is not 0

I am struggling with the calculation that is responsible for the fill color between the 2 dots in the range price-slider.

Part of the html for the range slider is:

 <div class="container">
    <div class="slider-track"></div>
    <input type="range" min="0" max="80" value="50" id="slider-1" oninput="slideOne()">
    <input type="range" min="0" max="80" value="70" id="slider-2" oninput="slideTwo()">
  </div>

The js:

window.onload = function () {
  slideOne();
  slideTwo();
};

let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
let minGap = 5;
let sliderTrack = document.querySelector(".slider-track");
let sliderMaxValue = document.getElementById("slider-1").max;

function slideOne() {
  if (parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap) {
    sliderOne.value = parseInt(sliderTwo.value) - minGap;
  }
  displayValOne.textContent = sliderOne.value;
  fillColor();
}
function slideTwo() {
  if (parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap) {
    sliderTwo.value = parseInt(sliderOne.value) + minGap;
  }
  displayValTwo.textContent = sliderTwo.value;
  fillColor();
}
function fillColor() {
   percent1 = (sliderOne.value / sliderMaxValue) * 100;
   percent2 = (sliderTwo.value / sliderMaxValue) * 100;
   sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
}

When the input values in the html have value “0” (min=”0″), everything works fine with the fill-color inbetween the dots. But when is set both input to min=”40″ per example,
the percent1 and percent2 variables in the js need to be recalculated. Otherwise the fillcolor between the dots in not correct anymore.

So: what what is the correct calculation for percent1 and percent2 in the js in case min=”20″ or min=”40″ in the html input?

Example 1 with min=”0″: Fiddle 1

Example 2 with min=”40″: Fiddle 2

MaxRedirectsError on NodeJS API library when doing a simple request

I am struggling with connecting my Shopify Test Store, through the API connection, with my code running on a docker container with the the server running on port 2000 inside Docker on my local machine. I am doing a port binding as follows: 3031:2000.

I am using the shopify-api-node library for NodeJS to connect with my Javascript code to the Shopify API and when trying to do any request to Shopify I get this
Error Image

I initialize my Shopify variable like this:
Shopify Variable

and when after creating the Shopify variable I do this:
Where the Error occurs

It never reaches the second log because the error is thrown. I already tried to remove the Do-While loop, but it does nothing. The only thing that I have made working is: when I run a quite similar code that I had before, without servers and without port bindings, just a Shopify API connection with the same library, same version, to the same store, running on a function and running that function on a Docker container, that works out. So, I guess it is just a Network issue, maybe some firewall with the PortBinding or it is passing the wrong url to send the response, or maybe it’s just hitting the wrong port. Maybe it is hitting the “127.0.0.1:3031”, but it needs to hit the “host.docker.internal:2000”, or the opposite.

Do you have any clue how to solve this? Any variable that I need to pass when declaring the Shopify variable to change the redirect URL or the response URL to the correct URL?

Thank you very much for your help!