Still unable to debug HTML / JavaScript in VSCode using Attach option

I am running chrome with --remote-debugging-port=9222 parameter.

I am running my app using VSCode Live Server extension on port 5500 just like this:
http://localhost:5500/

In VSCode I start debugging by selecting Attach to Chrome.

Here is my launch.json file:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:5500/",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

However, the debug doesn’t work, instead it throws an error:

Cannot connect to the target at localhost:9222: Could not connect to
debug target at http://localhost:9222: Could not find any debuggable
target

enter image description here

What is the problem?

Thank you.

How can I make my test not call the actual endpoints?

I have a test file whose objective is to test the main function, inside the main function there are several endpoints that I mock using jest framework. And the mock actually works and instead of giving me the result of the real endpoint it uses the mock data that I’ve built, the bad thing is while the test is running it keeps putting these messages in the terminal for every endpoint:

Error >>fetching projects: AxiosError {
  port: 8055,
  address: '10.20.10.68',
  syscall: 'connect',
  code: 'ETIMEDOUT',
  errno: -4039,
  message: 'connect ETIMEDOUT 10.20.10.68:8055',
  name: 'Error',
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [ 'xhr', 'http', 'fetch' ],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function [FormData]], Blob: [class Blob] },
    validateStatus: [Function: validateStatus],
    headers: Object [AxiosHeaders] {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': undefined,
      'User-Agent': 'axios/1.9.0',
      'Accept-Encoding': 'gzip, compress, deflate, br'
    },
    baseURL: 'http://10.20.10.68:8055/xpand-api',
    auth: { username: 'revenueassurance', password: '8#XL$K0>10XOs£kS' },
    method: 'get',
    url: '/services/bi/revenue-assurance/project/get',
    allowAbsoluteUrls: true,
    data: undefined
  },
  request: <ref *1> Writable {
    _events: {
      close: undefined,
      error: [Function: handleRequestError],
      prefinish: undefined,
      finish: undefined,
      drain: undefined,
      response: [Function: handleResponse],
      socket: [Function: handleRequestSocket]
    },
    _writableState: WritableState {
      highWaterMark: 16384,
      length: 0,
      corked: 0,
      onwrite: [Function: bound onwrite],
      writelen: 0,
      bufferedIndex: 0,
      pendingcb: 0,
      [Symbol(kState)]: 17580812,
      [Symbol(kBufferedValue)]: null
    },
    _maxListeners: undefined,
    _options: {
      maxRedirects: 21,
      maxBodyLength: Infinity,
      protocol: 'http:',
      path: '/xpand-api/services/bi/revenue-assurance/project/get',
      method: 'GET',
      headers: [Object: null prototype],
      agents: [Object],
      auth: 'revenueassurance:8#XL$K0>10XOs£kS',
      family: undefined,
      beforeRedirect: [Function: dispatchBeforeRedirect],
      beforeRedirects: [Object],
      hostname: '10.20.10.68',
      port: '8055',
      agent: undefined,
      nativeProtocols: [Object],
      pathname: '/xpand-api/services/bi/revenue-assurance/project/get'
    },
    _ended: true,
    _ending: true,
    _redirectCount: 0,
    _redirects: [],
    _requestBodyLength: 0,
    _requestBodyBuffers: [],
    _eventsCount: 3,
    _onNativeResponse: [Function (anonymous)],
    _currentRequest: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: false,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: true,
      maxRequestsOnConnectionReached: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: false,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      strictContentLength: false,
      _contentLength: 0,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      _closed: false,
      _header: 'GET /xpand-api/services/bi/revenue-assurance/project/get HTTP/1.1rn' +
        'Accept: application/json, text/plain, */*rn' +
        'User-Agent: axios/1.9.0rn' +
        'Accept-Encoding: gzip, compress, deflate, brrn' +
        'Host: 10.20.10.68:8055rn' +
        'Authorization: Basic cmV2ZW51ZWFzc3VyYW5jZTo4I1hMJEswPjEwWE9zwqNrUw==rn' +
        'Connection: keep-alivern' +
        'rn',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: nop],
      agent: [Agent],
      socketPath: undefined,
      method: 'GET',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      joinDuplicateHeaders: undefined,
      path: '/xpand-api/services/bi/revenue-assurance/project/get',
      _ended: false,
      res: null,
      aborted: false,
      timeoutCb: [Function: emitRequestTimeout],
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: '10.20.10.68',
      protocol: 'http:',
      _redirectable: [Circular *1],
      [Symbol(shapeMode)]: false,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesWritten)]: 0,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kChunkedBuffer)]: [],
      [Symbol(kChunkedLength)]: 0,
      [Symbol(kSocket)]: [Socket],
      [Symbol(kOutHeaders)]: [Object: null prototype],
      [Symbol(errored)]: null,
      [Symbol(kHighWaterMark)]: 16384,
      [Symbol(kRejectNonStandardBodyWrites)]: false,
      [Symbol(kUniqueHeaders)]: null
    },
    _currentUrl: 'http://revenueassurance:8%23XL%24K0%3E10XOs%C2%[email protected]:8055/xpand-api/services/bi/revenue-assurance/project/get',
    [Symbol(shapeMode)]: true,
    [Symbol(kCapture)]: false
  },
  cause: Error: connect ETIMEDOUT 10.20.10.68:8055
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1636:16) {
    errno: -4039,
    code: 'ETIMEDOUT',
    syscall: 'connect',
    address: '10.20.10.68',
    port: 8055
  }
}

