Category: javascript

My async function look like

import { PERMISSIONS, RESULTS, checkMultiple } from 'react-native-permissions';
import { Platform } from 'react-native';
  const checkPermissions = async (): boolean => {
    console.log('Platform.OS', Platform.OS)
    if (Platform.OS === 'ios') {
      checkMultiple([
        PERMISSIONS.IOS.LOCATION_ALWAYS,
        PERMISSIONS.IOS.MOTION,
      ]).then((status) => {
        if (
          status[PERMISSIONS.IOS.LOCATION_ALWAYS] === RESULTS.GRANTED &&
          status[PERMISSIONS.IOS.MOTION] === RESULTS.GRANTED
        ) {
          console.log('permissions allgood');
          return true;
        } else {
          console.log('PERMISSIONS are false.');
          return false;
        }
      });
    } else if (Platform.OS === 'android') {
      checkMultiple([
        PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,
        PERMISSIONS.ANDROID.ACTIVITY_RECOGNITION,
      ]).then((status) => {
        if (
          String(status[PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION]) ===
            RESULTS.GRANTED &&
          String(status[PERMISSIONS.ANDROID.ACTIVITY_RECOGNITION]) ===
            RESULTS.GRANTED
        ) {
          console.log('permissions allgood');
          return true;
        } else {
          console.log('PERMISSIONS are false.');
          return false;
        }
      });
    }
    return 'why';
  };

    const permissionsOn = checkPermissions();
    console.log('permissionsOn',permissionsOn)

The results are:
LOG Platform.OS ios
LOG permissionsAreON before {“_h”: 0, “_i”: 1, “_j”: “why”, “_k”: null}//’why’
LOG permissions allgood

so how do you format an async function wrapping fn.then() and return the result?

Context:
I am not new to programming, but I am new to front end development. That is, my background is mainly in scientific computing, and I now am building a basic web application.

Main:
I am starting from the ground up using Svelte/SvelteKit. I have a basic understanding of JS/TS/CSS/HTML, at least syntactically. Recently, I have run into the following issue.

I want to use custom colors/custom variable names for these colors (e.g., blue_light, blue_dark, which I have defined in another file and imported into my main +page.svelte) that match the specific pantone colors of the brand, plus it keeps things more organized for the team.

What I am seeking is a way to change several different colors of the web page at once. For example, the colors of link and visited text.

I could go through one-by-one and set each one under , but this is slow and prone to errors, obviously.

Instead, I thought I could set a CSS block to do exactly that, something like as follows:

<style>
    a.link {
        color: custom_color
    }
</style>

where custom_color is defined somewhere in . My intuition was that I could pass a JavaScript variable to with Svelte, because I can do so in with curly brace syntax. I have done some digging, and it doesn’t seem like there’s an easy way to get what I am seeking, so it seems like I will have to rely on some method that utilizes document.getElementsByName() in Javascript.

All of this leads me to my question: What is the point of CSS, when I can manipulate everything with JavaScript? CSS does not seem very useful if I cannot pass variables to it. Is this a bottleneck of Svelte? Am I missing something obvious?

I have looked into JQuery to manipulate the page more concisely, but this does not lead me to understanding why CSS is necessary when page manipulation can just be handled with JavaScript.

Don’t know if this has a specific name, but I need to flatten an array of 1D arrays and simple elements, in a way that all combinations untill a leaf “node” are reported. Here’s an example because the above leaves a lot to the imagination:

// My input array contains single elements or 1D arrays:
let input = [1, 2, [3, 4], [5, 6]];

The unfolding proceeds so that each time an array is encountered, the paths are split into as many elements as the array contains:

// current result = [1, 2]
// unconsumed input [[3, 4], [5, 6]]
// ->
// current result = [ [1, 2, 3], [1, 2, 4] ]

// current result = [ [1, 2, 3], [1, 2, 4] ]
// unconsumed input [[5, 6]]
// ->
// final result = [ [1, 2, 3, 5], [1, 2, 4, 5], [1, 2, 3, 6], [1, 2, 4, 6] ]

I may be messing something up with copies and aliasing but can’t seem to make it work right and handle special cases like:

let input1 = [1, 2, 3]; // No nested arrays
let input2 = [];        // Empty input

Tried building the result backwards since .pop is convenient to use here but can’t get it to work:

