PowerBI Embedded Bookmark – Api client Javascript

I’m embedding a Power BI report using the JavaScript API and want to know if there’s a way to set the Bookmark Pane to be collapsed by default when the report loads. Ideally, I’d like to control this programmatically so that users see the pane in a collapsed state initially, but can expand it if needed.

Is there any setting or method in the Power BI JavaScript API that allows configuring the initial state of the Bookmark Pane?

I use this code for see Bookmark Pane on my Embedded report :

   panes : {
      bookmarks: {
         visible: true 
      } 
    }

Thanks

How to Reduce Verbosity of IntelliSense for Node.js in VS Code?

I’m using Visual Studio Code to write Node.js code, and the IntelliSense suggestions for Node’s core modules are extremely verbose.

For example, when I write:

const http = require('http');

http.createServer();

and hover over createServer(), I get the following IntelliSense output:

function createServer<typeof http.IncomingMessage, typeof http.ServerResponse>(requestListener?: http.RequestListener<typeof http.IncomingMessage, typeof http.ServerResponse>): http.Server<typeof http.IncomingMessage, typeof http.ServerResponse> (+1 overload)

This verbose suggestion makes it difficult to read the method’s basic structure.

I would like IntelliSense to show a simplified version, such as:

function createServer(requestListener?: (request: IncomingMessage, response: ServerResponse) => void): Server

I’ve already tried configuring "typescript.inlayHints" settings and adding a jsconfig.json file to simplify IntelliSense, but it hasn’t had the desired effect.

Question: Is there a way to adjust VS Code settings or install specific plugins to reduce IntelliSense verbosity for Node.js functions, specifically to show only essential information?

Is there a way to call a function with different arguments depending on a condition in JS?

const rowsArray = Array.from(document.getElementsByClassName('row'));
const firstRowArray = Array.from(document.getElementsByClassName('1-row')),
  secondRowArray = Array.from(document.getElementsByClassName('2-row')),
  thirdRowArray = Array.from(document.getElementsByClassName('3-row'));

let wordBank = ['Table', 'Mouse', 'Regal', 'Floor', 'Horse', 'Pants', 'Water'];
let playersWord = '';
let hiddenWord = 'Regal';
let isWordWrong = false;
//let rowCount = 0;

function switchLetters(row) { // switch between letter inputs inside each row
  for (let i = 0; i < row.length; i++) {
    row[i].onkeyup = () => {

      if (row[0].value !== '') {
        row[1].focus();
      }
      if (row[1].value !== '') {
        row[2].focus();
      }
      if (row[2].value !== '') {
        row[3].focus();
      }
      if (row[3].value !== '') {
        row[4].focus();
      }
    }

    row[i].onkeydown = (e) => {

      if (row[1].value === '' && e.key === 'Backspace') {
        row[0].focus();
      } else if (row[2].value === '' && e.key === 'Backspace') {
        row[1].focus();
      } else if (row[3].value === '' && e.key === 'Backspace') {
        row[2].focus();
      } else if (row[4].value === '' && e.key === 'Backspace') {
        row[3].focus();
      }
    }
  }
}

switchLetters(firstRowArray);
switchLetters(secondRowArray);
switchLetters(thirdRowArray);


function switchRows(lastRow, nextRow) { // switch between rows if the conditions are met

  document.addEventListener('keydown', (e) => {
    if (!lastRow.every(checkValue) && e.key === 'Enter') {
      window.alert('Please fill the letters.');
    } else if (lastRow.every(checkValue) && e.key === 'Enter') {

      checkLetters(lastRow);

      if (isWordWrong) {
        return;

      } else {

        //rowCount++;

        lastRow.forEach(letter => {
          letter.setAttribute('disabled', '');
          letter.style.borderColor = 'white';
        })
        nextRow.forEach(letter => {
          letter.removeAttribute('disabled', '');
          letter.style.borderColor = 'black';
        })
        nextRow[0].focus();
        //console.log(rowCount)
      }
    }
  })
}

