Category: javascript

I am trying to add a form within a popup, but whenever you click the text box in the popup it closes and you cant type in the text box, is there a way to disable click to close? and only have it so clicking out the pop up it closes rather than within the pop up. I have tried to change the CSS of the myPopup and added ‘pointer-events:none’ but that disables click to all components within the popup.

<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 180px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
 height:200px;
}

/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>

<body style="text-align:center">

<h2>Popup</h2>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup"><input type="text" id="fname" name="fname"><br><br> 
<button> 
<button></span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>

I try to pass a Component inside of UseEffect and down to setTimout to run only once on my welcome page and i dont get any error it just dosnt run it on my On Mount of the component.

const [intro, setIntro] = useState({ Welcome }); //Welcome is the Component whic should run and pass after 3 seconds ,it is imported as Welcome

useEffect(() => {
    const int = setTimeout(() => {
      return { intro };
    }, 3000);
    return () => clearTimeout(int);
  }, []);

Tengo una ventana hecha con Popup Maker en WordPress con un audio dentro metido, pero cuando cierro la ventana el audio no para, sino que se reproduce en segundo plano.

Me gustaría que cuando cierre la ventana, el audio se parase en ese mismo momento.

Código del audio:

<audio class="audio-icaro" controls> <source src="audio.mp3" type="audio/mp3"> </audio>

I have added mouseleave event on the current page HTML tag inside useEffect(didMount) of my react application and the expected behavior is that the event should be triggered when the cursor leaves the window. But the event is sometimes getting triggered when the user is normally scrolling through the page.

Here’s the code snipped which I have added.

const pageHtml = document.getElementsByTagName('html')[0];
const mouseLeaveHandler = () => {
  console.log('Left::');
};

pageHtml.addEventListener('mouseleave', mouseLeaveHandler);

I just want to show a popup only when the mouse pointer leaves the current browser window. So, any help related to this would be appreciated.

As shown on the link given Drag & Drop Between Two Grids from dev extreme documentation about dragging and dropping row between two identical data grids which is already possible.

I wanted to ask if it’s possible to do the same for columns between two data grids?

Thank you very much in advance!

This is my test string: abc123&=</~@#$%^&*():;<>_={}'”[email protected]

A costumer needs to rent a room

i need a easy way to calculate the total price
depending the check in, check out dates and the type of the room

two rooms, the one cheap the other one expensive
the price changes every month (only 4 summer months)

Room 1
price 10 euro per day (june)
price 20 euro per day (july)
price 30 euro per day (August)
price 15 euro per day (September)

Room 2
price 20 euro per day (june)
price 30 euro per day (july)
price 50 euro per day (August)
price 25 euro per day (September)

<select name="room" id="room" >
<option value="">Select Room</option>
<option>Room 1</option>
<option>Room 2</option>
</select>                   

<input type="text" id="checkin" name="checkin" >

<input type="text"  id="checkout" name="checkout" >

<input type="number"  id="Totalamount" name="Totalamount">
             

How it is possible to calculate it?

Using Java, php, SQL ??????

Thanks in advance

Can anyone give me minimal code so that any method I can override for JS method?

changeMode(mode) {
        if (!this.hasPriceControlRights && mode === 'price' ) {
          
            return;
        }
        if (!this.hasManualDiscount && mode === 'discount') {
            return;
        }
        this.trigger('set-numpad-mode', { mode });
    }

Hi so I’m trying to grab some json from an api and then populate a table, pretty simple stuff.
What’s happening is that I can see the “tableData” state being updated as each new row comes in, I’m also logging every time “tableData” is updated, yet maybe .5 seconds after its all done my “tableData” is empty again (check console screenshots)

const [bigChartData, setbigChartData] = React.useState("data1");
  const [tableData, setTableData] = React.useState([]);

  const setBgChartData = (name) => {
    setbigChartData(name);
  };

  const getData = () => {
    axios.get("URL")
      .then(res => {
        const data = res.data.items.forEach(item => {
          setTableData(oldData => [...oldData, {
            data: [
              { text: item.title },
              { text: "asd" + item.url },
              { text: "some links..." }
            ]
          }]);
        });
      })
      .catch(err => console.log(err));

    setTimeout(function () {
      console.log(tableData);
    }, 3000);
  }

  useEffect(() => {
    getData();
  }, []);


  useEffect(() => {
    console.log("Table data updated:");
    console.log(tableData);
  }, [tableData]);

