Category: javascript

I’m using interact.js and sortable.js libraries.

Everything goes fine in Chrome and Edge but un Firefox Is like just sortable.js Is working…however when i change to enable touch simulation mode Is interact.js working AND not sortable.js.

Apparently Firefox Is allowing just 1 of 2 libraries works at the same Time

I see the console and there are no error messages.

What Kind of software tools can i use to debug this ???

Why Is working fine in Chrome and Edge but not in Firefox ?

Everything that touches Visual Code gets copied and then displayed on the side as a hidden file… but annoying because it’s actually not hidden and stressing my OCD. How do I prevent visual code from making copies of every single file in the first place?

Thank you.

To clarify, I want Visual Code to NOT make any copy. I do not need additional files. I could delete all of them, but to do that every single time I use VS… well… you get it. How do I stop Visual Code from doing this.

Sorry I have to repeat myself, some people do not like answering questions on a platform for people seeking answers.

I am creating a sound board with a mapped array.
I have a onClick Handler which changes the colour of the button that is active/playing and Play/Pauses.

Currently I can pause the ‘active’ button but cannot restart the track for that button.
I can stop playing that track if I press on a different button to play that buttons track.

Just looking for some help on how to Play the same button after I paused it.

Thanks 🙂

const handleClick = (beat: string, index: number ) => {

    if (activeIndex === isActive) {
        setIsActive(!isActive);
        activeSound.play();
    }


    if (activeSound) {
        activeSound.stop();           
    } 

    if (!activeSound && activeIndex === isActive) {
        const newSound = createSound(beat);
        newSound.play();
        setActiveSound(newSound);
    }

    if (activeIndex !== index) {
        const newSound = createSound(beat);
        newSound.play();
        setActiveSound(newSound);
    }
    setActiveIndex(index);
}
return (
    <Container>
        <Title> Melody </Title>
        <Grid>
            {
                melodyData.map((beat, index: number) => {
                    return <Button key={index} $isActive={activeIndex === index} onClick={() => handleClick(beat.src, index)}>{beat.title}</Button>
                })
            }
        </Grid>
    </Container>
)

};

I want to return a some information in a json format so I can assign variables to them. I’m using Axios to get some json info on movies but can’t seem to assign a variable to the data, as I always get ‘undefined’ in the output. Any fixes?

Here’s my code, as you can see I’m trying to return something from the function then assign a value to it.

function getMovie(movie){
    axios.get('http://www.omdbapi.com?t='+movie+'&apikey='+APIKEY)
        .then((response) => {
            console.log(response.data);
            let info = response.data;
            return response.data;
        })
        .catch((error)=>{
            console.log(error);
        })
};

let movieInfo = getMovie('Dune');
console.log(movieInfo);

so I’m trying to use react-pagination for my react-bootstrap application and when I try to import ReactPagination component it shows some error which is “Support for the experimental syntax ‘jsx’ isn’t currently enabled (25:7)” and I wasn’t able to use any of component included in React-Pagination Library.