switchRows(firstRowArray, secondRowArray);
switchRows(secondRowArray, thirdRowArray);
switchRows(thirdRowArray, null);


function checkValue(letter) { // checks if the letters are empty
  return letter.value !== '';
}

function checkLetters(row) { // compares every letter to the hiddenWord

  playersWord = row[0].value + row[1].value + row[2].value + row[3].value + row[4].value;

  if (wordBank.includes(playersWord)) {

    isWordWrong = false;

    if (row[0].value === hiddenWord.charAt(0)) {
      row[0].style.backgroundColor = 'green';
    } else if (hiddenWord.includes(row[0].value)) {
      row[0].style.backgroundColor = 'yellow';
    } else if (row[0].value !== hiddenWord.charAt(0)) {
      row[0].style.backgroundColor = 'red';
    }

    if (row[1].value === hiddenWord.charAt(1)) {
      row[1].style.backgroundColor = 'green';
    } else if (hiddenWord.includes(row[1].value)) {
      row[1].style.backgroundColor = 'yellow';
    } else if (row[1].value !== hiddenWord.charAt(1)) {
      row[1].style.backgroundColor = 'red';
    }

    if (row[2].value === hiddenWord.charAt(2)) {
      row[2].style.backgroundColor = 'green';
    } else if (hiddenWord.includes(row[2].value)) {
      row[2].style.backgroundColor = 'yellow';
    } else if (row[2].value !== hiddenWord.charAt(2)) {
      row[2].style.backgroundColor = 'red';
    }

    if (row[3].value === hiddenWord.charAt(3)) {
      row[3].style.backgroundColor = 'green';
    } else if (hiddenWord.includes(row[3].value)) {
      row[3].style.backgroundColor = 'yellow';
    } else if (row[3].value !== hiddenWord.charAt(3)) {
      row[3].style.backgroundColor = 'red';
    }

    if (row[4].value === hiddenWord.charAt(4)) {
      row[4].style.backgroundColor = 'green';
    } else if (hiddenWord.includes(row[4].value)) {
      row[4].style.backgroundColor = 'yellow';
    } else if (row[4].value !== hiddenWord.charAt(4)) {
      row[4].style.backgroundColor = 'red';
    }

    console.log(playersWord)
  } else {
    window.alert('That is not a word.');
    isWordWrong = true;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 40%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.row {
  width: 100%;
  height: 20%;
  display: flex;
}

.row:first-of-type input {
  border-color: black;
}

input {
  width: 20%;
  height: 100%;
  font-size: 3rem;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <input type="text" class="1-row" maxlength="1" autofocus>
      <input type="text" class="1-row" maxlength="1">
      <input type="text" class="1-row" maxlength="1">
      <input type="text" class="1-row" maxlength="1">
      <input type="text" class="1-row" maxlength="1">
    </div>
    <div class="row">
      <input type="text" class="2-row" maxlength="1" disabled>
      <input type="text" class="2-row" maxlength="1" disabled>
      <input type="text" class="2-row" maxlength="1" disabled>
      <input type="text" class="2-row" maxlength="1" disabled>
      <input type="text" class="2-row" maxlength="1" disabled>
    </div>
    <div class="row">
      <input type="text" class="3-row" maxlength="1" disabled>
      <input type="text" class="3-row" maxlength="1" disabled>
      <input type="text" class="3-row" maxlength="1" disabled>
      <input type="text" class="3-row" maxlength="1" disabled>
      <input type="text" class="3-row" maxlength="1" disabled>
    </div>
  </div>
</body>

</html>

I’m building a small Wordle game and I’ve programmed most of the game, but there is a problem with calling the switchRows() functions. Whenever I click enter as to check if the values of the active row fulfill the conditions, it pops the window.alert() warning three times, as to one for each row. I tried to fix this by putting each function in a condition such as if (rowCount === 1) switchRows(secondRowArray, thirdRowArray) and so on, but then it doesn’t work at all. How could I fix this? Window.alert() should fire only once.

Is there a way to ignore loop and conditional placeholders that have no data with docxtemplater?

I’m building a backend around docxtemplater. It could occur that someone provides a template with placeholders that don’t occur in the data. I made the following nullGetter so it leaves placeholders as they are.

private static nullGetter(part: Part) {
        if (!part.module) return `${this.startDelimiter}${part.value}${this.endDelimiter}`;
        return '';
    }

The problem is that this doenst work for conditional placeholders like <#condition> Some Text . If there is no data for condition it just leaves the line blanc. I have the same problem when i want to loop tablerows. If the loop doesn’t occur in the data it just removes the table. I want it to return the document with the placeholders still in the text so the user can eassily see which placeholders are forgotten.

I tried making a custom module to handle this. But i’m not capable of doing this.

url fragment is missed in post response

// react frontend
    const response = await fetch(
      "http://localhost:4242/create-checkout-session#abc",
      {
        method: "POST",
      }
    );

console.log('response.url', response.url); // 'https://checkout.stripe.com/xyz'
// create a stripe checkout session in express server
  res.redirect(303, session.url); // 'https://checkout.stripe.com/xyz#abc...'

I don’t understand why url fragment is missed from response of fetch post request, can anyone explain this please?

Creating a custom type that only accepts field names related to a base class

I’m trying to create a custom TypeScript type that only accepts field names whose types are related to a specific base class, WhateverBaseClass.

How can I modify the MyType definition to ensure it only includes the keys of MyClass that correspond to fields of type WhateverBaseClass or arrays of WhateverBaseClass?

Here’s a simplified version of my code:

class WhateverBaseClass {}

class Invalid {
  public invalidName!: string;
}

class Valid extends WhateverBaseClass {
  public validName!: string;
}

class MyClass {
  public name!: string;              // Invalid: string
  public validArray!: Valid[];       // Valid: array of Valid
  public validField!: Valid;         // Valid: instance of Valid
  public invalidField!: Invalid[];   // Invalid: array of Invalid
}

type MyType<T> = {
  [K in keyof T]: T[K] extends WhateverBaseClass | (WhateverBaseClass[]) ? T[K] : never;
}[keyof T];

// Expectation: 
const expectation: MyType<MyClass>[] = ["validArray", "validField"]; // Must only accept these two

// Result: 
const rs: MyType<MyClass>[] = ["validArray", "validField", "name", "invalidField"]; // But it accepts all

How to receive custom data in push notifications with Capacitor to identify which one to remove

I’m building a chat app with Capacitor and would like to remove a message’s push notification if you view the message in the chat or when a message is removed.

When using PushNotifications.addListener('pushNotificationReceived', ...) you receive a PushNotificationSchema which contains all the custom data that was sent with the notification like an ID or URL. But when using PushNotifications.getDeliveredNotifications() you receive a DeliveredNotifications which doesn’t. This makes it hard to identify which push notification to remove.

Does anyone know how to solve this?

Thank you!

Vue router suspense triggers the first time but not the second time

so I followed the Vue docs and created a wrapper for the pages so that I can use top-level await. The first time the page is loaded, it works correctly and shows me the spinner. the second time I come back to the page from another page, the spinner is not shown. Instead, I stay on the page until the await call is done then I move to the next page. I was able to fix this by adding a key to the KeepAlive component, but idk if this affects performance or any behaviour, need advice.

<template>
  <div v-if="loadingStore.loading" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
    <VaProgressCircle v-if="loadingStore.loading" indeterminate size="10rem" thickness="0.2" />
  </div>
  <RouterView v-slot="{ Component, route }">
    <template v-if="Component">
      <Transition name="fade" mode="out-in">
        <KeepAlive :key="route.path">
          <Suspense>
            <component :is="layout">
              <component :is="Component" :key="route.path" />
            </component>
            <template #fallback>
              <SplashScreen />
            </template>
          </Suspense>
        </KeepAlive>
      </Transition>
    </template>
  </RouterView>
</template>

PHP Pop Up Slider code works on localhost but not web hosting server

I’m trying to create a pop-up slider on my homepage. I generated the code using ChatGPT, and it works fine on my local XAMPP setup when I include right after at the top of the index.php file. However, on my web hosting server, including it right after header.php causes the pop-up to appear without displaying content. When I place it after footer.php, the pop-up shows with content but appears below the footer. Why might this be happening?

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $(document).ready(function() {
  let currentPage = 0;
  const pages = $(".dialog-page");
  const pageCount = pages.length;

  function showPage(index) {
    pages.hide();
    $(pages[index]).show();
    updateIndicators(index);
  }

  function updateIndicators(index) {
    $(".indicator").removeClass("active");
    $(".indicator").eq(index).addClass("active");
  }

  $("#dialog-message-a").dialog({
    width: '90%', // Set the width to 90% for better responsiveness
    maxWidth: 900, // Max width to maintain size on larger screens
    height: 'auto', // Auto height based on content
    autoOpen: true,
    modal: true,
    position: { my: "center", at: "top+100", of: window },
    show: { effect: "blind", duration: 700 },
    closeText: "Close"
  });

  $(".arrow-left").click(function() {
    currentPage = (currentPage - 1 + pageCount) % pageCount;
    showPage(currentPage);
  });

  $(".arrow-right").click(function() {
    currentPage = (currentPage + 1) % pageCount;
    showPage(currentPage);
  });

  setInterval(function() {
    if ($("#dialog-message-a").dialog("isOpen")) {
      currentPage = (currentPage + 1) % pageCount;
      showPage(currentPage);
    }
  }, 5000);

  // Generate indicators based on page count
  for (let i = 0; i < pageCount; i++) {
    $(".indicators").append('<span class="indicator' + (i === 0 ? ' active' : '') + '"></span>');
  }

  showPage(currentPage);
});

</script>

<style>
  .dialog-page { 
  display: none; 
  overflow-y: auto; 
  text-align: center; 
  max-height: 100vh; /* Limit height to 80% of the viewport height */
}

.arrow-left, .arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 50%;
  user-select: none;
}

.arrow-left { left: 10px; }
.arrow-right { right: 10px; }

.indicators { 
  text-align: center; 
  margin-top: 20px; 
}

.indicator { 
  display: inline-block; 
  width: 12px; 
  height: 12px; 
  margin: 0 5px; 
  border-radius: 50%; 
  background-color: #ddd; 
}

.indicator.active { 
  background-color: #333; 
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
  .arrow-left, .arrow-right {
    font-size: 18px; /* Smaller arrow size on mobile */
    padding: 8px; /* Less padding */
  }
  #dialog-message-a { 
    width: 95%; /* More width on smaller screens */ 
    max-height: 80vh; /* Limit height on mobile devices */
  }
  .dialog-page p { 
    font-size: 14pt; /* Slightly smaller font size */ 
  }
  .dialog-page img { 
    width: 100%; /* Ensure images take full width */ 
    height: auto; /* Maintain aspect ratio */ 
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  #dialog-message-a { 
    width: 90%; /* Less width for medium screens */ 
    max-height: 90vh; /* Limit height for medium devices */
  }
  .dialog-page img { 
    width: 80%; /* Adjust image size for medium screens */ 
  }
}

@media (min-width: 901px) {
  #dialog-message-a { 
    max-height: 80vh; /* Limit height for larger screens */
  }
}