function flatPath(input, result = [[]]) {
    while (input.length) {
        const last = input.pop();

        if (Array.isArray(last)) {
            result = flatPath(last, [...result, ...result]);
        } else {
            for (let ar of result) {
                result.push(last);
            }
        }
    }
    return result;
}

let result = flatPath([1, 2, [3, 4], [2, 5, 6] ]);

console.log(result);

but can’t even get past compilation (I’m using typescript) since all I get is:

Parameter ‘input’ implicitly has an ‘any’ type.

Argument of type ‘any’ is not assignable to parameter of type ‘never’.

What is the problem with my code or is there a better (more idiomatic) way to do this.

I am currently working on a react native app. I am new to javascript and react. The main problem with this code is that touching the taskitem doesn’t change the page while touching the task components warps to the all the other screens.

This first part is the Task.js file:

import { useNavigation } from '@react-navigation/native';
import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image, Animated } from 'react-native';
import Cerebelum  from './Cerebelum';
import Cerebrum  from './Cerebrum';
import Brainstem  from './Brainstem';
import Structure  from './Structure';
import Physiology  from './Physiology';
import { LogBox } from 'react-native';

let TheBigList = {
Cerebrum: Cerebrum,
Cerebelum: Cerebelum,
Brainstem: Brainstem,
Structure: Structure,
Physiology: Physiology,
}

LogBox.ignoreLogs([
'Non-serializable values were found in the navigation state',
]);

const TaskItem = ({ task, onPress }) => {
const positionY = useRef(new Animated.Value(0)).current;

const translateY = positionY.interpolate({
inputRange: [0, 1],
outputRange: [0, -20], // Adjust the falling distance of each task
});

const opacity = positionY.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});

return (
<TouchableOpacity style={styles.taskItemContainer}>
<Animated.View
style={[
styles.taskItem,
{
transform: [{ translateY }],
opacity,
},
]}
\>
<Text style={styles.taskText}>{task}</Text>
</Animated.View>
</TouchableOpacity>
);
};

const Task = ({ text, imagesrc , elem}) => {
const [isPressed, setIsPressed] = useState(true);

const positionY = useRef(new Animated.Value(0)).current;

const handlePross = () => {
setIsPressed(!isPressed);
console.log('3');
};

const navigation = useNavigation()

const handleTaskPress = (task) => {
console.log('4');
navigation.navigate(task, { item: TheBigList[task] });
};

const renderTaskList = () => {
const taskItems = elem; // Example task items

    return taskItems.map((task, index) => (
      <TaskItem key={index} task={task} onPress={handleTaskPress(task)} />
    ));

};

return (
<TouchableOpacity onPress={handlePross}>
<View style={styles.item}>
<View style={styles.square}>
<Image source={imagesrc} style={styles.square} />
</View>
<View style={styles.itemLeft}>
<Text style={styles.itemText}>{text}</Text>
</View>
<View style={styles.circular}></View>
</View>
{isPressed && <View style={styles.taskList}>{renderTaskList()}</View>}
</TouchableOpacity>
);
};

This second is the navigation.js part:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import Brainstem from './Brainstem';
import Cerebrum from './Cerebrum';
import Cerebelum from './Cerebelum';
import Structure from './Structure';
import Physiology from './Physiology';

const Stack = createStackNavigator();

const Navigation = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Cerebrum" component={Cerebrum} options={{ headerShown: true }} />
<Stack.Screen name="Cerebelum" component={Cerebelum} options={{ headerShown: true }} />
<Stack.Screen name="Brainstem" component={Brainstem} options={{ headerShown: true }} />
<Stack.Screen name="Structure" component={Structure} options={{ headerShown: true }} />
<Stack.Screen name="Physiology" component={Physiology} options={{ headerShown: true }} />
</Stack.Navigator>
);
};

export default Navigation;

I tried using a condition so that the rendering and the function don’t happen at the same time, but the main issue here is that the taskitems remain unresponsive.

I have this piece of html code

And this piece of js code

the problem is that when i click he button to add new row the name does not set for new inputs. the name is string “dup” but i want the name to be 1, 2, 3 …. i know that i need to do a variable for ex. x and then do x++ but either way new inputs do not recieve a name at all.

I try to implement section with /edit/cancel/delete functionality.
Everything works except to a situation I edit a text box but click the Cancel button but still the new values being saved