it show some solution like this: Add @babel/preset-react (https://git.io/JfeDR) to the ‘presets’ section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the ‘plugins’ section to enable parsing. But I don’t think I have any babel file, where can i locate one ? if it’s not available where should i create this file ?

I have this colorMap from firestore which is a map.

What I’m trying to do is add more data in the colorMap. Let’s say I have these:

Green: 50

Black 50

Red 20

And I wanted to add Pink : 80. But what my code currently does is, if I’ll add Pink: 80, the Pink becomes an array instead of a field. This is what happens when I save it in Firestore.

Expected output
Once I’ll add Black : 80, it should be the same data types with the other colors as well.

Submitting in firestore:

  //converting colorList to colorMap (map)
  const colorMap = colorList.reduce(function (map, obj) {
    map[obj.color] = obj.colorStocks;
    return map;
  }, {});

  const colorSave = Object.keys(colorMap);
  const qty = Object.values(colorMap);

  const handleSubmit = (index) => async (e) => {
    e.preventDefault();

    const ref = doc(db, "products", state);
    await updateDoc(ref, {
      ...product[index],
      [`colorMap.${colorSave}`]: qty,
    });
    console.log("done");
  };

This is the console for the colorMap:

Form

 {colorList.map((singleColor, index) => (
                    <div key={index}>
                        <>
                            <>
                                <TextField
                                  label="Color"
                                  name="color"
                                  type="text"
                                  id="color"
                                  required
                                  value={singleColor.color}
                                  onChange={(e) => handleColorChange(e, index)}
                                />
                                <TextField
                                  label="Stocks"
                                  name="colorStocks"
                                  type="number"
                                  id="colorStocks"
                                  required
                                  value={singleColor.colorStocks}
                                  onChange={(e) => handleColorChange(e, index)}
                                />
                            </>
                        </>
                      </div>
                      <br />
                        //button to remove the row of the textfield
                    </div>
                  ))}
                    //button to add the row of the textfield

When user logs in with correct credentials it returns a token. How can I pass that token for it to be used in future API calls?

Here is my SignIn code:

const SignIn = () => {
    const navigation = useNavigation();

    const {
        control, 
        handleSubmit, 
        formState: {errors},
    } = useForm();

    const onSignIn = (data) => {
        fetch('http://sign-in/',
            {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json",
                    "Accept": 'application/json',
                },
                body: JSON.stringify(data),
            },
            console.log(data)
        )
        .then( data => data.json())
        .then( data => {
            navigation.navigate(BottomTab);
        })
        .catch(error => console.error(error));
    };

    return (
        <View style={styles.root}>
            <Text style={styles.text}>sign in</Text>
            <CustomInput
                name={"username"} 
                placeholder= 'username:'
            />
            <CustomInput
                name={"password"}
                placeholder= 'password:'
            />
            <CustomButton onPress={handleSubmit(onSignIn)} />
        </View>
    );
};

After user signs in it navigates to the bottom tab navigator:

const Tab = createBottomTabNavigator();

const BottomTab = () => {

    return (
        <Tab.Navigator
            initialRouteName={"Home"}>
            <Tab.Screen name='Home' component={Home} />
            <Tab.Screen name='Profile' component={Profile} />
        </Tab.Navigator>
    );
};

Which is nested in a Navigator:

const Stack = createNativeStackNavigator();

