Category: javascript

 let dashboardId = x |> Dashboard.id |> Belt.Int.toString;
 let newUrl = "/dashboards/" ++ dashboardId;
 window.location.href = newUrl;
 Js.log(newUrl);

The error shown is:

The value window can’t be found

I am a beginner to reason-react so please help me with this

I need to change the url from current to the newUrl.

We have this code in the main.js to import configuration variables:

import * as config from '/config/settings.js'
app.config.globalProperties.apiUrl = apiUrl
app.config.globalProperties.imageBaseUrl = imageBaseUrl

and exclude the config/settings.js by setting in external in vite.config.js

Which work splendidly in the build version

Wenn run in a npm run dev local server the import line is error messaged as:

[vite] Internal server error: Cannot import non-asset file /config/settings.js which is inside /public. JS/CSS files inside /public are copied as-is on build and can only be referenced via or in html. If you want to get the URL of that file, use /config/settings.js?url instead.

If included in the index.html with`

    <script type="module" src="/config/settings.js"></script>

Before the inclusion of main.js the exports are not available.

How do make the import of external configuration work during development?

enter image description here

now I’m making webSite, but i have problem in js

what i make is card filtering

there are checkbox, each checkbox have id a, b, c, d

and also card have id too but card have multiple id, and random

if a checkbox checked then card with an ID of a is display, and b checkbox checked also b card is display

and here is my problem if i unchecked b checkbox, i want remain a cards but all card is gone

and next problem is if i checked reset checkbox, a cards are remain

// 각 체크박스의 상태를 추적하기 위한 객체
const checkboxStates = {};

seriesCheck.forEach((checkbox) => {
checkboxStates[checkbox.id] = false;

checkbox.addEventListener("change", () => {
  checkboxStates[checkbox.id] = checkbox.checked;

  cardSeries.forEach((card) => {
    const seriesCheckList = card.closest("li");
    let shouldBeVisible = false;
    seriesCheck.forEach((checkbox) => {
      if (
        checkboxStates[checkbox.id] &&
        card.textContent.includes(checkbox.id)
      ) {
        shouldBeVisible = true;
      }
    });

    seriesCheckList.style.display = shouldBeVisible ? "block" : "none";
  });
});

});

i think includes is the problem then how can i checked card filter?

I do not want a user to be able to open my website on a mobile device (regardless of it being an iOS or Android device). The website is meant to be viewed only as a desktop application (on laptops, monitors or TVs) due to poor responsiveness on mobile devices. Is there any way I can warn a user (by showing a pop-up) when the website is opened on a mobile device?

My uploader:

var uploader = new qq.azure.FineUploader({
    element: document.getElementById('uploader'),
    cors: {
        expected: true,
        sendCredentials: false
    },
    request: {
        endpoint: 'https://ACCOUNT_NAME.blob.core.windows.net/uploads' // URL to the server-side endpoint
    },
    signature: {
        endpoint: 'https://localhost:44302/Home/Sas'
    },
    uploadSuccess: {
        endpoint: '/success'
    },
    retry: {
        enableAuto: true
    },
    deleteFile: {
        enabled: true
    }
});

My Sas endpoint:

[HttpGet]
public async Task<string> Sas(string blobUri)
{
    var credentials = new StorageCredentials(STORAGE_ACCOUNT_NAME, STORAGE_ACCOUNT_KEY);
    var blob = new CloudBlockBlob(new Uri(blobUri), credentials);
    var sasParameters = new SharedAccessBlobPolicy()
    {
        SharedAccessExpiryTime = DateTime.UtcNow.AddHours(1),
        Permissions = SharedAccessBlobPermissions.Write
    };
    var sasToken = blob.GetSharedAccessSignature(sasParameters);
    var returnValue = blob.Uri.AbsoluteUri + sasToken;
    return returnValue;
}

This endpoint returns the following Sas:

https://ACCOUNT_NAME.blob.core.windows.net/uploads/1e67f8bc-ef5c-476a-9c22-b6bd1965531d.zip?sv=2018-03-28&sr=b&sig=awqJU%2BmP8ohL%2FvE1F9mrCdc57q52DNrx1yTDfyIF2IU%3D&se=2024-04-04T07%3A14%3A26Z&sp=w

The problem is that fine uploader is sending put request to incorrect URL (localhost) instead azure blob url:

XHRPUT
https://localhost:44302/"https://ACCOUNT_NAME.blob.core.windows.net/uploads/b5594a0b-4af3-4d6f-bcf6-b56f9c8723cb.zip?sv=2018-03-28&sr=b&sig=+5gNS54GN7Wx3/8puf897ertsTJF5YI4w6NSVQ38M8E=&se=2024-04-04T07:17:04Z&sp=w"
[HTTP/2 404  3ms]

I have tried changing the config from ‘request.endpoint’ to ‘request.containerUrl’, that didnt work either.

I am trying to use the web-worker npm package. However, I get the following error:

(node:48786) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/myUser/Documents/workers-test-demo/node_modules/web-worker/node.js:17
import URL from 'url';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

Node.js v20.11.0

My entire index.js consists of:

import Worker from "web-worker";

new Worker("./hello.js");

and I already set “type”:”module” on my package.json

{
    "name": "workers-test-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "type": "module",
    "scripts": {
        "start": "node index.js",
        "test": "echo "Error: no test specified" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "web-worker": "^1.3.0"
    }
}

I’ve spent to much time trying to figure how to solve this, why does this happen?

I see from the package.json of the web-worker package that it has a

...
"exports": {
    "types": "./index.d.ts",
    "import": {
      "bun": "./browser.js",
      "browser": "./browser.js",
      "default": "./node.js"
    },
    "module": {
      "bun": "./browser.js",
      "browser": "./browser.js",
      "default": "./node.js"
    },
    "default": {
      "bun": "./cjs/browser.js",
      "browser": "./cjs/browser.js",
      "default": "./cjs/node.js"
    }
  },
...

So, in theory, I should be able to import the package, and the error stems from ./node.js which is a supposedly a module, but I don’t know why it is not treated like one.

I have a RichText editor as shown in below screenshot and sample code snippet

<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" title="Rich Text Editor, question" aria-describedby="cke_74" tabindex="0" allowtransparency="true">

 #document (https://blahbla.com)
<html >
<head>
    <link type="text/css" rel="stylesheet" href="https://cdn.ckeditor.com/4.16.2/standard-all/contents.css?t=L7C8">
    <link type="text/css" rel="stylesheet" href="https://cdn.ckeditor.com/4.16.2/standard-all/plugins/tableselection/styles/tableselection.css">
</head>
    <body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">
    <p><br></p>
    </body>
</html>
</iframe>

so to type in that rich text editor I’m using below code

const ele = await promisify(cy.get('iframe[title="Rich Text Editor, question"]'));
const body = ele.contents().find("body")[0];
await promisify(cy.wrap(body ).type("My looooong text"))

but above code is very SLOW. It types character by character.

I want to use setData() with coding like below (which is very fast)

it('does work', () => {
  cy.visit('https://ckeditor.com/ckeditor-5/demo/feature-rich/')
      cy.get('.ck-content').contains('Discover')
      cy.get('[data-cke-tooltip-text="Select all (⌘A)"]').click().type('{backspace}')
      cy.get('.ck-content[contenteditable=true]').then(el => {
        // @ts-ignore
        const editor = el[0].ckeditorInstance  // If you're using TS, this is ReturnType<typeof InlineEditor['create']>
        editor.setData('Typing some stuff')
    })
    cy.get('.ck-content').invoke('text').should('eql', 'Typing some stuff')
})

I tried everything. Below is one example I tried

const question = await promisify(cy.get('#frmQuestion iframe[title="Rich Text Editor, question"]'));
          question.contents().find("body")[0].then((el => {
              // @ts-ignore
              const editor = el[0].ckeditorInstance  // If you're using TS, this is ReturnType<typeof InlineEditor['create']>
              editor.setData('Typing some stuff')
          }));

I realized ckeditorInstance NOT available with anything I tried so I’m getting error similar to “cannot execute setData() for undefined”

So my question is how to use setData function instead of type when there is a iFrame and body tag with CKEditor(version 4) ?

i want to get duration of audio file using nodejs for that i have two options get duration of audio file while upload from file buffer and get duration of remote audio file so which one is better and how to get duration of audio file using nodejs

I’m encountering difficulties with saving rich text in a Multiple Lines of Text column within a SharePoint list using SPServices. Site URL is correct because “Title” and “URL” is saving in the list.

Here is my JavaScript function:

const SaveData =()=> {

var Title = $(‘#txtTitle’).val();
var Description = SP.Utilities.HttpUtility.htmlEncode($(‘#txtDescription’).summernote(‘code’));
var URL = $(‘#txtURL’).val();

var isValid = ValidateData();

if(isValid){

$().SPServices(  
{  
    operation: "UpdateListItems",  
    async: false,  
    webURL: url,  
    batchCmd: "New",  
    listName: "Customer-Priority",  
    valuepairs: [  
        ["Title", Title],
        ["Description", Description],
        ["URL", URL]                
    ], 
        
    completefunc: function(xData, Status){ 
             ClearControls();           
    }  
   });  
 }

}

Here is the list column I have created

Any solutions on how to successfully save rich text in a Multiple Lines of Text column within a SharePoint list would be greatly appreciated.

Thank you!

I want to disable checked rows in the interactive grid in Oracle Apex. How can achieve it?
Using JS or Handling it using any button?

I have selected 3 rows shown below Screenshot
enter image description here

I want to disable them as I checked them. how can I do that?

I tried all conventional methods from Oracle Apex but it did not worked at all.

I tried loading js code in html but no js functionality is reflected in my code.

here is my html snippet

<!DOCTYPE html>

<html>  

Point Of Sale

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/core.css" rel="stylesheet" type="text/css" />
<link href="css/components.css" rel="stylesheet" type="text/css" />
<link href="css/icons.css" rel="stylesheet" type="text/css" />    
<link href="css/responsive.css" rel="stylesheet" type="text/css" />
<link href="plugins/chosen/chosen.min.css" rel="stylesheet" type="text/css" />

<link href="plugins/daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />    
<link href="plugins/dataTables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="plugins/dataTables/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> 
<link href="css/pages.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="module" src="./js/pos.js"></script>
<script src="./jquery.min.js"></script>
<script src="./js/product-filter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/print-js"></script>

</head>`

