Category: javascript

Currently I am working on a HTML page where we classify an image using a webcam or mobile camera, But before classifying an Image, I would love to give user a UI feedback where the border color will appear “Red” when it detects Under/Over Exposed Image/Video inputs.

I have no idea how to start with these!

PS: Please use only Pure JavaScript and no online libraries.

List of things I tried

• .removeClass and addClass
• show() and hide();
• changing the css

To begin: Yes, I do have onLoad in the beginning of my script, and all of the other components work perfectly. Yes, I have tried Googling, and nothing fixes the problem. This is not a dublicate.

$("button").click(function(){
  $("block").addClass("hidden"); //class hidden is display: none
  $("block").removeClass("hidden");
}

This is my code. No, block is not a class or ID, I am gonna use it as an example.
Please help, I do not know what I have done wrong in my code and why this doesn’t work.

By the way, adding the class works, removing it doesn’t.

HTML:

<block>A</block>

Hey guys im trying to generate a random password using upper and lowercase keys + numbers. the code seems to work but instead of returning 20 characters its instead returning only 1. The return seems random.
The element should be replaced why the random password every time the button is clicked.

HTML

<button id = "button5" onclick = "password()">Generate password </button> 
<p4 id = "p4" > Your password will apear here </p4>
 

This is the Javascript

function password (length ) {
var ranpassword = "";
var chara = "abcdefghijklmnopqrstuvwxyz01234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ"


var charalength = chara.length // there is an outside variable defining charalength = ""; I could not include that here 
for (var i = 0; <length ; i++) {
ranpassword +=  chara.charAt(Math.floor(Math.random() *
chara.length));
return ranpassword;

}
document.getElementById("p4").innerHTML = "hello there " + ranpassword;
console.log(password(20));

}

whenver the button is clicked, one random letter is returned in console.log and i cant seem to understand why ? Can anyone tell me why?
Any help would be great . Thanks 🙂

I have trouble to login to coinpayu.com site using cURL. if can help i will be so thankful.

here is all info about the site:

note: this is just a test login info

Site link: https://www.coinpayu.com/login

Email: [email protected]

Password: coinpayu.bot@Com1

and this is a request headers if can be useful

:authority: ssd.coinpayu.com
:method: POST
:path: /user/baseinfo?lang=en-us
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,ar;q=0.8
authtoken: e767f9b3542aef54bf5aaa216df156be521f3c06
cointoken: c2556ee20245a4dfdf08f63431413b098a58c9af
content-length: 10
content-type: application/json;charset=UTF-8
cookie: _ga=GA1.2.925006934.1647155396; PHPSESSID=i6710scfkphppk0stujellr2i0; __cf_bm=BVby4cc1kxX1sdagb3a7EwUrip4PEmX2Q_poxCJKTeM-1647756499-0-Ab7TLJ7qVMRbW5SJY9HZZkRdNw62LVtObnuQA0emrPXntw3CMVQNMDvgQqqNnMvkx4pj5iGvbPrX7Ad0euzX27E+08kBqJpFArYqdbh0LPv9YARZjRSgjPOF2KoMyOR/5A==; coinPayU-cointoken=c2556ee20245a4dfdf08f63431413b098a58c9af
origin: https://www.coinpayu.com
referer: https://www.coinpayu.com/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="99", "Google Chrome";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-site
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36

I want to use await to save the response to a variable. I need to store that response in a variable and use it in the next code flow. I don’t want to store and use variables only inside function braces. In the code below, only one console.log is written, but many events exist. I don’t want to use fetch and then. I want to solve it using async/await, but everything I do is wrong. What did I do wrong?

Try 1

Run => Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

var resp = await fetch(`https://www.yahoo.com/manifest_desktop_us.json`);  
var jobj = await resp.json();  
var display = jobj.display;  
console.log(display); //I need display value

Try 2

Run => undefined

async function abc(url) {
  var resp = await fetch(url);
  var jobj = await resp.json();
  return jobj;
}
var url = 'https://www.yahoo.com/manifest_desktop_us.json';
var jobj = abc(url);
//var jobj = async() => await abc(url); //undefined
var display = jobj.display;  
console.log(display); //I need display value

I am building a web based image labelling tool using Django on backend and HTML/CSS/JavaScript on the front end. The user draws a bounding box on some part of image and a box appears in which the user has to enter the label of that particular part selected in bounding box. I need the user to enter the label in ancient-greek. So I would need an on screen keyboard on my web page. Can you suggest some possible ways to achieve this?

I am working on a project using Webpack, and I happened to notice a parameter in the object called mode.

According to the documentation, it has two possible values (both are a string). One is development, and the other is production.

Below is my webpack.config.js file.

module.exports = {
  // ...
  mode: "development",
  // ...
};

I can already infer that development will be slower, and production will be faster. However, what makes the code slower in development?

I need a simple extension that deletes all divs (with any ID or class).
Extension should be running in WP text editor, so I’m using

textEditor.value = textEditor.value

I guess it should use .replaceAll, but I’m not sure how to word expression to delete all divs and ignore their ID and class. Both ID and class should be deleted also.

Example:

<div id="example1" class="example2">Text</div>

Should be just:

<p>Text<p>

This is my code:

function downloadImage(url) {
  fetch(url, {
  mode: 'no-cors',
  })
   .then(response => response.blob())
   .then(blob => {
       let blobUrl = window.URL.createObjectURL(blob);
       let a = document.createElement('a');
       a.download = url.replace(/^.*[\/]/, '');
       a.href = blobUrl;
       document.body.appendChild(a);
       a.click();
       a.remove();
       })
}

var url = 'https://c4.wallpaperflare.com/wallpaper/203/636/834/minimalism-landscape-digital- 
windows-11-hd-wallpaper-preview.jpg';

downloadImage(url)

i can successfully download the image but when I open the image it’s shows Sorry, Photos can’t open this file because the format is currently unsupported, or the file is corrupted

When I use unsplash image url in that time it’s work well. Can anyone tell me please why it’s happening and how can I fix this issue.

I have a email validation fuction where i need to trim string value twice.

(val) => (val.trim() && emailReg.test(val.trim()))

Or

(val) => { 
   const value = val.trim();
     return value &&emailReg.test(value) 
}

which is more faster and meet coding standards.

When using array map method, the browser page is blank and in the console I receive an error:

array.map not a function

Although when I comment array.map before rendering the page and after page gets renderd I uncomment it and it works fine.

const movieDesc = useSelector((state) => state.movieDesc);
const [allVideo, setallVideo] = useState("");
const getAllVido = async () => {
try {
  const res = await axios.get(
    `https://api.themoviedb.org/3/${movieDesc.desc.media_type}/${movieDesc.desc.id}/videos?api_key=${process.env.REACT_APP_API_KEY}`
  );
  console.log(res.data);
  setallVideo(res.data.results);
} catch {
  console.log(Error);
}
};
useEffect(() => {
  getAllVido();
}, []);

JSX code:

<p className="movieDesc__trailer">All Video</p>
  {allVideo?.map((video) => (
    <>
      <p key={video.id}>{video.name}</p>
      <iframe
        key={video.id}
        className="movieDesc__trailerVideo"
        src={`https://www.youtube.com/embed/${video.key}`}
        title={video.name}
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </>
  ))}

  <p className="movieDesc__wrap">Wrapping Up</p>

I have this api with fetch that is taking the data of a form, with the formdata object optengo the data of said form built in html, then they are sent to the server, a php file that processes the data sent from javascript, in php the data are stored in a database and sends a response to the client, the problem I have is that in local I have tried and everything goes great, but when I go to a paid hosting to try my application optengo a

let formulario = document.getElementById('formulario');

formulario.addEventListener('submit', function (e) {
    e.preventDefault();

    const datos = new FormData(formulario);

    fetch('./includes/add.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        mode: 'cors',
        body: datos
    })
        .then(res => res.json())
        .then(data => {
            console.log(data);
            if (data == 'respuesta') {
                Swal.fire({
                    icon: 'success',
                    title: 'mensaje enviado',
                    showConfirmButton: true,
                    timer: 1500
                })
                formulario.reset();

            } else if (data == "error") {
                Swal.fire({
                    icon: 'error',
                    title: 'mensaje no enviado',
                    showConfirmButton: true,
                    timer: 1500
                })
                formulario.reset()
            }
        })
})