const Navigation = () => {

    return (
        <NavigationContainer >
            <Stack.Navigator screenOptions={{headerShown:false}} >
                <Stack.Screen name="SignIn" component={SignIn} />
                <Stack.Screen name="BottomTab" component={BottomTab} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

Which is called in my App.js:

function App() {

  return (
    <SafeAreaView style={styles.root}>
      <StatusBar barStyle="light-content" />
        <Navigation />
      </SafeAreaView>
    ); 
  }
  
  const styles = StyleSheet.create({
    root: {
      backgroundColor: '#121212',
      flex: 1
    }
  });
  
export default App;

I’m not sure where and how to pass the token for it to give me access to it in future API calls.

Do I do that in the Bottom Tab or when i make the API calls in the future?

Appreciate any help!

I’m trying to help a developer make their incremental game more accessible to blind users who use a screen reader like I do. The game has lots of elements that are clickable but not buttons or links or anything, so I’m trying to change them so they’re easier to navigate to with a screen reader, but the way the game has them set up makes it difficult to turn them into individual buttons. I tried and wound up turning a whole section into one big button. I know HTML and am learning JavaScript, but I think this issue is a little beyond my knowledge. It’s difficult to share blocks of code because of the setup, so here’s a link to the code.
In case it helps, you can play the game here.
Can anyone help me figure out how to change the clickable items into buttons?

I would like to split words with comma, so I can later highlight it with mouse hover.
But I can’t get it to work, I don’t want to split words with - also.

HTML

<p class="texthover"> Name, Name-01, Name-02, Name, Name</p>

CSS

.texthover span {
    color: #F2668F;
    transition: color .3s;
}

.texthover span:hover {
    color: #023C4F;
    transition: color .3s;
}

First code I have, words are all split:

$(function() {
    $('.texthover').each(function() {
        var $this = $(this);
        $this.html($this.text().replace(/b(w+)b/g, "<span>$1</span>"));
    });
});

I tried it this way too, while I can get the words, I lose the commas in text:

var text = document.querySelector('.texthover').innerHTML;
var old_html = text.split(",");
var new_html = "";
for (var i = 0; i < old_html.length; i++) {
    new_html = new_html + " <span class='text-"+i+"'>" + old_html[i]  + " </span>";
    document.querySelector('.texthover').innerHTML = new_html;
}

I have a form where users can record themselves with their webcam using getUserMedia, and I need to send the file they record to another page before saving the file to the server.

My question is what would be the best way to do that? So far I’ve generated a blob of the video, how do I send this through my form to the next page so I can access the file and then store it on the server?

Currently I’m generating the blob like so, which works:

let videoURL = window.URL.createObjectURL(blob, {autoRevoke: false});

But I’m not sure how I can send this file as part of the form’s POST request without using AJAX and FormData. Is it even possible or am I approaching this incorrectly?

here is my mongoose query(and the router):

router.get('/reportsRegular', function(req,res,next){
  Question.find({reports: {$size: {$gt: 0}}, checked: false}).sort({reports: -1}).limit(20).exec(function(err,results){
    console.log(results)
    res.render('reports', {type: 'regular', user: req.user, reports: results})
  })

and it seems there is a problem with the first find condition, when I remove the $gt to 1 instead it works, but it wont work in cases with more then one, so I need to use $gt.
here is an example JSON document that should work but does not get found:

  {
    _id: new ObjectId("6212e77aa1e98ae3282a61e6"),
    title: 'TOMATOOOOOO',
    text: '<p>AAAAAAAAAAAAAAAA</p>',
    authorUsername: 'SweetWhite',
    dateCreated: 2022-02-21T01:14:34.901Z,
    answers: [],
    likes: [ 0 ],
    dislikes: [ 0 ],
    tag: 'Languages',
    views: [ 1, 'SweetWhite' ],
    reports: [ 'SweetWhite' ],
    checked: false,
    reportsNested: [],
    __v: 0
  }

it should get found since the size of the reports array is bigger then zero, and the checked value is false.
What am I doing wrong?

Thanks!

Hi i am trying to assign either += or -= to an object position.
Firstly I have random math choosing a number:

var min = 9;
 var max = 11;
 var pos = Math.floor(Math.random() * (max - min + 1)) + min;

I am trying to add the out come of pos to this._target.position.z and this._target.position.x but I want it to be randomly either added or subtracted

so the random out come should be for the Z position should be either:

this._target.position.z += pos;

or

this._target.position.z -= pos;

and then for the X position should be either:

this._target.position.x += pos;

or

this._target.position.x -= pos;

thanks in advance.

I’m trying to move a block of butter down a canvas window. Here is the code sandbox: https://codesandbox.io/s/empty-sandbox-forked-tygc5z?file=/index.html

The important code is index.js:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.onresize = function () {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

const arr = ["butter", "bread", "cheese"];
const sprites = [];
const tilesheet = new Image();

const butter1 = {
  img: tilesheet,
  sourceWidth: 24,
  sourceHeight: 60,
  sourceX: 3,
  sourceY: 2,
  vy: 0,
  timer: 0,
  x: 0,
  y: 0,
  scale: 1,
  visible: false
};
const butter2 = {
  img: tilesheet,
  sourceWidth: 33,
  sourceHeight: 60,
  sourceX: 27,
  sourceY: 2,
  vy: 0,
  timer: 0,
  x: 0,
  y: 0,
  scale: 1,
  visible: false
};
const butter3 = {
  img: tilesheet,
  sourceWidth: 24,
  sourceHeight: 60,
  sourceX: 60,
  sourceY: 2,
  vy: 0,
  timer: 0,
  x: 60,
  y: 0,
  scale: 1,
  visible: false
};
tilesheet.addEventListener(
  "load",
  () => {
    arr.forEach((_, i) => {
      const b1 = { ...butter1 };
      b1.timer = i * 62;
      sprites.push(b1);

      const b2 = { ...butter2 };
      b2.x = b1.x + b1.sourceWidth * b1.scale;
      b2.timer = b1.timer;
      sprites.push(b2);

      const b3 = { ...butter3 };
      b3.x = b2.x + b2.sourceWidth * b2.scale;
      b3.timer = b2.timer;
      sprites.push(b3);
    });
    render();
  },
  false
);
tilesheet.src = "./src/sample.png";

function render() {
  requestAnimationFrame(render);
  //console.log(arr.length, sprites.length);
  sprites.forEach((sprite, i) => {
    sprite.timer -= 0.3;

    if (sprite.timer <= 0) {
      sprite.visible = true;
    }

    if (sprite.visible) {
      sprite.vy = 0.3;
      sprite.y += sprite.vy;
    }
  });
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "rgba(229, 242, 24, 1)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  sprites.forEach((sprite) => {
    if (sprite.visible) {
      ctx.drawImage(
        sprite.img,
        sprite.sourceX,
        sprite.sourceY,
        sprite.sourceWidth,
        sprite.sourceHeight,
        sprite.x,
        sprite.y,
        sprite.sourceWidth * sprite.scale,
        sprite.sourceHeight * sprite.scale
      );
    }
  });
}

As you can see in the code sandbox, there is a weird line appearing when the blocks of butter go down the window:

It is not there when the speed is 1 instead of 0.3 or when the butter is not moving.

Is there anyway I can get rid of the weird line? Thanks

I am trying to send my variable ‘backEndResponse’ with its value from my Express.js backend to my React.js Frontend. I am not quite sure how to send a variable from the backend to the frontend. I have searched around and can’t find any good resources. I would appreciate any help.

Express.js Backend

 function getcookie(req) {
        var authCookie = req.headers.cookie;
        try{
        return authCookie
            .split('; ')
            .find(row => row.startsWith('Auth='))
            .split('=')[1];
        } finally {
            if (authCookie = result) {
                backEndResponse = true
                console.log(backEndResponse);
                console.log(result);
            } else {
                backEndResponse = false
                console.log(backEndResponse);
                console.log(result);
            }
        }
    }
    
    app.get('/auth', (req, res) => {
        backEndResponse
    });

Frontend React.js

let backEndResponse = null

axios.get('http://localhost:5000/auth', { withCredentials: true }).then((res) => {
        // backEndResponse
    })

const useAuth = () => {
    if (backEndResponse) {
        const authorized = {loggedIn: true}
        return authorized && authorized.loggedIn;
    } else {
        const authorized = {loggedIn: false}
        return authorized && authorized.loggedIn;
    }
};

I am having some troubles trying to use “this” in a deep watcher. It seems like inside the deep watcher, the word this points to the context of the object watcher and it is not able to get an attribute declared in the data() function. My script tag looks like this:

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      totalPrice: 0,
      cart: new Array<any>()
    };
  },
  watcher: {
    cart: {
      handler(cart: Array<any>) {
        this.totalPrice = cart.reduce((prev, curr) => {
          const prevPrice = prev.price || prev;
          const prevQuantity = prev.quantity || 1;
          return prevPrice * prevQuantity + curr.price * curr.quantity;
        }, 0);
      },
      deep: true
    },
  },
});
</script>

So, when I do npm run serve I get this error in console:

ERROR in src/App.vue:134:14
TS2339: Property 'totalPrice' does not exist on type '{ handler(cart: any[]): void; deep: boolean; }'.
    133 |       handler(cart: Array<any>) {
  > 134 |         this.totalPrice = cart.reduce((prev, curr) => {
        |              ^^^^^^^^^^
    135 |           const prevPrice = prev.price || prev;
    136 |           const prevQuantity = prev.quantity || 1;
    137 |           return prevPrice * prevQuantity + curr.price * curr.quantity;

I’m new with vue, so I’ll be happy receiving any suggestion. Thanks in advance.