The exam checking for the backend is working perfectly well but the front end keeps saying an error occurred. Am like ok then tried the demo version replaced the javascript and everything i can replace still the same error . i then created my own frontend result checker with a few modification but not able to link it for it to display the results on the frontend i need guidiance and if it works i can share the latest version of the saas . ill share a clean script and the result page i tired doing you can finish the modification and linking . enter image description here – the frontend result issue – then my own –enter image description here

I have tried everything still getting the issue before i started building my own front end result checker – here is a link to the file – https://drive.google.com/drive/folders/1UtxgVS4qicVEP2_k9eTZmSxDQ5C-SHPU?usp=sharing ill be waiting remember to go through the documentation as you will need it … you can put anything as purchase code thanks.

const options = {
search: true,
download: true,
print: true,
viewColumns: true,
filter: true,
filterType: “dropdown”,
elevation: 0,
responsive: “standard”,
tableBodyHeight: “450px”,
tableBodyMaxHeight: “”,
selectableRows: ‘none’,

enableRowActions: 'true',
positionActionsColumn: 'last',

displayColumnDefOptions: {
  'mrt-row-actions': {
    header: 'Change Account Settings', //change header text
    size: 200, //make actions column wider
  },
},

renderRowActions: ({ row }) => (
  <div className='d-flex align-items-center'>
    {row.original.role_id == 1 ? <div>Super Admin</div> : row.original.role_id == 2 ? <div>Admin</div> : <div>Agent</div>}
    <EnableDisableComp data={tranformToArray(row.original)} columns={columns} />
    <Edit size={16} className="text-theme mx-3" onClick={() => dispatch({ type: "openModal", payload: <EditForm data={tranformToArray(row.original)} columns={columns} /> })} />
  </div>
),



renderTopToolbarCustomActions: () => {
  return (<Customtoolbar content={<AddForm />} />)
}

};

renderRowActions: ({ row }) => (

{row.original.role_id == 1 ? Super Admin : row.original.role_id == 2 ? Admin : Agent}

<Edit size={16} className=”text-theme mx-3″ onClick={() => dispatch({ type: “openModal”, payload: })} />

),

I want to create a discord bot that runs on javascript or python(doesnt really matter for me), which if joined in a voice channel, plays a specific url that I have. I basically only need it to be able to join and leave and play the url.

Does anybody have any idea how I can make this work?

I did try some codes I wrote with no experience and it didnt work.

login.js

const groupName = document.getElementById("input-group-name");
const password = document.getElementById("input-password");

const loginButton = document.getElementById("login-button");

const loginError = document.getElementById("login-error");

let loginUser;

loginButton.addEventListener("click", async () => {
    const formData = new FormData(document.getElementById("loginForm"));
    console.log("Form data:", formData);

    try {
        const response = await fetch("/login", {
            method: "POST",
            body: formData,
        });

        const data = await response.json();

        if (response.ok) {
            console.log("Successfully logged in");
            loginError.style.display = "none";
        } else {
            console.log("Failed login");
            loginError.style.display = "block";
        }
    } catch (error) {
        console.error("Error during login:", error);
    }
});

i’m using laravel breeze for login, so i try to fetch to /login, then check the response, if login failed, then i show the login error part in my login blade, but it didn’t work, help me please, here in console log :
Form data: FormData {}
login.js:43
Error during login: SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “… is not valid JSON
(anonymous)

I am building a stopwatch in which there is a timer and the timer should run save the time to asyncstorage to be able to retrieve it and resume from where the timer reached when the app is killed then relaunched. So the problem is that the time is being saved but when i try to retrieve it, the value is 0 and not the saved value. I need your help please to be able to retrieve the right value and if i am saving it right. This way of saving i got from building a previous app which is working perfect but not in the app i am building now

