Category: javascript

I am currently working on a sonic themed trivia quiz, everything is currently going swimmingly except for one thing…I can’t figure out how to make a score counter, and I can’t seem to find a tut on how to make one, I would rly appreciate it if someone could shed some light on my situation…plz?

here is my code curently:

document.querySelector(".wrong-answer").addEventListener('click', incorrect)
document.querySelector(".wrong-answer-two").addEventListener('click', incorrect)
document.querySelector(".right-answer").addEventListener('click', correct)
document.querySelector(".wrong-answer-three").addEventListener('click', incorrect)


function incorrect() {
    alert('WRONG ANSWER')
}

function correct() {
    alert('GREAT JOB!')
}

What do I need to learn to be able to type in an input box and get it to display below on the same page instantaneously, like the app picture below does. Thank you

I’ve a situation with a dashboard page where I’m using AmCharts 4 Map Chart in two different tabs.

When I render each of them by the first time, both get labels with the size I’ve defined, but when I open any of them for the second time and on, the labels get giant and makes the map unreadable.

I can’t share the customer code, but I tried to provide a code pen with a similar behavior here

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

mapData = [{
    id: 'US-AL',
    value: 40223504
  },
  {
    id: 'US-AK',
    value: 30345487
  },
  {
    id: 'US-AZ',
    value: 22359251
  },
  {
    id: 'US-AR',
    value: 20448194
  },
  {
    id: 'US-CA',
    value: 13092796
  },
  {
    id: 'US-CZ',
    value: 12807072
  },
  {
    id: 'US-CO',
    value: 11878330
  },
  {
    id: 'US-CT',
    value: 11019186
  },
  {
    id: 'US-DE',
    value: 10710558
  },
  {
    id: 'US-DC',
    value: 10135438
  },
  {
    id: 'US-FL',
    value: 9438124
  },
  {
    id: 'US-GA',
    value: 8820504
  },
  {
    id: 'US-GU',
    value: 7999503
  },
  {
    id: 'US-HI',
    value: 7379346
  },
  {
    id: 'US-ID',
    value: 7174604
  },
  {
    id: 'US-IL',
    value: 7080262
  },
  {
    id: 'US-IN',
    value: 6876047
  },
  {
    id: 'US-IA',
    value: 6298325
  },
  {
    id: 'US-KS',
    value: 6204710
  },
  {
    id: 'US-KY',
    value: 5997070
  },
  {
    id: 'US-LA',
    value: 5955737
  },
  {
    id: 'US-ME',
    value: 5827265
  },
  {
    id: 'US-MD',
    value: 5266343
  },
  {
    id: 'US-MA',
    value: 5097641
  },
  {
    id: 'US-MI',
    value: 4695071
  },
  {
    id: 'US-MN',
    value: 4555777
  },
  {
    id: 'US-MS',
    value: 4359110
  },
  {
    id: 'US-MO',
    value: 4021753
  },
  {
    id: 'US-MT',
    value: 3615499
  },
  {
    id: 'US-NE',
    value: 3423935
  },
  {
    id: 'US-NV',
    value: 3233572
  },
  {
    id: 'US-NH',
    value: 3225832
  },
  {
    id: 'US-NJ',
    value: 3040207
  },
  {
    id: 'US-NM',
    value: 2963308
  },
  {
    id: 'US-NY',
    value: 2959473
  },
  {
    id: 'US-NC',
    value: 2135024
  },
  {
    id: 'US-ND',
    value: 2002052
  },
  {
    id: 'US-OH',
    value: 1920562
  },
  {
    id: 'US-OK',
    value: 1775932
  },
  {
    id: 'US-OR',
    value: 1483762
  },
  {
    id: 'US-PA',
    value: 1395847
  },
  {
    id: 'US-PR',
    value: 1372559
  },
  {
    id: 'US-RI',
    value: 1112668
  },
  {
    id: 'US-SC',
    value: 1110822
  },
  {
    id: 'US-SD',
    value: 1017551
  },
  {
    id: 'US-TN',
    value: 908414
  },
  {
    id: 'US-TX',
    value: 811044
  },
  {
    id: 'US-UT',
    value: 740339
  },
  {
    id: 'US-VT',
    value: 648279
  },
  {
    id: 'US-VI',
    value: 580817
  },
  {
    id: 'US-VA',
    value: 740339
  },
  {
    id: 'US-WA',
    value: 740339
  },
  {
    id: 'US-WV',
    value: 740339
  },
  {
    id: 'US-WI',
    value: 740339
  },
  {
    id: 'US-WY',
    value: 740339
  }
];