</style>

<div id="dialog-message-a" title="Events">
  <!-- Left Arrow Button -->
  <div class="arrow-left">&#9664;</div>

  <!-- Right Arrow Button -->
  <div class="arrow-right">&#9654;</div>

  <!-- Page 1-->
  <div class="dialog-page">
    <p style="font-size:15pt; font-weight:bold;">Page 1</p>
  </div>

  <!-- Page 2 -->
  <div class="dialog-page">
    <p style="font-size:15pt; font-weight:bold;">image</p>
  </div>
  
  <!-- Page 3-->
  <div class="dialog-page">
    <p style="font-size:15pt; font-weight:bold;">Page 3</p>
  </div>

  <!-- Indicators for Current and Total Pages -->
  <div class="indicators">
    <!-- The indicators will be generated by JavaScript -->
  </div>
</div>

I try in xampp it works fine but not one web hosting server.

Stop propagation click on arrow caroussel javascript

(() => {
  const arrowPrevious = document.querySelector(".chevron__previous");
  const arrowNext = document.querySelector(".chevron__next");
  const carousselPictures = document.querySelector(".caroussel__pictures");
  const caroussel = document.querySelector(".caroussel");
  const interval = document
    .querySelector(".caroussel__pictures")
    .getAttribute("data-interval");
  const size = 1000;

  const nextSlide = () => {
    carousselPictures.style.transform = "translateX(" + -size + "px)";
    setTimeout(() => {
      carousselPictures.appendChild(carousselPictures.firstElementChild);
      carousselPictures.style = "left: 0; transition: none !important;";
    }, 1000);

    setTimeout(() => {
      carousselPictures.style = "left: 0;";
    }, 1020);
  };

  const previousSlide = () => {
    setTimeout(() => {
      carousselPictures.prepend(carousselPictures.lastElementChild);
      carousselPictures.style =
        "left: " + -size + "px !important; transition: none !important;";
    }, 1);

    setTimeout(() => {
      carousselPictures.style.transform = "translateX(" + -size + "px)";
      carousselPictures.style = "transition: all 1s ease-out !important;";
    }, 2);
  };

  arrowPrevious.addEventListener("click", (e) => {
    previousSlide();
    e.stopImmediatePropagation();
  });

  arrowNext.addEventListener("click", (e) => {
    nextSlide();
  });

  let timer = setInterval((e) => {
    nextSlide();
  }, parseInt(interval) + 40);

  caroussel.addEventListener("mouseenter", (e) => {
    clearInterval(timer);
  });

  caroussel.addEventListener("mouseleave", (e) => {
    timer = setInterval(() => {
      nextSlide();
    }, parseInt(interval) + 40);
  });
})();