I assume this happens because although the endpoint is being properly mocked the code still tries to access the real endpoint.

This is my test code:

import { axiosInstance as axioInstanceProject } from '../src/data/projects';
import { axiosInstance as axioInstanceRoleValue } from '../src/data/roleValue';
import { axiosInstance as axioInstanceTask } from '../src/data/tasks';
import { axiosInstance as axioInstanceTeam } from '../src/data/team';
import { axiosInstance as axioInstancePlannedExecution } from '../src/data/planned';
import { axiosInstance as axioInstanceMonthExecution } from '../src/data/execution';
import { axiosInstance as axioInstanceMultiplier } from '../src/data/multiplier';
import { axiosInstance as axioInstanceTimesheet } from '../src/services/timesheetService';
import { main, axiosInstancePost as axioInstancePostOutput } from '../src/services/computeOutput';
import { mockPostEndpoint } from './postDataMock';
import { mockGetEndpoints } from './getDataMock'
import { loadMockData, createMockAdapters } from './utils';
import { beforeEach, describe, expect, it, jest } from '@jest/globals';
import MockDate from 'mockdate'

const axiosInstance = {
  Project: axioInstanceProject,
  RoleValue: axioInstanceRoleValue,
  Team: axioInstanceTeam,
  Task: axioInstanceTask,
  PlannedExecution: axioInstancePlannedExecution,
  MonthExecution: axioInstanceMonthExecution,
  Multiplier: axioInstanceMultiplier,
  Timesheet: axioInstanceTimesheet,
  PostOutput: axioInstancePostOutput
};

describe('basicTk', () => {
  let mockAdapters;

  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
  });

  it('basicTk success', async () => {
    const mockData = loadMockData('basicTk');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

  it('basicTk fail', async () => {
    const mockData = loadMockData('basicTk', true);
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).rejects.toThrowError();
  });
});

describe('basicTm', () => {
  let mockAdapters;

  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(  mock => mock.restore());
  });

  it('basicTm success', async () => {
    const mockData = loadMockData('basicTm');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

  it('basicTm fail', async () => {
    const mockData = loadMockData('basicTm', true);
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).rejects.toThrowError();
  });
});


describe('snapshot', () => {
  let mockAdapters;

  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
    jest.restoreAllMocks();
    MockDate.reset();
  });;

  it('snapshot success', async () => {
    const mockDate = new Date('2025-05-19T08:00:00Z');
    MockDate.set(mockDate)
    const mockData = loadMockData('snapshot');
    mockGetEndpoints(mockAdapters, mockData)
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

  it('snapshot fail', async () => {
    const mockDate = new Date('2025-03-04T08:00:00Z');
    MockDate.set(mockDate)

    const mockData = loadMockData('snapshot');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).rejects.toThrowError();
  });
})

