Category: javascript

I am new to front-end & have just begun react js, (learning in VS code) I’ve setup my basic environment but when executing the 1st default “page.js” file the following error is being thrown:

C:Program Filesnodejsnode.exe .apppage.js
Process exited with code 1
Uncaught SyntaxError SyntaxError: Unexpected token ‘<‘

The code in my page.js file

import React from 'react'

const page = () => {
return (
    <div> page </div>
 )
}

export default page

given i am new to this environment I just can’t seem to understand what’s wrong here nor am I able to get any answers on how to fix this over the net, if someone can explain what is the problem & how to fix it & why is it happening, it would be very helpful.
Thanks

Screenshot of the web pages aimed for mobile use

Hi all,
I have to do a group project for school. I’ve come up with this design for the pages. At first I thought of going for this idea ’cause it looked like it wouldn’t be hard. As if we could just automate going to Walmart’s site, right-click on inspect, and find divs by keywords to retrieve and display them on the web app. We’ve told our instructor that the web app compares prices of groceries from supermarkets to help find the cheapest ones ( sorting them from the cheapest ). She didn’t oppose to it. Now that we got to the point to do the data, she said that to use API it seems too hard for your technical knowledge (we’re only on our 1st term) nor will it be free to access the API. Wtf do we do.. She said we can either use crowdsourcing or use fake data be it randomized or generated by sites like mockaroo.

For crowdsourcing, I’d need to change the pages again, but that won’t be a problem, shouldn’t take that long. But my concern is more about the web app looking unfinished since we’d have no data in the beginning right? Since we won’t have lots of users / volunteers willing to make posts when they find the cheapest stuff in xyz supermarket. We need to present this at the end of the term, which is just in another 4-5 weeks. And unfortunately, our business communication instructor also wants to grade our presentation, and wants us to make a report based on our project, so we might fail these 2 courses if we fail this.

As for the fake data, the things she told us to do just sound like too much to do within our deadlines, and too complicated for us to even comprehend. At first, I also didn’t wanna use “FAKE” data, ’cause what’s the point then? But what other choice do we even have at this point, and our instructor told us that if we were to use fake data, the aim is to make a prototype for when we’re ready to use actual data someday in the future, so we’re just setting everything up and can just replace it later on in the future if we still want to. So I’m warming up and leaning towards fake data now.. the good thing about this is we don’t need to change our UI / pages either, ’cause frankly speaking, making designing & wireframes don’t take long, but coding them in html and css take quite some time for a group project. And sadly my teammates aren’t pulling their weight, not even responding fast. I’m screwed and regret everything now.

Any suggestions would be appreciated.

And just in case anyone wanna know what she told us,
This was what she told us :
“Another option is to create a database of fake prices of a small collection of products, for two supermarkets. Use this database to implement your original idea, with the assumption that hypothetically the JSON, or the data can be web-scraped or accessed directly from an API when your business/company decides to go forward with the idea.
you can pretty much keep your same UI screens, and your goal would be to create a prototype that proves your initial concept, of guiding me to go to which store for milk, which store for eggs, etc. Keep your collection of products small for now. To mimic the idea of variable prices, you can have a JS that creates random prices for a small group of staple items, so that eventhough it’s “fake data”, you can still have a random aspect of the prices. We are not concerned with the accuracy of the prices.
When we read from api, json is one of the formats we can get (there’s also others like xml etc). One day if you do get from Walmart api, the format may be json but it’s not necessarily getting a big file with tons of product info, you might just be getting something specific for say apples, depending on the api call that you make. Json is a flexible format.
If you do make a fake Json file (say with mockeroo), say two supermarkets and each has 10 producst, then you can read it into firestore one time only. Afterwards each time (or each day?) the app is loaded you can have a js file that goes into the firestore field for price and gives/assign it a random number. That way you can test your algorithm for finding the cheapest apple for today, and tell me which store to go to, today. It’s timing sensitive.”

I am trying my hand on building a drawing app in React using HTML Canvas element.

