Category: javascript

if string contain white space alert should be unsuccessful and if string contain no white space alert should be successful
import React from “react”;
export default function DropDown() {

  let i=document.getElementById("input")?.value;
const submit=()=>{
  var whiteSpaceExp = /^s+$/g;
  if (whiteSpaceExp.test(i))
  {
  alert('unsuccess');
  }
  else
  {
    alert('success');
  }
  }
return (
    <>
      <form>
        <input type="text" id="input"  autoComplete="off" />
        <button onClick={submit}> click  </button>
      </form>
    </>
  );
}

I want something simple and using FTP for a MERN stack app. Thank you !

I’m creating dynamic table. This table contains few columns like: topic, state, theme, priority. On every row, I can make certain actions, but those are also dynamic. So let’s say I’m receiving 10 different actions and one action, like delete, should only be visible when priority equals 10. Now this condition (priority === 10) should be in response. What would be the best way to send and consume that?

I want to mock the fetch in the Message function

const Message = () => { 
                const url = process.env.REACT_APP_BACKEND_URL  +"/helloworld" 
                console.log(url)
                const response = fetch(url)
                console.log(response)
                return response.text        
     }
export default Message

I should be mocked i the Jest test

import App from './App' 
import {render,screen} from '@testing-library/react'
global.fetch = jest.fn(() =>  Promise.resolve({ text: () => Promise.resolve("Hello World")}))


it('should display hello world', async () => {
     render(<App />);
     const linkElement = screen.getByText('Hello World');
     expect(linkElement).toBeInTheDocument();
 })

Coode that should be tested look like this

import React from ‘react’
import Message from ‘./Message’

function App () {
    return <Message />
 }

export default  App ;

When I run the test I get following message

FAIL  src/App.test.jsx
  ✕ should display hello world (147 ms)

  ● should display hello world

    TypeError: Cannot read property 'text' of undefined

       6 |                 const response = fetch(url)
       7 |                 console.log(response)
    >  8 |                 return response.text        
         |                                 ^
       9 |      }
      10 | export default Message

      at Message (src/Message.jsx:8:33)

How do I mock the fetch?

#please answer to this question.
#im confused in Android emulator and expo client app.
Should I need to install android emulator to use expo client app ?

uses string formula in if structure angular

   let a = "100 + 100 > 50";
      if(a){
            //do operation
           }

But this statement is always return true

I am working on a CDKEditor5 for which I have to configure one functionality. when i edit or try to write a mail on it then they automatically take the default system language (which clients currently use in their system). so have you guys any idea about this how to done?. using javascript & angular.
If any library is available then help me. or any customize javascript for it?

jQuery(document).ready(function($) {

  if ($('.category-sidebar')) {

    var $filterWrap = $('#filter-wrapper .filter-container');

    $('#narrow-by-list').empty();

    $filterWrap.each(function (index) {
      var $currFilter = $(this);
      var $divParent = $currFilter.closest('.filter-container');
      var divHeader = $currFilter.find('.toggle-category-header').text().trim();

      /*if (divHeader === 'Color') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Clothes Size') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Price') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Product Type') {
      } else if (divHeader === 'Shop By Figure') {
      }*/

      switch (divHeader)
      {
        case 'Color':   
        case 'Clothes Size':         
        case 'Price':
          $divParent.appendTo('#narrow-by-list');
          break;
        case 'Product Type': 
        case 'Shop By Figure':          
          $divParent.appendTo('#narrow-by-list :last-child');
          break;
      } 
    });
  }

});

• $filterWrap is the container that hold five side navbar items that are all divs

• #narrow-by-list is tag that holds #filterwrapper which holds all 5 divs

• I want to be able to reorder the divs and place them inside the same container so right now they are:

• Color

• Shop By Figure

• Product Type

• Clothes Size

• Price

I want the list of divs to be reordered to:

• Colour
• Size
• Price
• Product Type
• Shop By Figure

The code above sorts the first three but can’t get the last two sorted. Can you guys help?

