Category: javascript

In my website, I’ve a sticky container with a horizontal scroll direction.

The scroll works perfectly. However the issue is, when I tried to get a value from a CSS variable and assign it to Javascript I get this following error:

ReferenceError: Cannot access uninitialized variable.

const spaceHolder = document.querySelector('.js-scroll-wrapper');
const horizontal = document.querySelector('.js-scroll-direction');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;

// Get existing CSS variable '--padding-right' of '.container'
let el = document.querySelector('.container');
let gcs = getComputedStyle(el);
let paddingRight = gcs.getPropertyValue('--padding-right');

// alert('The value of the css variable is : ' + (paddingRight?paddingRight:'undefined'));

function calcDynamicHeight(ref) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const objectWidth = ref.scrollWidth;

  return objectWidth - vw + vh + paddingRight; // '--padding-right' CSS value of '.container'
}

window.addEventListener('scroll', () => {
  const sticky = document.querySelector('.js-h-scroll-sticky');
  horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});

window.addEventListener('resize', () => {
  spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});

.container {
  --padding-right: 100;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 0 0 var(--padding-right)px;
}

The sample array of objects will look like below:

a = [
  { x: 1, y: 2, z: 3 },
  { x: 1, y: 2, z: 3 },
  { x: 1, y: 2, z: 3 },
  { x: 1, y: 2, z: 3 },
  { x: 1, y: 2, z: 3 }
]

The expected output is:

a = [
  { x: 1, z: 3},
  { x: 1, z: 3},
  { x: 1, z: 3},
  { x: 1, z: 3},
  { x: 1, z: 3}
]

y: 2 alone should get removed from the array of object.

I have 2 ActiveMQ servers, one is on my Azure kubernetes cluster and the other is installed on my laptop, locally.

I am trying to connect to either one of them, but both of them always fail when I try to publish a message with the error Error: Server has gone away. This is the code of the push implementation:

  sendMessage(destination: string, message: string): void {
    this.stompClient.publish(destination, message);
  }

I am using the NodeJS(with TS) library "stomp-client": "^0.9.0" in order to connect to the ActiveMQ servers.

I can confirm that the connection initially is successfully made as I receive the session id of the connection on connect() callback. The way I connect is described below:

  this.stompClient = new StompClient(url, port, username, password);
  ...
  connect(): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      this.stompClient.connect(
        (sessionId: string) => {
          console.log(
            `Producer connected to ActiveMQ with session ID: ${sessionId}`,
          );
          resolve();
        },
        (error: Error) => {
          console.error("Error connecting to ActiveMQ producer:", error);
          reject(error);
        },
      );
    });
  }

I can’t wrap my head around why I can’t publish anything right now. I’m open to any suggestions, tips, advices, etc. I’m fairly new on ActiveMQ.

First of all, I know dependency injection is most like the best thing for this, however this is the situation I am in for the time being.

I have a Pino logger that I pass to a utility function that in turn wants to pass it on once again to another utility function.

It seems that I can get the logger to work in the first util, but not in the second… What is going wrong and how would one get this to work in this instance?

Parent Class

import {magicUtil} from './utils';

class MyClass {
  private logger;
  constructor(logger: pino.BaseLogger) {
    this.logger = logger;
  }

  doSomething() {
    this.logger.info('This is the doSomething function');
    return magicUtil(this.logger, 'some value');
  }
}

Util

const magicUtil = (logger: pino.BaseLogger, value: string): string => {
  logger.info('this is the magicUtil function');
  return behindTheScenes(logger, value);
}

const behindTheScenes = (logger: pino.BaseLogger, value: string): string => {
  logger.info('this is the behindTheScenes function');
  return `something spectacular happened to value {${value}}`;
}

In this scenario, when I hit doSomething() I am seeing in the logs:

> INFO (xx1): This is the doSomething function
> INFO (xx2): this is the magicUtil function

I am not getting the final expected log of > INFO (xx2): this is the behindTheScenes function.

What am I missing here?

We are trying to use ZUGFeRD in VS Studio 2022. Starting with Invoice we are not able to find the right way to put in ZFDate in the invoice.header. Here´s the original programming from ZUGFeRD:

invoice.setHeader(
  new Header()
    .setInvoiceNumber("20131122-42")
    .setCode(_380)
    .setIssued(today)
    .setName("Rechnung"));

The problem is .setIssued(today) where today is Type ZFDate. We tried a lot of things, but nothing runs.

We need today as string (or something that we can similar use) from our original invoice.