import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
///*[EN ROUGH]*/import rough from 'roughjs';

///*[EN ROUGH]*/const generator = rough.generator();

const createElement = (x1, y1, x2, y2, type) => {
  return { x1, y1, x2, y2, type };
};

const drawElement = (context, element) => {
  if (element.type === "connect") {
     context.moveTo(element.x1, element.y1);
     context.lineTo(element.x2, element.y2);
     context.stroke();
    ///*[EN ROUGH]*/const line = generator.line(element.x1, element.y1, element.x2, element.y2);
    ///*[EN ROUGH]*/context.draw(line);

  }
};

function App() {
  const [elements, setElements] = useState([]);
  const [drawing, setDrawing] = useState(false);

  useLayoutEffect(() => {
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

    context.clearRect(0, 0, canvas.width, canvas.height);
    ///*[EN ROUGH]*/const context = rough.canvas(canvas);

    //redraw all the components on re-render
    elements.forEach((element) => {
      drawElement(context, element);
    });
  });

  const handleMouseDown = (event) => {
    setDrawing(true);
    const { clientX, clientY } = event;

    const element = createElement(
      clientX,
      clientY,
      clientX,
      clientY,
      "connect"
    );
    setElements((prevState) => [...prevState, element]);
  };

  const handleMouseMove = (event) => {
    if (!drawing) return;
    const { clientX, clientY } = event;
    //index of the last element that was selected
    const lastElemIndex = elements.length - 1;
    const { x1, y1 } = elements[lastElemIndex];
    const updatedElement = createElement(x1, y1, clientX, clientY, "connect");

    //overwrite the previous element with the new x2, y2 coordinates of mouse move
    const elementsCopy = [...elements];
    elementsCopy[lastElemIndex] = updatedElement;
    setElements(elementsCopy);
  };

  const handleMouseUp = () => {
    setDrawing(false);
  };

  return (
    <canvas
      id="canvas"
      width={window.innerWidth}
      height={window.innerHeight}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseMove={handleMouseMove}
    >
      Canvas
    </canvas>
  );
};

export default App;

When I run this code, it produces this output when I click and drag mouse:

When I enable RoughJS to draw instead of normal canvas, the line works fine. RoughJS code can be enabled by removing comments EN ROUGH. I am totally lost why it’s happening.

I have a web app that uses WebRTC to connect to peers, which behaves something like Skype. the onnegotiationneeded event is triggered by adding a DataChannel. The peers are to remain persistently connected, and users can use the DataChannel to signal a “call”. When the signal for a call is accepted by whichever peer it was sent to, the app gets a reference to a local video/audio MediaStream and adds it to the connection using the addTrack method on both sides. When the call is complete, the tracks are removed on both ends via removeTrack. This causes the onnegotiationneeded to be fired again, and the web app will renegotiate the connection with the added tracks.

This is where the problem arises. Everything works great, peers can connect initially, call, hangup, call again, hangup, etc. The problem is that each successive call to addTrack is adding a new Transceiver/Sender/Track which gets appended to the new SDP. Essentially, the SDP eventually becomes very large as a result of carrying the details about now-defunct, previously used transceivers which have a null track.

I’ve been researching a lot, and have come across this list discussion from 2019: https://lists.w3.org/Archives/Public/public-webrtc/2019Feb/0036.html. There is a discussion surrounding the topic, including some points about causing Chrome to crash with a large SDP. The discussion ends with a final message of:

Based on this thread, the issue and PR discussions as well as editor
meetings, we have consensus to remove stopped transceivers
immediately. I will update the PR.

However, this is not the behavior I’m seeing in Firefox. Calling transceiver.stop() does not result in the removal of the transceiver from the next generated SDP, it is still present there. Successive calls will still result in multiple track definitions in the SDP, which continues to grow over time/calls.