I tried adding originalData variable and editedData so if I click cancel it will go back to originalData value and will not update.
But it still changing the value after clicking Cancel

Adding the code :

import React, { useState ,useReducer} from 'react';
import FCheckbox from "../../form_controls/FCheckBox";
import FTextbox from "../../form_controls/FTextBox";
import EditSaveToolbar from "../../edit_save_toolbar";
import { FAccordion } from "../../form_controls/FAccordion";
import FCheckboxGrid from "../../form_controls/FCheckBoxGrid";
import NewSystem from './building_floor_system_new';
import axios from "axios";
import { env } from "../../../next.config";
import { getAuthHeader } from "../../../lib/services/client_service";


function BuildingFloorSystems({ section,data,systems, types,errorState}) {
  const [selectedSystems, setSelectedSystems] = useState();
  //const [editableSystem, setEditableSystem] = useState(null);
  const [editedData, setEditedData] = useState([]);
  const [originalData, setOriginalData] = useState();
  const [isAddingSystem, setIsAddingSystem] = useState(false);
  const [editable, setEditable] = useState('');
  const [, update] = useReducer(x => x + 1, 0);
  const [flag, setFlag] = useState(0);
  const [addingFlag, setAddingFlag] = useState(0);
  console.log("------------------------------------------------------")
  console.log("data going to systems")
  console.log(data)


  console.log("------------------------------------------------------")
  console.log("systems variable values")
  console.log(systems)


  console.log("------------------------------------------------------")
  console.log("SelectedData variable values")
  console.log(selectedSystems)

  console.log("------------------------------------------------------")
  console.log("setEditedData variable values")
  console.log(editedData)

  console.log("------------------------------------------------------")
  console.log("originalData variable values")
  console.log(originalData)
  console.log("------------------------------------------------------")


  const handleCheckboxChange = (system) => {
    setSelectedSystems((prevSelectedSystems) => {
      if (prevSelectedSystems.includes(system)) {
        return prevSelectedSystems.filter((selectedSystem) => selectedSystem !== system);
      } else {
        return [...prevSelectedSystems, system];
      }
    });
  };


  const handleTextboxChange = (fieldName, value, systemIndex) => {
    console.log('this is the values we getiing in the text box change')
    console.log({fieldName})
    console.log("----------------")
    console.log({value})
    console.log("----------------")
    console.log({systemIndex})
    console.log("------------------------------------------------------")

  
  
    console.log("------------------------------------------------------")
    console.log("systems variable values before")
    console.log(systems)
  
  
    console.log("------------------------------------------------------")
    console.log("SelectedData variable values before")
    console.log(selectedSystems)
  
    console.log("------------------------------------------------------")
    console.log("setEditedData variable values before")
    console.log(editedData)
  
    console.log("------------------------------------------------------")
    console.log("originalData variable values before")
    console.log(originalData)
    console.log("------------------------------------------------------")

    //setEditedData(selectedSystems);

    setEditedData((prevSelectedSystems) => {
      const updatedSystems = [...prevSelectedSystems]

      const systemData = { ...updatedSystems[systemIndex].fdata };
      systemData[fieldName] = value;
      updatedSystems[systemIndex].fdata = systemData;
      return updatedSystems;
    });

    console.log("------------------------------------------------------")
    console.log("systems variable values AFTER")
    console.log(systems)
  
  
    console.log("------------------------------------------------------")
    console.log("SelectedData variable values AFTER")
    console.log(selectedSystems)
  
    console.log("------------------------------------------------------")
    console.log("setEditedData variable values AFTER")
    console.log(editedData)
  
    console.log("------------------------------------------------------")
    console.log("originalData variable values AFTER")
    console.log(originalData)
    console.log("------------------------------------------------------")
  };

  const onChangeAddHandle = (changes) => {
      console.log("changes of added system we gor from adding componenet")
      console.log(changes)
      console.log("------------------------------------------------------")
      console.log("systems variable values before")
      console.log(systems)
    
    
      console.log("------------------------------------------------------")
      console.log("SelectedData variable values before")
      console.log(selectedSystems)
    
      console.log("------------------------------------------------------")
      console.log("setEditedData variable values before")
      console.log(editedData)
    
      console.log("------------------------------------------------------")
      console.log("originalData variable values before")
      console.log(originalData)
      console.log("------------------------------------------------------")

      const systemExists = editedData.some((system) => system.dataField === changes.dataField);
      if (!systemExists) {
        console.log(editedData)
        setEditedData((prevEditedData) => [...prevEditedData, changes]);
      }

      else {
        setEditedData((prevEditedData) =>
          prevEditedData.map((system) => {
            if (system.dataField === changes.dataField) {
              return { ...system, ...changes };
            }
            return system;
          })
        );
      }


      console.log("------------------------------------------------------")
      console.log("systems variable values AFTER")
      console.log(systems)
    
    
      console.log("------------------------------------------------------")
      console.log("SelectedData variable values AFTER")
      console.log(selectedSystems)
    
      console.log("------------------------------------------------------")
      console.log("setEditedData variable values AFTER")
      console.log(editedData)
    
      console.log("------------------------------------------------------")
      console.log("originalData variable values AFTER")
      console.log(originalData)
      console.log("------------------------------------------------------")
      };

      function removeDuplicates(data) {
        const seenDataFields = new Set();
        const uniqueData = [];
      
        for (let i = 0; i < data.length; i++) {
          const currentItem = data[i];
          const currentDataField = currentItem.dataField;
      
          if (!seenDataFields.has(currentDataField)) {
            uniqueData.push(currentItem);
            seenDataFields.add(currentDataField);
          }
        }
      
        return uniqueData;
      }

      const handleSaveSystem = () => {

        console.log("----------------------SAVING FUNCTION------------------")
        console.log("------------------------------------------------------")
        console.log("systems variable values before")
        console.log(systems)
      
      
        console.log("------------------------------------------------------")
        console.log("SelectedData variable values before")
        console.log(selectedSystems)
      
        console.log("------------------------------------------------------")
        console.log("setEditedData variable values before")
        console.log(editedData)
      
        console.log("------------------------------------------------------")
        console.log("originalData variable values before")
        console.log(originalData)
        console.log("------------------------------------------------------")
        axios.post(env.THC_API + "/Building/SaveFloor", data, getAuthHeader())
        .then((result) => {
          console.log("results of save floor api endpoint call")
            console.log(result)
        })
        .catch((error) => {
            console.log(error)
        });
    
        const uniqueData = removeDuplicates([...selectedSystems, editedData[editedData.length - 1]]);
        updateSelectedSystemsData(uniqueData);
        setEditedData([]);
        setEditable('');
        handleCancelAddSystem();

        console.log("------------------------------------------------------")
        console.log("systems variable values AFTER")
        console.log(systems)
      
      
        console.log("------------------------------------------------------")
        console.log("SelectedData variable values AFTER")
        console.log(selectedSystems)
      
        console.log("------------------------------------------------------")
        console.log("setEditedData variable values AFTER")
        console.log(editedData)
      
        console.log("------------------------------------------------------")
        console.log("originalData variable values AFTER")
        console.log(originalData)
        console.log("------------------------------------------------------")
      };
      
      const updateSelectedSystemsData = (newData) => {
        setSelectedSystems(newData);
        setFlag((prevFlag) => prevFlag + 1);
      };

  const handleEditSystem = () => {

    console.log("got to edit")

    console.log("------------------------------------------------------")
    console.log("systems variable values before")
    console.log(systems)
  
  
    console.log("------------------------------------------------------")
    console.log("SelectedData variable values before")
    console.log(selectedSystems)
  
    console.log("------------------------------------------------------")
    console.log("setEditedData variable values before")
    console.log(editedData)
  
    console.log("------------------------------------------------------")
    console.log("originalData variable values before")
    console.log(originalData)
    console.log("------------------------------------------------------")
    setEditable('1');

    console.log(selectedSystems)

    console.log(flag)


    if(flag ===0)
      {
        setSelectedSystems(systems);
        setOriginalData(systems);
        setEditedData(systems);
        setFlag(1);
      }
    

      else{
            setOriginalData(selectedSystems);
            setEditedData(selectedSystems)

      }
    //setEditedData(systems)
   // setEditedData(selectedSystems)
    //setFlag(0);

    console.log("------------------------------------------------------")
    console.log("systems variable values before")
    console.log(systems)
  
  
    console.log("------------------------------------------------------")
    console.log("SelectedData variable values before")
    console.log(selectedSystems)
  
    console.log("------------------------------------------------------")
    console.log("setEditedData variable values before")
    console.log(editedData)
  
    console.log("------------------------------------------------------")
    console.log("originalData variable values before")
    console.log(originalData)
    console.log("------------------------------------------------------")

    console.log("finished edit")

  };

  const handleCancelEdit = () => {
    // Set the edited data back to the original system data
    //setEditedData(systems);
    console.log("--------------------------------CANCEL EDIT-------------------------")
    console.log("------------------------------------------------------")
    console.log("systems variable values before")
    console.log(systems)
  
  
    console.log("------------------------------------------------------")
    console.log("SelectedData variable values before")
    console.log(selectedSystems)
  
    console.log("------------------------------------------------------")
    console.log("setEditedData variable values before")
    console.log(editedData)
  
    console.log("------------------------------------------------------")
    console.log("originalData variable values before")
    console.log(originalData)
    console.log("------------------------------------------------------")


    setSelectedSystems(originalData);
    setEditable('');
    handleCancelAddSystem();
    setFlag(1);
    setEditedData([])
    console.log("------------------------------------------------------")
    console.log("systems variable values AFTER")
    console.log(systems)
  
  
    console.log("------------------------------------------------------")
    console.log("SelectedData variable values AFTER")
    console.log(selectedSystems)
  
    console.log("------------------------------------------------------")
    console.log("setEditedData variable values AFTER")
    console.log(editedData)
  
    console.log("------------------------------------------------------")
    console.log("originalData variable values AFTER")
    console.log(originalData)
    console.log("------------------------------------------------------")
    //setEditableSystem(null);
  };

  const handleAddSystem = () => {
    setIsAddingSystem(true);
  };

  const handleCancelAddSystem = () => {
    setIsAddingSystem(false);
  };

  const renderSelectedSystemAccordions = () => {
    console.log("all systems rendered")
    console.log(selectedSystems)
    return selectedSystems.map((system, index) => {
        const systemData = system.fdata;
        const systemAccordionId = `systemAccordion${index}`;
      return (
        <FAccordion isOpenByDefault ='true' title={system.labelText} id={systemAccordionId}>
          <div className="accordion-body row mx-0 px-0">
          {Object.entries(systemData).map(([key, value]) => (
            <div className="col-3">
                <FTextbox  
                key = {index}
                data={system.fdata}
                record={systemData}
                defaultValue={(typeof value === 'object' && value !== null)?systemData[key].typeDesc:value }
                dataField={key}
                labelText={key}
                displayField={"buildingFloorSystemAttribute"}
                section={systems}
                maxLength={10}
                errorState='' 
                editable={editable}
                onChange={(e) => {
                  handleTextboxChange(key, e,index);
                }}/>
                </div>
          ))}    
            </div>
            {editable !==''&&<div className="center-content mx-0 px-0">

            <button className="btn btn-danger" >Delete</button>
            </div>}
          </FAccordion>
      );
    });
  };

  return (
    <FAccordion title='Systems' id='systemsssss'>
    <div className="building-systems">
      <div className="systems-checkboxes">
        {editable ===''&&
      <FCheckboxGrid
        cols={4}
        data={data}
        items={types["buildingFloorSystemType"]}
        options={types}
        optionsField={"programType"}
        manyToMany={true}
        update={update}
        dataField="buildingFloorSystem"
        subField={"buildingFloorSystemType"}
        labelText="Systems"
        displayField="typeDesc"
        section="buildingFloorSystems"
        errorState={errorState}
        editable={editable}
      />}
                   
         <div className="accordion-body row mx-0 px-0">
        {editable !==''&&systems.map((system, index) => (
          <> 
           <div className="col-3">
          <FCheckbox
            key={index}
            labelText={system.labelText}
            checked={selectedSystems.includes(system)}
            onChange={() => handleCheckboxChange(system)}
          />
          </div>
          </>
        ))
      }
              </div>

            <EditSaveToolbar
            editable={editable}
            section={systems}
            onEdit={handleEditSystem}
            onSave={handleSaveSystem}
            onCancel={handleCancelEdit}
            onAdd={handleAddSystem}
          />
      </div>
      {isAddingSystem &&
            <NewSystem data = {systems}
             types = {types}
             editable = {editable} 
             section={section} 
             index = {selectedSystems.length}
             onCancel={handleCancelAddSystem} 
             editedData = {editedData}
             setEditedData = {()=>setEditedData()}
             onChangeAddHandle={onChangeAddHandle} 
             />
}
      <div className="selected-systems">
        {editable !==''&&selectedSystems.length > 0 && (
          <>
            {renderSelectedSystemAccordions()}
          </>
        )}
      </div>
    </div>
    </FAccordion>
  );
}

