Category: javascript

I have a video game made in JavaScript using the createjs library.

In the credits, I draw a URL on the canvas as text, but I wish to make it a clickable link.

After a lot of Googling and searching through forums I haven’t found a similar question being asked.

I tried using the String link() method, but it does not work. The game launches but the credits won’t open.

    var oLink = new createjs.Text("www.amzd.hr"," 20px "+FONT_GAME, "#000080");
    oLink.y = +270;
    oLink.textAlign = "center";
    oLink.textBaseline = "middle";
    oLink.x = +100;
    oLink.lineWidth = 300;
    let oLink = oLink.link("https://www.amzd.hr");
    _oPanelContainer.addChild(oLink);

How do I change Nginx so I can add a subdomain to the domain?
For example:

www.example.com convert to www.example.sub1.com

server {
    listen 80;
    server_name %domain%;
    location / {
          proxy_pass http://%frontend%;
    }
    location ^~/graphql {
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Frame-Options SAMEORIGIN;

      proxy_pass http://%api%;
  }
}

First thing first, I am new to Javascript and coding so if my code isn’t as tidy or succinct as it could be then please feel free to suggest ways to tidy it up.

I have seen a few similar questions to this topic but nothing that does what I specifically need.

I have a JS code that works nicely that takes a JSON input and returns a specific value:

var subtitle = document.getElementById("demo");
var title = document.getElementById("title_location");
var para1 = document.getElementById("para1");

navigator.geolocation.getCurrentPosition(showPosition);

function showPosition(position) {

  var url = "https://api.opencagedata.com/geocode/v1/json?q=52.773322+-1.552661&key=592431a9da4a45b686bc75eafb005cc1" //Swadlincote (already a city so doesnt need replacing)


  fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log(data)
      console.log(data.results[0].components)


      var stringified = JSON.stringify(data);
      console.log("this is the stringified json before replacement: " + stringified)
      stringifiedR = stringified.replace('"town"', '"city"');
      console.log("this is the stringified json after replacement: " + stringifiedR)
      var jsonObject = JSON.parse(stringifiedR);
      console.log(jsonObject)
      console.log("stringified city: : " + jsonObject.results[0].components.city)

      subtitle.innerHTML = "Subtitle goes here: " + jsonObject.results[0].components.city
      title.innerHTML = "Page Title Goes Here: " + jsonObject.results[0].components.city
      para1.innerHTML = "1st paragraph of text goes here: " + jsonObject.results[0].components.city
    })

}

This works nicely and returns the value from data.results[0].components.city which is what I need.

What I am looking for is a way to check if the ‘country’ tag in data.results[0].components.country matches “United Kingdom” before I do anything with the script and if the data matches, proceed with the rest of the script, if the ‘country’ tag matches anything other than ‘United Kingdom’ then stop the script.

Does anybody have any ideas they would be happy to share.

Thanks in advance:

This is sort of opinion question. I know I shouldn’t.. 😛 But I think this place is a good place for a question like this.

I’m not so into es-modules, learning right know, going deeper. I just realized that native es module support is everywhere except IE. So, if I drop IE support (I did), the only real reason to use bundlers to group different libraries in one single file, would eventually be tree shaking. But still, doesn’t make too sense to me tree shaking itself: for the way I currently work (alone), and using ts-check too, it’s unlikely that I’ll import something I don’t use.

How are you all doing about this thing? Do you think my considerations make sense? Am I loosing some important detail or use case?

How to do change from circle to cross and vice versa

function move(event) {
    console.log(event.target);
    if (event.target.id) {
        id=document.getElementById(event.target.id).id
        background="red";
        document.getElementById(id).style.backgroundImage = "url('close.png')"; 
    }
}

I wish to get the username and user ID of the current logged in user and pass them to the <Comments /> component as props. Currently I have hard code the the values like this <Comments username='Vincent', user_id=1.
How do I automat this process, so that the values are passed automatically depending on the current logged in user?

In my CommentsApp I have this:

... 
import Comments from './Comments'


const CommentsApp = () => {
    const [backendComments, setBackendComments] = useState([])
    // console.log('backendComments', backendComments)

    useEffect(() => {
        axios.get('http://127.0.0.1:8000/api/comments/')
            .then(res => {
                setBackendComments(res.data)
            })
            .catch(err => {
                console.log(err)
            })
    }, [])

    return (
        <div>
            <Comments user_id='1' username='Vincent' />
        </div>
    );
}

export default CommentsApp;

I am trying to get descriptions array data in another array of Hello function but I get an error, “Cannot read property length of undefined”, while I already consoled the description array and it is giving me the needed data. Then what might be the reason for this error .

const unirest = require("unirest");
const cheerio = require("cheerio");

