Category: javascript

I have 3 list items that I am rotating upwards after every 3 seconds. I am doing it using transformY property.

Problem is, when it reaches last item, it cycles back giving effect of starting all over again.

How can I make this effect look continuous/infinite by keep rotating upwards even after last item?

JS

  setInterval(function(){
    var currActiveItem = $('.list span').css('transform');

    if(currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
      $('.list span').css('transform', 'translateY(-67px)');
    }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -67)"){
      $('.list span').css('transform', 'translateY(-134px)');
    }else {
      $('.list span').css('transform', 'translateY(0)');
    }
  }, 3000);

CSS

  .transformed-z-0 {
    transform: translateZ(0);
  }

  .list {
    position: fixed;
    overflow: hidden;
    left: 0;
    width: 100%;
    height: 67px;
  }

  .list-item {
    display: block;
    height: 67px;
    transition: all 0.7s ease-in-out;
    transform: translateY(0);
  }

HTML

<h1 class="transformed-z-0">
  <span class="list">
    <span class="list-item">1</span>
    <span class="list-item">2</span>
    <span class="list-item">3</span>
  </span>
  <br>
  Some more text
</h1>

I want to test the React App function

import React from 'react'
import { useState, useEffect } from "react";

function App () {
    
    const [message, setMessage] = useState('')
    
    useEffect(() => {
           async function getMessage () {
             const url = process.env.REACT_APP_BACKEND_URL  +"/helloworld" 
                console.log(url)
                try { 
                      const headers = new Headers()
                            headers.append('Access-Control-Allow-Origin','*')
                      console.log(headers.get('Access-Control-Allow-Origin'))
                      const response = await fetch(url, { 
                                       mode: 'cors',
                                       headers: {'Access-Control-Allow-Origin':'*'}
                                                        }
                                                   )
                      console.log(response.status)
                      console.log(response)
                      const text = await response.text()
                      console.log(text)
                       setMessage(text)
                    } catch(error){
                          console.log('fetch error')
                          console.error('There has been a problem with', error);
                    }
         }
  getMessage()
}, [])
    return ( <div>{message}</div>)
 }

export default  App ;

with the Jets Test

import React from 'react'
import App from './App' 
import {render,screen} from '@testing-library/react'

it('should display hello world', async () => {
     render(<App />);
     const linkElement = await screen.getByText('Hello World')
     expect(linkElement).toBeInTheDocument()
 })

The fetch called is mocked with Mock Service Worker Handler

import { rest } from 'msw'

export const handlers = [
  rest.get(process.env.REACT_APP_BACKEND_URL+"/helloworld" , (reg, res, ctx ) => {
         console.log('mock get')
         console.log(process.env.REACT_APP_BACKEND_URL)
        return res(
           ctx.status(200),
           ctx.text("Hello World"),
           ctx.set({
                     'Access-Control-Allow-Origin':'*',
                     'Content-type':'text/plain'
                   })
    )
})
]

Using the servere

// src/mocks/server.js
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

// This configures a request mocking server with the given request handlers.
export const server = setupServer(...handlers)

The server is setup in the file setUpTestJs

import '@testing-library/jest-dom'
import { server } from './mocks/server.js'

beforeAll(() => {  console.log("befor all server listen")
                   server.listen()
                }
          )
afterEach(() => {   console.log("after each server reset handlers ")
                    server.resetHandlers()
                }
         )
// Clean up after the tests are finished.
afterAll(() => {  console.log("after all  server closed")
                  server.close()
               }
         )

The index.js looks like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