Here is my js snippet

 import path from 'path';
import moment from 'moment';
//import Swal from 'sweetalert2';
import { ipcRenderer } from 'electron';
import Store from 'electron-store';
import { remote } from 'electron';
import btoa from 'btoa';
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';
import JsBarcode from 'jsbarcode';
import macaddress from 'macaddress';
import $ from 'jquery';
import jQuery from 'jquery';

window.$ = $;
window.jQuery = jQuery;
import './renderer.js';

    let cart = [];
let index = 0;
let allUsers = [];
let allProducts = [];
let allCustomers = [];
let allCategories = [];
let allTransactions = [];
let sold = [];
let state = [];
let sold_items = [];
let item;
let auth;
let holdOrder = 0;
let vat = 0;
let perms = null;
let deleteId = 0;
let paymentType = 0;
let receipt = '';

let totalVat = 0;
let subTotal = 0;
let method = '';
let order_index = 0;
let user_index = 0;
let product_index = 0;
let transaction_index;
//let host = 'localhost';
let host = 'xx.xx.xxx.xxx';

let port = 'xxxx';


let dotInterval = setInterval(function () { $(".dot").text('.') }, 3000);


// Define the path to the uploads directory within the current directory

//let api = 'http://' + host + ':' + port + '/rms/api/';
let api = 'https://' + host + '/rms/api/';