const data = async () => {
  var description = [];
  unirest
    .get("https://www.google.com/search?q=rotating proxies")
    .headers({ Accept: "application/json", "Content-Type": "application/json" })
    .proxy(
      "proxy"
    )//hided
    .then((response) => {
      const $ = cheerio.load(response.body);

      $(".uEierd").each((i, el) => {
        description[i] = $(el).find(".yDYNvb").text();
        console.log(description[i]);
        return description;
      });
    });
};
async function Hello() {
  var result2 = [];
  result2 = await data();
  for (let i = 0; i < result2.length; i++) {
    console.log(result2[i]);
  }
}
Hello();

I am trying to implement custom tooltip on datapoints which are draggable. Custom tooltip is not dragging along with datapoints. I am not sure how to make that possible. Code available here

let queue = [];
function recursion(num) {
  if (num in queue) {
    return `input${num}: ${queue.length}: ${queue}`;
  } else {
    console.log(`${queue}, ${num} is in queue: ${num in queue}`);
    queue.push(num);
    if (num % 2 === 0) return recursion(num / 2);
    if (num % 2 !== 0) return recursion(num + 3);
  }
}
console.log(recursion(3));

this code gives some weird results. I don’t understand where the code goes wrong.

I developed an external site in React, which should be related to my Google extension I saw all kinds of solutions like : chrome.runtime.onMessageExternal , but chrome.runtime.sendmessage is not working from my react app so how should I do it ?

I currently have the pages folder /pages/phone-number/ that handles predefined url like /london and /all-numbers. If there is a url that is not listed it then it will redirect to /all-numbers.

Inside of other folder /pages/[…feature] I want to catch /phone-number/my route (as it’s not related to any of the /pages/phone-number/ url (but confusingly has similar url) Code inside of the files in /[…feature] folder is being ignored as the predefined /pages/phone-number is taking precedence over the slug .

Is there a way for that specific url /phone-number/my to be catched inside of the […features] folder rather than /phone-number folder?

My current method is first of all inefficient.
I’m trying to change this to YYYY/MM/DD format.

date = new Date('January 23, 2021');

Is supposed to return ‘2021-01-23’

Where I’m stuck at in my code is that this if statement keeps passing when its supposed to fail.

if (var.toString().includes('-')) {

} else if (var.toString().includes('January')){
    return var;
}

I didn’t fill in the code but the issue is that the program passes the .includes(‘-‘) part of the if statement and I don’t know why it does.

it would be great if someone can help me with this issue.
i have set the header of all apis to "Content-Type": "application/json"
but now we need to have a different Content-Type for sending images with JSON content like 'Content-Type': 'multipart/form-data"
how can i define a new header that renders every time we declare it
and how can i do this by code?

const httpClient = axios.create({
headers: {
    "Content-Type": "application/json",
  }
})

in our apis

export const create = (data) => {
return httpClient({
    url: '/api/create',
    method: 'post',
    headers: {
        "X-CSRF-TOKEN"
    },

    data: data
  })
}

I am a beginner in programming. I would like to ask if I write a music player that I want to be able to click to play and click again to mute. How should I write it? I

have tried several times and failed.

PS. Because I don’t know how to put the music file on the Internet, the current music file is invalid, it is purely indicative.

//關閉
let tag = true;
let music = document.querySelector('#music');
let btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
    // 如果目前 flag 不是關閉就撥放
    if (tag) {
    // music.pause();
    music.setAttribute("muted","true");
    btn.setAttribute("class", "pause");
    tag = false;
    } else {
    music.play();
    btn.setAttribute("class", "play");
    tag = true;
    }
});

body{
  height: 500vh;
}
.btn {
  width: 60px;
  height: 60px;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU');
  background-size: cover;
}

.play{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: 1s;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU');
  background-size: cover;
}

.pause {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: 1s;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScVjEwKCmnfciiCoEZ6am7ZXoIaVR0rUE_O2H1xWkqDMOZV-mk7i8eMwktqV9nHCsyF3A&usqp=CAU');
  background-size: cover;
}

<audio id="music" controls="controls">
  <source src="demo.mp3" type="audio/mp3">
</audio>
<div class="btn"></div>

I want to shuffle an array and pass it to the component.
It’s working when going direct to the page with nuxt-link.

<template>
  <div>
  
    <CardsMetalCard :myCategory="myCategory" :catMetal="catMetal" />
  </div>
</template>
computed: {
...mapGetters("design", {
  designCategory: ["category"],
}),

myCategory() {
  var result = this.designCategory.find((i) => i.url === this.category);
  this.catMetal = result.metal;
  var newRelatedArray = this.designCategory.filter(
    (i) =>
      i.metal === result.metal 
  );
  // Shuffle is method to sort array and I console.log(array) before return in shuffle
  return this.shuffle(newRelatedArray);
},

},

Everything works fine in nuxt-link. But when I refresh the page. Array gets shuffled 2 times. 1 in SSR and the other in the browser.
So my component loads data from SSR shuffle and then the component renders again with browser shuffle. In this scenario, the Final component has a mismatched value from different objects.