We searched in internet, docs from ZUGFeRD, Java docs and many others.

I’m working on my project on the card game War, as you may know. But, when I clicked Draw, my functions keep looping until the error stating Uncaught InternalError: too much recursion comes in to stop it, and then the game just ends. I wish I understood why.

I tried adding console.log(); commands to my functions to see what’s going on expecting to see all of the functions looping, however, assign is only called once, and then it loops between greater and war for some reason. When I then turned off logs in the console, it said there were 9999, meaning this looped at least 2000 times, because the logs give off 5 messages over and over.

var player = [];
var computer = [];
var playedCards = [];
var cards = [];
var $player = $("#player");
var $playerNumber = $("#playerNumber");
var $playerSuit = $("#playerSuit");
var $computer = $("#computer");
var $computerNumber = $("#computerNumber");
var $computerSuit = $("#computerSuit");
var $draw = $("#draw");
var $winner = $("#winner");
var $playerCards = $("#playerCards");
var $computerCards = $("#computerCards");
var number1;
var number2;
var suit1;
var suit2;
var numberImg1;
var numberImg2;

for (i = 1; i < 14; i++) {
  for (k = 1; k < 5; k++) {
    var j = [i, k];
    cards.push(j);
    console.log(j);
  }
}

cards.shuffle = function() {
  console.log("shuffle");
  var input = this
  for (var i = cards.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random() * (i + 1));
    var itemAtIndex = cards[randomIndex][0];
    var itemAtSecond = cards[randomIndex][1];
    input[randomIndex][0] = input[i][0];
    input[randomIndex][1] = input[i][1];
    input[i][0] = itemAtIndex;
    input[i][1] = itemAtSecond;
  }
  return input
}

cards.shuffle();
var half = cards.length / 2
for (i = 0; i < half; i++) {
  player.push(cards[i]); //For some reason the cards aren't being pushed
  console.log("Cards have been dealt");
}
cards.splice(0, half);
computer = cards;
$playerCards.html(player.length);
$computerCards.html(computer.length);

function assign() {
  console.log("Assign");
  if (player.length == 0 || computer.length == 0) {
    endgame();
    return;
  }
  $playerSuit.empty();
  $computerSuit.empty();
  var number1 = player[0][0];
  var number2 = computer[0][0];
  $playerNumber.html(number1);
  $computerNumber.html(number2);
  suit1 = player[0][1];
  suit2 = computer[0][1];
  if (suit1 == 1) {
    suit1 = "<img src='resources/images/heart.png"
  }
  if (suit1 == 2) {
    suit1 = "<img src='resources/images/club.png"
  }
  if (suit1 == 3) {
    suit1 = "<img src='resources/images/diamond.png"
  }
  if (suit1 == 4) {
    suit1 = "<img src='resources/images/spade.png"
  }
  if (suit2 == 1) {
    suit2 = "<img src='resources/images/heart.png"
  }
  if (suit2 == 2) {
    suit2 = "<img src='resources/images/club.png"
  }
  if (suit2 == 3) {
    suit2 = "<img src='resources/images/diamond.png"
  }
  if (suit2 == 4) {
    suit2 = "<img src='resources/images/spade.png"
  }

  if (number1 < 11) {

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

      $playerSuit.append(suit1);

    };

  } else {

    if (number1 == 11) {
      numberImg1 = "<img src='resources/images/jack.png'/>";
      $playerSuit.append(suit1);
      $playerNumber.html(numberImg1);
    }

    if (number1 == 12) {
      numberImg1 = "<img src='resources/images/queen.png'/>";
      $playerSuit.append(suit1);
      $playerNumber.html(numberImg1);
    }

    if (number1 == 13) {
      numberImg1 = "<img src='resources/images/king.png'/>";
      $playerSuit.append(suit1);
      $playerNumber.html(numberImg1);
    }
  }
  if (number2 < 11) {

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

      $computerSuit.append(suit2);

    };

  } else {

    if (number2 == 11) {
      numberImg2 = "<img src='resources/images/jack.png'/>";
      $computerSuit.append(suit2);
      $computerNumber.html(numberImg2);
    }

    if (number2 == 12) {
      numberImg2 = "<img src='resources/images/queen.png'/>";
      $computerSuit.append(suit2);
      $computerNumber.html(numberImg2);
    }

    if (number2 == 13) {
      numberImg2 = "<img src='resources/images/king.png'/>";
      $computerSuit.append(suit2);
      $computerNumber.html(numberImg2);
    }
  }
  for (i = 0; i < number1; i++) {
    $playerSuit.append(suit1);
  };
  for (i = 0; i < number2; i++) {
    $computerSuit.append(suit2);
  }

  playedCards.push(player[0]);
  playedCards.push(computer[0]);

  player.splice(0, 1);
  computer.splice(0, 1);

  console.log("call greater");
  greater();
}