I have for example a SMS QRCode with the value:

SMSTO:99999999:Hello World

And I want to generate a QR code image so I’m able to share it with react-native-share. How could I do that?

I am trying to set the request header in selenium. For one or another reason, I am not able to find how to set such a header.

If I read correctly, this is not possible and I would need an extension in Chrome to set the request header: setting request headers in selenium

Is this answer still up to date? And are there other ways to implement a header in a get request using selenium?

I am using node js and selenium to build a web scraper.

Thanks in advance.

Trying to set up an example of THREE with this MeshLine implementation. Running on VSCode with Live Server extension, port 5500, Firefox. Already tried several combinations of import, require, with or without the type=”module” attribute, every time there is a different error. I have the feeling this is because I installed this as NPM modules instead of linking the scripts directly (I did this to be able to use the @types definitions for three), but I just cannot manage to fully understand the JS module ecosystem and variations.

Question
Is it possible to use these libraries (actually three.meshline which requires three) via NPM (= without directly linking the scripts) and if yes, how? Alternatively how to reference NPM three from non-NPM three.meshline script?

/// index.html

<script src="node_modules/three/build/three.module.js"
    type="module"></script>
<!-- <script src="node_modules/three.meshline/src/THREE.MeshLine.js"
    type="module"></script> -->
<script type="module">
    import("./node_modules/three.meshline/src/THREE.MeshLine.js")
</script>


/// THREE.MeshLine.js

;(function() {
  'use strict'

  var root = this
  var has_require = typeof require !== 'undefined'

  console.log(root.THREE)  // undefined
  console.log(has_require) // false

  var THREE = root.THREE || (has_require && require('three')) // <-- Uncaught TypeError: root is undefined
  if (!THREE) throw new Error('MeshLine requires three.js')   // <-- never managed to pass this test

  // (implementation code here)...

  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      exports = module.exports = {
        MeshLine: MeshLine,
        MeshLineMaterial: MeshLineMaterial,
        MeshLineRaycast: MeshLineRaycast,
      }
    }
    exports.MeshLine = MeshLine
    exports.MeshLineMaterial = MeshLineMaterial
    exports.MeshLineRaycast = MeshLineRaycast
  } else {
    root.MeshLine = MeshLine
    root.MeshLineMaterial = MeshLineMaterial
    root.MeshLineRaycast = MeshLineRaycast
  }
}.call(this))

How i map following Arrays,
the filter Array are an AND combination and looks for a suitable note.

So that the result is note[0] and note[3]

filter:[
0:{titel: 'A'}, 
1:{titel: 'B'}]

note:[
{0:[0:{titel: 'A'},1:{titel: 'B'}]}, 
{1:{titel: 'B'}},
{2:{titel: 'C'}}, 
{3:[0:{titel: 'A'},1:{titel: 'B'}, 2:{titel: 'c'}]}]

Thanks for helping.

maybe this question has been asked before, but unfortunately I was unable to find the answer.

I have got a screen called AccountManagement, where I can change the users data and in the end there is a button which updates the data.

const AccountManagement = (props) => {
    const {userData} = useContext(AuthContext)
    const [name, setName] = useState(userData.name)
    //other data...
    const update = () => {
        userData.name = name
        // set other data
        updateProfile(userData)
        navigation.navigate('Profile')
    }
}

So far, so good everything works fine. But if I call the same function (update()) in an other component via props, the changed state of name for example is ignored. Below, there is the return call of the same screen AccountManagement

 return(
    <SafeAreaView style={styles.container}>
        <HeaderBar updateInfo={update}/>
        <TextInput 
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder=""/>
    <TouchableOpacity style={styles.changeContainer} 
                      onPress={update}>
        <Text style={styles.change}>Update Info</Text>
    </TouchableOpacity>
)

In the component HeaderBar, I have got a TouchableOpacity, which should do the exact thing as the TouchableOpacity in AccountManagement, call update(), which it does, but the changed name is never used when I press the TouchableOpacity in the HeaderBar component

