Category: javascript

I’m creating this algorithm which is supposed to include numbers 1,2,3,4,5 in an equation which looks like this:

@ + ## + ∗ ∗ ∗ + &&&& + $$$$$

The symbols meaning that it could be any one of the 5 but each symbol specifying a certain one of them. Then it is supposed to compare, whether the result of the equation is dividable by 11 and if it is then end the loop.

It isn’t working, please help.

let cypherNum = [1, 2, 3, 4, 5]

function randomNum(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min)
}

for (let n = 0;
  (n / 11 >= 0.0) && (Math.floor(n / 11) === n / 11) && n / 11 != Infinity; n++) {
  function sequence() {
    let selector1 = Math.round(randomNum(1, 5))
    let number1 = cypherNum[selector1]
    cypherNum -= [selector1]
    let selector2 = Math.round(randomNum(1, 4))
    let number2 = cypherNum[selector2]
    cypherNum -= [selector2]
    let selector3 = Math.round(randomNum(1, 3))
    let number3 = cypherNum[Math.round(selector3)]
    cypherNum -= [selector3]
    let selector4 = Math.round(randomNum(1, 2))
    let number4 = cypherNum[Math.round(randomNum(1, 2))]
    cypherNum -= [selector4]
    let number5 = cypherNum[1]
    cypherNum -= [1]
    let num = (number1) + (number2 * 11) + (number3 * 111) + (number4 * 1111) + (number5 * 11111)
  }
  console.log(sequence())
}

When I render a list of items with bootstrap’s CSS I’m seeing the list extend beyond the viewport instead of automatically fitting in the viewport and being scrollable. Here is the associated section:

<ul class="list-group">
    {% for node in data.nodes %}
        <li class="list-group-item" style="overflow-y:scroll">{{node.name}}</li>
    {% endfor %}
</ul>

The list should break at the end of the viewport and dynamically become scrollable within the same dimensions as the element to the right of it.

This looks like the following:

I’m using Laravel 10 in a Filament project with vite. I have pretty much the stock vite.config.js file:

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ...refreshPaths,
                'app/Filament/**',
                'app/Forms/Components/**',
                'app/Livewire/**',
                'app/Infolists/Components/**',
                'app/Providers/Filament/**',
                'app/Tables/Columns/**',
            ],
        }),
    ],
})

I have this in my blade layout file in the head:

@vite(['resources/css/app.css', 'resources/js/app.js'])

In my resources/js/app.js file I have this:

console.log('test');
import JSConfetti from 'js-confetti';

const jsConfetti = new JSConfetti();
window.jsConfetti = jsConfetti;

console.log('jsConfetti is set', window.jsConfetti);

I’ve run npm run build, but I don’t even get the simple “test” message from the console.log statement in app.js. It almost seems like vite isn’t loading the app.js file at all. I should at the very least see the “test” message from app.js, right?

I upgraded the laravel-vite plugin to 1.0.1 and upgraded vite to 5.0.0, but that hasn’t resolved it either. I’ve cleared the cache and hard refreshed. I’ve verified that jsConfetti is in my node_modules folder.

what API to display the time in UTC format only?

I tried this Api https://developers.google.com/maps/documentation/timezone/overview in php, but with this Api I must first enter the time zone, what I want is to obtain the date and time on any surface of the earth in UTC via an Api, It’s the API that I need

I am using ApexCharts to create line graphs in my application. However, when a series has a zero value, the tooltip still shows without displaying any value. Is there a way to configure ApexCharts to show zero values in tooltips?. Any guidance or code examples would be greatly appreciated.

Here’s a simplified version of my code:

class LineChartTiny extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      series: props?.series,
      labels: props?.labels ? props?.labels : [],
      options: {
        chart: {
          id: "line-chart",
          width: 50,
          height: 100,
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false
          }
        },
        colors: ["#A3E0FF"],
        grid: {
          xaxis: {
            lines: {
              show: false
            }
          },
          yaxis: {
            lines: {
              show: false
            }
          }
        },
        legend: {
          show: false
        },
        xaxis: {
          show: true,
          categories: props?.labels ? props?.labels : [],
          labels: {
            show: false
          },
          tooltip: {
            enabled: false
          }
        },
        yaxis: {
          show: false,
          logarithmic: props.logarithmic,
          type: props.logarithmic ? "logarithmic" : "numeric",
          labels: {
            formatter: function (value) {
              return formatNumber(value);
            }
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: "straight"
        }
      }
    };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.series !== this.props.series) {
      const { series } = this.props;
      this.setState({
        series: series?.length > 0 ? series : this?.state?.series
      });
    }
    if (prevProps.labels !== this.props.labels) {
      const { labels } = this.props;
      this.setState(
        {
          labels: labels ? labels : this.state.labels
        },
        () => {
          this.updateChartOptions();
        }
      );
    }
  }

  updateChartOptions = () => {
    const { labels } = this.state;
    const newOptions = {
      ...this.state.options,
      xaxis: {
        ...this.state.options.xaxis,
        categories: labels
      }
    };
    this.setState({
      options: newOptions
    });
  };

  render() {
    return (
      <Chart
        options={this.state.options}
        series={this.state.series}
        type="area"
        width="100%"
        height="100%"
      />
    );
  }
}