let categories = [];
let holdOrderList = [];
let customerOrderList = [];
let ownUserEdit = null;
let totalPrice = 0;
let orderTotal = 0;
let auth_error = 'Incorrect username or password';
let auth_empty = 'Please enter a username and password';
let holdOrderlocation = $("#randerHoldOrders");
let customerOrderLocation = $("#randerCustomerOrders");

let settings;
let platform;
let user = {};

let by_till = 0;
let by_user = 0;
let by_status = 1;
if (typeof remote !== 'undefined') {
    // Code that uses remote
    const app = remote.app;
//let img_path = app.getPath('userData') + '/POS/uploads/';
const img_path = path.join('undefined','POS', 'uploads/');
const currentDirectory = __dirname;
let storage = new Store();
let start = moment().startOf('month');
let end = moment();
let start_date = moment(start).toDate();
let end_date = moment(end).toDate();
}
$(function () {

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + '  -  ' + end.format('MMMM D, YYYY'));
    }

    

});


$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

The html details are displayed as well as the styling but the pos.js is not showing up. the pos.js contains the functionality. I also tried creating a http-server to see if it works but nothing worked

I want to render render a pdf which is a lab test which consists of Header(border, logo, hospital address,… etc) and in footer (some text) which has fixed height.
Ex layout:

Here, the header and footer have fixed height and the Lab test may contain tables, numerical data or observations and the text size/data will be huge for some tests. So if the text/data is huge then new page will be generated which is happening but taking some portion of footer as well and then new page is getting generated where rest of the text is displayed.

I am using "@react-pdf/renderer": "^3.1.9". I am attaching the screenshots as well. How do i resolve this?enter image description here

const InvoicePdf = ({ data }: Props) => (
  <Document title='Results'>
    <Page wrap size='A4' style={styles.page}>
      {data.invoiceWithHeaderValue ? <TopLine /> : null}
      {data.invoiceWithHeaderValue ? <Logo /> : null}
      {data.invoiceWithHeaderValue ? (
        <HeaderData data={data} />
      ) : (
        <View debug fixed style={{ height: '55' }}></View>
      )}
      <InvoiceHeader data={data} />
      {data.panels.map((p: any, i: any, arr: any) => (
        <PanelView
          key={i}
          panel={p}
          index={i}
          isLast={arr.length === i + 1}
          summary={data.summary}
        />
      ))}
      <EndOfReport invoiceWithHeaderValue={data.invoiceWithHeaderValue} />
      <PageCount invoiceWithHeaderValue={data.invoiceWithHeaderValue} />
      {data.invoiceWithHeaderValue ? <InvoiceFooter /> : null}
    </Page>
  </Document>
)

Here, InvoiceHeader is taking the height of InvoiceFooter which should not be happening.

Is there a way to force a string declared with a concatenated variable to update once the variable itself is updated?

For example the current behavior is:

let test = "hello world";
let string = `blah blah ${test}`;

console.log(string); // output: "blah blah hello world";

test = "blah";

console.log(string); // output: "blah blah hello world", desired output: "blah blah blah";

That was just an example of the question but in reality I need it for dynamic text used in multiple strings within a large object that gets declared at the start of my program. Updating them all manually would be tedious and inefficient so if there is another way of solving this please let me know.

var obj = { ... 
            example1: `hello world ${dynamicText}`, 
            example2: `blah blah ${dynamicText} blah`,
            example3: `test ${dynamicText}`,
          ... }

The animation is here:
https://codepen.io/aecend/pen/WbONyK
HTML:

<h1>Click and drag!</h1>
<canvas id="c"></canvas>

CSS:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

body{
  margin: 0;
  background: #000;
  font-family: "Open Sans";
}
h1{
  color: #ffffff;
  text-align: center;
  font-size: 20px;
}
canvas{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: 2px solid white;
}

JS: (without comments)

