Category: javascript

Good morning! Im trying to move some figures while im moving the cursor, i dont know why this is not working since I did the same on other page and it works:

const scaleFactor = 1 / 20;


function movebackground(event) {
    const shapes = document.querySelectorAll(".shape")

    const x = event.clientX * scaleFactor;
    const y = event.clientY * scaleFactor;

    for (let i = 0; i < shapes.length; ++i) {
        const isOdd= i % 2 !== 0;
        const boolInt = isOdd ? -1: 1;

        shapes[i].style.transform = `translate(${x * boolInt}px, ${y * boolInt}px)`
    }

    console.log(shapes)
}

movebackground()

I tried another ways to solve it but still with the same issue

I am trying to upgrade my node project to use version 18 and the built in fetch vs our old method of using node-fetch. We were writing tests using nock, which isn’t an option with this version of fetch. I am not able to get undici to intercept the request. I am getting the response as if I went to the page (google.com/test)

I created a standalone test file and that didn’t work either.

const { MockAgent, setGlobalDispatcher, } = require('undici');
test('should respond with body passed in', async () => {
  const opts = { method: 'GET' };
  const body = { statusInfo: { status: 'SUCCESS' }};

  const agent = new MockAgent({ connections: 1 });
  agent.get('http://www.google.com').intercept({
    path: '/test'
  }).reply(200, body);
  agent.disableNetConnect();
  agent.activate();
  setGlobalDispatcher(agent);
  const result = await fetch('http://www.google.com/test', opts);
  console.log(JSON.stringify(result));
  // console.log('%o', result);
  console.log(await result.text());
  // expect(result).toEqual(body);
});

I tried this but it doesn’t work:

const robot = {
    name: 'Marble',
    model: '5F',
    age: 1,
    
};

robot.prototype.sayHello = function(){return `Hello I am ${this.model}`} 

I get error: Uncaught TypeError: Cannot set properties of undefined (setting ‘sayHello’)

I’m trying to create a game that demonstrates the different instruments in a band. I’ve managed it in AS3, but I’m struggling in Javascript.
You can either listen to all the instruments playing a piece of music, or click on an instrument to enable or disable it, thus bringing it in or taking it out of the mix.
I have 8 tracks that play simultaneously when the play button (play_btn) is pressed. But whether each instument plays or is muted depends on whether another button (e.g. congas_btn) is pressed. If it isn’t pressed, the conga player, for example, (congaPlayer_mc) is greyed out and the conga audio track is muted. If it is pressed, the conga player has full alpha and is unmuted.
Each instrument should be able to be muted or unmuted at will whilst the track is playing.
What actually happens is that whichever state I choose (muted or unmuted) before I click play, determines whether the track plays muted or unmuted. But once the track has started, the congas_btn doesn’t have any more effect on the volume. It just toggles its alpha value.
How do I get it to carry on affecting the volume for as long as the track is playing?

Thanks.

This is my code:

let root = this

let congasActive = false
let audioPlaying = false

this.congaPlayer_mc.alpha = 0.5

this.play_btn.addEventListener("click", playAudio.bind(this))

function playAudio() {
    
    const playCongas = createjs.Sound.play("congas")
    
    if(!audioPlaying){
        
        audioPlaying = true

        if(congasActive){
            playCongas.volume = 1
        } else {
            playCongas.volume = 0
        }
    
    } else {
    
    audioPlaying = false
    
    const stopCongas = createjs.Sound.stop("congas")
        
    }
    
}

this.congas_btn.addEventListener("click", activateCongas.bind(this))

function activateCongas() {
    
    if(!congasActive){

        congasActive = true
        root.congaPlayer_mc.alpha = 1

    } else {

        congasActive = false
        root.congaPlayer_mc.alpha = 0.5

    }
    
}

when I load the page the data I receive from a GET request are displayed only if I click the mouse anywhere on the page.
I get this error in the console, how can I fix it? thank you in advance.
ERROR:
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

`$(‘.home-slider’).slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
adaptiveHeight: true,
nextArrow: ”,
prevArrow: ”,

});

$('.home-slider').on('setPosition', function (event, slick, currentSlide, nextSlide) {
    var window_width = screen.width;
    var first_slid = ( window_width * 30 ) / 100;
    var second_slid = ( window_width * 70 ) / 100;

    $('.home-slider .slick-track').children('.slick-slide.slick-active').css('min-width', second_slid);
    $('.home-slider .slick-track').children('.slick-slide.slick-active').css('width', second_slid);
    $('.home-slider .slick-track').children('.slick-current.slick-active').css('min-width', first_slid);
    $('.home-slider .slick-track').children('.slick-current.slick-active').css('width', first_slid);
});`

I have tried this code but the slides are jerking after scroll.