export default BuildingFloorSystems;

I need your little help to create the obj object you see on the code below.

// let arr1 = ['Monday', ['Pasta', 'Watermelon', 'Milk']],
// let arr2 = ['Tuesday', ['Cookies', 'Chips', 'Peach']]

const obj = {
  "Monday": ['Pasta', 'Watermelon', 'Milk'],
  "Tuesday": ['Cookies', 'Chips', 'Peach']
};

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} -> ${value}`);
}

Given arr1 and arr2 I have to create the obj object shown.

Can anyone help me please?

function nowakolumna(){
        document.getElementById("listacen") += '<tr><td><input type="text"></td><td><input type="text"></td></tr>';
    }

i have this code for adding new column in table but when i try to execute it via button with onclick listener i get this error: Invalid left-hand side in assignment. Anyone help.

I want to have a dynamic page that displays whether a certain player is a real player or a computer based on url parameters. The parameters themselves work fine and the data is collected correctly, but the DIV tags I have aren’t updating their text.

The issue is to do with declaring the variables p1 to p6, which are being shown as null in the console. I’m unsure on why this is since I’m even calling the whole thing inside the onload function. The console.log calls at the end of each case are also working fine.

Code Snippet

window.onload = function() {
  var p1 = document.getElementById("p1"),
    p2 = document.getElementById("p2"),
    p3 = document.getElementById("p3"),
    p4 = document.getElementById("p4"),
    p5 = document.getElementById("p5"),
    p6 = document.getElementById("p6");
  var url = window.location.href,
    params = url.split('?')[1].split('&'),
    data = {},
    tmp;
  for (var i = 0, l = params.length; i < l; i++) {
    tmp = params[i].split('=');
    data[tmp[0]] = tmp[1];
  }

  switch (data.players) {
    case 1:
      p2.innerHTML = "Computer";
      p3.innerHTML = "Computer";
      p4.innerHTML = "Computer";
      p5.innerHTML = "Computer";
      p6.innerHTML = "Computer";
      console.log(data.players)
      break;
    case 2:
      p3.innerHTML = "Computer";
      p4.innerHTML = "Computer";
      p5.innerHTML = "Computer";
      p6.innerHTML = "Computer";
      console.log(data.players)
      break;
    case 3:
      p4.innerHTML = "Computer";
      p5.innerHTML = "Computer";
      p6.innerHTML = "Computer";
      console.log(data.players)
      break;
    case 4:
      p5.innerHTML = "Computer";
      p6.innerHTML = "Computer";
      console.log(data.players)
      break;
    case 5:
      p6.innerHTML = "Computer";
      console.log(data.players)
      break;
    default:
      console.log(data.players)
      break;
  }
}

<div class="wrapper">
  <div></div>
  <div id="p1">p1</div>
  <div id="p2">p2</div>
  <div></div>
  <div id="p3">p3</div>
  <div></div>
  <div></div>
  <div id="p4">p4</div>
  <div></div>
  <div id="p5">p5</div>
  <div id="p6">p6</div>
  <div></div>
</div>

I am using @react-google-maps/api. I want to zoom in on the map until I can see the names of the clicked stores (selectedStore) in the map. I also want the transitions to be smoother instead of flashing the new geographic location.

Here’s my code:

const CENTER = {lng: -x.xxxxxx, lat: xx.xxxxxx, _type: 'geopoint'};

const Map: React.FC<MapProps> = ({
  locations,
  selectedStore,
  setSelectedRegion,
  ...options
}) => {
  const centerLocation = CENTER ?? locations[0]?.geo;
  const {isLoaded} = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: PUBLIC_GMAPS_API!,
  });

  const [map, setMap] = useState<google.maps.Map>();
  const [panQueue, setPanQueue] = useState();

  const onLoad = useCallback(
    function callback(map: any) {
      map.setOptions({
        center: centerLocation,
        zoom: 3,
      });
      setMap(map);
    },
    [centerLocation],
  );

  const onIdle = useCallback(
    function callback() {
      if (panQueue) {
        map.panTo(panQueue);
        map.setZoom(6);
        setPanQueue(undefined);
      }
    },
    [map, panQueue],
  );
  const onUnmount = useCallback(function callback(map: any) {
    setMap(null);
  }, []);

  const smoothlyAnimatePanTo = (geo) => {
    if (!map) return;
    map.setZoom(6);
    setPanQueue(geo);
  };

  useEffect(() => {
    if (!map) return;
    if (!selectedStore) {
      map.setOptions({
        zoom: 6,
      });
    } else {
      smoothlyAnimatePanTo(selectedStore?.geoLocation);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedStore]);

  useEffect(() => {
    if (map && selectedStore?.geoLocation) {
      map.panTo(selectedStore.geoLocation);
      map.setZoom(6);
    }
  }, [map, selectedStore]);

  return isLoaded ? (
    <GoogleMap
      mapContainerClassName="h-full w-full"
      onLoad={onLoad}
      onIdle={onIdle}
      onUnmount={onUnmount}
      options={{
        styles: mapStyles,
        streetViewControl: false,
        mapTypeControl: false,
        fullscreenControl: false,
        zoomControl: false,
        minZoom: 4,
        maxZoom: 12,
        restriction: {
          latLngBounds: {
            north: 85.0,
            south: -85.0,
            west: -180.0,
            east: 180.0,
          },
          strictBounds: true,
        },
      }}
    >
      {locations.map((location) => {
        return (
         <Marker ... />
        );
      })}
    </GoogleMap>
  ) : (
    <></>
  );
};

How can I achieve a smoother transition and zooming in?

I hope you’re doing well. I am reaching out to seek advice and suggestions regarding an issue I am facing. I have encountered a problem with the data display on my website, and I am seeking assistance in finding a solution.

The problem is as follows:
The data coming from the first page is currently being displayed in the following format:
enter image description here
I use two pages
first page

“https://pastebin.com/8eTDhUEq”

second page

“https://pastebin.com/bsNMpLj3”

I have provided the code for the first page, and I would appreciate it if someone could help me identify whether the issue lies in the CSS, JS, or HTML. Furthermore, any suggestions or solutions to fix the problem would be highly appreciated.

Thank you in advance for your assistance and valuable input.

I was expecting something like the one in the picture
enter image description here

How do I write pseudo code and flow chart on vscode

I wrote some couple of sentences about what I want JavaScript to run using pseudo code but I still don’t know how to make it look exactly like pseudocode. Also, how do I create flowchart

I need urgent help. In the E-wallet web application i created , there is a part of linking the back server to the client side part of the front. If anyone can help or have knowledge about the matter, I will be grateful

For your information, I finished the two parts, and the back part is currently working perfectly and database connected on local host

I tried to connect the backend with client server side but i can’t

So I’m trying to achieve a similiar effect to the e-mail element on this website:https://madebyshape.co.uk/

.custom-blend-mode {
  mix-blend-mode: difference;
}

So I got this to work but it changes to the opposite colour, however I would like it to be only black or white for max contrast.

I have a section with 2 div. In left div there is one heading and button & in another div there in one video. Now I have a background image for the video, which I tried to add through CSS in the wrapper class, but the dimensions of the background image are giving me trouble. I want to add the video in the middle of the background image. Could you help me this please?

    .container {
    width: 100%;
    margin-top: 20px;
  }

  .paragrah-desktop {
    display: flex;
  }
  .wrapper {    
    border: 2px solid black;
    background:  url(/static/imgs/bg_video.png); 
    //Dimension is 1920*1080
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;      
  }

  video {
    position: absolute;
    width: 80%;
    
    border: 2px solid #7cd959;
  }

    <section class="container" id="header">
            <div class="paragrah-desktop">
                <div class="subheader">
                    <h1 class="desktop-title">UPGRADE ALERTS</b></h1>
                    <button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join
                        
                    </button>
                    <p class="header-p">Coming to you July 2023</p>
    
                </div>
                <div class="wrapper">
                    <!-- <video controls>
                        <source src="{% static 'imgs/mobile_video.webm' %}"    type="video/webm">
    
                    </video> -->
                </div>
            </div>

        </section>