here is my code:

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image, Modal, Platform } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function StopwatchScreen() {
    const [menuVisible, setMenuVisible] = useState(false);

    const [backgroundColor, setBackgroundColor] = useState('#11167F');
    const [headerBackgroundColor, setHeaderBackgroundColor] = useState('#0a1055');

    const [isRunning, setIsRunning] = useState(false);
    const [time, setTime] = useState(0);

    const [retrievedTime, setRetrievedTime] = useState(0);

    const intervalRef = useRef(null);

    const handleLapButtonPress = useCallback(() => {
        if(isRunning) {
            
        } else {
            setTime(0);
            setRetrievedTime(0);
            saveAsync('time', 0);
            console.log("cleared time: ", time);
            console.log("cleared retrieved time: ", retrievedTime);
        }
    }, [isRunning]);

    const handleStartButtonPress = async () => {
        setIsRunning(!isRunning);
        saveAsync('isRunning', !isRunning);
        saveAsync('time', time);
    };

    useEffect(() => {
        if (isRunning) {
            console.log("it is running");
            intervalRef.current = setInterval(() => {

                if(retrievedTime > 0) {
                    console.log("retrieved > 0");
                    setTime(previousTime => retrievedTime + previousTime + 100);
                } else {
                    console.log("retrieved not > 0");
                    setTime(previousTime => previousTime + 100);    
                }
                
            }, 100);
            
        } else {
            clearInterval(intervalRef.current);
            console.log("it stopped");
        }
        
        return () => clearInterval(intervalRef.current);
        
    }, [isRunning]);

    useEffect(() => {
        saveAsync('time', time);
    }, [time]);

    const toggleMenu = () => {
        setMenuVisible(!menuVisible);
    }

    const displayTime = () => {
        const milliseconds = parseInt((time%1000)/10);
        const centiseconds = Math.floor(milliseconds/10);
        const seconds = parseInt((time/1000)%60);
        const minutes = parseInt((time/(1000*60))%60)
        const hours = parseInt((time/(1000*60*60))%24);

        return {
            hours: pad(hours),
            minutesSeconds: pad(minutes % 60) + ':' + pad(seconds % 60),
            centiseconds: centiseconds,
        };
    };
    
    const pad = (number) => {
        return number < 10 ? '0' + number : number;
    };

    const retrieveAsync = async (key) => {
        try {
            const jsonValue = await AsyncStorage.getItem(key);

            if (jsonValue !== null) {
                const parsedValue = JSON.parse(jsonValue);
                console.log("parsedValue: ", parsedValue);

                if(key === 'time') {
                    setRetrievedTime(parsedValue);
                    console.log("retrieve "+key+" inside: ", retrievedTime);
                }

            }
        } catch (e) {
            // error reading value
            console.log('error: ', e);
        }
    };

    const saveAsync = async (key, value) => {
        AsyncStorage.setItem(key, JSON.stringify(value));
        console.log(key+" value saved: ", value);
    };

    useEffect(() => {
        console.log("Real retrieved time: ", retrievedTime);
        setTime(previousTime => previousTime + retrievedTime);
    }, [retrievedTime]);

    useEffect(() => {
        retrieveAsync('time');
        console.log("useEffect retrieved time: ", retrievedTime);
    }, []);
    

    return (
        
        <View style={[styles.container, Platform.OS === 'android' && styles.androidPadding]}>
        
            <View style={[styles.header, {backgroundColor: headerBackgroundColor}]}>
                <Text style={[styles.title, styles.textFont]}>Futuristic Stopwatch</Text>
                <TouchableOpacity onPress={toggleMenu}>
                    <Image source={require('../assets/images/three_dots.png')} style={styles.dotsIcon} />
                </TouchableOpacity>
            </View>

            <Modal
                transparent={false}
                animationType="slide"
                visible={menuVisible}
                onRequestClose={() => setMenuVisible(false)}
            >
                <View style={styles.modalContainer}>
                    Modal
                </View>
            </Modal>

            <View style={[styles.contentContainer, {backgroundColor: backgroundColor}]}>
                <View style={styles.rowHud}>
                    <Text style={[styles.hoursTimerOverlay, styles.textFont]}>{`${displayTime(time).hours}`}</Text>
                    <Text style={[styles.timerOverlay, styles.textFont]}>{`${displayTime(time).minutesSeconds}`}</Text>
                    <Text style={[styles.centisecondsTimerOverlay, styles.textFont]}>{`${displayTime(time).centiseconds}`}</Text>
                </View>
                <View style={styles.controls}>
                    <TouchableOpacity onPress={handleStartButtonPress} style={[styles.controlButtonBorder, { backgroundColor: isRunning ? "#340e0d" : "#0a2a12" }]}>
                        <View style={styles.controlButton}>
                            <Text style={{ color: isRunning ? "#ea4c49" : "#37d05c" }}>{isRunning ? 'Stop' : 'Start'}</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={handleLapButtonPress} style={[styles.controlButtonBorder, { backgroundColor: isRunning ? "#333333" : "#1c1c1e" }]}>
                        <View style={styles.controlButton}>
                            <Text style={{ color: isRunning ? "#fff" : "#9d9ca2" }}>{isRunning ? 'Lap' : 'Reset'}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );

    
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      padding: 0,
    },
    androidPadding: {
        paddingTop: Platform.OS === 'android' ? 25 : 0,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 0,
        paddingTop: 18,
        paddingBottom: 15,
        paddingLeft: 10,
        paddingRight: 10,
    },
    title: {
        fontSize: 18,
        //fontWeight: 'bold',
        color: 'white',
    },
    dotsIcon: {
        width: 20,
        height: 20,
        resizeMode: 'contain',
    },
    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    textFont: {
        fontFamily: 'Orbitron Black',
    },
    modalContent: {
        backgroundColor: '#fff',
        padding: 20,
        borderRadius: 10,
        elevation: 5,
    },
    closeButton: {
        position: 'absolute',
        top: 10,
        right: 10,
    },
    sectionTitle: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 10,
    },
    sectionTitleText: {
        fontFamily: 'Orbitron Black',
    },
    radioBox: {
        marginTop: 20,
        alignItems: 'flex-start',
        width: 300,
    },
    radioOptions: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },

    contentContainer: {
        flex: 1,
    },
    rowHud: {
        flex: 0.6,
        flexDirection: 'row',
        marginBottom: 0,
        marginTop: 10
    },
    timerOverlay: {
        position: 'absolute',
        top: '50%', // Adjust as needed
        left: '50%', // Adjust as needed
        transform: [{ translateX: -90 }, { translateY: -30 }],
        fontSize: 50,
        color: 'white',
    },
    hoursTimerOverlay: {
        position: 'absolute',
        top: '35%', // Adjust as needed
        left: '50%', // Adjust as needed
        transform: [{ translateX: -30 }, { translateY: -30 }],
        fontSize: 35,
        color: 'white',
    },
    centisecondsTimerOverlay: {
        position: 'absolute',
        top: '71%', // Adjust as needed
        left: '50%', // Adjust as needed
        transform: [{ translateX: -15 }, { translateY: -35 }],
        fontSize: 35,
        color: 'white',
    },
    controls: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 20,
        paddingRight: 20,
    },
    controlButtonBorder: {
        justifyContent: "center",
        alignItems: "center",
        width: 70,
        height: 70,
        borderRadius: 70,
    },
    controlButton: {
        justifyContent: "center",
        alignItems: "center",
        width: 65,
        height: 65,
        borderRadius: 65,
        borderColor: "#000",
        borderWidth: 1
    },
    image: {
        width: '100%',
        height: '100%',
        paddingLeft: 10,
        paddingRight: 10
    }
});