//MAP 1
// Create map instance
var chart = am4core.create("chartdiv1", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_usaHigh;

// Set projection
chart.projection = new am4maps.projections.AlbersUsa();

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;
polygonSeries.calculateVisualCenter = true;

// Add some data
polygonSeries.data = mapData;

// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
console.log('pt', polygonTemplate);
polygonTemplate.tooltipText = "{name} : {value}";
polygonTemplate.fill = am4core.color("#74B266");

// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

var labelSeries = chart.series.push(new am4maps.MapImageSeries());
var labelTemplate = labelSeries.mapImages.template.createChild(am4core.Label);
labelTemplate.horizontalCenter = 'middle';
labelTemplate.verticalCenter = 'middle';
labelTemplate.fontSize = 10;
labelTemplate.interactionsEnabled = false;
labelTemplate.nonScaling = false;

polygonSeries.events.on('inited', () => {
  for (var i = 0; i < mapData.length; i++) {
    const itemId = mapData[i]['id'].toString();
    var polygon = polygonSeries.getPolygonById(itemId);
    if (polygon) {
      var label = labelSeries.mapImages.create();
      var state = itemId.split('-').pop();
      label.longitude = polygon.visualLongitude;
      label.latitude = polygon.visualLatitude;
      label.children.getIndex(0).text = `${mapData[i].value} n ${state}`;
    }
  }
})
// MAP 1 END

//MAP 2
// create second map instance
var chart2 = am4core.create('chartdiv2', am4maps.MapChart);
chart2.geodata = am4geodata_usaHigh;

// Set projection
chart2.projection = new am4maps.projections.AlbersUsa();

// Create map polygon series
var polygonSeries2 = chart2.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries2.useGeodata = true;
polygonSeries2.calculateVisualCenter = true;

// Add some data
polygonSeries2.data = mapData;

// Configure series
var polygonTemplate2 = polygonSeries2.mapPolygons.template;
console.log('pt', polygonTemplate2);
polygonTemplate2.tooltipText = "{name} : {value}";
polygonTemplate2.fill = am4core.color("#6495ED");

// Create hover state and set alternative fill color
var hs = polygonTemplate2.states.create("hover");
hs.properties.fill = am4core.color("#0000FF");

var labelSeries2 = chart2.series.push(new am4maps.MapImageSeries());
var labelTemplate2 = labelSeries2.mapImages.template.createChild(am4core.Label);
labelTemplate2.horizontalCenter = 'middle';
labelTemplate2.verticalCenter = 'middle';
labelTemplate2.fontSize = 10;
labelTemplate2.interactionsEnabled = false;
labelTemplate2.nonScaling = false;

polygonSeries2.events.on('inited', () => {
  for (var i = 0; i < mapData.length; i++) {
    const itemId = mapData[i]['id'].toString();
    var polygon = polygonSeries2.getPolygonById(itemId);
    if (polygon) {
      var label = labelSeries2.mapImages.create();
      var state = itemId.split('-').pop();
      label.longitude = polygon.visualLongitude;
      label.latitude = polygon.visualLatitude;
      label.children.getIndex(0).text = `${mapData[i].value} n ${state}`;
    }
  }
})

//MAP 2 END

:root {
  --theme-yellow: #FEE715FF;
  --theme-black: #101820FF;
  --theme-gray: #8892B0;
}

body {
  background-color: var(--theme-black);
}


/* SECTION VERTICAL TABS */

#experienceTab.nav-pills .nav-link.active {
  color: var(--theme-yellow) !important;
  background-color: transparent;
  border-radius: 0px;
  border-left: 3px solid var(--theme-yellow);
}

#experienceTab.nav-pills .nav-link {
  border-radius: 0px;
  border-left: 2px solid var(--theme-gray);
}

.date-range {
  letter-spacing: 0.01em;
  color: var(--theme-gray);
}


/* STUB  LINKS */

a {
  color: var(--theme-gray);
  transition: 0.3s eas-in-out;
}