I also examined the possibility of simply reusing an existing transceiver if one exists, but I am finding another problem with this approach: replaceTrack does not cause the onTrack event to fire on the receiving end. If I use replaceTrack, the receiver will never know that anything happened. I think replaceTrack is supposed to be used only for replacing tracks in a live context, like the example given in the docs (switching from front camera to back), where the stream is established and ongoing.

My question is this:

What is the proper way to handle repeatedly adding/removing tracks and maintaining a clean, minimal SDP for a persistent WebRTC peer connection in late 2023?

I work on asp.net MVC . I face issue I can’t change last working date based on RequestNo .
without using button submit

meaning when last working date changed then call Edit action inside resignation controller without using submit button when value of input type text last working date changed

I need to using ajax jQuery to do that

Web API I will call it using jQuery ajax is Resignation/Edit

Resignation is controller and edit is action and I will pass object to Edit action result .

I need to do that without using form and I will depend on java script or jQuery

my code as below :

public class ResignationRequester
{


    [Display(Name = "Request No")]
    public int RequestNo { get; set; }


    [Required]
    [Display(Name = "Last Working Day: ")]
    [DataType(DataType.Date, ErrorMessage = "Date only")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime LastWorkingDate { get; set; }
}



[HttpPost]
  [ValidateAntiForgeryToken]
  public async Task<ActionResult> Edit(ResignationRequester req)
  {

//UPDATE last working date based on Request No
}

@model HR.WorkforceRequisition.Models.ResignationRequester

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_LayoutResignation.cshtml";
}








    <table style="border: 1px solid black;width:100%;">

        <tr>
            <td class="hover" style="width: 50%; font-weight: bold; padding-top: 10px;">
                <div class="form-group hover">
                    @Html.LabelFor(model => model.RequestNo, htmlAttributes: new { @class = "control-label col-md-5" })
                    <div class="col-md-7" id="RequestNo">
                        @Model.RequestNo
                    </div>
                </div>
            </td>

        </tr>




       
         <tr>
     
     <td class="hover" style="width: 50%; font-weight: bold; padding-top: 10px;">
         <div class="form-group hover">
             @Html.LabelFor(model => model.LastWorkingDate, htmlAttributes: new { @class = "control-label col-md-5" })
             <div class="col-md-7">
               
                 @Html.EditorFor(model => model.LastWorkingDate, new { htmlAttributes = new { @class = "form-control" } })
             </div>
         </div>
     </td>
 </tr>

       



    </table>



    

</div>

My intent is to create a login page on my website with html, css, javascript or any other scrripts.
I would like to try and have it so that the code reads this text file:
` — Scans First and Compares to Input —
Email =
UserName =

— Scans Second and Compares to Input —
Password =

— Scans Third and Uses as Output —
UserID =
ProfilePicture = `

What happens theoretically is that the code reads line 2, col 9 to end of line 2 and compares the email to the input. Then the code reads line 6, col 12 to end of line 6 and compares the password to the input. Then the code reads the UserID and ProfilePicture info from line 9, col 10 to end of line 9 and line 10, col18 to the end of line 10. Then the code sets the username and profile picturre and the user info on that client.

I have been unable to find any information on how to do this and cannot figure it out myself. If there is any other of better way to do this, please let me know.

Thanks for any help!

My task is to write a function that takes an object like the one below and deletes the “shelvesInCupboards” and “shelvesNotInCupboards” properties if they are present and adds a new property with their sum “totalShelves”. I am not sure how to add my respective delete statements to get rid of the two mentioned properties without also altering my new “totalShelves” value.

Example object:
{
shelvesInCupboards: 3,
shelvesNotInCupboards: 2,
};

function sortTheKitchen(kitchen) {
kitchen["totalShelves"] = 0;
if (kitchen["shelvesInCupboards"] && kitchen["shelvesNotInCupboards"]) {
  totalShelves = kitchen["shelvesInCupboards"] + kitchen["shelvesNotInCupboards"]
}
if (kitchen["shelvesInCupboards"] && !kitchen["shelvesNotInCupboards"]) {
  totalShelves = kitchen["shelvesInCupboards"]
}
if (!kitchen["shelvesInCupboards"] && kitchen["shelvesNotInCupboards"]) {
  totalShelves = kitchen["shelvesNotInCupboards"]
}
return kitchen;
}