I inspected many ways how to do different parts of the task such as change opacity on scroll or change position on scroll but still don’t understand how to put it together.

What I need:

There is a container that has 4 words that goes in a row. Only 1 word is visible at one time and then another words has to appear from right on scroll down and vice versa on scroll up and so on with each word. I created visual example of what I want:

Step 1:

User begins scrolling and text starting appearing from right (example shows text 1 and text 2 but it has to be related to each text in the row)

Step 2:

User keeps scrolling and text 2 goes on the position of text 1 one while text 1‘s
transparency becomes less

Next steps:

It’s shown on the last 2 images that at the end text 1 disappears with opacity: 0; and text 2

Example above is shown on scroll down but when user scrolls up it should work in reverse way and it should work so when user scrolled for text 2 and keeps scrolling, text 3 appears and so on

Unfortunately I cannot share the code I tried because I can’t even imagine a way how to approach for this task. But I had some ideas such as create 2 slider current and next or something like that.

I hope description with images is clear enough because I’m not even sure if I understand it right

I have the following piece of HTML stored in a variable and I’m trying to find and replace certain characters so that it will be aligned with a template I’m using which converts the code into a component after the necessary changes have been made.

I need to update the the following and here’s an example of what’s needed:

    let testall = `<div class="row"><span>Lorem Ipsum is simply dummy text of the printing and 
    typesetting industry. <u><a href="test/test_url/">dummy text</a></u></span><span 
    id="extra">Lorem Ipsum has been the industry's standard dummy text ever since the 1500's when 
    an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
    survived not only five centuries</span></div>`

    // this replace works
    console.log("Test 1: " + testall.replaceAll("'","&apos;"));

    // this replace doesn't fully work as it doesn't include the backslash after
    console.log("Test 2: " + testall.replaceAll('<a href="','<a href="{{store}}'));

    // this replace doesn't work - i tried an alternative below, however at adds 2 backslashes instead of only one
    console.log("Test 3: " + testall.replaceAll("</","</"));
    
    // alternative - tried on span tag - adds 2 backslashes instead of only one
    console.log("Test 4: " + testall.replaceAll(/</span>/g, '<\/span>'));