I have a form that validates and is working as expected but the form still submits even though it is prompting a validation error. Tried various different things but can’t seem to make it stop submitting the form with incorrect validation.

function Validate() {
  const name = document.forms.ValidateForm.name.value;
  console.log(name);

  if (name === "" ||
    name.includes('0') || name.includes('1') ||
    name.includes('2') || name.includes('3') ||
    name.includes('4') || name.includes('5') ||
    name.includes('6') || name.includes('7') ||
    name.includes('8') || name.includes('9')) {
    window.alert("Office Name cannot be Empty");
    name.focus();
    return false;
  }

  if (name.length < 3) {
    alert("Office Name must be more than 3 characters");
    name.focus();
    return false;
  }

  return true;
}

<form action="#" method="post" enctype="multipart/form-data" name="ValidateForm" onsubmit="return Validate();" id="ValidateForm">
  <input type="text" name="name" id="name">
  <input type="submit" value="Add Office">
</form>

I am new in javascript, so building this Gantt Highcharts is a complete new world for me.
I could create successfully the Gantt Chart, but now we need to add a click event on the y axis Labels (the category names Cat1, Cat2, Cat3 bellow).

We tried adding under the Y-axis/labels/events a funcion for ‘click’ but nothing happens.

Do you have a clue on what might it be, please?

Here is my replit : text.

In my code, I set a function that return a promise(). In this promise(), there is a API request process. In global, I use http.createServer() to initiate a server, then use promise chain to load the API data for rendering.

In these code, I have set three console.log() as checkpoints to check the code execution correctly. Althought the redner is sucessfully. However, I found the information showed in console indecate that it execue two times request and get different API data.

const http = require("http");
const https = require("https");
let imgPath = "";