if (process.env.REACT_APP_USE_MSW_MOCK_API === 'yes') { // eslint-disable-line
  const { worker } = require('./mocks/worker'); // eslint-disable-line
  worker.start();
  console.log("worker started")
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

The package.json looks like this

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "dotenv": "^10.0.0",
    "eslint-plugin-jest": "^24.3.6",
    "npm": "^7.24.2",
    "react": "^17.0.0",
    "react-async": "^10.0.1",
    "react-dom": "^17.0.0",
    "react-scripts": "^5.0.0",
    "snyk": "^1.639.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "start:msw": "REACT_APP_USE_MSW_MOCK_API=yes react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "docgen": "react-docgen src -e [src/*.test.js,src/setupTests.js,src/reportWebVitals.js,src/index.js ]",
    "lint": "eslint src",
    "auth": "snyk auth f57069f4-5360-4d3a-9d49-27f86c695d48",
    "wizard": "snyk wizard",
    "snyk": "snyk test",
    "sonar": "sonar-scanner -Dsonar.host.url=https://sonarcloud.io/ -Dsonar.login=4405a6e863a3bc3425686b7b4e12cd779a8f05b3 -Dsonar.organization=steinko-github -Dsonar.projectKey=frontend-CI-CD"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/dom": "^8.11.1",
    "@testing-library/react-hooks": "^7.0.2",
    "@testing-library/user-event": "^13.5.0",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-testing-library": "^4.6.0",
    "jest-fetch-mock": "^3.0.3",
    "msw": "^0.36.4",
    "react-docgen": "^5.4.0",
    "sonarqube-scanner": "^2.8.1"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

When I run the test I het following result

console.log
    befor all server listen

      at src/setupTests.js:8:28

  console.log
    http://localhost:3000/helloworld

      at getMessage (src/App.jsx:11:25)

  console.log
    *

      at getMessage (src/App.jsx:15:31)

  console.log
    mock get

      at src/mocks/handlers.js:7:18

  console.log
    http://localhost:3000

      at src/mocks/handlers.js:8:18

  console.log
    after each server reset handlers

      at Object.<anonymous> (src/setupTests.js:14:29)

  console.log
    after all  server closed

      at src/setupTests.js:19:27

 FAIL  src/App.test.jsx
  ✕ should display hello world (117 ms)

  ● should display hello world

    TestingLibraryElementError: Unable to find an element with the text: Hello World. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <div />
      </div>
    </body>

      5 | it('should display hello world', async () => {
      6 |      render(<App />);
    > 7 |      const linkElement = await screen.getByText('Hello World')
        |                                       ^
      8 |      expect(linkElement).toBeInTheDocument()
      9 |  })

      at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:90:38
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:62:17
      at getByText (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:111:19)
      at Object.<anonymous> (src/App.test.jsx:7:39)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.441 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

What must I do to run the test sucessfully

I need to generate an employee id for eg: 2022 in the beginning, the number should be auto incremented, and it should be 2022000125(year is 2022).It should again start from year and the date created in the last. How i suppose to my change the sequence number generation ? can someone help me. Thank you in Advance.

//creating employeeid
    $numbers = '';
    foreach (range($i = 0; $i < 10; $i++){
        $numbers .= $i;
    }
    $employee_id =substr(str_shuffle($numbers), 0, 9);

here is my problem: It would be great if users could not only share the link to my website, but also the values they entered there. So far, so good.

First try: simply submit values by GET.

Does not work because: if the URL is

domain.com?param1=a&param2=b

then simply the part before the ? will be shared (at least on iPhones, but that’s bad.) So they just share

domain.com

and no parameters are sent. (Google told me the same without giving me a proper workaround idea.)

Okay. Second try: Some workaround involving .htaccess and history.pushstate. It worked quite well, but history.pushstate does not seem to affect the shared URL on iPhones either.

That’s bad so far. Does maybe anyone have an idea what to use to solve my problem? Thank you very much 🙂

I have this very simple page, that works properly:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.js"></script>
</head>

<body>
    <main id="vue-app">
        <p>{{ name }}</p>
        <canvas id="chart-flow-rate"></canvas>
    </main>
</body>

<script>    
    // Start VueJS
    const Application = {
        data() {
            return {
                name: "My Chart"
            };
        }
    }
    vm = Vue.createApp(Application).mount('#vue-app');

    // Use ChartJS
    const myChart = new Chart('chart-flow-rate', {
        type: 'bar',
        data: {
            labels: ['4', '2'],
            datasets: [{
                data: [4, 2],
            }]
        }
    });
</script>

However, if I invert the blocs of JS to use ChartJS first and then to create the VueJS application, the page no longer works: the chart is not shown.

Why?

I have noticed that I can change my HTML’s body a little in order to be able to use ChartJS before VueJS:

<body>
    <main>
        <p id="vue-app">{{ name }}</p>
        <canvas id="chart-flow-rate"></canvas>
    </main>
</body>

Again: why?

Thanks a lot! 🙂

I have a weird issue, where when I for example do this const data = [...businessCategories]; and make changes to the data variable like this data[itemIndex].selected = true;. What happens is the businessCategories variable get changed as well as data. I don’t understand why this happpend since I copying values only not reference.

I am facing a brush issue.
I have 10000 records in chart and brush is not working properly.it is very tiny line line and data is also overlapping .

though it is working fine for upto 1000 records.
Could you please guide here .
Thanks,
Rohit

im learning to make webapplication and i wanted to created a SVG-Text animation which i did.. below u can see the code..my problem is that i am not being to load the mainpage or index page. In simple word, i just want to open my mainpage or index page of site to load after the SVG-Text animation**(PRE-LOADER)** is finished. Below the code of the SVG-animation .. its css, html
thank you in advance

its html

<html>
    <head>
        <title>learn</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
<svg width="910" height="120" id="Layer_1" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path  d="M62.8,63.8H28.7v31.6h38v9.5H17.4V17.3h47.3v9.5h-36v27.7h34.1V63.8z" stroke="white" stroke-width="5"/>
    <path class="st0" d="M86.3,42l9,13.5c2.3,3.5,4.3,6.8,6.4,10.3h0.4c2.1-3.8,4.2-7,6.2-10.4l8.8-13.4h12.4L108,72.4l22.1,32.5h-13
        l-9.2-14.2c-2.5-3.6-4.6-7.2-6.8-10.9h-0.3c-2.1,3.8-4.3,7.1-6.6,10.9l-9.1,14.2H72.5l22.4-32.1L73.5,42H86.3z"stroke="white" stroke-width="5"/>
    <path  d="M141.1,62.5c0-8.1-0.3-14.6-0.5-20.5h10.3l0.5,10.8h0.3c4.7-7.7,12.1-12.2,22.4-12.2c15.2,0,26.7,12.9,26.7,32
        c0,22.6-13.8,33.8-28.6,33.8c-8.3,0-15.6-3.6-19.4-9.9h-0.3v34.2h-11.3V62.5z M152.4,79.3c0,1.7,0.3,3.3,0.5,4.7
        c2.1,7.9,9,13.4,17.2,13.4c12.1,0,19.1-9.9,19.1-24.3c0-12.6-6.6-23.4-18.7-23.4c-7.8,0-15.1,5.6-17.3,14.2
        c-0.4,1.4-0.8,3.1-0.8,4.7V79.3z" stroke="white" stroke-width="5"/>
    <path  d="M221.5,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
        c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H221.5z M255,67.3
        c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H255z" stroke="white" stroke-width="5" />
    <path  d="M280.2,59c0-6.5-0.1-11.8-0.5-17h10.1l0.7,10.4h0.3c3.1-6,10.4-11.8,20.8-11.8c8.7,0,22.2,5.2,22.2,26.8v37.6
        h-11.4V68.6c0-10.1-3.8-18.6-14.6-18.6c-7.5,0-13.4,5.3-15.3,11.7c-0.5,1.4-0.8,3.4-0.8,5.3v37.8h-11.4V59z"stroke="white" stroke-width="5"/>
    <path  d="M350.8,93.2c3.4,2.2,9.4,4.6,15.1,4.6c8.3,0,12.2-4.2,12.2-9.4c0-5.5-3.3-8.5-11.7-11.6
        c-11.3-4-16.6-10.3-16.6-17.8c0-10.1,8.2-18.5,21.7-18.5c6.4,0,12,1.8,15.5,3.9l-2.9,8.3c-2.5-1.6-7-3.6-12.9-3.6
        c-6.8,0-10.5,3.9-10.5,8.6c0,5.2,3.8,7.5,12,10.7c10.9,4.2,16.5,9.6,16.5,19c0,11.1-8.6,18.9-23.5,18.9c-6.9,0-13.3-1.7-17.7-4.3
        L350.8,93.2z"stroke="white" stroke-width="5"/>
    <path  d="M410.2,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
        c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H410.2z M443.8,67.3
        c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H443.8z"stroke="white" stroke-width="5"/>
    <path  d="M508.3,26.9h-26.7v-9.6h64.9v9.6h-26.8v78h-11.4V26.9z"stroke="white" stroke-width="5"/>
    <path  d="M550,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
        c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5H550V61.6z"stroke="white" stroke-width="5"/>
    <path d="M626.7,104.9l-0.9-7.9h-0.4c-3.5,4.9-10.3,9.4-19.2,9.4c-12.7,0-19.2-9-19.2-18.1c0-15.2,13.5-23.5,37.8-23.4
        v-1.3c0-5.2-1.4-14.6-14.3-14.6c-5.9,0-12,1.8-16.4,4.7l-2.6-7.5c5.2-3.4,12.7-5.6,20.7-5.6c19.2,0,23.9,13.1,23.9,25.7v23.5
        c0,5.5,0.3,10.8,1,15.1H626.7z M625,72.8c-12.5-0.3-26.7,2-26.7,14.2c0,7.4,4.9,10.9,10.8,10.9c8.2,0,13.4-5.2,15.2-10.5
        c0.4-1.2,0.7-2.5,0.7-3.6V72.8z"stroke="white" stroke-width="5"/>
    <path  d="M699.4,102.6c-3,1.6-9.6,3.6-18.1,3.6c-19,0-31.3-12.9-31.3-32.1c0-19.4,13.3-33.4,33.8-33.4
        c6.8,0,12.7,1.7,15.9,3.3l-2.6,8.8c-2.7-1.6-7-3-13.3-3c-14.4,0-22.2,10.7-22.2,23.8c0,14.6,9.4,23.5,21.8,23.5
        c6.5,0,10.8-1.7,14-3.1L699.4,102.6z"stroke="white" stroke-width="5"/>
    <path  d="M724.1,70.8h0.3c1.6-2.2,3.8-4.9,5.6-7.2L748.4,42h13.8l-24.3,25.9l27.7,37.1h-13.9l-21.7-30.2l-5.9,6.5v23.7
        h-11.3V12.6h11.3V70.8z"stroke="white" stroke-width="5"/>
    <path d="M780.1,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
        c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H780.1z M813.6,67.3
        c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H813.6z"stroke="white" stroke-width="5"/>
    <path d="M838.8,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
        c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5h-11.3V61.6z"stroke="white" stroke-width="5"/>
</svg>
    </body>
</html>

its css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background-color: rgb(32,35,48);
}
#Layer_1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);    
    animation: fill 0.5s ease forwards 5.8s;
}
#Layer_1 path:nth-child(1){
    stroke-dasharray: 414;
    stroke-dashoffset: 414;
    animation: line-anim 2s ease forwards;
}
#Layer_1 path:nth-child(2){
    stroke-dasharray: 320.55609130859375;
    stroke-dashoffset: 320.55609130859375;
    animation: line-anim 2s ease forwards 0.3s;
}
#Layer_1 path:nth-child(3){
    stroke-dasharray: 437.967041015625;
    stroke-dashoffset: 437.967041015625;
    animation: line-anim 2s ease forwards 0.6s;
}
#Layer_1 path:nth-child(4){
    stroke-dasharray: 366.2216491699219;
    stroke-dashoffset: 366.2216491699219;
    animation: line-anim 2s ease forwards 0.9s;
}
#Layer_1 path:nth-child(5){
    stroke-dasharray: 335.585693359375;
    stroke-dashoffset: 335.585693359375;
    animation: line-anim 2s ease forwards 1.2s;
    
}
#Layer_1 path:nth-child(6){
    stroke-dasharray: 268.7137145996094;
    stroke-dashoffset: 268.7137145996094;
    animation: line-anim 2s ease forwards 1.5s;
    
}
#Layer_1 path:nth-child(7){
    stroke-dasharray: 366.2216796875;
    stroke-dashoffset: 366.2216796875;
    animation: line-anim 2s ease forwards 1.8s;
    
}
#Layer_1 path:nth-child(8){
    stroke-dasharray: 305.0000305175781;
    stroke-dashoffset: 305.0000305175781;
    animation: line-anim 2s ease forwards 2.1s;
    
}
#Layer_1 path:nth-child(9){
    stroke-dasharray: 201.02734375;
    stroke-dashoffset: 201.02734375;
    animation: line-anim 2s ease forwards 2.4s;
}
#Layer_1 path:nth-child(10){
    stroke-dasharray: 356.66552734375;
    stroke-dashoffset: 356.66552734375;
    animation: line-anim 2s ease forwards 2.7s;
    
}
#Layer_1 path:nth-child(11){
    stroke-dasharray: 257.80328369140625;
    stroke-dashoffset: 257.80328369140625;
    animation: line-anim 2s ease forwards 3.0s;
    
}
#Layer_1 path:nth-child(12){
    stroke-dasharray: 390.1777038574219;
    stroke-dashoffset: 390.1777038574219;
    animation: line-anim 2s ease forwards 3.3s;
}
#Layer_1 path:nth-child(13){
    stroke-dasharray: 366.221923828125;
    stroke-dashoffset: 366.221923828125;
    animation: line-anim 2s ease forwards 3.6s;
}
#Layer_1 path:nth-child(14){
    stroke-dasharray: 201.02735900878906;
    stroke-dashoffset: 201.02735900878906;
    animation: line-anim 2s ease forwards 3.9s;
}