a:hover {
  color: var(--theme-yellow);
}

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

<head>
  <meta charset="UTF-8">
  <title>CodePen - amcharts 4 scale label</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.13.0/css/mdb.min.css'>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="row p-5">
    <div class="col-md-2 mb-3">
      <ul class="nav nav-pills flex-column" id="experienceTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#snit" role="tab" aria-controls="home" aria-selected="true">Map 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#devs" role="tab" aria-controls="profile" aria-selected="false">Map 2</a>
        </li>
      </ul>
    </div>
    <!-- /.col-md-4 -->
    <div class="col-md-10">
      <div class="tab-content" id="experienceTabContent">

        <div class="tab-pane fade show active text-left text-light" id="snit" role="tabpanel" aria-labelledby="home-tab">
          <h3>Map 1</h3>
          <div class='chartdiv1'></div>
        </div>

        <div class="tab-pane fade text-left text-light" id="devs" role="tabpanel" aria-labelledby="profile-tab">
          <h3>Map 2</h3>
          <div class='chartdiv2'></div>
        </div>
      </div>
      <!--tab content end-->
    </div>
    <!-- col-md-8 end -->
  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.13.0/js/mdb.min.js'></script>
  <script src='https://cdn.amcharts.com/lib/4/core.js'></script>
  <script src='https://cdn.amcharts.com/lib/4/maps.js'></script>
  <script src='https://cdn.amcharts.com/lib/4/geodata/usaHigh.js'></script>
  <script src="./script.js"></script>

</body>

</html>

Any help would be really appreciated.

I have an array with products in it. Each product is a separate block (card) on the page which appears after user uses checkboxes on the same page. The product cards are buttons. What I need to do is that when user clicks on any product card it opens a popup which is linked to said card. Like if user clicks on ‘product1 card’ it opens ‘product1 popup’, ‘product2 card’ opens ‘product2 popup’ etc.

I’m new to JS so i would appreciate any help, thanks!

Here is how I tried to do it, but it doesn’t work.

// Creating an array and put an individual popup code as 'popupHtml'
function showProducts(selectedValues) {
  const resultsList = document.querySelector('.results__list');
  const products = [
    {
      id: 'giorgiocasa',
      name: 'Giorgiocasa',
      values: ['cont', 'high', 'mirgroup'],
      popupHtml: `<div class="popup__container">
         <button class="popup__close-button" type="button"></button> 
         <img src="./images/giorgiocasa2.png" class="popup__image" alt="giorgiocasa"> 
         <div class="popup__text"> 
          <p class="popup__title">Giorgiocasa</p> 
          <a class="popup__link" href="#">Официальный сайт</a> 
          <p class="popup__description">Представительство: <span>MIRGROUP</span></p> 
          <p class="popup__subtitle">Условия работы</p> 
          <p class="popup__description">Скидка: 50%
            <br>Предоплата: 50%
            <br>Сроки производства: 45 рабочих дней
          </p> 
        </div> 
      </div>`
    },
    {
      id: 'piermaria',
      name: 'Piermaria',
      values: ['classic', 'midHigh', 'mirgroup'],
      popupHtml: `<div class="popup__container">
         <button class="popup__close-button" type="button"></button> 
         <img src="./images/giorgiocasa2.png" class="popup__image" alt="giorgiocasa"> 
         <div class="popup__text"> 
          <p class="popup__title">Piermaria</p> 
          <a class="popup__link" href="#">Официальный сайт</a> 
          <p class="popup__description">Представительство: <span>MIRGROUP</span></p> 
          <p class="popup__subtitle">Условия работы</p> 
          <p class="popup__description">Скидка: 50+3%
            <br>Предоплата: 50%, заказ до 2000 евро - 100%
            <br>Сроки производства: 45 рабочих дней
          </p> 
        </div> 
      </div>`
    },
];
  let matchingProducts = [];

// Creating and adding a product card or 'no results' to the page
if (selectedValues.length === 0) {
    const noResultsHtml = '<p class="results__text">НЕТ РЕЗУЛЬТАТОВ</p>';
    resultsList.innerHTML = noResultsHtml;
    return;
  }

  products.forEach(function(product) {
  let matchCount = 0;
  selectedValues.forEach(function(value) {
  if (product.values.includes(value)) {
  matchCount++;
  }
  });
  if (matchCount === selectedValues.length) {
  matchingProducts.push(product);
  }
  });
  
  resultsList.innerHTML = '';
  

  if (matchingProducts.length === 0) {
  const noResultsHtml = '<p class="results__text">НЕТ РЕЗУЛЬТАТОВ</p>';
  resultsList.insertAdjacentHTML('beforeend', noResultsHtml);
  } else {
  let html = '';
  matchingProducts.forEach(function(product) {
  html += `<li>
              <button class="results__card" type="button" id="${product.id}"><span class="results__card-text">${product.name}</span></button>
            </li>`;
  });
  resultsList.insertAdjacentHTML('beforeend', html);
  }
  }