As can be seen from above the first find and replace works, however, when I come to replacing/adding the backslashes I run in to trouble.

Any help would be great.

I’m building an npm package that relays on WebUSB in the browser and usb for node. I have the following code that is intended to solve the above problem by not importing usb in the browser.

const getUSB = async (): Promise<USB> => {
    if(usbAgent) return usbAgent

    if(typeof window !== "undefined") {
        if(navigator.usb) {
            usbAgent = navigator.usb
        } else {
            throw unsupportedUsbError
        }
    } else {
        const { WebUSB } = await import("usb")
        usbAgent = new WebUSB({allowAllDevices: true})
    }

    return usbAgent
}

However if I import this in nextjs, it fails to even load the page (we don’t even get to call the getUSB function) with the error fs can't be resolved. I also tried replacing the await import with a console log but I can’t see it being called neither in the dev servers terminal nor in the browser. Is NextJS doing some optimisation and importing my module anyways or what am I doing wrong?

Not sure if it counts, but I’m using tsup to bundle my package

// This script will be injected into all web pages

const bodyText = document.body.innerText.toLowerCase();

if (bodyText.includes("taxi") || bodyText.includes("electric")) {
  document.body.style.backgroundColor = "PINK";
}

I want to automatically log the user out (clearing some localStorage) when the user’s cookie has expired.

I’m using an interceptor to check for a 401, which can be that they’re logged out or they’re trying to access something they don’t have access to.

My problem is that the response object from the authcheck call is undefined.

I’ve tried using .then()/.catch() and that doesn’t work either.

apiClient.interceptors.response.use((response) => response, async (error) => {

    // prevent infinite loop
    if (error.config.url == "authcheck") {
        return Promise.reject(error);
    }

    // we got a 401, check if they're actually logged out by calling the authcheck endpoint
    if (error.response.status == 401) {
        const authCheckResponse = await apiClient.get('authcheck');
        
        // authcheck returned a 401, they'are logged out
        if(authCheckResponse.response.status == 401) {
            Logout();
        }
    }

    return Promise.reject(error);
});

Hi I have problem with context in React. This is my context code.

