factor an integer as the sum of 20 different random integers greater than zero with Javascript

I have a small problem that I can’t solve.

I would like, with a JavaScript code, to decompose an integer, such as the sum of several integers greater than zero and different from each other.

For now, I have managed to create the code below.
The problem is that it generates integers greater than zero, which however can be equal to each other.

How can I make them different from each other?

JavaScript code

const targetNumber = 40; 
const numTerms = 20; 

const result = BreakDownNumber(targetNumber, numTerms);
console.log("number to break down:", targetNumber);
console.log("random numbers:", result);

 
 function BreakDownNumber(targetNumber, numTerms) {

     let numbers = [];

     function getRandomNumber(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
     }
  
     let sum = 0;
     for (let i = 0; i < numTerms - 1; i++) {
       let randomNumber = getRandomNumber(1, targetNumber - sum - (numTerms - i - 1));
       numbers.push(randomNumber);
       sum += randomNumber;
    }
  
     // Last number
     numbers.push(targetNumber - sum);
  
     return numbers;
   }

I probably have to change everything, but I don’t know.
I know it’s a trivial question but I’m truly a beginner. 😉

I gladly accept any advice and help.

Thanks a lot to everyone.

Happy programming!

How to wait for input from mouse and delete it after in js

I am creating a little game

I would like to pause my program to wait for mouse input before continuing to another players turn, then waits for another input and removes the first eventlistener.

This is what i have so far

function handactive(event) {
    // do something
}
game_ended = false
turn = 1
while (game_ended == false) {
    if (turn % 2 != 0) {
        player2hand.removeEventListener('click', handactive)
        player1hand.addEventListener('click', handactive)
        // wait until the above is triggered
    }
    else {
        player1hand.removeEventListener('click', handactive)
        player2hand.addEventListener('click', handactive)
        // wait until the above is triggered
    }
    if (turn > 3) {
        game_ended = true // will add logic for game end later
    }
    turn++
}

I’m just not sure how to go about waiting for the event to be triggered before proceeding with the loop, right now it just removes the event listener before the player can click.

Thank you!

Why CKEDITOR.replace not working in 2023?

I just downloaded CKEditor to use the WYSIWYG editor on my website, but this code:

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>A Simple Page with CKEditor</title>
  </head>
  <body>
     <form>
        <textarea name="body" id="body">
           This is my textarea to be replaced with CKEditor.
        </textarea>
        <script src="http://localhost:8000/ckeditor/ckeditor.js"></script>
        <script>
           CKEDITOR.replace('body');
        </script>
     </form>
  </body>
</html>

I get this error

error

Connect to wifi with dbus-native nodejs connman

Does anyone know how to write javascript code that via the nodejs dbus-native or dbus-next libraries interfaces with connman to connect to a wifi network? I tried implementing the RequestInput method of the Agent API but my code keeps failing in an operation timeout

My code executes as:

  • RegisterAgent
  • Scan (wifi)
  • Connect
  • UnregisterAgent

The problem is that I haven’t figured out how to properly implement the RequestInput to complete the request.

javascript string issue .Uncaught SyntaxError: missing ) after argument list? [duplicate]

var TestencodedQuestionnameorg="What is the patient's HLA-B27 status?";
var questionsource ="37"

 var svgdata = "";

 svgdata += "<a onclick='getSourceData(&apos;" + questionsource + "&apos;,&apos;" + TestencodedQuestionnameorg + "&apos;)'"</a>" ;

when i click anchor tag then trigger getSourceData function but it’s not trigger with apostrophe string .it has a normal string it’s trigger function.

check below view

<a onclick="getSourceData('37','What is the patient's HLA-B27 status?')"
  </a>

getSourceData('37','What is the patient's HLA-B27 status?')

after apostrophe string will showing black color font ..check below error

Error:1  Uncaught SyntaxError: missing ) after argument list 

var TestencodedQuestionnameorg="What is the patient's HLA-B27 status?";
var questionsource ="37"

 var svgdata = "";

 svgdata += "<a onclick='getSourceData(&apos;" + questionsource + "&apos;,&apos;" + TestencodedQuestionnameorg + "&apos;)'"</a>" ;