// results__card are all button tags
const buttons = document.querySelectorAll('.results__card');

// Trying to open a popup linked to the specific product card after click 
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const popupContent = button.dataset.popupHtml;
    
    const popup = document.createElement('div');
    popup.classList.add('popup-container');
    popup.innerHTML = popupContent;

    const container = document.querySelector('.popup');
    container.appendChild(popup);
  });
});

const resultsCards = document.querySelectorAll('.results__card');

resultsCards.forEach(function(card) {
  card.addEventListener('click', function() {
    const productId = this.dataset.productId;
    const product = products.find(function(p) {
      return p.id === productId;
    });

// My popup opens with popup_opened class and closes with adding popup_closed class.
    const popup = document.querySelector('.popup');
    popup.innerHTML = product.popupHtml;
    popup.classList.remove('popup_closed');
    popup.classList.add('popup_opened');
  });
});

I have Chart js radar diagram with 24 labels.

I need to rotate every next label text to 15 degrees from previous: ‘Label 1’ is on the top and it’s vertical, ‘Label 2’ rotated on 15 degrees clockwise etc.

Is there some option for this?

Here’s the code:

import React from 'react';
import { Radar } from 'react-chartjs-2';
import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend } from 'chart.js';

const data = {
    labels: [ 'Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8', 'Label 9', 'Label 10', 'Label 11', 'Label 12', 'Label 13', 'Label 14', 'Label 15', 'Label 16', 'Label 17', 'Label 18', 'Label 19', 'Label 20', 'Label 21', 'Label 222', 'Label 23', 'Label 24' ],
    datasets: [
        {
            label: 'Dataset 1',
            data: [65, 59, 90, 81, 56, 65, 59, 90, 81, 56, 65, 59, 90, 81, 56, 65, 59, 90, 81, 56,],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
        },
    ],
};

const options: any = {
    scales: {
        r: {            
            ticks: {
                display: false 
            },
            angleLines: {
                display: true,
                color: '#90B7DA',
                borderDash: [11, 10],
                borderDashOffset: 5,
                lineWidth: 1
            },
            angle: 115,
            suggestedMin: 0,
            suggestedMax: 100,
            pointLabels: {
                font: {
                    family: 'Open Sans',
                    size: 10,
                    weight: '300',
                },
                color: '#90B7DA',
                
            }
        }
    },
    plugins: {
        legend: {
            display: false,
        }
    },

};

const RadarChart = () => (

    <Radar data={data} options={options} />
);

export default RadarChart;

I am trying to work with github api to get access to raw README.md file using /repos/{owner}/{repo}/readme, I am able to make the call using thunderclient in vscode and seeing the raw file.

but when I am making the same call from within my react application I am receiving a json object of this form

{
  "name": "README.md",
  "path": "README.md",
  "sha": "...",
  "size": 9,
  "url": "https://api.github.com/repos/anubhavadarsh/Litaci/contents/README.md?ref=master",
  "html_url": "https://github.com/anubhavadarsh/Litaci/blob/master/README.md",
  "git_url": "https://api.github.com/repos/anubhavadarsh/Litaci/git/blobs/592c92302634be24522f96f3ed6649f389f1aa0d",
  "download_url": "https://raw.githubusercontent.com/anubhavadarsh/Litaci/master/README.md",
  "type": "file",
  "content": "IyBMaXRhY2kKn",
  "encoding": "base64",
  "_links": {
    "self": "https://api.github.com/repos/anubhavadarsh/Litaci/contents/README.md?ref=master",
    "git": "https://api.github.com/repos/anubhavadarsh/Litaci/git/blobs/592c92302634be24522f96f3ed6649f389f1aa0d",
    "html": "https://github.com/anubhavadarsh/Litaci/blob/master/README.md"
  }
}

