document.getSelection().anchorOffset is always zero. nodeType issue?

The code I am looking at has been done using React and is meant to store the full text of an input field, the selected text within that field, and the index of the selected text within the full text.

<Form.Control
 id='left'
 type='text'
 placeholder='LHS'
 onSelect={element => logSelection(element)}
/>

function logSelection(element) {

  var fullText = element.target.value;
  var selectedText = document.getSelection();
  var selectionPosition = document.getSelection().anchorOffset;

fullText and selectedText store the desired values, selectionPosition always stores zero. I think it has to do with the type of anchorNode being used. nodeType gives a 1, whereas I think I need type 3, a text node. How can I get the correct value stored to selectionPosition?

To hide Suneditor Scrollbar of a text-area

I have a mail body which is based on sun-editor text-area, and this text-area is in a common div where other elements of mail will be there. Now , there are two scrollbars shown, One is the div and one inside my text-area. I want to hide the scrollbar of sun-editor.
I tried changing in suneditor.js file, but it didn’t work and also added style to the editor, but in vain. Please help.
sun-editor text area
style

Transformer string ID ChoicesType (ajax) en ID EntityType in a Form (Symfony)

Sorry but it’s going to be long.

I have 6 linked selects, the first in EntityType and the other 5 in ChoiceType. the last 5 selects are filled in Ajax following the data from the previous ones.

My 6 tables are in ManyToOne relationship.

- car_make  
- car_model  
- car_generation  
- car_serie  
- car_trim  
- car_equipment  

A vehicle table which must be connected with the 6 tables above.

Ajax returns my selects correctly but the IDs are in character strings, except I need to connect my vehicle table with the others via relationships (integer ID)

The principle is to create a vehicle with data from the select tags.

When submitting the form, I get CarMake correctly but all the other fields are null, thinking it was from the ChoiceType, I created a DataTransformer but it doesn’t seem to work either.

The only way I found is to create 6 fields in my “vehicle” table in simple int and then fill them manually using the data from $request->request via my Controller.

It works but unfortunately I lose the functionality of Symfony (get function in particular) and I find this solution not great.

How do I ensure that I correctly retrieve the ChoiceType IDs in EntityType to correctly link them to my tables?

I think we should use events but I don’t know how to go about it, I did different tests without finding a solution to inject the DataTransformer into the event.

My files:

FormType : https://pastebin.mozilla.org/rBnGtbQ5  
Controller : https://pastebin.mozilla.org/FR67vsWn
DataTransformer (test for CarModel) : https://pastebin.mozilla.org/DyyLydqY
Javascript for select balise : https://pastebin.mozilla.org/0oeoSXLu

Sorry again for the length and thank you in advance for your answers.

cannot connect a sqlite file in tauri + vue project?

i `ve installed tauri-plugin-sql by adding the following content to src-tauri/Cargo.toml :

[dependencies.tauri-plugin-sql]
git = "https://github.com/tauri-apps/plugins-workspace"
branch = "v1"
features = ["sqlite"] # or "postgres", or "mysql"

then i added tauri-plugin

npm add https://github.com/tauri-apps/tauri-plugin-sql#v1

added the following content to main.rs :

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_sql::Builder::default().build())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

then i have created an databaseService in my vue js project root folder :

import Database from "tauri-plugin-sql-api";

class DatabaseService {
  constructor() {
    // Initialize the database connection here if needed
  }

  async connectToDatabase() {
    try {
      // sqlite. The path is relative to `tauri::api::path::BaseDirectory::App`.
      return await Database.load("sqlite:./mydata.db");
      // You can also connect to mysql sor postgres as needed
    } catch (error) {
      console.error("Error connecting to database:", error);
      throw error;
    }
  }

  async executeQuery(query, params) {
    try {
      const db = await this.connectToDatabase();
      return await db.execute(query, params);
    } catch (error) {
      console.error("Error executing query:", error);
      throw error;
    }
  }
}

export default new DatabaseService();

and then i tried to do some test queries :

<template>
    <div>
      <!-- Your component template -->
      <h1 class="text-black text-center text-lg font-black">{{ title }}</h1>
    </div>
  </template>
  
  <script>
  import DatabaseService from "../services/database";
  
  export default {
    // Component options
    async mounted() {
      try {
        // Example query
        const result = await DatabaseService.executeQuery(
            "SELECT * FROM barbers"
        );
        console.log("Query result:", result);
      } catch (error) {
        console.error("Error:", error);
      }
    },
  };
  </script>
  
  <style>
  /* Your component styles */
  </style>
  

but here i got that error :

databaseService.js:24 Error executing query: error returned from database: (code: 1) no such table: barbers

but i sweat i have that table

but seems like the problem is in the path the sqlite file . should it be accroding to src-tauri or the vue project . where should i create it and what path should i mention in databaseservice ?

Disabling a Java popup window on a video site [closed]

Newbie alert … I need a script to disable a certain popup message on a rewards site from appearing I’m using pixeltv rewards website and every time I log in with other browsers and watch videos the message says your rewards account is active elsewhere and stops earning points I found the window id when I went to inspect the page but I have no clue how to disable it. I need scripthelp

I tried various scripts but nothing seems to work. I would for the browser with the video to stream in other browsers but it’s not letting me

‘<', "<!DOCTYPE "… is not valid JSON Promise.then (async) error in Django [closed]

I m currently learning Django and i m trying to build an ecommerce website. I m trying to figure out why am i getting this error in my console.I m trying to do a fetch call and trying to send data to the url by name of update_item and i m expecting the view function to return the json response in my console but i m constantly getting this error. Can someone pls help.

**This is my js file. **

var updateBtns = document.getElementsByClassName('update-cart')

for (i = 0; i < updateBtns.length; i++) {
    updateBtns[i].addEventListener('click', function(){
        var productId = this.dataset.product
        var action = this.dataset.action
        console.log('productId:', productId, 'Action:', action)
        console.log('USER:', user)

        if (user == 'AnonymousUser'){
            console.log('User is not authenticated')

        }else{
            updateUserOrder(productId, action)
        }
    })
}

function updateUserOrder(productId, action){
    console.log('User is authenticated, sending data...')

        var url = '/update_item/'

        fetch(url, {
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken
            },
            body:JSON.stringify({'productId':productId, 'action':action})
        })
        .then((response) => {
           return response.json()
        })
        .then((data) => {
            console.log('data:', data)
        });
}



This is my views.py file.

from django.shortcuts import render
from django.http import JsonResponse
from .models import *

# Create your views here.
def store(request):
    products = Product.objects.all()
    context = {'products':products}
    return render(request,'store/store.html',context)

def cart(request):
    if request.user.is_authenticated:
        customer = request.user.customer
        order, created = Order.objects.get_or_create(customer=customer, complete=False)
        items = order.orderitem_set.all()
    else:
        # Create empty cart for now for non-logged in user
        items = []
        order = {'get_cart_total':0, 'get_cart_items':0 }

    context = {'items': items, 'order':order}
    return render(request, 'store/cart.html', context)

def checkout(request):
    if request.user.is_authenticated:
        customer = request.user.customer
        order, created = Order.objects.get_or_create(customer=customer, complete=False)
        items = order.orderitem_set.all()
    else:
        # Create empty cart for now for non-logged in user
        items = []
        order = {'get_cart_total':0, 'get_cart_items':0 }

    context = {'items': items, 'order':order}


    return render(request,'store/checkout.html',context)

def updateItem(request):
    return JsonResponse('Item was added', safe=False)

This is my urls.py file

from django.urls import path
from . import views

urlpatterns = [
    path('', views.store, name = "store"),
    path('cart/', views.cart, name = "cart"),
    path('checkout/', views.checkout, name = "checkout"),
    path('update_item/', views.updateItem, name = "update_item")
]

Change text in a javascript generated window with javascript

I use an external consent tool on my webseite (inmobi choice). The tool is loaded with an async javascript and opens a window on my website to ask for consent.

Is it somehow possible to change text with javascript or jquery in this javascript generated consent tool window?

I am able to change texts in my local website for example with
document.getElementsByClassName("myClass")[0].innerHTML = 'new text';
or
$(".myClass").text('new text');

But that does not work in the javascript generated window of the consent tool.

The javascript window of the consent tool looks like this

<div class="qc-cmp2-container" id="qc-cmp2-container" data-nosnippet="">
  <div class="qc-cmp2-main" id="qc-cmp2-main" data-nosnippet="">
    <div id="qc-cmp2-ui" role="dialog" aria-label="qc-cmp2-ui">
      [...]
      <div class="qc-cmp2-consent-info">
       Text to be changed...
     <div>
    <div>
  <div>
<div>

With
console.log(document.getElementsByClassName("qc-cmp2-consent-info"));
I can see the text in the console, but was not sucessfull to change it.

HTML Collection []{
  0: div.qc-cmp2-consent-info
    1: {scrollfalse: f}
    ...
    innerHTML: "Text to be changed..."

For example
$(".qc-cmp2-consent-info").text('new text'); shows no change

After reading the XLSX file, in the place of the desired number, I get the numbers that are written before the coma

It should show an integer, as written in the example, you can help somehow if anyone has encountered this

This block is located in the xlsx file

SM2CKG26T2D AIR PODS ORIG 2 1,000
SMXHPD2D66V AIR PODS ORIG 3 1,000
2400000002567   ANTI LOST$  41,000
87619   ANTIRADAR 535$  4,000

This is a method to read documents in nest

  createByDocument(document: Express.Multer.File) {
    const workbook = xlsx.read(document.buffer, { type: 'buffer' });
    const sheetName = workbook.SheetNames[0];
    const sheet = workbook.Sheets[sheetName];

    const data: any[] = xlsx.utils.sheet_to_json(sheet, { raw: true });

    const firstThreeElements = data.slice(0, 4);

    const formattedData = firstThreeElements.map((row: any) => {
      const productCode = row['Կոդ'];
      const productName = row['Անվանում'];
      const quantity = row.__EMPTY;

      if (!productCode || !productName || !quantity) {
        throw new HttpException(
          'Invalid product code or name or quantity',
          HttpStatus.FORBIDDEN,
        );
      }

      return {
        code: productCode,
        title: productName,
        count: quantity,
      };
    });
    console.log(formattedData);
  }

and this is the result that I get

[
  { code: 'SM2CKG26T2D', title: 'AIR PODS ORIG 2', count: 1 },
  { code: 'SMXHPD2D66V', title: 'AIR PODS ORIG 3', count: 1 },
  { code: '2400000002567', title: 'ANTI LOST$', count: 41 },
  { code: '87619', title: 'ANTIRADAR 535$', count: 4 }
]

As you can see, for example, instead of 1000 I get 1, Can someone suggest a solution

Masked data integration in angular

I’m having trouble with something. I want to add a mask to one of my inputs to change how it looks on the screen, but I still need to send the original data to the backend. The mask component seems to work when I create and view it, but when I try to edit it, it doesn’t update the data correctly. It doesn’t remove what I delete, and it just adds new symbols when I type. Also, when I click on edit initially, it shows the input without the mask until I clear it.

when trying to create – it should be like this:

input -> 12345678 - in UI it should be visible 1234****

sending to the backend exact data -> 12345678

when trying to edit – it should be like this:

it has to be visible in input 1234****
                  
when click save to update it, it should set the exact data which I added

for both cases, the same component has been called

I have created mask input component:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'mask,
  templateUrl: './mask.component.html',
})
export class InputMaskComponent implements OnInit{
  @Input() name: string;
  @Input() control: FormControl;
  @Input() e2eName: string;
  @Output() valueChange = new EventEmitter<string>();
  actualValue = '';
  maskedValue = '';

  ngOnInit() {
   this.actualValue = this.control.value;
  }
  emitActualValue(value: string): void {
    this.actualValue = value;
    this.valueChange.emit(this.actualValue);
  }

  maskInput(event: Event): void {
    const inputEvent = event as InputEvent;
    const inputElement = event.target as HTMLInputElement;
    const inputData = inputEvent.data;
    const inputValue = inputElement.value;
    if (inputData != null) {
      this.actualValue += inputData;
    }
    this.emitActualValue(this.actualValue);
    this.maskedValue = inputValue.substring(0, 4) + '*'.repeat(Math.max(0, inputValue.length - 4));
    inputElement.value = this.maskedValue;
  }
}

<label>
    <span>{{ name }}</span>
  <div class="control">
    <input
      [formControl]="control"
      [attr.data-e2e]="e2eName"
      type="text"
      class="input"
      (input)="maskInput($event)"
    />
  </div>
</label>

and use it here:

<mask
  name=“masked label“
  [control]=“maskedControl”
  [e2eName]="'input-mask’”
  (valueChange)="handleValueChange($event)"
  data-e2e="maskedControl"
  i18n-name
></mask

handleValueChange(value: string): void {
  this.maskedControl.setValue(value);
}

get maskedControl(): AbstractControl {
  return //to get masked control value, from the API
}

Currently this code doesn’t work:

  1. when I try to edit my data, it shows old and deleted value too
  2. in the beginning * doesn’t visible until I click on that input

ThemeContext value not updating

Am pretty new to react ,my problem is that my value is not getting updated of my themecontext.
I have been experimenting myself but it didn’t work ;-;

This s themecontext provider

import { createContext, useState } from "react";

const Themecontext = createContext("Light");

export default Themecontext;

This is where i want to update my value settngs.tsx

import React, { useState } from "react";
import {
  SafeAreaView,
  StatusBar,
  Text,
  StyleSheet,
  TouchableOpacity,
  View,
  Switch,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { themeHandler } from "./CustomComponents/CustomColor";
import { useRouter } from "expo-router";
import Themecontext from "./CustomComponents/Contexts";
import { EventRegister } from "react-native-event-listeners";

function Settings(props) {
  const [getTheme, setTheme] = useState("Light");
  const getThemeHandler = themeHandler();
  const Colors = getThemeHandler.getColors();
  const router = useRouter();
  const updateTheme = () => {
    setTheme(getTheme === "Light" ? "Dark" : "Light");
    EventRegister.emit("SetTheme", getTheme);
  };

  return (
    <Themecontext.Provider value={getTheme}>
      <SafeAreaView>
        <View
          style={[
            {
              marginTop: StatusBar.currentHeight,
              backgroundColor: Colors.Background,
            },
          ]}
        >
          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
            <TouchableOpacity
              onPress={() => {
                router.push({ pathname: "dashboard" });
              }}
            >
              <View style={[{ padding: 10 }]}>
                <Icon name="arrow-back" size={30} color={Colors.Primary} />
              </View>
            </TouchableOpacity>
            <Text style={[styles.sttingsText, { color: Colors.Primary }]}>
              Settings
            </Text>
          </View>
          <View style={[styles.settingContainer, {}]}>
            <View //Dark theme Card
              style={[
                styles.settingAttCard,
                {
                  backgroundColor: Colors.Secondary,
                  borderColor: Colors.Primary,
                },
              ]}
            >
              <Icon
                name="sunny"
                size={30}
                color={Colors.Primary}
                style={styles.icon}
              />
              <Text style={[styles.settingsAttText, { color: Colors.Primary }]}>
                Dark Mode
              </Text>

              <Switch
                value={getTheme === "Light"}
                onValueChange={() => {
                  updateTheme();
                }}
                style={[
                  styles.settingAttSwitch,
                  { borderColor: Colors.Primary },
                ]}
              ></Switch>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Themecontext.Provider>
  );
}

export default Settings;
const styles = StyleSheet.create({
  sttingsText: {
    fontSize: 24,
    fontWeight: "500",
  },
  settingContainer: { padding: 10, marginTop: 20 },
  icon: {
    justifyContent: "flex-start",
  },
  settingAttCard: {
    padding: 10,
    flexDirection: "row",
    borderRadius: 20,
    justifyContent: "space-between",
    borderWidth: 2,
    alignItems: "center",
    gap: 20,
  },
  settingsAttText: {
    fontSize: 20,
  },
  settingAttSwitch: {},
});

This CustomColor.Tsx

import { useContext, useEffect, useState } from "react";
import { EventRegister } from "react-native-event-listeners";
import Themecontext from "./Contexts";

export const themeHandler = () => {
  const [theme, setTheme] = useState("Light");

  useEffect(() => {
    let reg = EventRegister.addEventListener("SetTheme", (data) => {
      setTheme(data);
    });
    return () => {
      EventRegister.removeAllListeners;
    };
  });

  const getColors = () => {
    const themeCon = useContext(Themecontext);
    console.log(themeCon);
    return theme === "Light" ? CustomColor.Light : CustomColor.Dark;
  };
  const getIcon = () => {
    return theme === "Light" ? "moon" : "sunny";
  };

  return { getColors, getIcon };
};

const CustomColor = {
  Light: {
    Primary: "#02C5C5",
    Secondary: "#F5F5F5",
    Third: "#D2E9E9",
    Background: "white",
  },
  Dark: {
    Primary: "#0B60B0",
    Secondary: "black",
    Third: "#40A2D8",
    Text: "white",
    Background: "white",
  },
};

export default CustomColor;

I want that the switch update the themecontext’s value and i can read the value from customcolor.tsx and return the colors accordingly even if the logic seems wrong i tried different ways but theme context is not updating.

LeetCode problem: 2623. Memorize showing wrong answer for testcase 18/20

Below is my code in JavaScript for the problem but in LeetCode it is showing wrong answer for a test case.

/**
 * @param {Function} fn
 * @return {Function}
 */
function memoize(fn) {
    let arr = [];
    let result = [];
    return function (...args) {
        if (!(arr.toString().match(args.toString()))) {
            arr.push(args);
            let val = fn(...args);
            result.push(val);
            return val;
        } else {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].toString() === args.toString()) {
                    return result[i];
                }
            }
        }
    }
}


/** 
 * let callCount = 0;
 * const memoizedFn = memoize(function (a, b) {
 *   callCount += 1;
 *   return a + b;
 * })
 * memoizedFn(2, 3) // 5
 * memoizedFn(2, 3) // 5
 * console.log(callCount) // 1 
 */

Test Case:
“sum”

“[“call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”call”,”call”,”call”,”getCallCount”,”getCallCount”,”getCallCount”,”call”,”call”,”call”]”

“[[748,660],[],[],[119,694],[625,645],[452,117],[623,466],[453,270],[],[777,289],[],[],[39,440],[],[32,756],[458,42],[462,913],[],[],[],[768,473],[162,910],[654,628],[],[267,423],[205,989],[],[963,401],[],[629,629],[571,242],[],[686,63],[317,102],[923,383],[866,23],[908,381],[540,344],[124,467],[553,193],[494,40],[4,63],[],[764,24],[971,583],[859,416],[],[207,203],[451,415],[328,423],[40,780],[692,602],[812,100],[823,798],[241,777],[],[],[996,394],[848,568],[541,217],[148,232],[67,40],[275,836],[947,731],[378,320],[],[675,973],[452,574],[],[],[57,178],[433,884],[],[703,228],[],[906,410],[],[88,538],[676,965],[],[613,141],[728,580],[245,623],[388,870],[],[],[],[632,720],[],[],[419,627],[535,832],[81,479],[],[],[],[769,654],[],[436,353],[743,325],[787,864],[786,260],[851,47],[631,962],[],[],[971,536],[301,193],[994,646],[273,614],[878,635],[],[918,16],[],[522,517],[256,194],[52,563],[764,675],[826,818],[721,471],[],[371,386],[],[480,113],[],[],[647,480],[],[],[429,65],[],[],[],[],[420,822],[],[],[666,505],[182,809],[],[83,663],[319,446],[854,820],[],[743,976],[],[268,80],[983,273],[465,78],[],[],[754,942],[912,271],[852,585],[644,969],[],[13,167],[875,770],[231,284],[828,470],[],[56,540],[],[641,304],[205,796],[538,305],[140,895],[841,378],[936,895],[809,844],[427,375],[720,851],[792,286],[],[],[],[384,106],[523,41],[],[928,415],[],[791,915],[],[675,760],[],[339,133],[408,428],[621,392],[],[208,483],[602,826],[],[813,337],[],[788,599],[675,876],[961,350],[],[99,706],[263,670],[93,916],[813,684],[783,887],[967,478],[],[876,264],[927,348],[528,803],[993,12],[849,719],[652,539],[91,952],[],[351,167],[],[],[241,28],[],[775,142],[],[592,467],[202,621],[645,468],[347,205],[],[805,176],[233,708],[58,235],[209,78],[],[],[],[883,497],[98,92],[782,849],[],[432,520],[298,351],[143,922],[609,144],[],[983,134],[815,883],[681,129],[],[673,445],[538,314],[],[242,306],[],[377,440],[],[226,7],[],[650,638],[135,90],[403,852],[],[721,923],[517,301],[],[623,735],[],[584,500],[],[883,671],[525,179],[],[759,38],[],[992,596],[6,938],[43,931],[769,910],[163,328],[],[37,65],[44,929],[],[216,483],[990,417],[12,314],[],[161,204],[],[672,199],[],[],[],[355,964],[],[298,62],[650,69],[405,945],[],[639,144],[],[],[943,863],[965,996],[837,995],[237,622],[301,650],[],[11,495],[580,401],[730,895],[],[314,543],[220,886],[804,913],[30,745],[],[838,345],[],[135,337],[402,884],[857,83],[195,756],[],[],[25,483],[789,848],[263,465],[132,165],[187,467],[],[263,168],[99,994],[],[],[499,18],[750,812],[150,754],[137,732],[31,158],[983,432],[383,802],[792,701],[759,718],[145,922],[],[898,775],[],[],[],[581,862],[945,135],[537,916],[725,380],[341,448],[92,986],[903,467],[],[137,828],[735,653],[578,212],[498,735],[805,745],[],[],[961,155],[37,209],[981,57],[],[],[813,360],[],[],[],[781,897],[],[],[989,765],[744,282],[],[],[747,286],[400,259],[527,917],[385,517],[91,123],[],[591,577],[573,801],[614,550],[],[388,926],[493,368],[],[149,175],[592,565],[518,360],[391,248],[798,249],[555,891],[142,885],[534,132],[],[],[840,672],[516,25],[146,833],[],[748,154],[916,159],[786,52],[311,830],[],[82,635],[],[],[366,691],[],[],[807,488],[952,783],[33,479],[],[],[704,81],[258,725],[915,73],[770,71],[454,214],[229,47],[562,962],[148,829],[],[909,683],[338,64],[],[398,631],[10,510],[963,828],[270,150],[913,595],[868,233],[396,203],[],[1,162],[442,701],[7,462],[856,574],[342,199],[],[503,297],[128,81],[],[],[235,613],[188,351],[],[277,448],[],[253,798],[644,545],[],[403,847],[58,434],[],[177,134],[],[],[178,185],[391,152],[795,976],[816,201],[476,347],[837,109],[642,898],[934,430],[608,733],[],[],[943,654],[147,688],[],[466,457],[882,760],[88,439],[762,502],[571,283],[945,598],[10,252],[],[650,706],[731,150],[841,909],[443,188],[867,264],[982,612],[],[439,525],[250,541],[165,235],[],[],[679,301],[],[],[312,763],[941,758],[576,630],[],[558,722],[765,995],[],[234,141],[597,300],[896,346],[],[],[774,181],[436,516],[572,915],[324,287],[965,800],[],[758,889],[981,715],[811,447],[],[],[],[],[876,240],[675,526],[282,911],[],[191,28],[779,703],[],[55,323],[792,324],[782,609],[349,113],[90,153],[901,920],[54,269],[],[],[499,548],[798,534],[],[594,706],[],[],[613,192],[91,580],[753,4],[631,607],[406,386],[],[633,623],[],[240,32],[971,605],[191,527],[833,68],[],[],[],[452,761],[],[574,74],[190,434],[],[387,657],[],[],[],[],[174,222],[],[145,420],[660,539],[],[546,903],[],[],[],[],[826,314],[841,74],[986,483],[876,117],[],[435,95],[795,861],[],[59,834],[583,868],[358,922],[142,927],[706,249],[],[883,312],[625,202],[256,992],[],[564,731],[656,140],[525,95],[617,811],[],[991,48],[553,161],[533,774],[148,819],[],[861,492],[482,389],[224,434],[],[852,773],[9,529],[919,52],[],[],[953,175],[243,657],[185,958],[508,702],[833,960],[],[912,23],[66,597],[],[848,758],[484,748],[],[302,772],[640,229],[898,166],[958,674],[438,732],[],[444,811],[22,161],[531,182],[442,244],[255,169],[507,783],[],[655,14],[234,256],[],[76,661],[886,410],[338,779],[894,364],[794,418],[486,194],[],[948,443],[780,693],[171,275],[],[194,181],[538,187],[562,660],[],[],[370,678],[297,519],[],[219,103],[59,464],[158,944],[909,463],[],[],[131,640],[716,369],[614,987],[669,483],[],[571,155],[282,315],[],[],[9,652],[],[864,373],[887,136],[984,377],[],[938,940],[],[],[],[335,60],[968,514],[14,856],[141,881],[786,357],[949,840],[427,913],[],[],[448,623],[22,286],[529,745],[419,665],[],[654,228],[],[141,678],[944,38],[854,186],[417,425],[89,194],[219,873],[270,35],[839,786],[31,95],[209,678],[311,166],[172,737],[761,59],[753,918],[200,145],[373,271],[],[],[],[602,126],[799,295],[194,119],[824,485],[276,321],[566,121],[597,545],[285,231],[623,289],[643,472],[],[114,204],[227,149],[],[233,726],[213,792],[],[],[],[363,747],[923,239],[583,674],[658,484],[406,982],[],[927,78],[],[],[354,223],[],[884,408],[100,837],[905,805],[],[26,314],[],[747,924],[],[852,441],[],[193,980],[],[585,439],[],[],[296,173],[881,162],[547,651],[341,961],[472,788],[379,126],[],[896,278],[],[563,623],[],[744,917],[362,661],[158,802],[385,390],[311,217],[5,431],[772,9],[],[781,703],[839,55],[733,704],[125,658],[603,6],[],[],[173,270],[],[671,752],[211,457],[],[351,290],[796,866],[169,148],[],[],[],[747,175],[387,419],[380,661],[793,311],[],[89,565],[15,990],[532,161],[947,211],[537,891],[375,556],[516,95],[193,440],[974,103],[175,508],[503,897],[],[562,893],[],[73,385],[],[],[133,68],[251,784],[763,633],[157,652],[778,681],[512,735],[784,57],[],[564,586],[28,262],[],[287,912],[646,664],[],[791,129],[37,969],[752,769],[532,641],[870,257],[274,805],[],[476,45],[926,373],[920,673],[342,943],[809,857],[],[],[882,699],[775,721],[621,144],[51,586],[639,481],[903,355],[489,692],[539,421],[899,552],[],[7,158],[],[],[606,335],[],[680,467],[],[349,584],[],[131,270],[968,401],[],[],[610,844],[282,103],[687,421],[949,276],[],[44,44],[],[704,492],[915,154],[117,550],[],[610,987],[439,577],[366,558],[230,122],[],[613,117],[],[],[211,778],[145,985],[],[],[],[42,470],[],[],[],[],[136,404],[],[],[],[],[799,535],[302,510],[18,518],[993,529],[855,418],[974,925],[803,906],[],[944,122],[540,541],[898,476],[66,470],[1000,397],[319,146],[481,452],[818,166],[254,416],[290,117],[897,331],[702,973],[],[905,739],[961,564],[159,410],[463,220],[],[277,409],[],[38,682],[468,124],[621,698],[188,462],[735,495],[751,583],[286,198],[567,640],[993,234],[756,675],[],[274,676],[499,119],[450,941],[149,866],[259,678],[13,763],[493,516],[704,734],[305,345],[209,338],[427,86],[489,780],[],[943,91],[480,185],[466,706],[],[92,686],[],[14,404],[378,213],[885,217],[305,99],[],[275,839],[],[281,310],[749,362],[961,696],[579,211],[997,685],[645,105],[252,609],[77,765],[],[],[275,296],[5,683],[816,504],[],[],[],[457,167],[99,867],[354,991]]”

For “sum” input the process is repetitive. Even though for other “sum” input test cases results were accepted, but for the input mentioned here, LeetCode is showing wrong answer.

How to make my homescreen slider responsive

i have centralised my slider and I will drop the same size images in once ive sorted the layout. I need the slider to be responsive. anyone know how i go about that please?

see html

let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }

        slides[slideIndex - 1].style.display = "block";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
      }
.home-container { 
margin: 0px auto; // center
width:1000%;  
text-align:center; 
border-image-width: auto;
overflow: hidden;
} 
.slideshow-container {
   width: 1000%;
    margin: auto;
    position: relative;
   
}


.mySlides {
  display:none;
}



.text {
  color: orange;
  font-size: 60px;
  position: bottom;
  bottom: 8px;
  width: 100%;
  text-align: center;
        
}


.fade {
  animation-name: fade;
  animation-duration: 1.5s;
    align-content: center;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
div class="home-container">

        <div class="slider-container">
                  
          <div class="mySlides fade">
            <img
              src="Media/slider/2.jpg"
              alt="Roller Coaster" height=800px>
            <div class="text">Teddy Tinkers</div>
              
          </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/7.jpg"
              alt="Splash Park"
              height=800px
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/6.jpg"
              alt="Eating Area"
                 height=800px
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/8.jpg"
              alt="Park Map"
                 height=800px
              >
              <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
           <img
              src="Media/slider/10.jpg"
              alt="Park Map"
                height=800px
             >
            <div class="text">Teddy Tinkers</div>
            </div> 
            <div class="mySlides fade">
          <img
              src="Media/slider/11.jpg"
              alt="Park Map"
               height=800px
              >
            <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
         <img
              src="Media/slider/12.jpg"
              alt="Park Map"
              height=800px
              >
            <div class="text">Teddy Tinkers</div>
            </div>
           </div> 
        
       </div>
        

I want the slider to be centralised and to be responsive on a smaller screen! any assistance will be great.

I will have max around 20-25 slides so I assume i may need to make sure I add code for this amount too?