Category: javascript

I’m trying to understand aliases in Cypress and have an issue.
I want to save total price in cart value to use it in further check:

cy.get("#totalp").invoke('text').then(parseInt).as('totalPriceInCart');

After that, I want to make sure that the text in purchase confirmation has the same value:

cy.get('.lead').should('be.visible').then((domElementWithText) => {
            expect(text).to.include('Amount: ' + cy.get('@totalPriceInCart') + ' USD');
          });

Eventually, I have the following AssertionError:
expected ‘Amount: 360 USD’ to include ‘Amount: [object Object] USD’
How should I change my code in order to have my test passed?

What are some libraries other than wagmi and web3-react for good web3 integrations in frontend on evm compatible chains

A list of some libraries is appreciated mostly for defi and governance dapps.Please recommend some javascript libraries

there is no error in my terminal my website is fully able to load. However when I opened my dev tools.I was able to load my site and then i tried making some styling changes. I reverted my site back not saving any styling changes. Then I was not able to see my site. It loads and then a black screen appears. I see the following error messages:

The above error occurred in the <div> component:

    at div

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

react_devtools_backend_compact.js:2367 The above error occurred in the <ForwardRef(Canvas)> component:

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend_compact.js:2367

react-dom.development.js:26923 Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

I tried deleting my node modules and pack.lock json files and running npm i and npm install. That did not solve the problem. Not sure what is going on.

When I add an “import” from one js file to another the EventListener refuses to work! Editing out the import line makes the event work! Could someone please help? I also struggled with the importing of a function so would appreciate it if someone could take a look and check my code.
Hoping an answer is out there. Thanks

index.js

export function lookupRegNumber() {
    var plate = document.getElementById("regNumber").value;
      console.log("Selected" + " - " + plate);
      {const docsSnap = getDocs(exAddCarRef );
        docsSnap.forEach(doc => {
          console.log(doc.data());
      })}
   } 

data.js

import { lookupRegNumber } from "./index.js";

const getRegNo = document.getElementById('lrn');
getRegNo.addEventListener('click', (e) => {
  e.preventDefault();
  console.log("test");
  lookupRegNumber();
})

report.html

<table class="table table-success " id="add-item">
      <tr><td>Registration No:</td><td><input type="text"style="text-transform:uppercase" id="regNumber"></td></tr>
      <tr><td></td><td><button id="lrn" class="btn btn-primary btn-lg lookupRegNumber">Search Reg No</button></td></tr> 
</table>

<script scr="../src/data.js" type="module" defer ></script>

so here is my jave script which contains my firebase config ive removed my config specification as i uploaded this code here.
the part thats giving me issues is the description text field specifically doesn’t upload no matter what. im not sure what to do at this point.
the way the description text field works is fundamentally the same as the other text fields so in theory there should be no issues. i dont believe its an issue with firebase because its just a third text field being uploaded.
i suspect it may be conflicting code but im not sure what to look for.

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
import { doc, setDoc } from "firebase/firestore";