I want to integrate my BIM model with IOT data(available in Excel) in AutoDesk platform services and want to show some heatmaps or histogram for data I got.
I want to work on javascript but I am civil engineer I don’t have knowledge of coding so how to start learning code like is I require to learn javascript in deep or some basic knowledge will helpful for me .
Or can you suggest me to learn something according to my project need

Thanks

I have gone through so many answers and documentations, but none of the tentatives is working for me. I am very noob to javascript/mui library, so I am trying everything that I am finding to be honest.

I need to keep this disabled={props.viewer == true}, this is version of my package "@mui/material": "^5.10.11"

This is my code:

<Inputbase_wrapper>
    <a href={card.familyLink} target="_blank" rel="noopener noreferrer">
        <InputBase
            placeholder=''
            fullWidth={true}
            value={card.familyLink||''}
            disabled={props.viewer == true}
        />
    </a>
</Inputbase_wrapper>

I tried all of this sx below, but none of them applied the style needed, what should I do?

1.

sx={{ "&.MuiInputBase-input": {
        "&:disabled": {
            fontFamily: 'Poppins', fontSize: '14px', textDecoration: 'underline', color: "blue", cursor: 'pointer'
        }
    }
    }}

sx={{
        "&.Mui-disabled": {
            fontFamily: 'Poppins', fontSize: '14px', textDecoration: 'underline', color: "blue", cursor: 'pointer'
        }
    }}  

In this one I tried: "&.Mui-disabled", "&:disabled", "Mui-disabled &", etc

I’m using the following script to dynamically add and delete fields to a card within a form. I’m trying to pass the values to my model binding property, which is a List<ushort>

    <div style="width:40%;">
                <div class="">
                    <div class="col-lg-12">
                        <div id="row">
                            <div class="input-group m-3">
                                <div class="input-group-prepend">
                                    <button class="btn btn-danger"
                                            id="DeleteRow"
                                            type="button">
                                        <i class="bi bi-trash"></i>
                                        Delete
                                    </button>
                                </div>
                                <input type="text" class="form-control m-input">
                            </div>
                        </div>

                        <div id="newinput"></div>
                        <button id="rowAdder" type="button" class="btn btn-dark">
                            <span class="bi bi-plus-square-dotted">
                            </span> ADD
                        </button>
                    </div>
                </div>
</div>
<script type="text/javascript">
            $("#rowAdder").click(function () {
                    newRowAdd =
                        '<div id="row"> <div class="input-group m-3">' +
                        '<div class="input-group-prepend">' +
                        '<button class="btn btn-danger" id="DeleteRow" type="button">' +
                        '<i class="bi bi-trash"></i> Delete</button> </div>' +
                        '<input type="text" class="form-control m-input"> </div> </div>';

                    $('#newinput').append(newRowAdd);
                });
                $("body").on("click", "#DeleteRow", function () {
                    $(this).parents("#row").remove();
                })
</script>

I’ve tried using a hidden field bound to the model property and updating the field on submit to an array.

  function updatePortsInput() {
      console.log("updatePortsInput called");
      var ports = [];
      $(".m-input").each(function () {
          var portValue = parseInt($(this).val());
          if (!isNaN(portValue) && portValue >= 0 && portValue <= 65535) {
              ports.push(portValue);
          }
      });

      $('[name="Ports"]').val(JSON.stringify(ports));
  }

 <input type="hidden" id="portsInput" name="Ports" asp-for="Ports" />

But I’m unable to populate my List with the values of the generated fields.

Does someone have an idea on this?

I need to incorporate the following code in a class I’m working on, so it need it to be like this.translate()... Instead of the current syntax. How would i do that?