function war() {
  $winner.html("Time for a war!")
  console.log("war");
  for (i = 0; i < 3; i++) {
    playedCards.push(player[0]);
    playedCards.push(computer[0]);
    player.splice(0, 1);
    computer.splice(0, 1);
  }
  $playerSuit.css("display", "none");
  $computerSuit.css("display", "none");
  numberImg1 = "<img style='height:14rem;' src='resources/images/card.png'/>";
  numberImg2 = "<img style='height:14rem;' src='resources/images/card.png'/>";
  console.log("call greater");
  greater();
}

function greater() {
  console.log("greater");
  console.log("in greater how many played ", playedCards.length);
  if (number1 > number2) {
    $winner.html("Player Wins");
    console.log("player win");
    for (i = 0; i < playedCards.length; i++) {
      player.push(playedCards[i])
    }
  } else if (number1 < number2) {
    $winner.html("Computer Wins");
    console.log("player loss");
    for (i = 0; i < playedCards.length; i++) {
      computer.push(playedCards[i])
    }
  } else if (number1 == number2) {
    console.log("call war");
    war();
  }
  playedCards = [];
  $playerCards.html(player.length);
  $computerCards.html(computer.length);
}

$draw.on("click", function() {
  console.log("Draw")
  assign();
})

function endgame() {
  if (player.length == 0) {
    $winner.html("Game over </br> You have no more cards </br> You lose");
    console.log("Player lost the match");
    $playerNumber.html("Lose");
  }
  if (computer.length == 0) {
    $winner.html("Game over </br> Computer has no more cards </br> You win");
    console.log("Player won the match")
    $playerNumber.html("Win");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<html>

<head>
  <title>War</title>
  <link href="resources/css/style.css" rel="stylesheet" type="text/css">
  <link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="resources/images/favicon.ico" type="image/x-icon">
</head>

<body>
  <div id="gameboard" class="flex">
    <div class="flexColumn">
      <h1>War</h1>
      <h2 id="winner">Winner</h2>
      <h3>Player has <span id="playerCards"></span> cards.</h3>
      <h3>Computer has <span id="computerCards"></span> cards.</h3>
    </div>
    <div class="flex">
      <div id="player" class="flexColumn player">
        <h2>Player</h2>
        <div id="playerNumber" class="number">
        </div>
        <div id="playerSuit" class="suit">
        </div>
      </div>
      <h2 id="draw">Draw</h2>
      <div id="computer" class="flexColumn player">
        <h2>Computer</h2>
        <div id="computerNumber" class="number">
        </div>
        <div id="computerSuit" class="suit">
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

Here’s a screenshot of my project before clicking Draw

Here’s a screenshot of my project after clicking Draw, logs included (Yeah that’s what my face cards look like, I was too lazy to actually draw a jack, queen or king)

Oh, and as for an MRE, here’s a snippet from my own code that I think reproduces it (it may be too long, but this is what I know works).

    var player = [];
    var computer = [];
    var playedCards = [];
    var cards = [];
    var $player = $("#player");
    var $playerNumber = $("#playerNumber");
    var $computer = $("#computer");
    var $computerNumber = $("#computerNumber");
    var $draw = $("#draw");
    var $winner = $("#winner");
    var number1;
    var number2;

    function assign(){
    console.log("Assign");
    if(player.length == 0 || computer.length == 0){
        endgame();
        return;
    }
    $playerSuit.empty();
    $computerSuit.empty();
    var number1=player[0][0];
    var number2=computer[0][0];
    $playerNumber.html(number1);
    $computerNumber.html(number2);
    console.log("call greater");
    greater();
    }

    function greater(){
    console.log("greater");
    console.log("in greater how many played ", playedCards.length);
    if (number1 > number2) {
        $winner.html("Player Wins");
        console.log("player win");
        for (i=0; i<playedCards.length; i++) {
            player.push(playedCards[i])
        }
    } else if (number1 < number2) {
        $winner.html("Computer Wins");
        console.log("player loss");
        for (i=0; i<playedCards.length; i++) {
            computer.push(playedCards[i])
        }
    } else if (number1 == number2) {
        console.log("call war");
        war();
        }
    playedCards = [];
    }
    
    function endgame(){
    if(player.length == 0){
    $winner.html("Game over </br> You have no more cards </br> You lose");
    console.log("Player lost the match");
    $playerNumber.html("Lose");
    }
    if(computer.length == 0){
    $winner.html("Game over </br> Computer has no more cards </br> You win");
    console.log("Player won the match")
    $playerNumber.html("Win");
    }
    }
    
    function war(){
    $winner.html("Time for a war!")
    console.log("war");
        for (i=0; i<3; i++){
            playedCards.push(player[0]);
            playedCards.push(computer[0]);
        }
        console.log("call greater");
        greater();
    }
    
    $draw.on("click", function() {
    console.log("Draw")
    assign();
    })

Let’s suppose I have following trying.js file:

import {BaseException} from "../public/libs/pdfjs/build/pdf";

let __webpack_exports__ = globalThis.pdfjsLib = {};

class AbortException extends BaseException {
  constructor(msg) {
    super(msg, "AbortException");
  }
}

let __webpack_exports__AbortException = __webpack_exports__.AbortException;

export { __webpack_exports__AbortException as AbortException }

I have following .babelrc file:

{
  "presets": ["@babel/preset-env"]
}

I have following babel.config.js file:

const presets = [
    [
        "@babel/preset-env",
        {
            "modules": "commonjs",
            targets: {
                edge: "17",
                firefox: "60",
                chrome: "67",
                safari: "11.1",
            },
            useBuiltIns: "usage",
            corejs: "3.6.4",
        },
    ],
];

module.exports = { presets };

I have following package.json file:

...
"browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/cli": "^7.25.7",
    "@babel/core": "^7.25.7",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-transform-optional-chaining": "^7.25.7",
    "@babel/plugin-transform-private-property-in-object": "^7.25.7",
    "@babel/preset-env": "^7.25.7"
  },

The problem: When I try to transpile the code like this:
npx babel ./src/trying.js –out-dir ./
My last line

export { __webpack_exports__AbortException as AbortException }

won’t get transpiled.
Do you know why?

Please help me, as I’m stuck on this problem. I tried to run
npx babel ./src/trying.js –out-dir ./
but my export line won’t get transpiled.
I have to manually insert the code so that it compiles correctly.

This is part of a larger project, and I don’t want to manually insert the
export { __webpack_exports__AbortException as AbortException }
everytime I compile the react.js project.

Let me know if you need something else.
Thanks

When I click the edit button after inputting the task title and task desc in the form, it returns "No Title and No Description." in the console, it returns an empty string. Whereas the priority and due updates.

So I click the div that displays the added task details to edit it.

What I expect to happen:

• The task details: (Task Title, Task Desc, Due Date, Priority) will change once I hit the edit button

What actually happend:

• The Due Date and Priority changed. The Task Title and Task Description did not and displayed “No Title” & “No Description”

Form module:

import { Due } from "./due";
import { Task } from './task';
import { addTask } from "./taskStorage";
import { createPriorityDropdown } from './prioritylist';
import taskpage from "./taskpage";
import flatpickr from "flatpickr";
import { showTaskModal } from "./modal";
import { updateTaskInStorage } from "./updateTaskInStorage"
    
export default function showForm(task) {
  // the rest of the code
    
  const titleInput = document.createElement('input');
  titleInput.type = 'text';
  titleInput.id = 'titleInput';
  titleInput.placeholder = 'Task Name';
  titleInput.required = true;
  titleInput.value = task ? task.task_name : '';
  minicontainer.appendChild(titleInput);
    
  const descInput = document.createElement('input');
  descInput.type = 'text';
  descInput.id = 'descInput';
  descInput.placeholder = 'Task Description';
  descInput.required = true;
  descInput.value = task ? task.task_desc : '';
  minicontainer.appendChild(descInput);
    
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    const task_name = document.getElementById('titleInput').value;
    const task_desc = document.getElementById('descInput').value;
    const task_priority_value = task_priority.textContent !== 'Priority' ?     task_priority.textContent : null;
    const task_dueDate = document.getElementById('dueDateInput').value;
    
    console.log('Task name:', task_name);  
    console.log('Task description:', task_desc);  
    
    // the rest of the code
    
    if (task) {
      console.log('Task being edited:', task);
      const updatedTask = new Task(task.id, task_name, task_desc, task_priority_value, new Due(task_dueDate));
      console.log('Updated task:', updatedTask);
      updateTaskInStorage(updatedTask);
      displayTask(updatedTask);
    } else {
      const newTask = new Task(null, task_name, task_desc, task_priority_value, new Due(task_dueDate));
      addTask(newTask);
      displayTask(newTask);
    }
  });
    
  function displayTask(task) {
    const choosetask_container = document.querySelector('.task_containerdisplay');
    
    let taskElement = choosetask_container.querySelector(`[data-id="${task.id}"]`);
    
    if (!taskElement) {
      taskElement = document.createElement('div');
      taskElement.classList.add('task');
      taskElement.setAttribute('data-id', task.id); 
      choosetask_container.appendChild(taskElement);
    } else {
      // Clear the existing content before updating
      taskElement.innerHTML = '';
    }
    
    const taskcheckcontainer = document.createElement('div');
    taskcheckcontainer.classList.add('checker');
    taskElement.appendChild(taskcheckcontainer);
    
    const checkBox = document.createElement('input');
    checkBox.type = 'checkbox';
    taskcheckcontainer.appendChild(checkBox);
    
    checkBox.addEventListener("click", (event) => {
      event.stopPropagation();
      if (checkBox.checked) {
        choosetask_container.removeChild(taskElement);
      }
    })
    
    const taskName = document.createElement('p');
    taskName.classList.add('taskName');
    taskName.textContent = task.task_name ? task.task_name : "No Title";
    taskcheckcontainer.appendChild(taskName);
    
    const taskDesc = document.createElement('p');
    taskDesc.classList.add('taskDesc');
    taskDesc.textContent = task.task_desc ? task.task_desc : "No Description";
    taskElement.appendChild(taskDesc);
    
    // rest of the code
    
    taskElement.addEventListener("click", () => {
      showTaskModal(task);
    });
    
    choosetask_container.appendChild(taskElement);
  }