@keyframes line-anim{
    to{
        stroke-dashoffset:0;
    }
}
@keyframes fill{
    from{
        fill: transparent;
    }
    to{
        fill:white
    }
}

I’m trying to rename items in a menubar in tinyMce Editor so I can translate them. I managed to change her title, but not the sub-items like undo or redo.

tinymce.init({
 selector: 'textarea',  // change this value according to your HTML
 menu: {
   file: {title: 'Arquivo', items: 'newdocument'},
   edit: {title: 'Editar', items: 'undo redo | cut copy paste pastetext | selectall'},
   insert: {title: 'Inserir', items: 'link media | template hr'},
   view: {title: 'Visualizar', items: 'visualaid'},
   format: {title: 'Formatar', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
   table: {title: 'Tabela', items: 'inserttable tableprops deletetable | cell row column'},
   tools: {title: 'Ferramentas', items: 'spellchecker code'}
 }
});

If anyone knows what to do it would be of great help.

I need this solution for an educational project. This unit test should check an expected console output from the function:

it('should log into the console "Victoria lifting anchor up" and "Victoria is moving"', () => {

  const consoleSpy = jest.spyOn(console, 'log');

  victoria.move();

  expect(consoleSpy).toHaveBeenCalledWith(?);

});

The problem is that the function victoria.move() runs two console logs, and I want to check both of them in one unit test. The test perfectly works with one output, but I do not know what notation should be for testing two outputs. I strugle to find the syntax on the Internet.

The problem with the code is that when I type on the keyboard inside the input the page flickers and refreshed

the code I’m struggling with is this :

 this.state = {
      search: "",
    };
changedInput = (e) => {
    // //change the state of search for the input
    // this.setState({search:e.target.value})
    
    this.setState({ search: e.target.value });
  };
 <ul style={{ display: this.state.contactsDisplay }}></ul>
        <label>
          <span>search</span>
          <input
            type="text"
            name="form_name"
            id="name"
            
             value={this.state.search}
            onChange={(e)=>{this.changedInput(e)}}
          />
        </label>

I just got an array of json from server but I can not use the map function on them because it said the type of the variable is not an object.

[{rad:"129394",pdate1:"13990929",sharh:"بابت مانده اوليه",bed:"1010",bes:"0",kod_naghl:"1",shom_san:"21010"}]

this is the response of server which is an array of json but when I log the type of it. it says that this is a string.

data type : string

and also when I copy the array and put it in a variable in console and log the type it says object. and now I can use the map function.

I have used the JSON.stringfy and JSON.parse to. but they did not work in this case.
by the way this project has been developed with react if its necessary to know.

I am learning JavaScript . I need to build a sidebar chrome extension that fetches LinkedIn profile result’s data into the extension.

Like if someone logs into LinkedIn and searches for developer, next he clicks my extension and he gets the name and email of that person in that extension. The names should be in the same order as the search results. I don’t know where to start for this.

I have googled but it says using APIs but I don’t think I would need APIs for this. Just some good dom manipulating would do the thing I guess. But maybe I am wrong.

I have built extensions before but this is something I am not getting.

Why in this code I am getting an item from local storage first even before storing it

let addnote = document.getElementById("addbtn");
addnote.addEventListener("click", saveNote );
let message = document.getElementById("notes2");
function saveNote() {
    let TXT = document.getElementById("addtxt");
    let note = localStorage.getItem("notes");
    console.log("save");
    if(note == 0){
        noteData2 = [];
    }
    else{
        noteData2 = JSON.parse(note);
    }
    noteData.push(TXT.value);
    localStorage.setItem("notes", JSON.stringify(noteData));
    TXT.value = "";
};

Thanks

As the title says, I’m trying to have a discord bot dm a user, and then message their reply to me. I am new to discord.js. I have a small idea of where to start. Here’s my code that I have to start
const user = await client.users.fetch(‘id’);
user.send(‘Some DM.’);