describe('tm with multiplier', () => {
  let mockAdapters;

  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
  });

  it('tm with multiplier success', async () => {
    const mockData = loadMockData('tmWithMultiplier');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

  it('tm with multiplier fail', async () => {
    const mockData = loadMockData('tmWithMultiplier');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

});

describe('tm with fixed fee', () => {
  let mockAdapters;
  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
  });

  it('basic tm with one fixed fee per project add success', async () => {
    const mockDate = new Date('2025-03-03T08:00:00Z');
    MockDate.set(mockDate)
    const mockData = loadMockData('tmWithOneFixedFeeAdd');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

  it('basic tm with more than one fixed fee per project add success', async () => {
    const mockDate = new Date('2025-03-03T08:00:00Z');
    MockDate.set(mockDate)
    const mockData = loadMockData('tmWithMoreThanOneFixedFeeAdd');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

  it('basic tm with one fixed fee per project replace success', async () => {
    const mockDate = new Date('2025-03-03T08:00:00Z');
    MockDate.set(mockDate)
    const mockData = loadMockData('tmWithOneFixedFeeReplace');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

  it('basic tm with more than one fixed fee per project replace success', async () => {
    const mockDate = new Date('2025-03-03T08:00:00Z');
    MockDate.set(mockDate)
    const mockData = loadMockData('tmWithMoreThanOneFixedFeeReplace');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });
});

describe('tm with expired date', () => {
  let mockAdapters;
  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
  });

  it('tm with expired date success', async () => {
    const mockDate = new Date('2025-12-12T08:00:00Z');
    MockDate.set(mockDate)
    const mockData = loadMockData('tmWithExpiredDate');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  })
})

describe('tk + tm for work types', () => {
  let mockAdapters;
  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
  });

  it('tk + tm for work types success', async () => {
    const mockDate = new Date('2025-12-12T08:00:00Z');
    MockDate.set(mockDate)
    const mockData = loadMockData('tk+tmWorkType');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  })
})

/*describe('tm with po', () => {
  let mockAdapters;
  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
  });

  it('tmWithPoPo success', async () => {
    const mockData = loadMockData('tmWithPo');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

});*/

describe('preset plan', () => {
  let mockAdapters;
  beforeEach(() => {
    mockAdapters = createMockAdapters(axiosInstance);
  });

  afterEach(() => {
    Object.values(mockAdapters).forEach(mock => mock.restore());
  });

  it('preset plan success', async () => {
    const mockData = loadMockData('presetPlan');
    mockGetEndpoints(mockAdapters, mockData);
    mockPostEndpoint(mockAdapters.PostOutput, mockData.expectedOutput);
    await expect(main()).resolves.toBeUndefined();
  });

})

this is postdatamock:

import fs from 'fs';
import deepDiff from 'deep-diff'
import { config } from 'dotenv';

function snakeToCamel(str) {

  return str.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
}
function convertAndStrip(obj) {
  return recursiveStrip(obj);
}

function recursiveStrip(item) {
  if (Array.isArray(item)) {
    return item.map((element) => recursiveStrip(element));
  }

  if (item !== null && typeof item === 'object') {
    return Object.entries(item).reduce((acc, [key, value]) => {
      if (
        key === "output_id" || key === "outputId" ||
        key === "timestamp_local" || key === "timestamp_utc" ||
        key === "timeStampLocal" || key === "timeStampUtc"
      ) {
        return acc;
      }

      const camelKey = snakeToCamel(key);
      acc[camelKey] = recursiveStrip(value);
      return acc;
    }, {});
  }

  if (typeof item === 'string') {
    return item.trim();
  }

  return item;
}

function canonicalize(obj) {
  if (Array.isArray(obj)) {
    return obj.map(canonicalize);
  }
  if (obj !== null && typeof obj === "object") {
    const sorted = {};
    Object.keys(obj)
      .sort()
      .forEach((key) => {
        sorted[key] = canonicalize(obj[key]);
      });
    return sorted;
  }
  return obj;

}

function sortData(data) {

  data.sort((a, b) => {
    return a.projectCode.localeCompare(b.projectCode) ||
      a.yearMonth.localeCompare(b.yearMonth) ||
      a.roleName.localeCompare(b.roleName) ||
      a.billable.localeCompare(b.billable) ||
      a.workType.localeCompare(b.workType) ||
      a.po.localeCompare(b.po) ||
      a.type.localeCompare(b.type);
  });

  const cleaned = data.map(item => {
    const {
      timeStampLocal,
      timeStampUtc,
      entryStartDate,
      entryEndDate,
      isActive,
      ...rest
    } = item;
    return rest;
  });


  return cleaned;
}

function createKey(record) {
  return [
    record.billable,
    record.workType,
    record.yearMonth,
    record.projectCode,
    record.po,
    record.engagementManagement,
    record.type,
    record.roleName
  ].join("|");
}

function checkDuplicates(data) {
  const seen = new Map();
  const duplicates = [];
  const unique_records = [];

  for (const record of data) {
    const key = createKey(record);
    if (seen.has(key)) {
      duplicates.push(record);
    } else {
      seen.set(key, true);
      unique_records.push(record);
    }
  }
  console.log("Duplicates found: " + duplicates.length);
  if (duplicates.length > 0) {
    fs.writeFileSync('duplicates', JSON.stringify(duplicates, null, 2));
    fs.writeFileSync('uniqueRecords', JSON.stringify(unique_records, null, 2));
  }
}

export function mockPostEndpoint(mockAdapterPost, expectedOutput) {
  mockAdapterPost.onPost().reply(config => {
    console.log("Post Mock start..")
    const actualOutput = typeof config.data === 'string' ? JSON.parse(config.data) : config.data;
    console.log("Convert And Strip start");
    const csExpectedOutput = convertAndStrip(expectedOutput);
    const csActualData = convertAndStrip(actualOutput);
    console.log("Canonicalize start");
    const cnExpectedOutput = canonicalize(csExpectedOutput);
    const cnActualData = canonicalize(csActualData);
    console.log("Sort start")
    const expectedString_ = sortData(cnExpectedOutput);
    const actualString_ = sortData(cnActualData);
    console.log("Check Duplicates start");
    checkDuplicates(actualString_);
    console.log("PRESTES A ESCREVER")
    fs.writeFileSync('actualFileeeee', JSON.stringify(actualString_, null, 2));
    const diff = deepDiff.diff(actualString_, expectedString_);
    if (diff === undefined) {
      return [200, { code: 200, payload: { message: 'Success' } }];
    } else {
      return [400, { code: 400, payload: { message: 'Output mismatch', diff } }];
    }
  });
}


export {
  snakeToCamel,
  convertAndStrip,
  canonicalize,
  sortData
};

this is getdatamock.js:

export function mockGetEndpoints(mockAdapters, mockData) {
  mockAdapters.Project.onGet().reply(200, mockData.project);
  mockAdapters.RoleValue.onGet().reply(200, mockData.roleValue);
  mockAdapters.Team.onGet().reply(200, mockData.team);
  mockAdapters.Task.onGet().reply(200, mockData.task);
  mockAdapters.PlannedExecution.onGet().reply(200, mockData.plannedExecution);
  mockAdapters.MonthExecution.onGet().reply(200, mockData.monthExecution);
  mockAdapters.Multiplier.onGet().reply(200, mockData.multiplier);
  mockAdapters.Timesheet.onGet().reply(200, mockData.timesheet);
  mockAdapters.PostOutput.onGet().reply(200, mockData.postOutput);
}

How can I fix this?

how do i overlap 2 elements

q1. the code should be below as i have a form with a submit button and the some dots and a curve. my goal is to make the curve go from one dot to another by moving it down.
q2. i also would like to know how to only show the dot and curve if the form has been submitted.below is my html code.
q3.how would i make some dots invisble based off the form results as the main idea is you fill out the form then the dots and a couple of curves would apear below based off your inputs or better yet have it change as your filling the form.as the k values are were i want to store the inputs if posible.

const value = document. getElementById('level')
let k1 = "" // level
let k2 = "" // school
let k3 = "" // Damege type
let k4 = "" // area type
let k5 = "" // range
let k6 = "" // duration
label {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: left;
    width: 350px;
    line-height: 26px;
    margin-bottom: 10px;
}

input {
    height: 20px;
    flex: 0 0 200px;
    margin-left: 10px;
}
button {
    width: 350px;
    line-height: 26px;
    margin-bottom: 10px;
}
.dot {
    height: 20px;
    width: 20px;
    background-color: #bbb;
    border-radius: 100%;
    display: inline-block;
    margin: 10px;
}
.box {
    width: 100px; 
    height: 100px;  
    border: solid 5px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 50%/100px 100px 0 0;
    padding-top: -200px;
}
<h1>Welcome to my webpage</h1>
<p>Example is fireball</p>
<form action="/url" method="GET">
    <label>
        level:
        <input type="value" name = "level"       placeholder = "3"         required>
    </label>
    <p></p>
    <label>
        school:
        <input type="text"  name = "school"      placeholder = "Evocation" required>
    </label>
    <p></p>
    <label>
        damege type:
        <input type="text"  name = "damege type" placeholder = "Fire"      required>
    </label>
    <p></p>
    <label>
        area type:
        <input type="text"  name = "area type"   placeholder = "Sphere"    required>
    </label>
    <p></p>
    <label>
        range(in ft):
        <input type="value" name = "range"       placeholder = "150"       required>
    </label>
    <p></p>
    <label>
        duration(seconds):
        <input type="value" name = "duration"    placeholder = "0"         required>
    </label>
    <p></p>

    <button type="submit">Submit</button>
</form>
<a>
<div class="box"></div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</a>

Pact Provider contract Verifier how do I only verify the first element of array and skip the rest o

I am using Pact contract testing for my website to check a mockDataObject if it up to date with the real response or not, mockDataObject will be use later for integration testing.

The mockDataObject contain data like:

{
  "showPremiumProduct": true,
  "products": [
    {
      "id": 1,
      "name": "Product A",
      "description": "Description of Product A",
      "price": 29.99,
      "images": [
        {
          "url": "https://example.com/image1.jpg",
          "alt": "Image 1"
        },
        {
          "url": "https://example.com/image2.jpg",
          "alt": "Image 2"
        }
      ],
      "isPremium": true,
      "premiumDiscount": 3.0,
      "userUseDiscount": 355,
      "category": "Electronics"
    },
    {
      "id": 2,
      "name": "Product B",
      "description": "Description of Product B",
      "price": 19.99,
      "category": "Books",
      "images": [
        {
          "url": "https://example.com/image1.jpg",
          "alt": "Image 1"
        }
      ]
    },
    {
      "id": 3,
      "name": "Product C",
      "description": "Description of Product C",
      "price": 49.99,
      "category": "Clothing",
      "images": [
        {
          "url": "https://example.com/image1.jpg",
          "alt": "Image 1"
        }
      ]
    }
  ]
}

Object description: products array have a lot of elements, and element object don’t have consistent fields.

This is my Provider option and verify:

const opts = {
  pactUrls: ['pacts/consumer-provider.json'],
  providerBaseUrl: 'https://test.test-server.com/',
}

it('verify', () => {
  new Verifier(opts).verifyProvider();
});

Problem: Only the first element in products array important for integration test.
When I try to compare response directly. value with decimal like premiumDiscount causing error:

Expected 3.0 (Decimal) to be equal to 3 (Integer)

It because JSON format and Pact convert 3.0 to 3

So I want to use like or eachLike to create a matcher for value like premiumDiscount and userUsed.

But Pact create a matcher of the first element and apply it to the rest of array.
Now I got error:
$products[1] Actual map is missing the folllowing keys: premiumDiscount, userUsed.

Please help me I find all the documentation of PACT about skipping test, create matcher,… but none of these work.

Note: NO I cannot change anything in backend side.

I use @pact-foundation/pact: 13.2.0

Mapillary app not working WITHOUT React Strict Mode (Mapillary DOM not initialising)

I’ve been trying to fix this issue for so long I’m starting to lose hope (AI doesn’t help)

https://github.com/kryturek/localeap
(src/components/GameScreen is the culprit)

Everything works great in development (due to functions being fired up multiple times because of strict mode), when in production it all breaks. Without strict mode the Mapillary DOM doesn’t have a chance to initialise, therefore the Viewer object doesn’t have anywhere to go.

Is there something I just fundamentally don’t understand about Mapillary? How is Mapillary DOM initialised? I feel like useEffect is creating race conditions.

Maybe someone here knows exactly what happens here.

I tried putting [FLOW] commments like these:

import React, { useEffect, useState, useRef, useLayoutEffect } from 'react';
import axios from 'axios';
import { Viewer } from 'mapillary-js';
import '../assets/loader.css'

console.log("[FLOW] 1. Module loading");
const MAPILLARY_TOKEN = import.meta.env.VITE_MAPILLARY_TOKEN;
console.log("[FLOW] 2. MAPILLARY_TOKEN:", !!MAPILLARY_TOKEN);

const GameScreen = ({setCurrentCoordinates}) => {
  console.log("[FLOW] 3. Component function executing");
  const viewerRef = useRef(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

to see how the application FLOWS, and at which point does it break. However it all looks very random both in development (what I expected due to strict mode) and production (which I didn’t expect but that proves race conditions)

How to inject JavaScript into Squish (Python) test?

I am attempting to inject JavaScript to call Dojo functions that interact with specific objects.

I have confirmed that my Dojo functions operate correctly within the DevTools console. However, I am having a hard time on how to execute these functions from within Python Squish test automation scripts.

I’ve tried the web.eval() function that should be part of squish library, but it seems it doesn’t work

Table header position and dropdown menu rendering issues when scrolling with context menu

I’m experiencing a rendering issue with a scrollable table that has context menus on each row. When I scroll down the table and then right-click to open a context menu on one of the rows, both the table header and the dropdown menu start behaving erratically:

  • Table header: Changes position randomly/jumps around
  • Dropdown menu: Appears in random positions instead of where it should
    be anchored
  • Scrolling: Becomes unstable or “crashes” in some way

Expected Behavior

  • Table header should remain on the top of the table while scrolling
  • Context menu dropdown should appear anchored to the clicked row

Current Environment

  • Framework/Library: Vanilla JS with jQuery
  • Table Library: Tree-grid with expandable rows
  • Browser: Edge
  • CSS Framework: Bootstrap (with custom sticky classes)

Kindly, have a look at the video: Video

.TableGrid table tr.sticky-row th,
.TableGrid table tr.sticky-row td {
  background: var(--main);
  position: relative;
  z-index: 6;
}

.TableGrid table tr.sticky-row td.sticky-cell,
.TableGrid table tr.sticky-row th.sticky-cell {
  z-index: 900;
}

.TableGrid tbody tr td.sticky-cell {
  z-index: 10;
  max-width: 35vw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.context-menu {
  position: absolute;
  width: 17rem;
  z-index: 1000;
  background-color: var(--main);
  box-shadow: var(--box-shadow);
}
<table cellspacing="0" lvlbystart="1" class="TableGrid table-tree t-tree t-grid" id="schichtprotokoll" style="width:100%">
  <thead>
    <tr class="sticky-row">
      <th class="sp_0 sticky-cell" id="sp_0">
        <button class="virgin btn btn-outline-primary btn-xs empty" value="" type="button" id="idT"
                        title="Treeview öffnen/schließen" ondblclick="{return retFalse();;}"
                        onclick="{treeViewOpenClosV3(&quot;schichtprotokoll&quot;);;}">
                    <i class="fa fa-fw fa-angle-double-down fa-light"></i>
                </button>
      </th>
      <th class="sp_-1 sticky-cell">&nbsp;</th>
      <th class="sp_1 text-center" id="sp_1"></th>
      <!-- ... more header columns ... -->
    </tr>
    <tr class="sticky-row">
      <th class="sp_0 sticky-cell" id="sp_0">Person / Datum</th>
      <th class="sp_-1 sticky-cell">&nbsp;</th>
      <th class="sp_1 text-center" id="sp_1">Arbeitsplatz</th>
      <!-- ... more header columns ... -->
    </tr>
  </thead>
  <tbody>
    <tr class="treegrid-0 level_1 treegrid-expanded" id="tr_0" onclick="{transaktionObj.onclickTr(&quot;1&quot;);selectRow(&quot;schichtprotokoll&quot;, this);;}" style="background-color: transparent;">
      <td class="sticky-cell sp_0">
        <i class="treegrid-expander fa fa-chevron-down me-2 mx-0"></i>20 Normalarbeitszeit
      </td>
      <!-- ... more columns ... -->
    </tr>
    <!-- ... more rows ... -->
  </tbody>
</table>

SCSS

.TableGrid {
    // Sticky row headers
    table tr.sticky-row th,
    table tr.sticky-row td {
        background: var(--main);
        position: relative;
        z-index: 6;
    }
    
    // Sticky cells get higher z-index
    table tr.sticky-row td.sticky-cell,
    table tr.sticky-row th.sticky-cell {
        z-index: 900; 
    }
    
    // Body sticky cells
    tbody tr td.sticky-cell {
        z-index: 10;
        max-width: 35vw;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

// Context menu styling
.context-menu {
    position: absolute;
    width: 17rem;
    z-index: 1000; 
    background-color: var(--main);
    box-shadow: var(--box-shadow);
    // ... more styles
}

Date formatting: frontend to backend [closed]

I am making a web app as an intern.
I am using google spreadsheets and linking data to the web app.

The issue I’m having is with the formatting of the dates. I’m trying to compare a date that is in the ‘yyyy-MM-dd’, then transformed to ‘dd-MM-yyyy’. I finally compare it to the format inside my GS which is supposed to be in the ‘dd-MM-yyyy’.

GoogleSpreadsheets does not see it as a date if it is in that format. I tried to have the date be in different formats and its either not in the right order for GS to understand or not in the right format for
New Date()

I keep on adding layers to my problem and it won’t resolve it.
This div lets the user choose a date:

<div id="datepick">
  <div>
    <input id="datep" class="form-control" type="date" value="" style="width: 45%">
  </div>
  <div>
    <button class="btn" id="btn_date" style="margin: 5px;">send</button>
  </div>
</div>

This html uses bootstrap so there’s the links needed:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">

then when the user is finished writing his form it sends the form to the backend
thanks to these parts of my JS:

<script>
  document.getElementById('btn_date').addEventListener('click', function(e) {
    const dateInput = document.getElementById('datep').value
    var date = new Date(dateInput)
    day = date.toLocaleDateString("us-US")
    google.run.script.envoiInputs(day)
  })
</script>

And then goes to my backend:

function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('frontend')
  return html
}
function envoiInputs(time) {
  const parts = time.split('/');
  const day = parseInt(parts[0], 10);
  const month = parseInt(parts[1], 10) - 1; // Months are zero-based in JavaScript
  const year = parseInt(parts[2], 10)
  const date = new Date(year, month, day);
  console.log("date " +date);
  const jour = Utilities.formatDate(date, 'Europe/Paris', 'dd-MM-yyyy');
  console.log("jour1 " +jour);
  const sR = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/14EsCZs21GS1Q4pZC7g9jvJGH2KlX3XoZcmL4VO79GZU/edit?gid=0#gid=0').getActiveSheet();
  const form = [
    jour: time || "",
    form : 'form'
  ]
  convertdate()
  return sR.appendRow(form)
}

function convertdate() {
  var sheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/11gm8_QU48PjZpTdBBcmfRGg1PydIAbUbVZ6Il-_YCpE/edit?gid=0#gid=0').getActiveSheet();
  var range = sheet.getDataRange();
  var values = range.getValues();

  for (var i = 1; i < values.length; i++) {
    if (typeof values[i][0] === 'string') {
      var time = values[i][0]
      console.log(time) 
      var parts = time.split('-');
      const day = parseInt(parts[0], 10);
      const month = parseInt(parts[1], 10) - 1; // Months are zero-based in JavaScript
      const year = parseInt(parts[2], 10);
      var date = new Date(year, month, day);
      if (!isNaN(date.getTime())) {
        console.log('date change')
        values[i][c] = date;
      }
    }
  }
  range.setValues(values);
}

Ideally if someone has a better approach I need a more streamlined to handle date formatting and comparisons between the web app and Google Sheets. The goal is to ensure consistent date formatting across all ends.

link to the public gs : https://docs.google.com/spreadsheets/d/11gm8_QU48PjZpTdBBcmfRGg1PydIAbUbVZ6Il-_YCpE/edit?gid=0#gid=0

Powder Coating Laser Engraving Mockup [closed]

I was wondering if anyone has any idea how these mockups are made? I am thinking they might have built their own library but not entirely sure?

I know ways to do mockups similar but you can see they have depth on the engraving which is kind of difficult with the tools I have tried.

Just curious if anyone has any insight? I tried fabric.js and konva.js.

enter image description here

Javascript linting isolated Javascript files (without package structure)

I am working on a few Javascript files comprising a small part of a large legacy codebase. I notice that eslint requires a package.json file and package structure, which this codebase lacks. Is there a way to enable basic local linting in my dev environment on Javascript files without modifying the codebase?

For example, right now I can reassign const-declared variables and VSCode/eslint doesn’t flag it.

Javascript collapsible changing the

No matter how I tried to modify my CSS I am not able to a row displaying 5 categories in .content despite having the display: flex property.

Why can’t I display my .content-2 in the middle? Just like the flex property is ordering it? I am able to get something decent especially in .hori-box-skill when I remove the my javascript remove the collapsible effect.

document.addEventListener("DOMContentLoaded", function() {
  var coll = document.getElementsByClassName("collapse");

  for (var i = 0; i < coll.length; i++) {
    var content = coll[i].nextElementSibling;
    content.style.display = "none"; // Ensures it's hidden on load

    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}

html {
  scroll-behavior: smooth;
}


body {
  overflow-x: hidden;
}


/* Top section here */

.top-section {
  color: white;
}

.header {
  background-image: url("../images/my_pc1.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  position: relative;


}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  /* adjust opacity here */
  z-index: 1;
}

.header * {
  position: relative;
  z-index: 2;
  /* Ensures content appears above the overlay */
}


.bottom-section {
  background-color: black;
  color: white;
  padding: 50px;

}

.right-navbar ul {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 20px;
  font-size: 20px;
  padding: 0;
  margin: 0;
}

.navbar {
  background-color: rgba(19, 22, 26, 0.5);
  /* padding: 10px; */
  position: relative;
  width: 100%;

}

.navbar li {
  padding: 10px;
}

.navbar li:hover {
  background-color: rgba(19, 22, 26, 0.7);
}

.description {
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.description .quote p {
  color: white;
  padding-top: 150px;
  padding-right: 20px;
  font-family: "Alfa Slab One";
  text-transform: uppercase;
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 2.5s steps(38)forwards;

}

.description .quote p::after {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 1px;
  background: #dadada;
  right: 0;
  top: 0;
  animation: cursorr 1s steps(1, end) 2.5s 1 forwards;
  ;
}



@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }

}

@keyframes cursorr {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}



/* Bootom section */

.about {
  padding: 30px 20px;

}

.about p {
  line-height: 1.5rem;
  text-align: justify;
  font-size: 20px;
}


.content {
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-wrap: wrap;
  gap: 20px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  line-height: 2.5rem;
}




.content h4 {
  text-transform: uppercase;
}

.collapse {
  background-color: #000;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 50px;
  text-transform: uppercase;
}

.collapse:after {
  content: '02B';
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
  font-size: 25px;

}

.active:after {
  content: "2212";
}

.active,
.collapse:hover {
  background-color: #555;
}

a,
li {
  list-style: none;
  text-decoration: none;
  color: white;
}

/* Form */

.form-group {
  margin: 2rem 0;
}

.contacts input,
.content textarea {
  border: none;
  border-bottom: 1px white solid;
  width: 90%;
  padding-bottom: 1rem;
  background-color: black;

}

.contacts input::placeholder,
.contact textarea::placeholder {
  color: white;
  opacity: 1;
}

.contacts input:focus,
.contact textarea:focus {
  outline: none;
  /* Removes blue border */
  border-bottom: 1px solid white;
  /* Keeps your white bottom border */
  color: white;
  /* Makes typed text white */

}


.form-group .btn {
  display: inline-block;
  padding: 1rem 2rem;
  border: 1px solid;
  width: 50%;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.7s ease-in-out;

}

.form-group .btn:hover {
  background-color: #0056b3;
  width: 90%;

}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;

}

/* Media queries */

@media(max-width:768px) {
  .right-navbar ul {
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    gap: 10px;
    padding: 5px;
  }

  .right-navbar ul li {
    margin: 5px 0;
    padding: 5px 0;
    font-size: 18px;

  }

  .navbar {
    flex-direction: column;
    align-items: center;
    width: 100%;


  }

  .navbar li:hover {
    background-color: #555;
    width: 100%;

  }

  .description .quote p {
    padding-top: 50px;
    font-size: 15px;
    text-align: center;
  }

  .collapse {
    font-size: 30px;
  }

  .form-group .btn {
    width: 100%;
  }

  .about p {
    line-height: 1.2rem;
    text-align: justify;
    font-size: 15px;
    word-spacing: 1px;
  }


}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

<div class="top-section">
  <header class="header">
    <nav class="navbar">
      <div class="right-navbar">
        <ul>
          <li><a href="#about-me">About</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#projects">Project</a></li>
          <li><a href ="#contact" class="btn">Contact</a></li>
        </ul>
      </div>

    </nav>
    <section class="description">
      <div class="name">
        <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </div>
      <div class="quote">
        <p>I don't develop, I engineer Solutions.</p>
      </div>

    </section>


  </header>
</div>

<!-- bottom section after the picture -->

<div class="bottom-section">
  <div class="about" id="about-me">
    <h3>About Me</h3>
    <p>I am Yannick, A highly motivated and inquisitive problem-solver. I leverage the power of Information Technology to architect, sustain, and optimise innovative solutions.
      My core competencies encompass the full lifecycle of applications development and maintenance, complemented by a robust understanding of data-centric disciplines including Data-Science, Analysis, and Engineering. </p>
  </div>
  <!-- Horizontal sections -->

  <section class="hori-box skill" id="skills">
    <button type="button" class="collapse">skills glimpse</button>
    <div class="content-1">
      <div class="box database">
        <h4>Programming</h4>
        <ul>
          <li>
            <p>Python</p>
          </li>
          <li>
            <p>Javascript</p>
          </li>
          <li>
            <p>C#</p>
          </li>
          <li>
            <p>HTML & CSS</p>
          </li>
          <li>
            <p>Linux/Unix</p>
          </li>
        </ul>
      </div>
      <div class="box programming">
        <h4>Databases DBMS</h4>
        <ul>
          <li>
            <p>T-SQL/PL-SQL</p>
          </li>
          <li>
            <p>Mongo DB</p>
          </li>
          <li>
            <p>MariaDB</p>
          </li>
          <li>
            <p>Hbase</p>
          </li>
          <li>
            <p>BigQuery</p>
          </li>
        </ul>


      </div>
      <div class="box machine-learning">
        <h4>Machine-Learning</h4>
        <ul>
          <li>
            <p>Regressions</p>
          </li>
          <li>
            <p>Random Forests</p>
          </li>
          <li>
            <p>Apriori</p>
          </li>
          <li>
            <p>K-Nearest neighbours</p>
          </li>
          <li>
            <p>Backpropafation</p>
          </li>
          <li>
            <p>RNN</p>
          </li>
          <li>
            <p>LSTM</p>
          </li>
          <li>
            <p>Statistics Inference</p>
          </li>
          <li>
            <p></p>
          </li>
        </ul>


      </div>
      <div class="box methodology">
        <h4>Methodology</h4>
        <ul>
          <li>
            <p>Agile</p>
          </li>
          <li>
            <p>DevOps</p>
          </li>
        </ul>


      </div>
      <div class="box others">
        <h4>Others</h4>
        <ul>
          <li>
            <p>Tableau/Power BI</p>
          </li>
          <li>
            <p>Databricks</p>
          </li>
          <li>
            <p>Flask/.Net</p>
          </li>
          <li>
            <p>Gitlab</p>
          </li>
          <li>
            <p>Ansible/Jenkins</p>
          </li>
          <li>
            <p>Docker</p>
          </li>
          <li>
            <p>Kubernetes</p>
          </li>
          <li>
            <p>React/EprssJS</p>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <section class="hori-box project" id="projects">
    <button type="button" class="collapse">Projects</button>
    <div class="content-2">
      <ul>
        <li><a href="">Web</a></li>
        <li><a href="">Data Science</a></li>
        <li><a href="">Data Engineering</a></li>
        <li><a href="">DevOps</a></li>
      </ul>
    </div>
  </section>
  <section class="hori-box contacts" id="contact">
    <button type="button" class="collapse">Get in touch</button>
    <div class="content-3">
      <form>
        <div class="form-group">
          <label for="first-name" class="visually-hidden">First Name</label>
          <input type="text"
                        id="first-name"
                        name="first-name"
                        placeholder="First Name">
        </div>
        <div class="form-group">
          <label for="last-name" class="visually-hidden">Last Name</label>
          <input type="text"
                        id="last-name"
                        name="last-name"
                        placeholder="Last Name">
        </div>
        <div class="form-group">
          <label for="Email" class="visually-hidden">Email Address</label>
          <input type="email"
                        id="Email"
                        name="Email"
                        placeholder="Email Address">
        </div>
        <div class="form-group">
          <label for="message" class="visually-hidden">Message</label>
          <textarea
                        id="message"
                        name="message"
                        placeholder="Message">  </textarea>
        </div>
        <div class="form-group">
          <button type="submit" class="btn">Send Message</button>
        </div>


      </form>

    </div>

  </section>

</div>
<footer>

</footer>

Is there a way to check if the “select all” or “deselect all” buttons were clicked?

I know this is an old unsupported plugin, however some legacy code is using it.
I need to check if the “select all” or “deselect all” buttons were clicked when they were added using the data-actions-box attribute as seen here: https://developer.snapappointments.com/bootstrap-select/examples/. (under “Select/deselect all options“)

Because looking at the code of this plugin, it only triggers a native change event that does not send any information whether the “select all” or “deselect all” buttons were clicked.

My only option currently is to edit the JS code of this plugin to dispatch an event when these buttons are clicked. But before I do that – maybe I am missing something?

Tool for automatically fixing duplicate variable declarations on NodeJS or Windows CLI

I’m starting to automate for the first time the process of deploying my code to a remote server, in this process, I’m joining the scripts and minifying them through Uglify-js, however, I noticed my scripts contain a duplicate variable, and I’m totally new to the word of linting and bundlers (literally just dove in head first for the first time yesterday), is there a tool that can automatically fix the syntax error for a variable being declared multiple times? (Fixing by for example, just assigning a new value at that code point instead of declaring it again with a new value)

I tried the standard.js with the --fix flag, but no changes.
And also the ESLint with the configuration file from their getting started section, but running npx eslint --fix myExampleFile.js, also does nothing and only gives me an error about the syntax error of variable declaration:

  2457:5  error  Parsing error: Identifier 'lengthyTest' has already been declared

✖ 1 problem (1 error, 0 warnings)

I saw a few youtube videos talking about ESLint on VS code, but I shied away from them as this is not my code editor and I want it as a NodeJS package or CLI tool so I can automate it. As it seems like a general and “old” “”problem”” (many quotes here), I feel like if I made my own solution I would be reinventing the wheel while the wheel is already there and I just don’t know it because I’m a “first-timer” on this regard.

So… Any information about this topic?

Input tags in my project are Making my web pages crash [closed]

Input tags in my project are Making my web pages crash,
I am using Next JS latest and tailwind CSS.

So recently, my SSD died on me but i managed to recover the project (I don’t know if it relates). I was further working go the project and now recently, I have to make it live but when I press on any of the input tags used as search bars or form fields they just cause the website to crash i don’t know what to do. they are simple input tags with no states being handled

<input
  type="text"
  placeholder="Search products..."
  className="border border-gray-300  px-4 py-2 w-[380px]"
/>

Please help me I want the fix quick

I tried adding states, remade them asked AI which just adds states