I want to remove space only when user selects text from dropdown,I am not able to do that.
in option it should display as it is.

<select id="input_13">
  <option label="&nbsp;&nbsp;&nbsp;&nbsp;sw" value="number:1902">&nbsp;&nbsp;&nbsp;&nbsp;sw</option>
  <option label="&nbsp;&nbsp;&nbsp;&nbsp;s" value="number:1903">&nbsp;&nbsp;&nbsp;&nbsp;s</option>
  <option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dsdsdsds" value="number:1906">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dsdsdsds</option>
  <option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swww" value="number:1905">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swww</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  /*  $("#input_13").find("option").each(function (index, option) {
        $(option).html($(option).html().replace(/&nbsp;/g,''));
 }); */
  $('#input_13').change(function() {
    // Get the selected option
    var selectedOption = $(this).find('option:selected');
    // Get the current text, trim spaces, and set it back
    var trimmedText = $.trim(selectedOption.text());
    selectedOption.text(trimmedText);
    // Optionally, update the value attribute if needed
    // $(this).val(trimmedText);
    console.log($("#input_13 option:selected").text())
  });
</script>

Here it should display trimmed value in selection.

Note:- Drop-down Selected value should be display only when displayed and in option it should display as it is.

I have a scenario where it might happen that user produces events rapidly (hovers, e.g.). Each hover sends a message to web worker to do some calculation.
Each new message should cancel the previous one and I need to be sure only last one will be processed and its result returned back to UI thread.