Current syntax:

  export default class Tail {
    constructor() {
      //array of images
      this.tail = [...this.el.querySelectorAll('img')]
      //length
      this.tailCount = this.tail.length
    }
  

    this.translate() {
      //to be here.
    }
  }

  let translate = [...new Array(this.tailCount)].map(() => ({
    // i wish this funtionality incorporated into my `this.translate()`
    previous: {
      x: 0,
      y: 0
    },
    current: {
      x: 0,
      y: 0
    },
    amt: position => 0.10 + 0.05 * position
  }))

The provided Facebook login JS SDK works with User Login (User Access Token aka UAT) flow via “Facebook Login for Business” but not for the Business Login (System-user Access Token aka SUAT).

Facebook Login for Business configuration

We currently use the User Access Token login flow since it successfully opens the Facebook login popup, and returns the access token after successfully authenticating and authorizing. However, we want to use the System-user Access Token to use a non-expiring token and also attach the token to Business as opposed to the user.

I tried following below documentation but without success.

Facebook Login for Business – Invoke a Login Dialog

This code is used in an Angular application, but I was able to use the SDK without issue.

Working User (UAT) Flow

This flow uses the UAT configuration ID. This uses your FB profile connected to a business account. Login Dialog works fine, and I can finish the flow and retrieve the necessary token in order to exchange it with our back-end server.

<!-- FB SDK in index.html -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
...
FB.init({
  appId: [Facebook App ID],
  version: 'v15.0',
  cookie: true,
});

...