good morning
I’m looking to add a webhook generated via a discord bot directly to the creation of a repo on a team. Is this possible because I haven’t seen an example in the github doc.
here is my code:

const request = await fetch(newUrl, {
            headers: {
                "Accept": "application/vnd.github+json",
                'authorization': 'Bearer ' + getStringEnv("GITHUB_TOKEN"),
                'content-type': 'application/json',
                'X-GitHub-Api-Version': '2022-11-28'
            },
            method: "POST",
            body: JSON.stringify({
                name: name,
                description: description,
                private: true
            })
        })
        console.log(await request.json())
    }catch (e){
        console.log(e)
    }

I tried to read the documentation at this url as well as all that can be said about webhooks:
https://docs.github.com/en/developers/webhooks-and-events/webhooks/webhook-events-and-payloads

Header in my app is not visible in IOS 14 and below. In Android it looks good

But this is in IOS 14 and below enter image description here

this is how it should lookIOS 15 and 16

`buttons 
position: static;
display: inline-flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
width: 100vw;
padding: 0;
background: $color-light;
box-shadow: 0 0.4rem 0.8rem 0 rgba(51, 51, 51, 0.1);`

I am trying to fetch NAME which is in SKILLS.

For that I use filter for initial level sorting.Means I am able to sort rows but how do I fetch name?

   let r = this.topics.filter(a => {
          console.log('a is : ', a)
          return a.Skills.name
          
        })

I want to use Percent pipe just for displaying the value with % symbol. Currently backend performing the conversion and giving data. my duty just displaying the figure with % symbol. but while I using ‘percent’ pipe which converting the value again to percentage format. I want him to stop converting again but need % symbol of him. how to solve this issue.?
{{ row[attr.uniqKey] ? (row[attr.uniqKey] | percent) : '' }}

My npm package export some variables

npm version 1.0.0

const info = {
  name:'tom'
}

When I changed the content

npm version 1.0.1

const info = {
  name:'joy'
}

I updated npm to 1.0.1 successfully in the project, add import its

but info.name is still tom

How do I keep the imported data up to date

You want to make an event occur when scrolling to that location.

You want to make an event occur when scrolling to that location.
In the current mode, it only works when reloaded at the location, and does not work when it comes to the location while scrolling down from above.
I think I need to usestate, but I tried in many ways but failed. Please help me.

useEffect(() => {
    AOS.init();
    var cnt = document.querySelectorAll(".count")[props.num];
    var water = document.querySelectorAll(".water")[props.num];
    const Skills = document.querySelector('#skills');
    const percentscroll = window.scrollY + Skills.getBoundingClientRect().top;

    if (window.scrollY >= percentscroll) {
        var percent = cnt.innerText;
        var interval;
        interval = setInterval(function () {
            percent++;
            cnt.innerHTML = percent;
            water.style.transform = 'translate(0' + ',' + (100 - percent) + '%)';
            if (percent == props.percent) {
                clearInterval(interval);
            }
        }, 60);
    }
    
}, [])

child

template: `
    <li v-for="option in listaOptiuni" :key="option.id">
        <input @change="updateSelectAllToateOptiunile(); sendListaToateOptiunile()" v-model="listaToateOptiunile" :value="option" :id="option" type="checkbox" class="uk-checkbox">
        <label :for="option">{{ option.denumire }}</label>
    </li>
`

data: function() {
    return {
        listaToateOptiunile: []
    }
}

parent

<my-component v-model="myList"></my-component>

How I send values of listaToateOptiunile from child direct into v-model myList from parent?

how to build a chrome extension that can detect the language using by website?
Please provide me overview on this.

i want to build chrome extension that can detect the language using by a website

I want to access a pocketbase database, but I’m struggling for 2 days now trying to make it work. Ideally I want a custom hook for that, but I’m unable even getting it to work without it.

I tried with an async function:

  async function getData() {
      const id = pb.authStore.model.id;
      const userdata = await pb.collection("users").getOne(id);
  }

And with a const:

  const getData = async () => {
      const id = pb.authStore.model.id;
      const userdata = await pb.collection("users").getOne(id);
  };

Both ways I’m able to access userdata from inside the function, but when I try:

  const data = getData();
  console.log(data);

From outside the promise is pending. Also why does it even return anything, even though I dont do a return userdata?

My custom hook try:

export default function useData() {
      const id = pb.authStore.model.id;
      const [data, setData] = useState();

      async function getData() {
          const userdata = await pb.collection("users").getOne(id);
          setData(userdata);
      }

      const isLoggedIn = pb.authStore.isValid;
      if (isLoggedIn) getData();

      return { data, getData };
}

I’m trying to access the hook via:

const [data, setData] = UseData();

but then the page wont render somehow.