Blancer.com Tutorials and projects

I wanted to understand at which point an async js function was appended to the event loop and when it was being immediately executed:

async function test2(){
    console.log('3 test2 is being executed');
}
async function test(){
    console.log('2 test is being executed');

    await test2();
    console.log('4 test 2 was awaited');
}

console.log('1 test is about to be called');
test();
console.log('5 test was called');

Originally, I assumed that no matter if a function had any actual async functions happneing (setTimeout, fetch, loadFile, etc), the function would always be appended to the event loop if it was declared async.

So by that logic expected the order of console logs like this:

1 test is about to be called
5 test was called
2 test is being executed
3 test2 is being executed
4 test 2 was awaited

So I assumed, async function that don’t have any actual real async functions in them always get executed immediately, leading to this order:

1 test is about to be called
2 test is being executed
3 test2 is being executed
4 test 2 was awaited
5 test was called

But instead I get this:

1 test is about to be called
2 test is being executed
3 test2 is being executed
5 test was called
4 test 2 was awaited

This means the order of execution is:

test is called
test is being immediately executed (despite being marked async)
test2 is being immediately executed (same as test)
after test2 is being run, control is returned to line 14 (which means the event loop must have done something after all)
finally, test reports that test2 was executed.

Can somebody explain this to me? How can it be that async functions sometimes get thrown onto the event loop and sometimes not? I this predictable and when?

Also if you remove the await, the order is 1 2 3 4 5.

I’d just like to understand what’s the logic here.

I’m developing a Chrome extension that intercepts the text a user sends to ChatGPT before it’s sent to the model. My goal is to verify whether the text contains any sensitive data by sending it to a backend API. If the data is sensitive, I want the backend to filter it and return the masked version, which will then be sent to ChatGPT.

However, I’m facing an issue where the data is being sent directly to ChatGPT without being intercepted, and I can’t block the direct request to the API.

How can I properly intercept the text before it reaches ChatGPT and ensure it is filtered by my backend API before it is sent out?

Content.js

document.addEventListener("DOMContentLoaded", () => {
  const sendButton = document.querySelector('[aria-label="Send prompt"]');
  const inputField = document.querySelector("textarea");
  console.log(sendButton);
  if (sendButton && inputField) {
    console.log("Send button and input field found.");

    // Intercept the message when the send button is clicked
    sendButton.addEventListener("click", (event) => {
      event.preventDefault(); // Prevent sending the message immediately

      const userMessage = inputField.value;
      console.log("Intercepted message:", userMessage);

      // Modify the message (for testing purposes)
      const modifiedMessage = `${userMessage} (modified by extension)`;

      // Show the modified message in a dialog
      if (
        confirm(
          `Modified Message:nn${modifiedMessage}nnDo you want to send this message?`
        )
      ) {
        // Trigger API call to simulate data leak prevention action
        chrome.runtime.sendMessage({ action: "triggerApiCall" }, (response) => {
          if (response && response.success) {
            console.log("API Call Successful, sending message to ChatGPT...");
            inputField.value = modifiedMessage; // Set the modified message back to the input
            sendButton.click(); // Trigger the send button click again to send the modified message
          } else {
            console.error(
              "API Call Failed:",
              response ? response.error : "No response"
            );
            alert("Error preventing data leak.");
          }
        });
      }
    });
  } else {
    console.log("Send button or input field not found.");
  }
});

manifest.json

{
    "manifest_version": 3,
    "name": "ChatGPT Message Interceptor",
    "version": "1.0",
    "description": "Intercept and modify messages sent to ChatGPT",
    "permissions": [
      "activeTab",
      "storage"
    ],
    "content_scripts": [
      {
        "matches": ["https://chatgpt.com/*", "https://*.chat.openai.com/*"],
        "js": ["content.js"]
      }
    ],
    "background": {
      "service_worker": "background.js"
    },
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/icon-16.png",
        "48": "images/icon-48.png",
        "128": "images/icon-128.png"
      }
    }
  }

popup.html