const firebaseConfig = {
api key is there dont worry 
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const blogTitleField = document.querySelector('.title');
const articleField = document.querySelector('.article');
const DescriptionField = document.querySelector('.description');
// banner
const bannerImage = document.querySelector('#banner-upload');
const banner = document.querySelector(".banner");
let bannerPath;

const publishBtn = document.querySelector('.publish-btn');
const uploadInput = document.querySelector('#image-upload');

bannerImage.addEventListener('change', () => {
  uploadImage(bannerImage, "banner");
});

uploadInput.addEventListener('change', () => {
  uploadImage(uploadInput, "image");
});

const uploadImage = (uploadFile, uploadType) => {
  const [file] = uploadFile.files;
  if (file && file.type.includes("image")) {
    const formdata = new FormData();
    formdata.append('image', file);

    fetch('/upload', {
      method: 'post',
      body: formdata
    })
    .then(res => res.json())
    .then(data => {
      if (uploadType === "image") {
        addImage(data, file.name);
      } else {
        bannerPath = `${location.origin}/${data}`;
        banner.style.backgroundImage = `url("${bannerPath}")`;
      }
    });
  } else {
    alert("Please upload an image only.");
  }
};

const addImage = (imagepath, alt) => {
  let curPos = articleField.selectionStart;
  let textToInsert = `r![${alt}](${imagepath})r`;
  articleField.value = articleField.value.slice(0, curPos) + textToInsert + articleField.value.slice(curPos);
};

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

// ...

publishBtn.addEventListener('click', async () => {
  if (articleField.value.length && blogTitleField.value.length) {
    try {
      // Generating ID
      const letters = 'abcdefghijklmnopqrstuvwxyz';
      const blogTitle = blogTitleField.value.split(' ').join('-');
      let id = '';
      for (let i = 0; i < 4; i++) {
        id += letters[Math.floor(Math.random() * letters.length)];
      }

      // Setting up docName
      const docName = `${blogTitle}-${id}`;
      const date = new Date(); // For published at info

      await setDoc(doc(db, 'blogs', docName), {
        description: DescriptionField.value,
        title: blogTitleField.value,
        article: articleField.value,
        bannerImage: bannerPath,
        publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`,
      });

      location.href = `/${docName}`;
    } catch (err) {
      console.error(err);
    }
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   
    <title>blog editor</title>

    <link rel="stylesheet" href="css/home.css" />
    <link rel="stylesheet" href="css/editor.css" />
</head>
<body>
    <div class="banner">
        <input type="file" accept="image/*" id="banner-upload" hidden>
        <label for="banner-upload" class="banner-upload-btn"><img src="img/upload.png" alt="upload banner"></label>
    </div>
   






    <div class="blog">
        <textarea type="text" class="description" placeholder="Start writing here..."></textarea>
        <textarea type="text" class="title" placeholder="Blog title..."></textarea>
        <textarea type="text" class="article" placeholder="Start writing here..."></textarea>
    </div>

    <div class="blog-options">
        <button class="btn dark publish-btn">publish</button>
        <input type="file" accept="image/*" id="image-upload" hidden>
        <label for="image-upload" class="btn grey upload-btn">Upload Image</label>
    </div>

   
<script type="module" src="dist/bundle.js"></script>
  
</body>
</html>

I am trying to create a little javascript two way form binder using proxies. I am stuck on how I can intercept ‘new’ calls. I use a ‘construct’ trap but it doesn’t fire. Here is my code, I have removed the stuff that is not relivant for my specific problem

    class BoundObject {

        constructor(object, element) {

            // distribute object properties into "this"
            for (const prop in object) {
                this[prop] = object[prop]
            }

            return new Proxy(this, {

                construct:(target, args) => {
                    console.log(`Creating a new ${target.name}`) // why is this not fired?
                    return Reflect.construct(...args)
                },
                set: (target, prop, val, receiver) => {
                    console.log(`attempting to set ${prop}=${val} type ${typeof val}`);

                    return Reflect.set(target, prop, val) 
                }
            })
        }
    }

    // create an instance of our BoundObject class, passing in an object and an HTML element
    const user = new BoundObject({name:'fred'},document.querySelector('#user-form'))    // why is the 'construct' call not intercepted?
    user.name = 'mary' // set user name. The 'set' call is sucessfully intercepted

The set trap works, but the construct trap fails to fire. I suspect this is to do with javascript deep magic around ‘this’ but cannot figure it out

How can I intercept the construction of the proxy object my class returns?

I am working on my HTML text editor to input the texts in the contenteditable and create the div tags automatically after when I input the texts and hit on the enter button of the keyboard.

When I type the text “Test” in the contenteditable and when I hit on the enter button, I am getting this:

Test<div><br></div>

Here is what I want to achieve:

<div dir="auto">Test</div><div dir="auto"><br></div>

In the contenteditable, it will only add the div tags in the new line with <br> tag after when I hit on the enter button of the keyboard. It wont add the div tag with the text, it will only add the div tag with <br> tag.

I want to add <div dir="auto"> tag in the contenteditable everytime when I input the text in the new line and when I hit on the enter buttons of the keyboard to add the <br> tag inside the div tag. If the texts are already inside the div tag, there would be no need for the div to be add automatically.

Here is the html code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">

<div id="main" class="main" style="padding-left: 13px;"><div id="editor" contenteditable="true"></div></div>
<script type="text/javascript" src="richeditor.js"></script>
</body>
</html>

JS:

// Event Listeners
RE.editor.addEventListener("input", RE.callback);

addEventListener("keyup", function(e) {
    var KEY_LEFT = 37, KEY_RIGHT = 39;
    var KEY_ENTER = 13;
    keypress = KEY_ENTER;

    if (e.which == KEY_LEFT || e.which == KEY_RIGHT) {
        RE.enabledEditingItems(e);
    }

    if (e.which == KEY_ENTER) {
        window.scrollTo(0, document.body.scrollHeight);
    }
    else
    {
        keypress = e.which;
    }
    endofLine = checkLine();
});

CSS:

#editor {
  display: table-cell;
  width: 100%;
  outline: 0px solid transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

I tried to find on google how I could add the div tags in the contenteditable automatically after when I input the texts, but I couldn’t find it.

Can you please show me an example how I could add the div tag <div dir="auto"> in the contenteditable automatically when I input the new text in the new line and when I hit on the enter button of the keyboard the div will also add with the <br> tag??

I have created a list where a number between 1 and 5 can be selected via select. Now I would like the output to appear as a character instead of a number. So instead of (for example) 5 should be +++++ and 3 should be +++. How do I proceed?

The value is output in a template string as a number and should also be replaced there by the characters.

<div class="importance">${todo.prio}</div>

I am new to typescript.
I still have errors after writing the type guard (and adding ?: ) for the code below. Is the syntax correct or do I need to modify the tsconfig file?.

interface Bird {
  type: "bird";
  speed: number;
  flyingSpeed?: number;
}
interface Snail {
  type: "snail";
  speed: number;
  crawlingSpeed?: number;
}

function accelerateAnimal(animal: Snail | Bird): void {
  switch (animal.type) {
    case "bird":
      speed = speed + animal.flyingSpeed;
      break;
    case "snail":
      speed = speed + animal.crawlingSpeed;
      break;

    default:
      break;
  }
}
accelerateAnimal({type: "bird", speed: 0, flyingSpeed: 3});

I’m trying to write a function in node that make an SQL query, and return true or false based on the query result.
but because the query is a sync function, it is keep moving on in the code and return undefied befor it even get the query result.

i tryed to use async and await, but it’s not working,evene if i place the return condition out of the query parenthesis. it return Promise { <pending> }

async function isUserExist(userName) {
  const selectUser = 'SELECT * FROM users WHERE user_name = ?';
  await con.query(selectUser, [userName], (err, rows) => {
    if (err) throw err;
    console.log('rows: ', rows);
    if (rows.length === 0) {
      return true;
    }
    return false;
  });
};

becaus the promise, i tried to place .then(()=>{}) , but it donn’t compiled well in any end of parenthsis

what can i do? i need to use this a lott
thanks

Both +page.js/ts and the <script><script/> tags within +page.svelte files are for processing client side code.

What’s the typical convention for choosing between these 2 files?

I get this warning:

============================
Hi, looks like you are running TensorFlow.js in Node.js. To speed things up dram
atically, install our node backend, visit https://github.com/tensorflow/tfjs-nod
e for more details.
============================

I have this in my package.json

"@tensorflow/tfjs": "^4.6.0",

I only use cpu because my gpu doesnt have cuda.

The link in the warning seems deprecated.

Do you think I am actually using the best tensorflow for node.js or I can actually improve the speeds on the cpu?

teniendo esta función dentro del controlador:

      public function cargarEstados($paisSeleccionado){

        if ($_SERVER['REQUEST_METHOD'] == 'GET') {
            $datos = $this->productoModelo->cargarestados($paisSeleccionado);   
            $this->datos
            $this->vistaApi($datos);

        }
        
    } 
 

  y esta función dentro del modelo: 

    public function cargarestados($paisSeleccionado){

      $this->db->query("SELECT * FROM estados WHERE id_pais = :id_pais");

      $this->db->bind(':id_pais',$paisSeleccionado);

      return $this->db->registros();
  }

como puedo hacer en el main.js con esta funcion de fetch :

async function cargarEstados() {

    var paisSeleccionado = document.getElementById("pais").value;
    var segundoSelect = document.getElementById("estado");
    console.log(paisSeleccionado);

        await fetch("Producto/cargarEstados/"+paisSeleccionado,{
            headers: {
                "Content-Type": "application/json"
            },
            credentials: 'include'
        })

        
        .then((resp) => resp.json())
        .then(function(data) {

            
        });
                

} 

me muestre en un select las provincias de un pais que recojo de otro select con la función onchange=”cargarEstados()” en el primer select

como obtener unos options según los que seleccionas de otro select

iam trying to update my build with eas update
but when i run the command this error shows up :
[expo-cli] TypeError: (0 , _minimatch).default is not a function
can any one give help?

i am trying to use eas update and i use it for an other app and it works fine

I tried to research before asking here, but I coun’t find any answers. Just for context, I’m using old version of bootstrap v2.0.2. I doubled checked if my paths are correct, and they are.

This is the order of imported scripts that produce the errors above. If I load bootstrap.min.js first, I will get a different error.

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
   <script src="lib/jquery/jquery-3.7.0.min.js"></script>
   <script src="lib/bootstrap/js/bootstrap.min.js"></script>
        
   <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="lib/bootstrap/css/bootstrap-responsive.min.css">
   <link rel="stylesheet" href="css/app.css">

   <script src="lib/angular/angular.min.js"></script> 
   <script src="js/app.js"></script>
</head>

I’ve tried to import bootstrap.min.js first, but this the error message I get, and I’m not sure why.

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
   <script src="lib/bootstrap/js/bootstrap.min.js"></script>
   <script src="lib/jquery/jquery-3.7.0.min.js"></script>
        
   <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="lib/bootstrap/css/bootstrap-responsive.min.css">
   <link rel="stylesheet" href="css/app.css">

   <script src="lib/angular/angular.min.js"></script> 
   <script src="js/app.js"></script>
</head>

I expected it that this small change would resolve the issue, but it didn’t.