---

I am building a simple quiz game in JS/CSS. Curious about how wordle stores the streak statistics. Is it in the cookies?
Also, I want users to be able to access previous games and also their attempts. Is it possible to do it without having them create an account?

I’m trying to check if x is empty or has 30 entries, I wrote this however everytime I run it it doesn’t use the data saved in indexeddb [it adds entries [duplicate, already existing] how can I fix this?

let x = repo.getjuzs()
let y = Object.keys(x).length;
alert(typeof(y))
if (y < 30) {
    const juzs = await getJuzs();
    juzs.map(j => repo.addjuz(j))
    document.querySelector('#juz-DropDown').innerHTML = `
            ${juzs.map(j => `<option value="${j.id}">${j.juz_number}</option>`).join('n')}
        `;
    
}
const juzs = repo.getjuzs()
document.querySelector('#juz-DropDown').innerHTML = `
            ${juzs.map(j => `<option value="${j.id}">${j.juz_number}</option>`).join('n')}
        `;

i have 2 arrays of objects with the same structure , each one of them came from database query, how i can map the cross section into a new array by comparing the ID value.

tempArray=[{city:london,subject:"testdata", id:7777},   {city:london,subject:"testdata", id:5555}]

tempArray1=[{city:london,subject:"testdata", id:8888},   {city:london,subject:"testdata", id:5555}]
     

im trying to get the result:

 newArray=[{city:london,subject:"testdata", id:5555}]

this is my try but i failed miserably

 let newArray=tempArray.map((x)=>{
                if (x.id== tempArray1.forEach((doc)=>{
                 console.log(doc.id);
                  return doc.id})) {return x
                  
                }
             
              })