(function(w) {

    var canvas, ctx;

    var mouse = {
        x: 0,
        y: 0,
        px: 0,
        py: 0,
        down: false
    };

    var canvas_width = 500; 
    var canvas_height = 500; 

    var resolution = 10; 

    var pen_size = 40; 

    var num_cols = canvas_width / resolution; 
    var num_rows = canvas_height / resolution; 
    var speck_count = 5000; 

    var vec_cells = []; 
    var particles = []; 

    function init() {

        canvas = document.getElementById("c");
        ctx = canvas.getContext("2d");

        canvas.width = canvas_width;
        canvas.height = canvas_height;

        for (i = 0; i < speck_count; i++) {

            particles.push(new particle(Math.random() * canvas_width, Math.random() * canvas_height));
        }

        for (col = 0; col < num_cols; col++) { 

            vec_cells[col] = [];

            for (row = 0; row < num_rows; row++) { 

                var cell_data = new cell(col * resolution, row * resolution, resolution)

                vec_cells[col][row] = cell_data;

                vec_cells[col][row].col = col;
                vec_cells[col][row].row = row;

            }
        }

        for (col = 0; col < num_cols; col++) { 

            for (row = 0; row < num_rows; row++) { 

                var cell_data = vec_cells[col][row];

                var row_up = (row - 1 >= 0) ? row - 1 : num_rows - 1;
                var col_left = (col - 1 >= 0) ? col - 1 : num_cols - 1;
                var col_right = (col + 1 < num_cols) ? col + 1 : 0;

                var up = vec_cells[col][row_up];
                var left = vec_cells[col_left][row];
                var up_left = vec_cells[col_left][row_up];
                var up_right = vec_cells[col_right][row_up];

                cell_data.up = up;
                cell_data.left = left;
                cell_data.up_left = up_left;
                cell_data.up_right = up_right;

                up.down = vec_cells[col][row];
                left.right = vec_cells[col][row];
                up_left.down_right = vec_cells[col][row];
                up_right.down_left = vec_cells[col][row];

            }
        }

        w.addEventListener("mousedown", mouse_down_handler);
        w.addEventListener("touchstart", touch_start_handler);

        w.addEventListener("mouseup", mouse_up_handler);
        w.addEventListener("touchend", touch_end_handler);

        canvas.addEventListener("mousemove", mouse_move_handler);
        canvas.addEventListener("touchmove", touch_move_handler);

        w.onload = draw;

    }

    function update_particle() {

        for (i = 0; i < particles.length; i++) {

            var p = particles[i];

            if (p.x >= 0 && p.x < canvas_width && p.y >= 0 && p.y < canvas_height) {

                var col = parseInt(p.x / resolution);
                var row = parseInt(p.y / resolution);

                var cell_data = vec_cells[col][row];

                var ax = (p.x % resolution) / resolution;
                var ay = (p.y % resolution) / resolution;

                p.xv += (1 - ax) * cell_data.xv * 0.05;
                p.yv += (1 - ay) * cell_data.yv * 0.05;

                p.xv += ax * cell_data.right.xv * 0.05;
                p.yv += ax * cell_data.right.yv * 0.05;

                p.xv += ay * cell_data.down.xv * 0.05;
                p.yv += ay * cell_data.down.yv * 0.05;

                p.x += p.xv;
                p.y += p.yv;

                var dx = p.px - p.x;
                var dy = p.py - p.y;

                var dist = Math.sqrt(dx * dx + dy * dy);

                var limit = Math.random() * 0.5;

                if (dist > limit) {
                    ctx.lineWidth = 1;
                    ctx.beginPath(); 
                    ctx.moveTo(p.x, p.y); 
                    ctx.lineTo(p.px, p.py); 
                    ctx.stroke(); 
                }else{

                    ctx.beginPath();
                    ctx.moveTo(p.x, p.y);

                    ctx.lineTo(p.x + limit, p.y + limit);

                    ctx.stroke();
                }

                p.px = p.x;
                p.py = p.y;
            }
            else {

                p.x = p.px = Math.random() * canvas_width;
                p.y = p.py = Math.random() * canvas_height;

                p.xv = 0;
                p.yv = 0;
            }

            p.xv *= 0.5;
            p.yv *= 0.5;
        }
    }

    function draw() {

        var mouse_xv = mouse.x - mouse.px;
        var mouse_yv = mouse.y - mouse.py;

        for (i = 0; i < vec_cells.length; i++) {
            var cell_datas = vec_cells[i];

            for (j = 0; j < cell_datas.length; j++) {

                var cell_data = cell_datas[j];

                if (mouse.down) {
                    change_cell_velocity(cell_data, mouse_xv, mouse_yv, pen_size);
                }

                update_pressure(cell_data);
            }
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.strokeStyle = "#00FFFF";

        update_particle();

        for (i = 0; i < vec_cells.length; i++) {
            var cell_datas = vec_cells[i];

            for (j = 0; j < cell_datas.length; j++) {
                var cell_data = cell_datas[j];

                update_velocity(cell_data);

            }
        }

        mouse.px = mouse.x;
        mouse.py = mouse.y;

        requestAnimationFrame(draw);

    }

    function change_cell_velocity(cell_data, mvelX, mvelY, pen_size) {

        var dx = cell_data.x - mouse.x;
        var dy = cell_data.y - mouse.y;
        var dist = Math.sqrt(dy * dy + dx * dx);

        if (dist < pen_size) {

            if (dist < 4) {
                dist = pen_size;
            }

            var power = pen_size / dist;

            cell_data.xv += mvelX * power;
            cell_data.yv += mvelY * power;
        }
    }

    function update_pressure(cell_data) {

        var pressure_x = (
            cell_data.up_left.xv * 0.5 
            + cell_data.left.xv
            + cell_data.down_left.xv * 0.5 
            - cell_data.up_right.xv * 0.5 
            - cell_data.right.xv
            - cell_data.down_right.xv * 0.5 
        );

        var pressure_y = (
            cell_data.up_left.yv * 0.5
            + cell_data.up.yv
            + cell_data.up_right.yv * 0.5
            - cell_data.down_left.yv * 0.5
            - cell_data.down.yv
            - cell_data.down_right.yv * 0.5
        );

        cell_data.pressure = (pressure_x + pressure_y) * 0.25;
    }

    function update_velocity(cell_data) {

        cell_data.xv += (
            cell_data.up_left.pressure * 0.5
            + cell_data.left.pressure
            + cell_data.down_left.pressure * 0.5
            - cell_data.up_right.pressure * 0.5
            - cell_data.right.pressure
            - cell_data.down_right.pressure * 0.5
        ) * 0.25;

        cell_data.yv += (
            cell_data.up_left.pressure * 0.5
            + cell_data.up.pressure
            + cell_data.up_right.pressure * 0.5
            - cell_data.down_left.pressure * 0.5
            - cell_data.down.pressure
            - cell_data.down_right.pressure * 0.5
        ) * 0.25;

        cell_data.xv *= 0.99;
        cell_data.yv *= 0.99;
    }

    function cell(x, y, res) {

        this.x = x;
        this.y = y;

        this.r = res;

        this.col = 0;
        this.row = 0;

        this.xv = 0;
        this.yv = 0;

        this.pressure = 0;

    }

    function particle(x, y) {
        this.x = this.px = x;
        this.y = this.py = y;
        this.xv = this.yv = 0;
    }

    function mouse_down_handler(e) {
        e.preventDefault(); 
        mouse.down = true; 
    }

    function mouse_up_handler() {
        mouse.down = false; 
    }

    function touch_start_handler(e) {
        e.preventDefault(); 
        var rect = canvas.getBoundingClientRect();
        mouse.x = mouse.px = e.touches[0].pageX - rect.left; 
        mouse.y = mouse.py = e.touches[0].pageY - rect.top;
        mouse.down = true; 
    }

    function touch_end_handler(e) {
        if (!e.touches) mouse.down = false; 
    }

    function mouse_move_handler(e) {
        e.preventDefault(); 

        mouse.px = mouse.x;
        mouse.py = mouse.y;

        mouse.x = e.offsetX || e.layerX;
        mouse.y = e.offsetY || e.layerY;
    }

    function touch_move_handler(e) {
        e.preventDefault(); 
        mouse.px = mouse.x;
        mouse.py = mouse.y;

        var rect = canvas.getBoundingClientRect();

        mouse.x = e.touches[0].pageX - rect.left;
        mouse.y = e.touches[0].pageY - rect.top;
    }

    w.Fluid = {
        initialize: init
    }

}(window)); 

window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

Fluid.initialize();

Appreciate any help I can get!

I’ve started learning svelte recently (without any prior knowledge of react / node.js) if someone could show me how you would convert a animation like this and the exact code within the svelte page which follows I’d really appreciate it, kept getting all sorts of errors when I was trying it, made it on a new svelte page not sure if I’m missing any libraries either

I’m working on a project to draw lines on an HTML canvas beneath webpage’s content. My goal is to achieve a result similar to the screenshot attached. Here’s what I’ve done so far:

let container = document.querySelector(".container");
let canvas = document.querySelector("canvas");

canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;

let ctx = canvas.getContext("2d");

let photo = document.querySelector(".photo");
let levels = document.querySelectorAll(".levels div");
let colors = getComputedStyle(document.documentElement);

levels.forEach((level, index) => {
  index++;
  ctx.beginPath();
  ctx.strokeStyle = colors.getPropertyValue(`--level-${index}`);
  ctx.moveTo(photo.offsetWidth + index * 10, photo.offsetTop + level.offsetTop - level.offsetHeight / 2);
  ctx.lineTo(photo.offsetWidth, photo.offsetTop + level.offsetTop - level.offsetHeight / 2);
  ctx.stroke();
});

let person = document.querySelector(".person");
let boxes = document.querySelectorAll(".box");
let total = boxes.length;
boxes.forEach((box, index) => {
  let dot = box.querySelector(".dot");
  index++;
  ctx.beginPath();
  ctx.strokeStyle = colors.getPropertyValue(`--level-${index}`);
  ctx.moveTo(person.offsetWidth + dot.offsetLeft + dot.offsetWidth, box.offsetTop - dot.offsetTop + dot.offsetHeight);
  ctx.lineTo(
    person.offsetWidth + dot.offsetLeft + dot.offsetWidth / 2 - total * 10,
    box.offsetTop - dot.offsetTop + dot.offsetHeight
  );
  ctx.stroke();
  total--;
});

:root {
  --level-1: #39a3aa;
  --level-2: #32a993;
  --level-3: #5cb793;
  --level-4: #dbb00c;
  --level-5: #d8750e;
  --level-6: #d4181c;
  --level-7: #b1111d;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.container {
  width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  position: relative;
}
.person {
  flex-basis: 42%;
  display: flex;
  align-items: center;
}
.person .photo {
  width: 280px;
  height: 280px;
  position: relative;
}
.person .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person .photo .levels {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
}
.person .photo .levels [class^="level"] {
  flex: 1;
  opacity: 0.8;
}
.questions {
  flex-basis: 58%;
}
.questions .box {
  border: 1px solid;
  padding: 15px 10px;
  position: relative;
  margin-bottom: 24px;
}
.questions .box .dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  top: 22px;
  left: -24px;
}
.questions .box .arrow {
  border-style: solid;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  padding: 12px;
  position: absolute;
  left: calc(50% - 6px);
  top: calc(100% - 12px);
  background-color: #fff;
}
.questions .box .question {
  margin-bottom: 5px;
}
.questions .box .question span {
  font-weight: 600;
}
.questions .box .answer input {
  padding: 6px 0;
  border: 0;
  outline: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  position: relative;
  z-index: 1;
  color: inherit;
}
.questions .box .answer input::placeholder {
  color: #acacac;
}
canvas {
  position: absolute;
  z-index: -1;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;&display=swap" rel="stylesheet" />

<div id="app">
  <div class="container">
    <div class="person">
      <div class="photo">
        <img src="headshot.jpeg" alt="" />
        <div class="levels">
          <div class="level-1" style="background-color: var(--level-1)"></div>
          <div class="level-2" style="background-color: var(--level-2)"></div>
          <div class="level-3" style="background-color: var(--level-3)"></div>
          <div class="level-4" style="background-color: var(--level-4)"></div>
          <div class="level-5" style="background-color: var(--level-5)"></div>
          <div class="level-6" style="background-color: var(--level-6)"></div>
          <div class="level-7" style="background-color: var(--level-7)"></div>
        </div>
      </div>
    </div>
    <div class="questions">
      <div class="box question-1" style="border-color: var(--level-1)">
        <div class="dot" style="background-color: var(--level-1)"></div>
        <p class="question">
          <span style="color: var(--level-1)">Level 1: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </p>
        <div class="answer">
          <input type="text" placeholder="Type your answer here and press Enter." />
        </div>
        <div class="arrow" style="border-color: var(--level-1)"></div>
      </div>

      <div class="box question-2" style="border-color: var(--level-2)">
        <div class="dot" style="background-color: var(--level-2)"></div>
        <p class="question">
          <span style="color: var(--level-2)">Level 2: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </p>
        <div class="answer">
          <input type="text" placeholder="Type your answer here and press Enter." />
        </div>
        <div class="arrow" style="border-color: var(--level-2)"></div>
      </div>

      <div class="box question-3" style="border-color: var(--level-3)">
        <div class="dot" style="background-color: var(--level-3)"></div>
        <p class="question">
          <span style="color: var(--level-3)">Level 3: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </p>
        <div class="answer">
          <input type="text" placeholder="Type your answer here and press Enter." />
        </div>
        <div class="arrow" style="border-color: var(--level-3)"></div>
      </div>

      <div class="box question-4" style="border-color: var(--level-4)">
        <div class="dot" style="background-color: var(--level-4)"></div>
        <p class="question">
          <span style="color: var(--level-4)">Level 4: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </p>
        <div class="answer">
          <input type="text" placeholder="Type your answer here and press Enter." />
        </div>
        <div class="arrow" style="border-color: var(--level-4)"></div>
      </div>

      <div class="box question-5" style="border-color: var(--level-5)">
        <div class="dot" style="background-color: var(--level-5)"></div>
        <p class="question">
          <span style="color: var(--level-5)">Level 5: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </p>
        <div class="answer">
          <input type="text" placeholder="Type your answer here and press Enter." />
        </div>
        <div class="arrow" style="border-color: var(--level-5)"></div>
      </div>

      <div class="box question-6" style="border-color: var(--level-6)">
        <div class="dot" style="background-color: var(--level-6)"></div>
        <p class="question">
          <span style="color: var(--level-6)">Level 6: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </p>
        <div class="answer">
          <input type="text" placeholder="Type your answer here and press Enter." />
        </div>
        <div class="arrow" style="border-color: var(--level-6)"></div>
      </div>

      <div class="box question-7" style="border-color: var(--level-7)">
        <div class="dot" style="background-color: var(--level-7)"></div>
        <p class="question">
          <span style="color: var(--level-7)">Level 7: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </p>
        <div class="answer">
          <input type="text" placeholder="Type your answer here and press Enter." />
        </div>
        <div class="arrow" style="border-color: var(--level-7)"></div>
      </div>
    </div>
    <canvas></canvas>
  </div>
</div>

But, I’m having trouble getting the lines to look right. Can someone help me make my code better so it does what I want? Also, if there’s a simpler way to do this than using a canvas under the webpage, I’m open to suggestions.