const requestData = () => {
  return new Promise((resolve, reject) => {
    https
      .get("https://webdev.alphacamp.io/api/dogs/random", (body) => {
        let data = "";

        // program is getting data
        body.on("data", (chunk) => {
          data += chunk;
        });

        // program is done with data
        body.on("end", () => {
          tempImgPath = JSON.parse(data).message;
          console.log(".Promise:", tempImgPath);//**************************checkpoint1
          resolve(tempImgPath);
        });
      })[[enter image description here](https://i.stack.imgur.com/NZIuo.png)](https://i.stack.imgur.com/CS9E6.png)
      .on("error", (e) => {
        console.warn(e);
        reject(error);
      });
  });
};

http
  .createServer((req, res) => {
    console.log(req.url); //**********************************checkpoint2
    
    requestData()
      .then((tempImgPath) => {
        console.log(".then:", tempImgPath);//**********************************checkpoint3
        imgPath = tempImgPath;;
        res.end(`<h1>DOG PAGE</h1><img src='${imgPath}' >`);
      })
      .catch((error) => {
        res.end("Internal Server Error");
      });
  })
  .listen(3000);

console.log("Server start: http://127.0.0.1:3000");

Some information indicate that /favicon.ico issue have the same problem. But the console.log(req.url) result in the consol didn’t show nay /favicon.ico reques URL.

I am trying to apply some regex to some text that is gathered with the Dataview plugin for the note program Obsidian.

I am using the dataview plugin to take some text from multiple notes and copying it as plain text, then I am taking that text and formatting it with regex. The issue I have is that the final output does not get formatted right and I do not know why.

Output example

The output is supposed to only have “- example” without the duplicate text and the brackets

const inputSentences = [
"- [[Note example 3.md|Note example 3]]",
"- [[Note example 2.md|Note example 2]]",
"- [[Note example 1.md|Note example 1]]"
]


function transformSentence(input) {
  if (typeof input !== 'string') {
    // Handle non-string input, e.g., return input as is or throw an error
    return input;
  }
  const regex = /-s*[[([^|]+)|[^]]+]]/g;
  return input.replace(regex, '- $1');
}

inputSentences.forEach(inputSentence => {
  const outputSentence = transformSentence(inputSentence);
  console.log(outputSentence);
})

The question

How do I get base64 data from an online image within postman?

Context

I’m doing a migration within postman. One part of this is migrating embedded images within messages. The embedded images are inserted in the html like this:

<img src="https://attachment.freshdesk.com/inline/attachment?token=LongTokenHere" data-id="9198554508" alt="image.png" width="562" height="181">

Goal

Replace the image link with base64 data like this:

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" data-id="9198554508" alt="image.png" width="562" height="181"/>

Progress

I can download the image’s data in which I assume is byte data, convert it to ascii (which I assume is the base64 format), and upload it. But when uploading it like that, it ends up as a broken/unviewable image.

pm.sendRequest(link, (err, res) => {
    err ? reject(err)
        : resolve({link, raw: res.text(), imageData: btoa(res.text())});
});

This does get me what seems to be base64 data: (a small snippet from the full file) /VBORw0KGgoAAAANSUhEUgAAAmcAAAD9CAYAAAD9bSdzAAAgAElEQVR4Af39f2xc/f39/f39/f1xV/1X/f26N0oUdSkrEP12/f0iAWkr/f39Bf0obTf9/Qv9/f1y/SH9OG40dXH9/TAQ/

Other things I tried

Within postman, I can get the link, and then the body preview shows the image as it’s supposed to look. I can then save response to file, which shows a working png. When comparing both sources in notepad++, they do look alike for a bit:

I also tried to see what happened when trying to convert the base64 data to a file using https://base64.guru/converter/decode/file, there I got this message:
Your browser cannot display the file as “application/octet-stream”.. I’m unsure what to do with that information and what it tells me about my data.

In FabricJS, by default, an element’s bounding box, will expand and change shape to fit a rotated element’s full size, while taking into consideration the angle as well, like below:

From:

To:

Is there a way to make the bounding box always fit the contained object and not be dynamic depending on the angle?

Example: The bounding box remains as the red outline:

I’ve looked everywhere and this seems to be a very common issue among fabricJS users, but have not found a solution anywhere. So far it seems to be a default, unchangeable behavior of the library.
If it changes anything, the project is built in Angular & typescript.

We have a One-Page React application that is loaded from a link in another application. This other application provides URL parameters that are used to set cookies and fetch other data objects.

The problem is – the agents using this app tend to open multiple tabs for multiple separate data objects.

When this is done:

1. First tab opens with data from first client
2. Second tab opens with data from second client
3. First tab now has data from second client

I believe this is due to cookies that are getting overwritten. We use JWT for auth, and I am wondering if there is a way to support this? The apps all operate from the root path ‘/’.

What would be the best approach to correct this?

CASE
    WHEN updated_bank_account.old_mask_account_number REGEXP '^[0-9]+$'
    THEN REPEAT('X', LENGTH(updated_bank_account.old_mask_account_number))
    ELSE
        CONCAT(
            SUBSTRING(updated_bank_account.old_mask_account_number, 1, 
                IFNULL(NULLIF(LOCATE('0', updated_bank_account.old_mask_account_number), 0), LENGTH(updated_bank_account.old_mask_account_number) + 1) - 1),
            REPEAT('X', LENGTH(updated_bank_account.old_mask_account_number) - 
                IFNULL(NULLIF(LOCATE('0', updated_bank_account.old_mask_account_number), 0), LENGTH(updated_bank_account.old_mask_account_number)) + 1)
        )
END AS old_mask_account_number,

I have modification this logic but expectional not the answer.
enter image description here

Please give me a proper answer

API URL:
https://sandbox-inform-api-01.moengage.com/v1/send

Error Response:
{
“message”: “Authorization Failed”,
“err_code”: “UNAUTHORIZED”
}

DATA API ID, DATA API KEY, APP ID and API SECRET – values for these keys i am taking from Moengage Admin portal

Header:
Content-Type: application/json
MOE-APPKEY: {{APP ID}}

Authorization:
username: {{APP ID}}
password: {{DATA API KEY}}

I have tried to call the Moengage info API from postman with the dummy data as payload but the payload format is same as suggested on the moengage official documentation.

But every time i am getting the below response.
{
“message”: “Authorization Failed”,
“err_code”: “UNAUTHORIZED”
}

solution please

await User.updateMany(
{
subscription:true,
todaywork:true,
},
{
$inc:{balance:’$perdayProfit’},
})
i want to update all my users. inc their balance by their own perDayprofit
can anyone please tell me where i am lacking in this code?