<!DOCTYPE html>
<html>

<head>
    <title>ChatGPT Message Interceptor</title>
    <style>
        body {
            width: 200px;
            padding: 10px;
        }

        button {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h3>Activate Interceptor</h3>
    <button id="activateButton">Activate</button>
    <script src="popup.js"></script>
</body>

</html>```

Ok I know the title looks like I’ll be asking “why does parent.appendChild("some text") not work”. It is not the case though.

I have a function of signature string => SVGElement that outputs a rather complex (but valid) SVG node. I also have an empty <div id="app"></div> that covers the whole screen.

I tried two things to render my newly create element:

1. document.getElementById("app")!.appendChild(svgElement)
2. document.getElementById("app")!.innerHTML += svgElement.outerHTML

If I open the inspector, the output HTML tree is the same for both methods. However, my SVG does not appear with the first method and does appear with the second one. I know the context is not complete, but I’d like to have insights to know what could cause this difference.

Thanks in advance for answering and have a nice day!

I want to automate the way to add points to Google My Maps. They don’t provide any API for that, so I thought I would use a custom user script to interact with the page.

I haven’t written it yet, for now, I’m only checking in the dev tools console if everything is accessible and if it will be possible to achieve.

Here is the problem I encountered: it’s possible to create a new point, edit the name, etc., but I’m stuck at adding a photo to the point. There are a lot of custom properties and solutions made by Google in that area and I’m looking for a solution that will work with that.

There is an input field where I can paste or type url to the photo. If I do this, the value is written to the attribute data-initial-value and then the photo appears below that input field, and the save button is activated.

<input type="text" class="whsOnd zHQkBf" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Wklej adres URL obrazu..." aria-disabled="false" autofocus="" data-initial-value="" badinput="false">

When I programmatically set the photo URL to either value or data-initial-value attributes, then nothing really happens, their custom JS isn’t activated, so the photo can’t be added that way.

input = document.querySelector(".whsOnd.zHQkBf");
input.setAttribute("data-initial-value", "https://picsum.photos/200");
input.setAttribute("value", "https://picsum.photos/200");
input.value = "https://picsum.photos/200";

You can see in this video how it behaves when I paste the link and then later when it’s set programmatically.

So, the question is if there is any way I can simulate paste or type action to that field, so their JS will detect it? Or is there any other solution how to make it work?

Steps to get this input on Google My Maps:

1. Create and open map on https://www.google.com/maps/d/
2. Click the pin icon in the toolbar to create a new point
3. Click the photo icon in the edit dialog box
4. Click the URL tab

Here is full HTML of this area with input:

<div
  class="V6Fpqd-nUpftc"
  jscontroller="qo18Ab"
  jsaction="f9NQ3d:jSxSE;iUYTcf:MphkWb;E6LM8:eAlKye;GljaIf:qZ14Je;arml9e:LvSimf;TcIE3e:VZij4d;tJHP7e:ulAvwc"
  jsname="oLnkS"
  role="tabpanel"
>
  <div jsname="V8jame"></div>
  <div class="kPOohe-wZVHld-nUpftc-haAclf" jsname="StCdjf">
    <div
      class="kPOohe-wZVHld-nUpftc"
      jsaction="rcuQ6b:rcuQ6b"
      jscontroller="JKlM1b"
    >
      <div class="eXh7Ud" jscontroller="cDvIdc" jsaction="rcuQ6b:rcuQ6b;">
        <div class="mPVwKb hCTQCe" jsname="L8jiB">
          <div
            class="ndlgBc"
            jscontroller="KIcJpf"
            jsaction="JIbuQc:LYGBsb(gQ2Xie),mm65pe(Slj9he);O22p3e:fpfTEe(cB3E7e);rcuQ6b:rcuQ6b;YqO5N:XNc1Le(cB3E7e); keydown:Hq2uPe(cB3E7e)"
          >
            <div jsname="ODTp8" class="hSF15e">
              <div jsname="oK1IRd">
                <div class="YHtwxf">
                  <div
                    class="rFrNMe qr4X2e zKHdkd"
                    jscontroller="pxq3x"
                    jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV"
                    jsshadow=""
                    jsname="cB3E7e"
                  >
                    <div class="aCsJod oJeWuf">
                      <div class="aXBtI I0VJ4d Wic03c">
                        <div class="Xb9hP">
                          <input
                            type="text"
                            class="whsOnd zHQkBf"
                            jsname="YPqjbf"
                            autocomplete="off"
                            tabindex="0"
                            aria-label="Wklej adres URL obrazu..."
                            aria-disabled="false"
                            autofocus=""
                            data-initial-value=""
                          />
                          <div
                            jsname="LwH6nd"
                            class="ndJi5d snByac"
                            aria-hidden="true"
                          >
                            Wklej adres URL obrazu...
                          </div>
                        </div>
                        <span jsslot="" class="A37UZe sxyYjd MQL3Ob"
                          ><span data-is-tooltip-wrapper="true"
                            ><button
                              class="pYTkkf-Bz112c-LgbsSe pYTkkf-Bz112c-LgbsSe-OWXEXe-SfQLQb-suEOdc DmnNTb"
                              jscontroller="PIVayb"
                              jsaction="click:h5M12e; clickmod:h5M12e;pointerdown:FEiYhc;pointerup:mF5Elf;pointerenter:EX0mI;pointerleave:vpvbp;pointercancel:xyn4sd;contextmenu:xexox;focus:h06R8; blur:zjh6rb;mlnRJb:fLiPzd;"
                              data-idom-class="DmnNTb"
                              data-use-native-focus-logic="true"
                              jsname="gQ2Xie"
                              disabled=""
                              aria-label="Wyczyść podgląd adresu URL"
                              data-tooltip-enabled="true"
                              data-tooltip-id="tt-c4"
                            >
                              <span
                                class="OiePBf-zPjgPe pYTkkf-Bz112c-UHGRz"
                              ></span
                              ><span
                                class="RBHQF-ksKsZd"
                                jscontroller="LBaJxb"
                                jsname="m9ZlFb"
                                soy-skip=""
                                ssk="6:RWVI5c"
                              ></span
                              ><span
                                class="pYTkkf-Bz112c-kBDsod-Rtc0Jf"
                                jsname="S5tZuc"
                                aria-hidden="true"
                                ><svg
                                  class="Q6yead QJZfhe"
                                  height="24"
                                  viewBox="0 -960 960 960"
                                  width="24"
                                >
                                  <path
                                    d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                                  ></path></svg
                              ></span>
                              <div class="pYTkkf-Bz112c-RLmnJb"></div>
                            </button>
                            <div
                              class="ne2Ple-oshW8e-V67aGc"
                              id="tt-c4"
                              role="tooltip"
                              aria-hidden="true"
                            >
                              Wyczyść podgląd adresu URL
                            </div></span
                          ></span
                        >
                        <div class="i9lrp mIZh1c"></div>
                        <div jsname="XmnwAc" class="OabDMe cXrdqd"></div>
                      </div>
                    </div>
                    <div class="LXRPh">
                      <div jsname="ty6ygf" class="ovnfwe Is7Fhb"></div>
                    </div>
                  </div>
                  <div class="aRx7Te nbtmO" jsname="aZ2wEe">
                    <div
                      class="EmVfjc qs41qe"
                      data-loadingmessage="Ładuję"
                      jscontroller="qAKInc"
                      jsaction="animationend:kWijWc;dyRcpb:dyRcpb"
                      data-active="true"
                      jsname="aZ2wEe"
                    >
                      <div class="Cg7hO" aria-live="assertive" jsname="vyyg5">
                        Ładuję
                      </div>
                      <div jsname="Hxlbvc" class="xu46lf">
                        <div class="ir3uv uWlRce co39ub">
                          <div class="xq3j6 ERcjC">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="HBnAAc">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="xq3j6 dj3yTd">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                        </div>
                        <div class="ir3uv GFoASc Cn087">
                          <div class="xq3j6 ERcjC">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="HBnAAc">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="xq3j6 dj3yTd">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                        </div>
                        <div class="ir3uv WpeOqd hfsr6b">
                          <div class="xq3j6 ERcjC">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="HBnAAc">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="xq3j6 dj3yTd">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                        </div>
                        <div class="ir3uv rHV3jf EjXFBf">
                          <div class="xq3j6 ERcjC">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="HBnAAc">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                          <div class="xq3j6 dj3yTd">
                            <div class="X6jHbb GOJTSe"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="CpRZQe" role="alert">
                    Możesz użyć tylko takich obrazów, do których posiadasz
                    stosowne prawa.
                  </div>
                  <div
                    class="Gkzg6e nbtmO"
                    jsname="VEOBbf"
                    role="status"
                    aria-live="assertive"
                  >
                    <div class="Gkzg6e nbtmO" jsname="VEOBbf"></div>
                    <div class="nbtmO">
                      Nie możemy znaleźć obrazu lub uzyskać do niego dostępu pod
                      tym adresem URL. Sprawdź, czy adres został wpisany
                      poprawnie.
                    </div>
                    <div class="nbtmO">
                      Ten adres URL jest nieprawidłowy. Upewnij się, że zaczyna
                      się od http:// lub https://.
                    </div>
                  </div>
                </div>
              </div>
              <div jsname="qlI0xc" class="nbtmO">
                <div class="PDztrf"><img jsname="dGKeKb" class="LLY0Xe" /></div>
              </div>
              <div jsname="Zpe2Q" class="APdXXd">
                <div
                  role="button"
                  class="U26fgb O0WRkf oG5Srb HQ8yf C0oVfc fuRKz M9Bg4d RDPZE"
                  jscontroller="VXdfxd"
                  jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventDefault=true); touchcancel:JMtRjd;"
                  jsshadow=""
                  jsname="Slj9he"
                  aria-label="wstaw obraz"
                  aria-disabled="true"
                  tabindex="-1"
                >
                  <div class="Vwe4Vb MbhUzd" jsname="ksKsZd"></div>
                  <div class="ZFr60d CeoRYc"></div>
                  <span jsslot="" class="CwaK9"
                    ><span class="RveJvd snByac">wstaw obraz</span></span
                  >
                </div>
              </div>
            </div>
            <div jsname="nlOOSe" class="TMnCxb nbtmO"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I’m creating a range slider with two buttons to move the minimum value and another for the maximum value in react native from scratch. I already have the formula so that depending on the position of the slider it gives me its corresponding value:

const min = 1100;
const max = 11800;
const minPosition = 10.5;
const sliderWidth = 327;
const step = 100;

const minValue = min + Math.floor(minPosition / (sliderWidth / ((max - min) / step))) * step;
// minValue = 1400

I don’t know how to do the inverse operation so that the range slider receives for example a value of 1400 (minValue) and returns the position of the slider (minPosition), which in this case would be a value of 10.5

I’m using Google Apps Script withSuccessHandler() and even if the logs from Logger are all correct, after returning from the function in the backend, the result is always a null.

Here’s reported the code block where I call the google.script.run.withSuccessHandler() referring to the function checkBarcode().

// Check if the vessel exists
      function checkVessel() {
        const barcode = document.getElementById("barcode").value.trim();
        barcode.toString();
        if (!barcode) {
          alert("Please scan or enter a barcode.");
          return;
        }
        
        console.log("Sending barcode to server:", barcode); // Debugging
        google.script.run.withSuccessHandler(result => {
          console.log("Result received from server:", result); // Debugging
          showForm(result);;
        }).checkBarcode(barcode)

      }

Here’s reported the function checkBarcode (also the function findBarcode used in checkBarcode).

// Check if a vessel with the barcode exists
function checkBarcode(barcode) {
  barcode.toString().trim();
  Logger.log("Checking barcode: " + barcode);

  // Search for barcode in N2 sheet
  const n2Result = findBarcode("N2", barcode);

  if (n2Result) {
    Logger.log("Barcode found in N2.");
    return result = {
      sheet: "N2",
      row: n2Result.row,
      data: n2Result.data,
    };
  }

  // Search for barcode in N2O sheet
  const n2oResult = findBarcode("N2O", barcode);

  if (n2oResult) {
    Logger.log("Barcode found in N2O.");
    return result = {
      sheet: "N2O",
      row: n2oResult.row,
      data: n2oResult.data,
    };
  }

  // If not found in any sheet
  Logger.log("Barcode not found in any sheet.");
  return result = null; // Return null explicitly if not found
}

// Find barcode in a sheet
function findBarcode(sheetName, barcode) {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = spreadsheet.getSheetByName(sheetName);

  if (!sheet) {
    Logger.log("Sheet not found: " + sheetName);
    return null;
  }

  const data = sheet.getDataRange().getValues();
  Logger.log("Data in sheet " + sheetName + ": " + JSON.stringify(data));

  for (let i = 0; i < data.length; i++) {
    Logger.log("Comparing: " + data[i][0].toString().trim() + " with " + barcode.toString().trim());
    if (data[i][0].toString().trim() === barcode.toString().trim()) {
      return { row: i + 1, data: data[i] }; // Return row index and data
    }
  }
  return null; // Not found
}

I tried to avoid using multiple function in the .gs file but the results were the same. I also tried to convert the barcode variable in string (probably too many times) to avoid errors.

I’m developing a Tampermonkey userscript to capture audio from a webpage using the MediaRecorder API. The script successfully records audio and creates a Blob with the MIME type audio/webm;codecs=opus. However, when I attempt to download the generated audio file, it’s saved with a .bin extension and a random 9-digit filename (e.g. 1298453815.bin) instead of the intended recording.webm.

This is the relevant code snippet.

// Media recorder handling above
const audioBlob = new Blob(audioChunks, { type: 'audio/webm;codecs=opus' });
const audioUrl = URL.createObjectURL(audioBlob);

const link = document.createElement('a');
link.href = audioUrl;
link.download = 'recording.webm';
link.click();

I’ve tried various methods to enforce the correct filename and extension, including explicitly setting the download attribute of the anchor tag and setting the type attribute. Trying GM_download on blob URL, using FileReader to convert the blob to a data URL. I’ve also tested with simple text files created from blobs, and the issue persists. I also inspected the network tab and it shows that the request headers are set with the correct MIME types.

Crucially, I know this is possible and not a browser limitation due to the fact that this site https://editor.audio/ uses blobs for export and the “Save as” window appears with the correct filename and extension.

Could anyone clarify what I’m missing? Is there a proper way to ensure that the downloaded file has the correct filename and extension when using blobs in a Tampermonkey userscript? I’m particularly interested in understanding why the download attribute and GM_download are not working as expected in this context, and how the website I linked manages to achieve the desired behavior.

const [currentUser, setCurrentUser] = useState(undefined)

useEffect(() => {
    async function fetchdata() {
        const storedUser = localStorage.getItem("chat-app-user");
        if (!storedUser) {
            navigate("/login");
        } else {
            const user = await JSON.parse(storedUser);
            console.log("Fetched user from localStorage:", user);
            setCurrentUser(user); 
        }
    }
    fetchdata();
}, [navigate]);

I am trying to setCurrentUser. I am getting an user from local storage but while setting it to setCurrentUser it is not getting set and currentUser is remaining undefined

I want to recreate the netflix slider using tailwind and owlcarousel. It’s almost done as I want but I’m facing a problem when I hover the card I apply a scaling up to the card to display details but I actually can’t click on them. Also I do not have the same height on the items.

Does anyone can help me with this ?

HTML structure

<section class="mx-auto w-screen relative flex flex-col gap-4 px-5 mb-16">
    <div class="owl-carousel owl-theme">
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span class="">
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600 overflow-hidden">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://occ-0-6613-7435.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABQquP3MObc4Xmx8fS1E0EtFypAJFcNs8U73s6OHL2GjPOuIRbKkknfytMjCRkky6eDIe_8LHwBndef1-gQiN3IMX5NEqFRShrIi9MKSOMGvoTalZ2GRya1eswfUOXrTJ6Nnflg.webp?r=bb3"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span class="">
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span class="">
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://placecats.com/340/192" alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span class="">
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span class="">
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://occ-0-6613-7435.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABQquP3MObc4Xmx8fS1E0EtFypAJFcNs8U73s6OHL2GjPOuIRbKkknfytMjCRkky6eDIe_8LHwBndef1-gQiN3IMX5NEqFRShrIi9MKSOMGvoTalZ2GRya1eswfUOXrTJ6Nnflg.webp?r=bb3"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span class="">
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span class="">
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

Javascript

const addHoverClasses = (event) => {
  const owlitemHovered = event.currentTarget
  owlitemHovered.classList.add("!z-10")
  owlitemHovered.classList.remove("!z-0")
}

const removeHoverClasses = (event) => {
  const owlitemHovered = event.currentTarget
  owlitemHovered.classList.remove("!z-10")
  owlitemHovered.classList.add("!z-0")
}

const getOwlcarouselResponsiveMaxItems = (event) => {
  const owlInstance = event.relatedTarget
  const currentBreakpoint = owlInstance._breakpoint
  const breakpoints = owlInstance.options.responsive

  return breakpoints[currentBreakpoint].items
}

const applyTransformOrigin = (event) => {
  const owlCarousel = event.target
  const owlItems = owlCarousel.querySelectorAll(".owl-item")
  let owlItemActiveCounter = 1
  owlItems.forEach((owlItem, index) => {
    owlItem.classList.add("!z-0")
    owlItem.firstChild.classList.remove(
      "origin-[left_center]",
      "origin-[right_center]",
      "origin-center",
    )
    if (owlItem?.classList.contains("active")) {
      if (owlItemActiveCounter === 1) {
        owlItem.firstChild.classList.add("origin-[left_center]")
      } else if (
        owlItemActiveCounter === getOwlcarouselResponsiveMaxItems(event)
      ) {
        owlItem.firstChild.classList.add("origin-[right_center]")
      } else {
        owlItem.firstChild.classList.add("origin-center")
      }
      owlItemActiveCounter++
    }
  })
}

const applyOwlStyles = (event) => {
  const owlCarousel = event.target
  const owlItems = owlCarousel.querySelectorAll(".owl-item")

  owlCarousel.classList.add("relative")
  owlCarousel
    .querySelector(".owl-stage-outer")
    ?.classList.add("!overflow-visible", "!overflow-x-clip")

  owlItems.forEach((owlItem, index) => {
    owlItem.addEventListener("mouseover", addHoverClasses, false)
    owlItem.addEventListener("mouseout", removeHoverClasses, false)
  })

  const owldotsContainer = owlCarousel.querySelector(".owl-dots")
  owldotsContainer?.classList.add(
    "absolute",
    "!-top-4",
    "right-0",
    "-translate-y-full",
    "!flex",
    "!gap-2",
    "!items-center",
  )

  const owldots = owldotsContainer?.querySelectorAll(".owl-dot") ?? []
  owldots.forEach((olwDot) => {
    const span = olwDot.querySelector("span")
    span.classList.add("!m-0", "!rounded-none", "!w-4", "!h-1")
    span.classList.remove("!bg-primary-600")
    if (olwDot.classList.contains("active")) {
      span.classList.add("!bg-primary-600")
    }
  })

  const owlNav = owlCarousel?.querySelector(".owl-nav")
  owlNav?.classList.add("!m-0", "!top-0", "!bottom-0", "!w-full")

  const owlPrev = owlNav?.querySelector(".owl-prev")
  const owlNext = owlNav?.querySelector(".owl-next")

  owlPrev?.classList.add(
    "!absolute",
    "!h-full",
    "!m-0",
    "!bg-black",
    "!bg-opacity-60",
    "!text-white",
    "!text-6xl",
    "!font-opensans",
    "!left-0",
    "!w-[40px]",
    "!rounded-none",
    "!rounded-r-md",
    "-translate-y-full",
  )
  owlNext?.classList.add(
    "!absolute",
    "!h-full",
    "!m-0",
    "!bg-black",
    "!bg-opacity-60",
    "!text-white",
    "!text-6xl",
    "!font-opensans",
    "!right-0",
    "!w-[40px]",
    "!rounded-none",
    "!rounded-l-md",
    "-translate-y-full",
  )

  owlPrev?.querySelector("span").classList.add("align-super")
  owlNext?.querySelector("span").classList.add("align-super")
}

jQuery(".owl-carousel").owlCarousel({
  loop: true,
  margin: 10,
  stagePadding: 50,
  nav: true,
  responsive: {
    0: {
      items: 1,
    },
    600: {
      items: 3,
    },
    1000: {
      items: 5,
    },
  },
  onInitialized: (event) => {
    applyOwlStyles(event)
    applyTransformOrigin(event)
  },
  onTranslated: (event) => {
    applyTransformOrigin(event)
  },
  onResized: (event) => {
    applyOwlStyles(event)
    applyTransformOrigin(event)
  },
})

I am making the plugboard functionality for an enigma machine in React. I currently have a keyboard layout displayed on the screen (a, b, c, d, …) not qwerty. Regardless, my idea was that a user could hold the control key to activate the plugboard functionality, then click on a letter (or key) to connect a plug there, then the next click, while still holding the control key, would connect the other end of the plug. These plug connections would be shown through color coding, changing the background color of the key of the two connected letters. When an already active key was clicked, it and its connected key, would be deactivated. The issues I’ve run into are limiting the amount of connections to only two letters. Here is my code so far…

import { useState, useContext } from "react";

const colors = [
    "#FF69B480",
    "#66330080",
    "#FFC10780",
    "#8E24AA80",
    "#00BFFF80",
    "#3B3F5480",
    "#FF980080",
    "#0097A780",
    "#E91E6380",
    "#F7DC6F80",
    "#4B008280",
    "#32CD3280",
    "#7081f080",
];

const Letter = ({ letter, ctrlPressed, setCtrlPressed }) => {
    const [activeConnections, setActiveConnections] = useState({});
    const [currentColorIndex, setCurrentColorIndex] = useState(0);
    const [clickCount, setClickCount] = useState(0);

    const handleClick = () => {
        if (ctrlPressed) {
            if (activeConnections[letter]) {
                // Deactivate the connection
                const connectedLetter = Object.keys(activeConnections).find(
                    (key) =>
                        activeConnections[key] === activeConnections[letter] &&
                        key !== letter
                );
                setActiveConnections((prevConnections) => {
                    const newConnections = { ...prevConnections };
                    delete newConnections[letter];
                    delete newConnections[connectedLetter];
                    return newConnections;
                });
            } else {
                // Activate a new connection
                const currentColor =
                    colors[Math.floor(clickCount / 2) % colors.length];
                setActiveConnections((prevConnections) => ({
                    ...prevConnections,
                    [letter]: currentColor,
                }));
                setClickCount(clickCount + 1);
            }
        }
    };

    return (
        <span
            className='letter'
            style={{
                backgroundColor: activeConnections[letter] || "#444",
            }}
            onClick={handleClick}
        >
            {letter}
        </span>
    );
};

export default Letter;

I’ve had ideas that maybe left click for activation and right click for deactivation, or left for one end of the plug and right click for the other end of the plug? Not sure that that quite solves all of my current issues.

FYI: the ctrlPressed state is global and being used as a prop from the parent App component (yes, I know it is not performance best practice, but easy for a personal development project). My array of letters is also being generated and imported from the parent Keyboard component.

App with plugboard toggled OFF

App with plugboard toggled ON