// slider();
@import url(reset.css);

html, body{
    font-size: 16px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.container{
    width: 1000px;
    margin: 0 auto;
}

.title__h1{
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.25rem;
    margin: 2rem 0;
    text-align: center;
}

.caroussel, .caroussel__pictures{
    width: 1000px;
    height: 400px;
    transition: all 1s ease-out !important;
}

.picture{
    position: relative;
}

.caroussel{
    overflow: hidden;
    position: relative;
}

.caroussel__pictures{
    display: flex;
    position: relative;
    left: 0;
}

.transition__toggle{
    transition: none !important;
}

.arrow{
    position: absolute;
    width: calc(100% - 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: calc(50% - (48px / 2));
    padding: 0 1rem;
}

.chevron__previous, .chevron__next{
    color: #fff;
    font-size: 48px;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />

    <title>Caroussel javascript</title>
  </head>
  <body>
    <div class="container">
      <h1 class="title__h1">Caroussel javascript</h1>

      <div class="caroussel">
        <div class="caroussel__pictures" data-interval="2000">
                <img src="https://picsum.photos/id/10/1000/400" alt="image caroussel 1" class="picture" />
          <img src="https://picsum.photos/id/11//1000/400" alt="image caroussel 2" class="picture" />
          <img src="https://picsum.photos/id/12//1000/400" alt="image caroussel 3" class="picture" />
          <img src="https://picsum.photos/id/13//1000/400" alt="image caroussel 4" class="picture" />
        </div>
        <div class="arrow">
          <i class="fa-solid fa-chevron-left chevron__previous"></i>
          <i class="fa-solid fa-chevron-right chevron__next"></i>
        </div>
      </div>
    </div>
    <script src="script/script.js"></script>
  </body>
</html>

Good morning,

I have a problem with a carousel, it works more or less well but I cannot stop the click event between each slide of the carousel, if I click several times on the arrows, the carousel does not work correctly, I I think the click event is propagating, but stopPropation() doesn’t work, I’m not sure I’m going in the right direction. Here is my code. Thank you in advance

    <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />

    <title>Caroussel javascript</title>
  </head>
  <body>
    <div class="container">
      <h1 class="title__h1">Caroussel javascript</h1>

      <div class="caroussel">
        <div class="caroussel__pictures" data-interval="2000">
          <img src="assets/images/caroussel-5.jpg" alt="image caroussel 1" class="picture" />
          <img src="assets/images/caroussel-6.jpg" alt="image caroussel 2" class="picture" />
          <img src="assets/images/caroussel-3.jpg" alt="image caroussel 3" class="picture" />
          <img src="assets/images/caroussel-4.webp" alt="image caroussel 4" class="picture" />
        </div>
        <div class="arrow">
          <i class="fa-solid fa-chevron-left chevron__previous"></i>
          <i class="fa-solid fa-chevron-right chevron__next"></i>
        </div>
      </div>
    </div>
    <script src="script/script.js"></script>
  </body>
</html>


    (() => {
  const arrowPrevious = document.querySelector(".chevron__previous");
  const arrowNext = document.querySelector(".chevron__next");
  const carousselPictures = document.querySelector(".caroussel__pictures");
  const caroussel = document.querySelector(".caroussel");
  const interval = document
    .querySelector(".caroussel__pictures")
    .getAttribute("data-interval");
  const size = 1000;

  const nextSlide = () => {
    carousselPictures.style.transform = "translateX(" + -size + "px)";
    setTimeout(() => {
      carousselPictures.appendChild(carousselPictures.firstElementChild);
      carousselPictures.style = "left: 0; transition: none !important;";
    }, 1000);

    setTimeout(() => {
      carousselPictures.style = "left: 0;";
    }, 1020);
  };

  const previousSlide = () => {
    setTimeout(() => {
      carousselPictures.prepend(carousselPictures.lastElementChild);
      carousselPictures.style =
        "left: " + -size + "px !important; transition: none !important;";
    }, 1);

    setTimeout(() => {
      carousselPictures.style.transform = "translateX(" + -size + "px)";
      carousselPictures.style = "transition: all 1s ease-out !important;";
    }, 2);
  };

  arrowPrevious.addEventListener("click", (e) => {
    previousSlide();
    e.stopImmediatePropagation();
  });

  arrowNext.addEventListener("click", (e) => {
    nextSlide();
  });

  let timer = setInterval((e) => {
    nextSlide();
  }, parseInt(interval) + 40);

  caroussel.addEventListener("mouseenter", (e) => {
    clearInterval(timer);
  });

  caroussel.addEventListener("mouseleave", (e) => {
    timer = setInterval(() => {
      nextSlide();
    }, parseInt(interval) + 40);
  });
})();

// slider();

Cloudinary signature call error – Invalid signature

I’m trying to upload image from frontend using signature call approach but can’t get this into work.
The only parameter I’m assigning is timestamp.
There’s more I want to assign if i figure this out but I’m only doing timestamp for now just to get this work.

I get “Invalid Signature MY_HASHED_STRING. String to sign – ‘timestamp=1730359693’.”
when I call Cloudinary’s api.

Here’s my frontend part in typescript:

const formData = new FormData();
formData.append("api_key", import.meta.env.VITE_CLOUDINARY_API_KEY);
formData.append("file", resizedImage as Blob);
formData.append("signature", signature);
formData.append("timestamp", timestamp);

axios
   .post(
      `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`,
      formData,
   )
   .then((res) => {
      setTrimImg(res.data.secure_url);
   })
   .catch((error) => {
      console.error("Error uploading image:", error);
      onError && onError();
   });

And here’s my backend part written in go:

handler

func (h *ClientSideHandler) GetUploadSignature(w http.ResponseWriter, r *http.Request) {
    timestamp := strconv.FormatInt(time.Now().Unix(), 10)
    params := map[string]string{
        "timestamp": timestamp,
    }

    signature, err := utils.GenerateUploadSignature(params)
    if err != nil {
        logger.Error.Printf("Failed to generate signature: %v", err.Error())
        http.Error(w, "Failed to generate signature", http.StatusInternalServerError)
        return
    }

    res := map[string]interface{}{
        "signature": signature,
        "timestamp": timestamp,
    }
    utils.JsonRes(w, res, "success", false)
   return
}

function that creates signature:

func GenerateUploadSignature(params map[string]string) (string, error) {
    keys := make([]string, 0, len(params))
    for key := range params {
        keys = append(keys, key)
    }
    sort.Strings(keys)

    stringToSign := ""
    for _, key := range keys {
        value := params[key]
        stringToSign += fmt.Sprintf("%s=%s&", key, value)
    }
    // Remove the trailing '&'
    stringToSign = stringToSign[:len(stringToSign)-1]

    stringToSign += secret
    fmt.Println("stingsssssss", stringToSign)

    mac := hmac.New(sha1.New, []byte(secret))
    mac.Write([]byte(stringToSign))
    signature := hex.EncodeToString(mac.Sum(nil))

    return signature, nil
}

Is thinkpad x240 good for python? [closed]

I want to buy a second laptop for linux pop os that is this thinkpad with 8gb of ram but for python and how to I could manage ram memory
So I’m wondering about this device because I have a acer nitro 5 which I use for java,c++ and c# and need a second thinkpad for python,JavaScript and html

JavaScript Event Listener Not Triggering on Search Input – keypress Event

I’m working on a stock market website called MyStok, and I’m trying to implement a search feature that listens for the Enter key press to trigger a search. However, the event listener is not firing, and nothing appears in the console when I press Enter or click the search button. I’m not sure why it isn’t working. Here’s my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyStok</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
          integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
<nav class="navbar">
    <div class="navbar__container">
        <a id="navbar__logo"><i class="fa-solid fa-chart-line"></i> MyStok </a>
        <div class="navbar__toggle" id="mobile-menu">
            <span class="bar"></span> <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <ul class="navbar__menu">
            <li class="navbar__item"><a href="/MyStok/index.html" class="navbar__links">Home</a></li>
            <li class="navbar__item"><a href="/MyStok/about.html" class="navbar__links">About Us</a></li>
            <li class="navbar__item"><a href="/MyStok/analyse.html" class="navbar__links" id="analyseButton">Analyse</a></li>
            <li class="navbar__button"><a href="/MyStok/signUp.html" class="button">Log In</a></li>
        </ul>
    </div>
</nav>
<div class="main">
    <div class="main__container">
        <div class="search-bar-container">
            <a id="search-logo"><i class="fa-solid fa-chart-line"></i> MyStok </a>
            <div class="search-bar">
                <input type="search" id="search-input" placeholder="Search for a Stock Ticker...">
                <button id="search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
            </div>
        </div>
    </div>
</div>
<script src="app.js"></script>
</body>
</html>

JavaScript (app.js):

searchInput = document.getElementById("search-input");

searchInput.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        console.log("Enter key pressed");
    }
});

What I’ve Tried:
Added an eventListener to trigger on the keypress event for the Enter key.
Tried triggering the event listener with both the button and the Enter key.
Checked the console for errors, but there are no messages or errors showing up.
Expected Behaviour:
When the Enter key is pressed, a message should appear in the console saying “Enter key pressed.”

Problem:
The keypress event is not triggering, and I’m not sure why. Is there something wrong with how I set up the event listener?