PS: I tried with a public repository that is not mine and I am able to get the raw readme, but my own repository still returns this.

I was trying to make a JavaScript script to remove all the html elements within the <body> element (keeping the <body>, but emptying it).

I state that I am a neophyte. Is it possible to create a tool that scans a game lobby, like the poker one, where there are 1vs1 matches? Having a table with nicknames of players, the tool should detect by scanning the tables when these (players) sign up.
If yes, how? surely the tool works on the client and not on the server. I thought about a possible use of mysql, ocr.

thanks

in the lobby they use this kind of tool, and even having found the nick, they self-register against it in a few thousandths of a second.

I thought I got a complete understanding of NodeJS event loop and its phases, but apparently not.

When are the handlers of the “data”, “close” and “end” event handlers executed? In which event loop phase or task queue?

The question is straightforward, but let me explain what I expect and what I don’t understand.

Let’s consider the following code (Node 19).

const stream = require('stream');

const readable = new stream.Readable({ read() {} });

// 1st PUSH
setImmediate(() => console.log('Immediate log 1'));
process.nextTick(() => console.log('Next tick log 1'));
queueMicrotask(() => console.log('Microtask log 1'));
readable.push(Buffer.from([1]));
console.log('Pushed data # 1');

// 2nd PUSH
setImmediate(() => console.log('Immediate log 2'));
process.nextTick(() => console.log('Next tick log 2'));
queueMicrotask(() => console.log('Microtask log 2'));
readable.push(Buffer.from([2]));
console.log('Pushed data # 2');

console.log('Attaching handlers....');
readable.on('data', data => console.log('Data received:', data))
    .on('end', () => console.log('End received'))
    .on('close', () => console.log('Close received'))
console.log('Handlers attached');

// 3RD PUSH
setImmediate(() => console.log('Immediate log 3'));
process.nextTick(() => console.log('Next tick log 3'));
queueMicrotask(() => console.log('Microtask log 3'));
readable.push(Buffer.from([3]));
console.log('Pushed data # 3');

// 4TH PUSH
setImmediate(() => console.log('Immediate log 4'));
process.nextTick(() => console.log('Next tick log 4'));
queueMicrotask(() => console.log('Microtask log 4'));
readable.push(Buffer.from([4]));
console.log('Pushed data # 4');

// NULL PUSH
setImmediate(() => console.log('Immediate log null'));
process.nextTick(() => console.log('Next tick log null'));
queueMicrotask(() => console.log('Microtask log null'));
readable.push(null);
console.log('Pushed null');

console.log('----END OF MAIN CODE----');

And here’s the output:

Pushed data # 1
Pushed data # 2
Attaching handlers....
Handlers attached
Pushed data # 3
Pushed data # 4
Pushed null
----END OF MAIN CODE----
Next tick log 1
Next tick log 2
Data received: <Buffer 01>
Data received: <Buffer 02>
Data received: <Buffer 03>
Data received: <Buffer 04>
Next tick log 3
Next tick log 4
Next tick log null
End received
Close received
Microtask log 1
Microtask log 2
Microtask log 3
Microtask log 4
Microtask log null
Immediate log 1
Immediate log 2
Immediate log 3
Immediate log 4
Immediate log null

I don’t understand how can be the 3rd and 4th data event handlers executed before my 3rd and 4th nextTick handlers event though I push data after I add my handlers to the nextTick queue.

For me, it’s like not the .push() but the .on('data') call somehow inserts a “listener-like” stuff into the nextTick queue, and it stays there in that place for all future data events. So anything I push to the nextTick queue after attaching the data event handler will be executed after the event handler, as you can see. It doesn’t make sense to me; I’d expect the .push() call to push the data event handler to the end of the nextTick queue.

What do I misunderstand here?

The “end” and “close” event handlers seem to make sense to me, since – as I can see – the .push(null) call pushes the handler to the end of the nextTick queue. However, initially I thought that – at least the “close” handler – is executed in the separate macrotask queue of close handlers, which comes after the immediate queue, but seemingly it’s not the case, am I right?