when i click anchor tag then trigger getSourceData function but it’s not trigger with apostrophe string .it has a normal string it’s trigger function.

check below view

<a onclick="getSourceData('37','What is the patient's HLA-B27 status?')"
  </a>

getSourceData('37','What is the patient's HLA-B27 status?')

after apostrophe string will showing black color font ..check below error

Loader in Mui Select

This is my mui selection how to add the mui circle progression to the left of the selection field when the selected item is loaded so that the circle progression is turned off after the data is loaded.

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

i dont know i want to add this

How to create an orginizational chart on a website? Using html, css

Here is my org chart to modify in my website . I want to add new line and change the position of assistant to managing director.

My code before this:

org chart that expecting

Here is the code before this :

I want to add new line and change the position of assistant to managing director .

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Our Team | HaniTEK Sdn Bhd - Your Reliable Business Partner</title>

    <!-- Favicon -->
    <link rel="icon" href="img/logo/smalllogohanitek.png">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
        <style type="text/css">


    .classynav ul{
        white-space: nowrap;
    }
    .header-area .credit-main-menu{
       background-color: #003679;
    }
    .pRel{
        position: relative;
    }

    .contact-box{
        width: 380px;
        height: 100%;
        position: absolute;
        right: 0;
        background-color: #ff0000;
        display: flex;
        align-items: center;
        -webkit-transition: none !important;
      -moz-transition: none !important;
      -o-transition: none !important;
      transition: none !important;
    }

    .contact-box .box:before{
            content: '';
            position: absolute;
            top: 0%;
            z-index: 2;
            width: 0;
            height: 0;
            border-bottom: 85px solid red;
            border-left: 55px solid transparent;
            left: -30%;
            -webkit-transition: none !important;
              -moz-transition: none !important;
              -o-transition: none !important;
              transition: none !important;

    }

    .contact-box .box{
        z-index: 3;
        position: relative;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .contact-box a{
        display: inline-block;
        font-size: 20px;
        color: #003679;
        font-weight: 700;
        line-height: 85px;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .contact-box a:hover{
        font-size: 20px;
        color: #003679;
        font-weight: 700;
        line-height: 85px;
        -webkit-transition: none !important;
          -moz-transition: none !important;
          -o-transition: none !important;
          transition: none !important;
    }

    @media screen and (max-width: 766px){
        #sticker-sticky-wrapper{
            height: 70px !important;
        }
        .contact-box .box:before{
            top: 9%;
            border-bottom: 70px solid red;
        }
    }

    @media screen and (min-width: 992px) and (max-width: 1248px){
        #smalllogo{
            display: none;
        }
        .header-area .credit-main-menu .classy-navbar .classynav ul li a{
            font-size: 12px!important;
        }
        .contact-box{
            width: 130px;
        }
        .contact-box .box:before{
            border-bottom: 85px solid red;
            border-left: 55px solid transparent;
            left: -45%;
        }

        .contact-box a{
            font-size: 12px;
        }

        .contact-box a:hover{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 1249px) and (max-width: 1330px){
        .contact-box{
            width: 130px;
        }
        .contact-box .box:before{
            border-bottom: 85px solid red;
            border-left: 55px solid transparent;
            left: -45%;
        }

        .contact-box a{
            font-size: 12px;
        }

        .contact-box a:hover{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 1331px) and (max-width: 1649px){
         .contact-box{
            width: 220px;
        }
    }   

</style>

</head>

<body>
    <!-- Preloader -->
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <!-- ##### Header Area Start ##### -->
    <header class="header-area">
        <!-- Top Header Area -->
        <div class="top-header-area">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12 d-flex justify-content-between">
                        <!-- Logo Area -->
                        <div class="logo">
                            <a href="index.html"><img src="img/logo/logohanitek.png" alt=""></a>
                        </div>

                        <!-- Top Contact Info -->
                        <div class="top-contact-info d-flex align-items-center">
                            <a href="#" data-toggle="tooltip" data-placement="bottom"
                                title="34, Jalan Ara SD7/3B, Bandar Sri Damansara, 52200 KL, MY"><img
                                    src="img/core-img/placeholder.png" alt=""> <span>34, Jalan Ara SD7/3B, Bandar Sri Damansara, 52200 KL, MY</span></a>
                            <a href="#" data-toggle="tooltip" data-placement="bottom" title="[email protected]"><img
                                    src="img/core-img/message.png" alt=""> <span>[email protected]</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

          <!-- Navbar Area -->
    <div class="credit-main-menu" id="sticker">
        <div class="classy-nav-container breakpoint-off pRel">
            <div class="container">
                <!-- Menu -->
               <nav class="classy-navbar justify-content-between" id="creditNav">
           
                    <!-- Navbar Toggler -->
                    <div class="classy-navbar-toggler">
                        <span class="navbarToggler"><span></span><span></span><span></span></span></span>
                    </div>

                    <!-- Menu -->
                    <div class="classy-menu">

                        <!-- Close Button -->
                        <div class="classycloseIcon">
                            <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                        </div>

                       <!-- Nav Start -->
                        <div class="classynav">
                            <ul>
                                <li id="smalllogo"><a href="index.html"><img src="img/logo/smalllogohanitek.png" alt=""></a></li>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html">About Us</a></li>
                                 <li><a href="our-subsidary.html">Subsidiary</a></li>
                                 <li><a href="contact.html">Contact</a>
                                  <li><a href="our-team.html">Our Team</a></li>
                                <li><a href="licenses.html">Licenses </a></li>
                                    <li><a href="awards.html">Awards </a></li>
                                <li><a href="#">Services</a>
                                    <ul class="dropdown">
                                        <li><a href="electrical-mechanical.html">Engineering Services</a></li>
                                        <li><a href="facilities-management.html">Facility Management</a></li>
                                        <li><a href="oil-gas.html">Oil & Gas</a></li>
                                        <li><a href="food-beverage.html">Food & Beverages</a></li>
                                        <li><a href="information-technology.html">Information Technology</a></li>
                                        <li><a href="automotive-services.html">Automotive Services</a></li>
                                        <li><a href="trading.html">Trading</a></li>
                                    </ul>
                                </li>
                                <li><a href="gallery.html">Gallery</a></li> 
                                <li><a href="career.html">Career</a></li>

                                    <!-- <ul class="dropdown">
                                        <li><a href="#">Contact Us</a></li>
                                        <li><a href="#">Careers</a></li>
                                    </ul> -->
                                </li>
                               
                            </ul>
                        </div>
                        <!-- Nav End -->
                    </div>
                    <div class="contact-box">

                        <div class="box">
                            <a href="#" style="color: white;"><img src="img/core-img/call2.png" alt="">+(603) 62768517</a>
                        </div>
                        
                    </div>
                    <!-- Contact -->
                    <!-- <div class="contact">
                         <a href="#" style="color: white;"><img src="img/core-img/call2.png" alt="">+(603) 62768517</a>
                    </div> -->
                </nav>
            </div>
        </div>
    </div>
    </header>
    <!-- ##### Header Area End ##### -->

<!-- ##### Breadcrumb Area Start ##### -->
<section class="breadcrumb-area bg-img bg-overlay jarallax" style="background-image: url(img/bg-img/13.jpg);">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <div class="breadcrumb-content">
                    <h2>Our Team</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Our Team</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Breadcrumb Area End ##### -->

<!-- ##### Team Member Area Start ##### -->
<section class="team-area section-padding-100-0">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- Section Heading -->
                <div class="section-heading text-center mb-100">
                    <div class="line"></div>
                    <h2>Board of Directors</h2>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/boss.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Dato' Rahim Suboh</h5>
                        <h6>CHAIRMAN</h6>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            

            <!-- Single Team Member Area -->
            <div class="col-10 col-sm-6 col-lg-2">
                <div class="single-team-member-area mb-80">
                    <div class="team-thumb">
                        <img src="img/team/8.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Abdul Wahab Mohd Sidin</h5>
                        <h6>MANAGING DIRECTOR</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-10 col-sm-6 col-lg-2">
                <div class="single-team-member-area mb-80">
                    <div class="team-thumb">
                        <img src="img/team/10.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Mohd Noor Mohd Sidin</h5>
                        <h6>EXECUTIVE DIRECTOR</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-10 col-sm-6 col-lg-2">
                <div class="single-team-member-area mb-80">
                    <div class="team-thumb">
                        <img src="img/team/11.jpeg" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Azlina Abdul Rahman</h5>
                        <h6>EXECUTIVE DIRECTOR</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-10 col-sm-6 col-lg-2">
                <div class="single-team-member-area mb-80">
                    <div class="team-thumb">
                        <img src="img/team/12.jpeg" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Noraini Hayati bt Mohd Yussof</h5>
                        <h6>EXECUTIVE DIRECTOR</h6>
                    </div>
                </div>
            </div>

   <!-- Single Team Member Area -->
            <div class="col-10 col-sm-6 col-lg-2">
                <div class="single-team-member-area mb-80">
                    <div class="team-thumb">
                        <img src="img/team/7.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Noordin Mohammed</h5>
                        <h6>HEAD OF FINANCE & ADMINISTRATION</h6>
                    </div>
                </div>
            </div>

</section>
<!-- ##### Team Member Area End ##### -->

<!-- ##### Team Member Area Start ##### -->
<section class="team-area section-padding-100-0">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- Section Heading -->
                <div class="section-heading text-center mb-100">
                    <div class="line"></div>
                    <h2>Management Team</h2>
                </div>
            </div>
        </div>


        <div class="row justify-content-center">
            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/8.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Abdul Wahab Mohd Sidin</h5>
                        <h6>MANAGING DIRECTOR</h6>
                    </div>
                </div>
            </div>
        </div>


     <div class="row justify-content-center">
            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/imran.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Ahmad Imran Abdul Wahab</h5>
                        <h6>ASSISTANT MANAGING DIRECTOR</h6>
                    </div>
                </div>
            </div>
        </div>



        <div class="row justify-content-center">
            
            
            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/7.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Noordin Mohammed</h5>
                        <h6>HEAD OF FINANCE & ADMINISTRATION</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/6.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Ramsaid Jimadi</h5>
                        <h6>HEAD OF BUSINESS DEVELOPMENT</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/5.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Shaharudin Samat</h5>
                        <h6>HEAD OF OPERATIONS</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/4.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Zabha Abdul Wahab</h5>
                        <h6>HEAD OF ACCOUNT & HUMAN RESOURCE</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/rahman.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Abdul Rahman Jalil</h5>
                        <h6>HEAD OF SPECIAL PROJECTS</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/jaafar.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Jaafar Mohd Abu Bakar</h5>
                        <h6>HEAD OF INFORMATION TECHNOLOGY</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/3.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Lokman Bin Shamsuddin</h5>
                        <h6>HEAD OF FOOD & BEVERAGE</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="img/team/2.png" alt="">
                        
                    </div>
                    <div class="team-info">
                        <h5>Hasnul Bahari bin Johari</h5>
                        <h6>HEAD OF OIL & GAS</h6>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
<!-- ##### Team Member Area End ##### -->



<!-- ##### Footer Area Start ##### -->
<footer class="footer-area section-padding-100-0">
    <div class="container">
        <div class="row">

             <!-- Single Footer Widget -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-footer-widget mb-100">
                    <h5 class="widget-title">HaniTEK.com.my</h5>
                    <!-- Nav -->
                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About Us</a></li>
                             <li><a href="our-subsidary.html">Subsidary</a></li>
                              <li><a href="our-teamt.html">Our Team</a></li>
                            <li><a href="licenses.html">Licenses</a></li>
                             <li><a href="awards.html">Awards</a></li>
                             <li><a href="career.html">Career</a></li>
                            
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- Single Footer Widget -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-footer-widget mb-100">
                    <h5 class="widget-title">Services</h5>
                    <!-- Nav -->
                    <nav>
                        <ul>
                            <li><a href="electrical-mechanical.html">Engineering Services</a></li>
                            <li><a href="facilities-management.html">Facility Management</a></li>
                            <li><a href="oil-gas.html">Oil & Gas</a></li>
                            <li><a href="food-beverage.html">Food & Beverage</a></li>
                            
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- Single Footer Widget -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-footer-widget mb-100">
                    <h5 class="widget-title">Services</h5>
                    <!-- Nav -->
                    <nav>
                        <ul>
                            <li><a href="information-technology.html">Information Technology</a></li>
                            <li><a href="automotive-services.html">Automotive Services</a></li>
                            <li><a href="trading.html">Trading</a></li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- Single Footer Widget -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-footer-widget mb-100">
                    <h5 class="widget-title">Locate Us</h5>

                    <!-- Nav -->
                    <nav>
                        <ul>
                            <li><a href="contact.html">34G & 34-1, Jalan Ara SD7/3B, Bandar Sri Damansara, 52200 KL, MY</a>
                            </li>
                            <li><a href="mailto:[email protected]">[email protected]</a></li>
                            <li><a href="#">P: +(603) 62768517</a></li>
                            <li><a href="#">F: +(603) 62728751</a></li>
                        </ul>
                    </nav>

                </div>
            </div>
        </div>
    </div>
    <!-- Copywrite Area -->
    <div class="copywrite-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="copywrite-content d-flex flex-wrap justify-content-between align-items-center">
                        <!-- Footer Logo -->
                        <a href="index.html" class="footer-logo"><img src="img/logo/logohanitek.png" alt=""></a>

                        <!-- Copywrite Text -->
                        <p class="copywrite-text">
                            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

code before this.

Issue with CORS policy blocking fetch request from localhost to external API

Description:
I’m encountering a CORS-related error when making a fetch request from my frontend (running on http://localhost:8080) to an external API (https://mercury-t2.phonepe.com/transact/pg). The error message I’m receiving is:

Access to fetch at ‘https://mercury-t2.phonepe.com/transact/pg…token=…’ (redirected from ‘http://localhost:8080/api/payment/newPayment’) from origin ‘http://localhost:8080’ has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Additional Information:

Backend is built using Express.js.
Frontend is using React.
Both frontend and backend are running locally during development.
I’ve verified that the backend endpoint (/api/payment/newPayment) works independently without any CORS issues when tested via tools like Postman.
Request for Assistance:
Could someone help me understand why the CORS policy is blocking my fetch request and suggest potential solutions or additional configurations I might need to implement in order to resolve this issue?

Thank you in advance for your help!

Tried Configuring CORS Headers: I set up CORS headers in my Express backend using the cors package, allowing origins from http://localhost:8080.

  • Expected Outcome: Anticipated that allowing the specific

origin in CORS headers would permit requests from the frontend to the external API.
Actual Result: Despite configuring CORS headers, I’m still receiving a CORS policy error when making fetch requests from http://localhost:8080 to the external API. The error persists, blocking the requests.
You can expand upon these points by providing any code snippets or specific configurations you attempted, detailing what you expected to happen and the outcome you observed. This helps the individuals assisting you understand the steps you’ve already taken and better diagnose the issue.

“ERROR in Unexpected token (314:202513)” without any further information

I’m trying to build a hybrid project with yarn then yarn build, however I get an error with only ERROR in Unexpected token (314:202513). It doesn’t include which file causes the error. Anyone can shed some light on how I can further investigate the error?

Some other information:

  • the command executed which causes the error seems to be node --max_old_space_size=8192 .electron-kungfu/build.js && electron-builder in app sub-folder of the project.

  • the js part of project uses typescript, vue, webpack

  • some other outputs around the error:

 |     [365] ../node_modules/element-ui/lib/notification.js 16.3 KiB {2} [built]
 |     [366] ../node_modules/element-ui/lib/message-box.js 32.4 KiB {2} [built]
 |     [505] ./src/renderer/main.js + 320 modules 434 KiB {2} [built]
 |           | ./src/renderer/main.js 8.04 KiB [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/notification.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/base.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/message-box.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/checkbox.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/tooltip.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/loading.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/form-item.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/form.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/radio-group.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/radio.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/dialog.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/popover.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/switch.css 50 bytes [built]
 |           | ../node_modules/element-ui/lib/theme-chalk/dropdown-menu.css 50 bytes [built]
 |           |     + 306 hidden modules
 |         + 1011 hidden modules
 |
 |     ERROR in Unexpected token (314:202513)
 |     Child HtmlWebpackCompiler:
 |                               Asset      Size  Chunks  Chunk Names
 |         __child-HtmlWebpackPlugin_0  7.49 KiB       0  HtmlWebpackPlugin_0
 |         Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
 |         [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 3.9 KiB {0} [built]
 |     Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!src/renderer/assets/iconfont/iconfont.css:
 |                               Asset      Size  Chunks  Chunk Names
 |         imgs/iconfont--iconfont.svg  10.9 KiB
 |         Entrypoint mini-css-extract-plugin = *
 |         [0] ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes {0} [built]
 |         [1] ./src/renderer/assets/iconfont/iconfont.eot?t=1558590944328 5.04 KiB {0} [built]
 |         [2] ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB {0} [built]
 |         [3] ./src/renderer/assets/iconfont/iconfont.woff?t=1558590944328 3.3 KiB {0} [built]
 |         [4] ./src/renderer/assets/iconfont/iconfont.ttf?t=1558590944328 4.8 KiB {0} [built]
 |         [5] ./src/renderer/assets/iconfont/iconfont.svg?t=1558590944328 71 bytes {0} [built]

Sorry I have very little experience on frontend so the question may not be quite clear, please comment for any clarification.

Also I want to know if there is any commandline arguments which can force yarn or node to printout more information?

Any help is highly appreciated!!!

How to console log or see data from action function in remix js?

After submitting data using useSubmit from "@remix-run/react" the data goes to the action function.

Submitting the data:

import { useSubmit } from "@remix-run/react";

const submit = useSubmit();

function handleSave() {

  const selectedProducts = formState;

  if (selectedProducts === null) {
    return;
  }

  submit({data: JSON.stringify(selectedProducts)}, { method: "POST" });
}

Receiving it in the action function:

export async function action({ request }) {

  const inputData = Object.fromEntries(await request.formData());

  const parsedData = JSON.parse(inputData.get("data"));

  const formattedData = parsedData.map(product => ({
    productId: product.productId,
    variantIds: product.variantIds.join(', '),
  }));

  // Some save procedures here

  return redirect("/app/some-page");
}

But then when manipulating the data for a mutation how can I console.log() it to see the data? Because without clear knowledge of the data’s current state it’s almost impossible to work with it.

Primarily I completed my task by creating a test table and constantly saving the data after each manipulation and then checking it from the db which is not practical at all. So what could be a practical solution to my problem?

Thanks!

redis – How to get the number of keys from SCAN command?

I am trying to count the keys matching a pattern. I did get the returned keys from using the SCAN command. But instead of getting the keys array, I only want to get the count of the keys.

SCAN 0 MATCH tick:klays:umc:*

I am using this INCR to increment the key tick:klays:umc:278 like below:

INCR tick:klays:umc:*278
INCR tick:klays:umc:*260
INCR tick:klays:umc:*279

VueJs3 : Disable scrolling on parent while child is of full height

Hi!
I Am new learner to vuejs and still learning

Problem
– I want to create a component for a page which is having a multiple components.
Now for the component which i am creating is in the middle of the page so what i want to achieve is a fullpage scrolling for the specific section of the component. I Have created a div with a 150vh and inside that i am creating a section sticky and inside that i am creating a list of items which i want to preview one list per mouse scroll or swipe

ToDo:
Now as the section reaches the top of 0px i want the user to scroll only through that items and not through the parent and the scrolling of the items should be of fullpage. and after the last slide is reached i want the scrolling to be regular.

Write javascript variables directly or load via AJAX [duplicate]

We have a one page application that needs to load about 100 user specific data points into Javascript variables that are not required for the initial painting of the page.

Is it better to load the variables while creating the dynamic page and “write” them to Javascript (using PHP echo or ASP response.write), or first load the page and then load the data using an AJAX call?

I am aware that using an AJAX call will allow painting the page quicker but are there any other advantages/disadvantages?

How do I make my background image disappear when hovering over any element other than the background ?

What I’m trying to do here is create a design page for a user to be able to design a safe space. I give the user lots of different tools mentioned as list elements to be able to edit, move to different pages, and other functionalities. In the center of the screen will be an image of the virtual space the user is designing. Currently, the center of the screen is an image of a waterfall. I want to be able to hover over any of the list elements (excluding the “background” list element) and make the image of the waterfall disappear, as everything else turns black except for the list element we’re hovering over.

I added some new code and it broke the old code.

I commented out code that broke my old code.

How do I make the new code work?

Here is the code I am working with:

My HTML:

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" href="styledesign.css">
</head>
<body>
  <h1 id="header">Design Mode</h1>
  <img src="./imagesdesign/purplewaterfall.png">
  <ul id="rightlist">
    <li>View </li>
    <li id="blurb">Coping Skills</li>
    <li id="blurb">Notes to Self</li>
  </ul>
  <ul id="leftlist">
    <li>Objects</li>
    <li id="backgroundli">Background</li>
    <li>Sound</li>
  </ul>
  <ul id="bottomlist">
    <li><a href="../homepage/index.html">Sign Out</a></li>
    <li width=10px><a href="../loginpage/login.html">
      Sign in Using Different Username</a></li>
      <li>Save</li>
    </ul>
    <script type="text/javascript" src="scriptdesign.js"></script>

</body>
</html>

My JavaScript:

//change color of list element when hovering over it
//change color of list element back when not hovering over it
//make my background image disappear when hovering over any li element...
//...other than the background li...
//...and reappear once stopped hovering


document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseover", () => {
    document.body.style.background = "black";
    el.style.color = "white";
    //document.querySelector("img").style.display = "none";
  })
});


document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseout", () => {
    document.body.style.background = "pink";
    el.style.color = "black";
    //document.querySelector("img").style.display = "block";
  })
});