How can I make sure that web worker processes only last message it receives?
I would like to avoid any debounce time as its important that delay is minimal.

I am trying to animate a paragraph and an arrow, I am trying to explain my animation here:

1. the paragraph div will appear smoothly
2. with slight delay the arrow will appear from the down side
3. they will stay together for suppose 3 seconds.
4. they should disappear smoothly disappear together.
   (and this loop will continue )

Here somehow I achieved the desired result but only for the first iteration, after it the paragraph is being shown but arrow is not coming.

HTML Page

const messages = document.querySelectorAll('.email-opt-msg');
let currentIndex = 0;

function showMessage(index) {
  const message = messages[index];
  const arrow = message.querySelector('.icon-arrow-up');

  message.classList.add('active');
  setTimeout(() => {
    arrow.classList.add('visible');
  }, 500);
}

function hideMessage(index) {
  const message = messages[index];
  const arrow = message.querySelector('.icon-arrow-up');

  arrow.style.transition = 'opacity 0.3s ease-out';
  arrow.style.opacity = '0';
  message.classList.remove('active');
}

function animateMessages() {
  hideMessage(currentIndex);
  setTimeout(() => {
    currentIndex = (currentIndex + 1) % messages.length;
    showMessage(currentIndex);
    setTimeout(animateMessages, 3000);
  }, 1000);
}