I’ve got a large google sheet with multiple tabs. Each tab contains a different “deal” and a list of salesfolks and what their commission percentage is for that deal, as well as their total cash commission. Each “deal” tab is structured identically, the only information that changes is

1. Which salespeople are on the deal
2. What their commission % is for the deal (1 person could have different percentages on different deals)

I want to create a separate sheet, or separate tab, whichever is easier, that shows every salesperson and what their total cash take-home was across all deals.

To do this, I somehow need to do a simple lookup across tabs. This is simple enough if you know all the tab names such as in this example, but in my scenario new tabs are being constantly added. So, while I can standardize the tab names, move them into their own sheet, etc. I will always have 1 tab/sheet per deal (though each tab will follow the same format).
Is there any way to merge data across all tabs in a google sheet without explicitly stating each tab name in the formula? I’m a decent programmer so perhaps App Scripts could help with this if it’s not possible with built-in formulas?

**TL;DR: **Merging data across all tabs dynamically in GSheets, is it possible?

Follow my style using awesome font:

Styled:

.bar-fields-car:before {font-family: "Font Awesome 6 Free"; content: 'f007';}

I want to consume styled component icons instead of font awesome

I have migrated from node.js 16.15.0 to 18.14.1.

Right now, I am having an error coming from babel-loader.js in a custom framework (just FYI for the react based advice) :

This is what I am having in the place where issue is coming:

var filename = function filename(source, identifier, options) {
  var hash = crypto.createHash("md4");
  var contents = JSON.stringify({
    source: source,
    options: options,
    identifier: identifier
  });

  hash.update(contents);

  return hash.digest("hex") + ".json.gz";
 };

As I understand, the origin of the issue comes from Webpack using the MD4 algorithm in its build process, which is no longer supported in the latest Node.js version. So I have updated the webpack version to 5.75.0 (doesn’t help at all) and also I decided to patch the babel-loader dependency, by switching the algorithm from md4 to md5:

var filename = function filename(source, identifier, options) {
  var hash;
  try {
    hash = crypto.createHash("md4");
  } catch (e) {
    console.warn('Crypto "md4" is not supported anymore by this Node version');
    hash = crypto.createHash("md5");
  }
  var contents = JSON.stringify({
    source: source,
    options: options,
    identifier: identifier
  });

  hash.update(contents);

  return hash.digest("hex") + ".json.gz";
};

I am not having this error anymore, BUT the content is not being rendered and I am having a lot of issues in the console. I believe it’s because I changed the way of hashing, but I also have to do the proper un-hashing in babel-loader.js. Will be super grateful for any advices on it

p.s.: please don’t advise to downgrade the node.js version

I have an array of objects like this:

myArray = [
    {itemOneKey: 'itemOneValue', itemTwoKey: 'itemTwoValue'},
    {itemThreeKey: 'itemThreeValue'}
];

I wish to turn it to a single object like this:

myObject = {
    itemOneKey: 'itemOneValue',
    itemTwoKey: 'itemTwoValue',
    itemThreeKey: 'itemThreeValue'
}

in TypeScript. Anyone have a clue how I can go about to achieve this?

I am using JSZip library on browser UI and having a “content” which I am passing as body for creating a zip.

var contentDiff: async function(content){
      zip = await JSZip.loadAsync(content, {base64: true});
      return zip.files;
},//other functions below this

Now, I am new but this “zip.files” comes as undefined in a later method call, even after calling await.
Kindly suggest what is missing in this js.

I tried different variations of async await and promises, but all in vain.

<template>
    <div class="carousel">
        {{ index}}
                <slot></slot>
         <button @click="next">Next</button>
    </div>

</template>
<script setup>
import { useSlots, onMounted, ref, onUpdated, provide} from 'vue';

const slots = useSlots()
const index = ref(0)
function next(){
    index.value = index.value + 1 == slots.default().length ? 0 : index.value + 1;
}
onUpdated(() => {
  const currentSlide = ref(slots.default()[index.value])
})
</script>

I’m creating my own carousel. I have const currentslide that equals the first object in my array by default.

I have to figure out how to provide and inject this const to my slot “Slide” and then make it conditionally rendered. It means that the current slide that is shown in my carousel is 0 by default but I can change by clicking on the button next

<template>
    <div class="slide">

        <slot/>
    </div>
    
</template>
<script>

</script>