//document.getElementById("backgroundli").addEventListener("mouseover", () => {
//    document.querySelector("img").style.display = "block"
//  })
//});

Expo Go Application and MYSQL connection

Login works fine on the web but when i try to test the login using the expo go application it displays the following error :

Error during login:, [TypeError: Network request failed]
at componentscustomerCustomerLogin.js:null in CustomerLogin
at [email protected]:null in asyncGeneratorStep
at [email protected]:null in Promise$argument_0
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:null in queueReactNativeMicrotask
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:null in _callTimer

/Since i can login from web it means that my db configuration is fine.
I am using MYQSL community server and mysql workbench.
/

const handleLogin = async () => {

try {
  const response = await fetch('http://localhost:3000/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ username, password }),
  });

  const data = await response.json();

  if (response.ok) {
    const {customer_id } = data;
    navigation.navigate('CustomerDashboard',{ customer_id });
    console.log('Login Successful')
  } else {
    // Login failed, display an error message
    console.error('Login failed:', data.error);
  }
} catch (error) {
  console.error('Error during login:', error);
}

SERVER SIDE

 // api/login.js
const express = require('express');
const router = express.Router();
const bcrypt = require('bcrypt');
const { db } = require('../db');

router.post('/login', async (req, res) => {
const { username, password } = req.body;

try {
  // Retrieve customer_id along with the hashed password from the database
  const [result] = await db.execute('SELECT customer_id, password FROM customer_users WHERE username = ?', [username]);

  if (result.length === 0) {
    return res.status(401).json({ error: 'Invalid username or password' });
  }

  const { customer_id, password: hashedPassword } = result[0];

  // Compare the provided password with the hashed password
  bcrypt.compare(password, hashedPassword, (err, passwordMatch) => {
    if (err) {
      console.error('Error comparing passwords:', err);
      return res.status(500).send('Internal Server Error');
    }
    if (passwordMatch) {
      // Passwords match, login successful
      // console.log(customer_id)
      res.json({ success: true, message: 'Login successful', customer_id });
    } else {
      // Passwords don't match, login failed
      res.status(401).json({ error: 'Invalid username or password' });
    }
  });
} catch (error) {
  console.error('Error during login:', error);
  res.status(500).send('Internal Server Error');
}
 });

module.exports = router;