showMessage(0);
setTimeout(animateMessages, 3000);

body {
  font-family: sans-serif;
}

.email-opt-container {
  position: relative;
  height: 50px;
  overflow: hidden;
}

.email-opt-msg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background: lightblue;
}

.email-opt-msg.active {
  opacity: 1;
}

.icon-arrow-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  margin-right: 10px;
}

.icon-arrow-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.opt-msg-para {
  margin: 0;
}

<div class="email-opt-container">
  <div class="email-opt-msg">
    <img class="icon-arrow-up" width="24" height="24" src="https://img.icons8.com/ios-filled/50/long-arrow-up.png" alt="long-arrow-up"/>
    <p class="opt-msg-para">30% bessere Chancen auf einen Arbeitsplatz*</p>
  </div>
  <div class="email-opt-msg">
    <img class="icon-arrow-up" width="24" height="24" src="https://img.icons8.com/ios-filled/50/long-arrow-up.png" alt="long-arrow-up"/>
    <p class="opt-msg-para">42% mehr Rückmeldungen von HR-Teams*</p>
  </div>
  <div class="email-opt-msg">
    <img class="icon-arrow-up" width="24" height="24" src="https://img.icons8.com/ios-filled/50/long-arrow-up.png" alt="long-arrow-up"/>
    <p class="opt-msg-para">50% bessere Chancen auf den Traumjob*</p>
  </div>
</div>

I want to achieve this output:

Wanted to understand what does this below syntax do and what is it called.

h.hj=h.hj||function(){ (h.hj.q=h.hj.q||[]).push(arguments) };

Wanted to understand what purpose does h.hj=h.hj serve before the OR condition.

Want to understand the purpose of the syntax and why its written that way.

In my JavaScript Class I have this constructor:

constructor(container: Element, config: MyConfig) {
    this.container = container;
    this.config = config;
  }

I used that in my React app like:

foo = new MyHelper(myRef.current!, {
        id,
        fooBar
      });
    });

Where myRef.current is a React ref element:

const myRef = useRef<HTMLDivElement>(null);

Now I need to use this JavaScript Class in another app (not React). How to use that container element with plain JavaScript, without useRef from React.

[[[enter image description here](https://i.sstatic.net/gYAqWVxI.png)](https://i.sstatic.net/OVUNxL18.png)](httpsenter image description here://i.sstatic.net/vTg7pw9o.png)

when i running my root config after installing by create-single-spa –moduleType root-config commmand.After this i started my root config and i go to browser i see the error showing donexfdz-root-config-root-config.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at donexfdz-root-config-root-config.js:1:1)
im working on this for a week . I tried to change the webpack to emit commonjs that also didnt work by changing the

I’m using a method because I’m looping through datasets from an API. 1 key have multiple different lines

  generateRainbowColor(index) {
    const hue = (index * 360 / this.list.length) % 360;
    return `hsl(${hue}, 100%, 50%)`;
  },
    generateFill() {
      const baseColors = ["#FFFFFF", "#94ddf7", "#94ddf7", "#FFFFFF", "#94ddf7", "#FFFFFF"];
      const baseOpacity = [0, 0, 0.5, 1, 0.2, 1];
      const fillColors = [];
      const fillOpacity = [];
      const stops = [0, 50, 100];

      for (let i = 0; i < this.list.length; i++) {
        for (let j = 0; j < baseColors.length; j++) {
          fillColors.push(baseColors[j]);
          fillOpacity.push(baseOpacity[j]);
        }
      }

      return {
        colors: fillColors,
        opacity: fillOpacity,
        type: "solid",
        stops: stops,
      };
    },
    generateStroke() {
    const baseWidth = [2, 2, 1, 1, 1, 1];
    const strokeColors = [];
    const strokeWidth = [];

    for (let i = 0; i < this.list.length; i++) {
      const color = this.generateRainbowColor(i);
      for (let j = 0; j < baseWidth.length; j++) {
        strokeColors.push(color);
        strokeWidth.push(baseWidth[j]);
      }
    }

    return {
      show: true,
      colors: strokeColors,
      width: strokeWidth
    };
  },

Graph Image using ApexChart.js

As you can see, there supposed to be a line of graphs under it. but it blocked the lines because of the opacity of color white. how do I fix this?

I have tried to adjust the opacity and change the colors but nothing seems to be working. Is there any other way to fix this problem by adjusting the opacity or anything?