const HeaderBar = (props) => {
  return(
    <View>
        <TouchableOpacity onPress={props.updateInfo} style={styles.rightContainer}>
            <Text style={styles.rightText}>Update Info</Text>
        </TouchableOpacity>
    </View>
  }
)

Even if I try to print with console.log I cannot see the change.

My question now is:

Why is the changed name ignored, when I press update from the HeaderBar component?

How can I fix this issue?

Thank you in advance

I have an array of sections every section has an options array,
and have a maximum of options selected,

Let say

Section ‘Drinks’ has a max option 1

So I can just select one option from this section.

Section ‘Potatoes’ has a max option 2

Here I can check two options from this section.

So I have an array of sections and his options object,
Like this:

{
    idOfExtra: 44
    maximum_options: 1
    minimum_options: 1
    name: "drinks"
    radioData: [
        {
         calories: null,
         id: 245,
         maximum: 100,
         name: "Miranda orange",
         price: "0.00",
         price_unit: "USD",
        },
        {…}, {…} // other options
    ], 
}

So the issue is I want to set those options in an array named selectedOptionsQty to send to a backend, but before this, I want to check if I reached the max of Section or not And maximum option itself.

So The unique thing I can check about it is the idOfExtra ‘section id’ and compare it with the idOfExtra in the options object.

What I tried.
check if the currently selected option exists before in the checkbox array – that’s for style things “fill bg” -.

if the item is not selected before I push it to the two arrays (quantity, checkbox).
but before that, I check if the selected item has the same section id And the total quantity == maximum I show an alert for max reached options for this section.

otherwise, I push it to the arrays (quantity, checkbox).

But I got an unexpected behavior. Here’s Screen Record of current behavior.

Here’s a live example – Full Code

I am trying to make a certain Hud pattern inside my game using CSS and HTML.
I already have it like this picture.

So I am trying to put it like this picture (Photoshop edit)

I tried many things doing this, one thing i had it but then it stays like it when for example the Heart one dissapears, what needs to be happen is if the heart one dissapears the shield one will take it’s place, such as the others will move on the other locations. My last edit made it only fixed, it removed the heart btu the others stays on its place.

Hopefully someone can send me on the right direction.

The current code of the first picture:

HTML:

        <div class="hud-status">
            <div class="hud-circle hud-voice"><i id="VoiceIcon" class="fas fa-microphone"></i></div>
            <div class="hud-circle hud-health"><i class="fas fa-heart" style="color: #1fb0b4;"></i></div>
            <div class="hud-circle hud-armor"><i class="fas fa-shield-alt" style="color: #1f47b4;"></i></div>
            <div class="hud-circle hud-hunger"><i class="fas fa-hamburger" style="color: #b44e1f;"></i></div>
            <div class="hud-circle hud-thirst"><i class="fas fa-glass-whiskey" style="color: #008cff;"></i></div>
            <div class="hud-circle hud-stress"><i class="fas fa-brain" style="color: #ff0000;"></i></div>
            <div class="hud-circle hud-air"><i class="fas fa-lungs" style="color: #0083a3;"></i></div>
            <div class="hud-circle hud-nos"><i class="fas fa-meteor" style="color: #b41f51;"></i></div>
            <div class="hud-circle hud-timer"><i class="fas fa-hourglass-half" style="color: #6200ff;"></i></div>
        </div>

CSS:

    .hud-status {
        display: flex;
        position: absolute;
        display: none;
        left: 1.5vh;
        bottom: -4vh;
    }

    .hud-circle > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        color: white;
        font-size: 1.9vh;
    }

    .car-speed-circle {
        position: absolute;
        bottom: 5vh;
        left: 30vh;
        width: 8vh !important;
        height: 8vh !important;
        border-radius: 50%;
    }

    .hud-circle {
        transform: rotate(45deg);
        position: relative;
        width: 4vh !important;
        height: 4vh !important;
        margin: 0.3vh 1vh;
        float: left;
        box-shadow: 1px 1px 5px rgb(0, 0, 0);
    }