FB.login(async (response: StatusResponse) => {
  // login logic goes here...
}, {
  config_id: [User Login config ID],
  auth_type: 'reauthenticate' // "rerequest" & "reauthorize" works as well...
}

Working Facebook Login popup

Non-working Business (SUAT) Flow

However, when we attempt to use the SUAT configuration ID, the login breaks two different way. The first example shows the error message after successfully authenticating with Facebook.

FB.login(async (response: StatusResponse) => {
  // login logic goes here...
}, {
  config_id: [Business Login config ID],
  auth_type: 'reauthenticate' // "rerequest" & "reauthorize" will also give the same error page.
}

Facebook – “It looks like this app isn’t available”.

Then, when we tried using auth_type code as mentioned in their documentation, the FB login popup breaks completely with a different message. Even though auth_type code is specifically mentioned in their specific documentation, I found it weird that the Definitely Typed Repo for Facebook JS SDK did not have code as part of their choices. So I manually added ‘code’ to the auth_type options.

FB.login(async (response: StatusResponse) => {
  // login logic goes here...
}, {
  config_id: [Business Login config ID],
  auth_type: 'code',
  override_default_response_type: true,
}

Facebook – “Sorry, something went wrong.”

All scopes defined in both configuration has been approved for advanced permissions. I’ve tried many different configurations of the above settings (API versions, auth_types, etc.) but only the UAT configurations seems to work for the FB JS SDK.

I’ve noticed there’s been a lot more search results regarding this issue in the past few months. We’ve been dealing with this issue since January 2023. If anyone has a workaround or suggestions, it would be greatly appreciated!

While running my RN project I get on the react-native-autogrow-textinput after upgrading it to react-native-autogrow-textinput: ^5.4.0
Here’s the error:

error: cannot find symbol
                editText.setBlurOnSubmit(false);
                        ^
  symbol:   method setBlurOnSubmit(boolean)
  location: variable editText of type ReactEditText

And here is my android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 24
        compileSdkVersion = 34
        targetSdkVersion = 34
        supportLibVersion = "34.0.0"
        googlePlayServicesAuthVersion = "16.0.1"
        kotlinVersion = "1.9.0"
    }

    subprojects { subproject ->
    afterEvaluate{
        if((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                compileSdkVersion rootProject.ext.compileSdkVersion
                buildToolsVersion rootProject.ext.buildToolsVersion
            }
        }
    }
}
        repositories {
        google()
        mavenCentral()
        mavenCentral()
    }
    dependencies {
        // classpath 'com.android.tools.build:gradle:4.0.0'
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath 'com.google.gms:google-services:4.4.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenCentral()
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        maven {
            // expo-camera bundles a custom com.google.android:cameraview
            url "$rootDir/../node_modules/expo-camera/android/maven"
        }
        maven { url 'https://maven.google.com' }
        maven { url 'https://www.jitpack.io' }

        google()
        jcenter()
    }
}

I have not been able to figure out how to resolve this issue; any help is appreciated.

I’m trying to load a module dynamically (depends on the number of algorithms in the backend application). The angular app compiles but doesn’t load once I add the routes dynamically.
If I add them statically (hardcoded) they load fine.

Thanks in advance!
Relevant code snippets below:

lab-routing.module.ts:

export const MLRoutes: Routes = [];
export const NormRoutes: Routes = [];
export const LAB_ROUTES: Routes = [{
  path: '',
  component: LabComponent,
  children: [
    {
      path: 'Dashboard',
      component: LabDashboardComponent,
    },
    {
      path: '',
      redirectTo: 'Dashboard',
      pathMatch: 'full',
    },
    {
      path: '**',
      component: NotFoundComponent,
    },
  ],
}];

lab-menu.ts:

export function insert_ml(algo: string): void {
  ML_ITEMS.push({
    title: algo,
    icon: 'keypad-outline',
    children: [
      {
        title: 'Datasets',
        icon: 'activity-outline',
        link: `/lab/${algo}/dataset`,
      },
      {
        title: 'Results',
        icon: 'bar-chart',
        link: `/lab/${algo}/results`,
      },
    ],
  });

  MLRoutes.push({
    path: algo,
    loadChildren: () => import('./ml-algo/ml-algo.module').then(m => m.MLAlgoModule),
  });
}

lab-dashboard.component.ts:

public refresh() {
    this.http.get('http://localhost:5000/refresh').subscribe(
      data => {
        if (data['success']) {
          data['ml_algos'].forEach(algo => insert_ml(algo));
          data['norm_algos'] .forEach(algo => insert_norm(algo));
          build_menu();
        }
      },
    );
  }

ml-algo-routing.module.ts:

const routes: Routes = [{
  path: '',
  component: MLAlgoComponent,
  children: [
    {
      path: 'dataset',
      component: MLDatasetComponent,
    },
    {
      path: 'results',
      component: MLGraphsComponent,
    },
  ],
}];

My bot not check other months only checking given month if it doesn’t have available date then it picks next any available date.

I want my bot to check all the 12 months till given yearly range if any date available between today to till end of the range bot should mention the date.

Here is my code

dd = driver.find_element(By.ID, ("ui-datepicker-div"))
    current_month = driver.find_element(By.CLASS_NAME, "ui-datepicker-month").text
    current_year = driver.find_element(By.CLASS_NAME, "ui-datepicker-year").text

    while not (current_month.__eq__("April") and current_year.__eq__("2025")):
        driver.find_element(By.XPATH, "//span[text()='Next']").click()
        current_month = driver.find_element(By.CLASS_NAME, "ui-datepicker-month").text
        current_year = driver.find_element(By.CLASS_NAME, "ui-datepicker-year").text
        print(current_month, current_year)
    dd = driver.find_element(By.XPATH, "//td[@data-handler='selectDay'][@data-event='click']").click()

    paragraph3 = driver.find_element(By.XPATH, "//td[@data-handler='selectDay'][@data-event='click']").get_attribute(
        "textContent")
    print(paragraph3)
    d = "{} {} {}".format(current_year, current_month,paragraph3)
    print(d)
    # Find an element by its ID
    element = driver.find_element(By.ID, 'appointments_consulate_appointment_date')

    # Get text content of element
    text_content = element.text
    print(text_content)
    time.sleep(5)
    # Close the driver
    driver.quit()

In this code bot only show April 2025 dates and if April don’t have any available date then bot picks may date.

I am getting confused in looping system, my bot just checking dates in given year of month not checking all months till the end of the range.