Here is the fiddle.
I am trying to sort properties of the object by value.index property:

const arr = {
 field1: { data: "C", index: 3 },
 field2: { data: "D", index: 4 },
 field3: { data: "B", index: 2 },
 field4: { data: "A", index: 1 },
};

const data = Object.entries(arr)

const sortedDataArray = data.sort((a, b) => a[1].index - b[1].index)

const result = Object.fromEntries(sortedDataArray)

console.log(result);

But I am getting back the same result as I passed it.
How to sort object properties by index which is value of the property?
Result should be field4, field3, field1, field2.

when i try to install npm globally, using the command npm install -g expo-cli i am getting an error that says

npm install -g expo-cli
npm ERR! code ERR_OSSL_UNSUPPORTED
npm ERR! error:1E08010C:DECODER routines::unsupported

npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersuserAppDataLocalnpm-cache_logs2022-04-20T21_10_42_635Z-debug-0.log

although i just updated my node version to version 17.9.0 and my npm version is 8.5.5

please any suggestion of what i can do to solve this problem

In the following code:

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  

Why do you need to return a cleanup function that resets the interval object? In my understanding, since the interval function object was not created with useCallback(), the function should be re-initialized with each render and therefore have no memory of past interval values. Why is a cleanup function needed to clear it before the next render?

Here we have a class test

class test{
    static property1:any;
    property2:any;
    static method1(){
        console.log('method1',this.property1);
        console.log('proprety2')
    }
    async method2(){
        console.log('property2',this.property2);
        console.log('prepty1',test.property1);
    }
}

Question:- Here i am not able to use property2 in static method. Is there any type of class property exist which we can be used in both methods static and non-static?

I’m very new to React, so here is my first problem.

I can’t access my props in a children component.
I need to pass a function from the parent to the children,
to get Data from the Children.

Heres my parent:

import React from 'react';
import ExpenseForm from './ExpenseForm';

const NewExpense = () => {
  const saveExpenseDataHandler = enteredExpenseData => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString,
    };
    console.log(expenseData);
  };

  return (
    <div>
      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} test="test" />
    </div>
  );
};

export default NewExpense;

And this is my children component:

import React, { useState } from 'react';

function ExpenseForm(props) {
  const [enteredTitle, setEnteredTitle] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');

  const titleChangeHandler = e => {
    setEnteredTitle(e.target.value);
  };

  const amountChangeHandler = e => {
    setEnteredAmount(e.target.value);
  };

  const dateChangeHandler = e => {
    setEnteredDate(e.target.value);
  };

  const submitHandler = e => {
    e.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    props.onSaveExpenseData(expenseData);
    console.log(props.test);
    setEnteredTitle('');
    setEnteredAmount('');
    setEnteredDate('');
  };

+ return

I have a nested object like this:

const data = {
  "bar1" : {
    "xCount" : 7,
    "yCount" : 9
  },
  "bar2" : {
    "xCount" : 0,
    "yCount" : 0
  },
  "bar3" : {
    "xCount" : 2,
    "yCount" : 5
  }
}

I want to get the the max value of all values in this object, and here is what I did:

const getObjectValues: number[] = (obj: any) =>
    obj && typeof obj === 'object'
      ? Object.values(obj)
          .map(getObjectValues)
          .flat()
      : [obj];

const maxValue = Math.max(...getObjectValues(data));

The problem I’m having is that typscript is complaining about this for the function:

const getObjectValues: number[]
Type '(obj: any) => unknown[]' is not assignable to type 'number[]'.ts(2322)

And also for the Math.max parameter:

const getObjectValues: number[]
This expression is not callable.
  Type 'number[]' has no call signatures.ts(2349)

How can I solve this ?