import {useContext, createContext } from 'react';
import { GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from 'firebase/auth'
import { firebaseAuth } from '../Firebase/Config.js'

const AuthContext = createContext();

export const AuthContextProvider = ({children}) => {
    const googleSignIn = async () => {
        const provider = await new GoogleAuthProvider();
        signInWithPopup(firebaseAuth, provider);
      }
    return (
        <AuthContext.Provider value={googleSignIn}>
            {children}
        </AuthContext.Provider>
    )
}

export const UserAuth = () => {
    return useContext(AuthContext);
}

and there is where I’m using this context.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import UploadImage from './Firebase/UploadImage.jsx'
import './App.css'
import {GoogleButton} from 'react-google-button'
import { AuthContextProvider, UserAuth } from './Context/AuthContext.jsx'

function App() {

  const googleSignIn = UserAuth();

    const handleGoogleSignIn = async () => {
      console.log(googleSignIn);
      try {
        await googleSignIn();
      } catch (error) {
        console.log(error);
      }
    }

  return (
    <div>
    <AuthContextProvider>
      <UploadImage />
      <div className="HandleGoogleSignIn">
        <GoogleButton onClick={handleGoogleSignIn} />
      </div>
    </AuthContextProvider>
  </div>  
  )
}

export default App

Do you have any idea why googleSignIn is undefined? I don’t see any mistakes. Should be fine, but isn’t. I’m just starting learning React.

The code below does not seem to work using ‘in’ for a letter search in a string but surprisingly works for the digits(0-9).
Please take a look at the following code:

const vowels_count = (mainStr) => {

    let arr_vowels = ["a", "e", "i", "o", "u", "1"];
    let cnt = 0;

    for (let each of mainStr) {
        each = each.toLowerCase();
        if (each in arr_vowels) {
            cnt += 1;            
        }        
    }
    console.log(`No. of Vowels in ${mainStr}: ${cnt}`);
}

let inp_str = "Hello Good Day1";
vowels_count(inp_str);

In the above code the value of ‘cnt’ is 1 for the digit ‘1’ but not for “a”, “e”, “i”, “o”, “u”.
Please explain why?

P.S – I’m well aware of the use of indexOf() and includes() on this code. Just want to know the reason behind the above behaviour.

THANKS.

the issue is below :-
1-2. after selected value i get successfully filtered data but not showing checked mark and that selected value in filtered field
const materialTableColumns = columns?.map(column => {
return {
title: column?.title,
field: column?.field,
searchable: false,
lookup: uniqueValuesForColumns[column.field]?.reduce((acc, curr) => {
acc[curr] = curr;
return acc;
}, {}),
customFilterAndSearch: (filterValues, rowData) => {
handleFilterChange(column.field, filterValues);
},
filtering: column.filtering
};
});
i try to selected value with use dropdown for get filtered data using column filter in material table

let $function =27; // is correct

But

let &function = 27; // show error

what is difference $ symbol and other &,* etc. in programming.

why they are not accepted other symbols.
what is the reason behind this.

share the details.

detail of my project tools :- i use expo go and my project is build on Expo

NavigaitonScreen.jsx

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import OnBoardingScreen1 from "../screens/on_boarding_screen/OnBoardingScreen1";
import OnBoardingScreen2 from "../screens/on_boarding_screen/OnBoardingScreen2";
import OnBoardingScreen3 from "../screens/on_boarding_screen/OnBoardingScreen3";

const Stack = createNativeStackNavigator();
export default function NavigationScreen() {
  return (
    <Stack.Navigator initialRouteName="OnBoardingScreen1">
      <Stack.Screen name="OnBoardingScreen1" component={OnBoardingScreen1} />
      <Stack.Screen name="OnBoardingScreen2" component={OnBoardingScreen2} />
      <Stack.Screen name="OnBoardingScreen3" component={OnBoardingScreen3} />
    </Stack.Navigator>
  );
}

RootNavigation.jsx

import { NavigationContainer } from "@react-navigation/native";
import NavigationScreen from "./NavigationScreen";

export default function RootNavigation() {
  return (
    <NavigationContainer>
      <NavigationScreen />
    </NavigationContainer>
  );
}

App.js

import React from "react";
import { View } from "react-native";
import RootNavigation from "./src/navigations/RootNavigation";

const App = () => {
  return (
    <View>
      <RootNavigation />
    </View>
  );
};

export default App;

in my screen i see only white screen but our OnBoardingScreen{1,2,3}.jsx contain image , text with one button

• and if i try to test this screen individually then they are appear in the screen
• after putting navigation they don’t show me expect white screen no error throw

here is my console output :-

Logs for your project will appear below. Press Ctrl+C to exit.
Unable to resolve asset "./assets/adaptive-icon.png" from "android.adaptiveIcon.foregroundImage" in your app.json or app.config.js
Android Bundling failed 1653ms
Unable to resolve "../../assets/images/on_boarding_assets/on_boarding-1-assets/onBoarding_image.png" from "src/screens/on_boarding_screen/OnBoardingScreen1.jsx"
› Reloading apps
Unable to resolve asset "./assets/icon.png" from "icon" in your app.json or app.config.js
Android Bundling failed 2710ms
Unable to resolve "../../../style/GeneralStyle" from "src/screens/on_boarding_screen/OnBoardingScreen1.jsx"
› Reloading apps
Unable to resolve asset "./assets/icon.png" from "icon" in your app.json or app.config.js
Android Bundling complete 6275ms

› Reloading apps
Unable to resolve asset "./assets/icon.png" from "icon" in your app.json or app.config.js
Android Bundling complete 114ms

i want you to please any one guide me what i can do and where i am wrong

• or if you have any question related to that please ask – THANKYOU