Category: javascript

I have this code in my cakephp-page and it stopped working:

false;” update=”kleinkind3″>Kinderen

//$.ajax({async:true,
>type:’post’,
>complete:function(request, json)
{$(‘#kleinkind3′).html(request.responseText); },
>url:’/V4.0/persoons/kleinkind/3’}) })//]]>

There must be something simple besides me why this is not working anymore.
Any help would be appreciated!

I tried to understand what I have written almost 20 years ago..
And I tried to find the answer on the internet.

I have a light iPad app that I have loading WKWebViews and displaying them just on the iPad screen. One of the pages I need to be able to login without actually touching the screen so I’m trying a JS injection.

if(room == "Test"){
            
            let jsScript = """


                window.onload = function init(){
                    var username = myUsername;
                    var password = myPassword;

                    var usernameInput = document.getElementById('username');
                    var passwordInput = document.getElementById('password');
                    var signInButton = document.querySelector('button[type="submit"]');
                                                    
                    usernameInput.value = username;
                    passwordInput.value = password;
                    signInButton.click();
            
                    return;
              };
            

            """

            webViews[0].evaluateJavaScript(jsScript) { (value, error) in
                if let error = error {
                    print("Error filling login: (error)")
                }
            }

I have a list that stores all the webViews. In this case I only have one page and it is the one I need to login to. It loads properly but I either get that an object type is null from the JS when pulling the usernameInput or passwordInput or that the JS has the wrong return type.

I have tried changing the return type, I’ve also inspected the page to make sure the ids are correct and they are, and the button has no id but is of type submit.

I have text in editor.

<p>string1</p>

<p>string2</p>

I want to create a plugin that will insert after the opening tag “!{” and before the closing “}!”

this is my plugin code

class StrTest extends Plugin {
    init() {
        const editor = this.editor;
        editor.ui.componentFactory.add('strTest', () => {
            const button = new ButtonView();
            button.set({
                label: '{}',
                withText: true
            });

            button.on('execute', () => {

                editor.model.change(writer => {
                    // editor.model.document.selection.getSelectedBlocks();
                    for (const block of editor.model.document.selection.getSelectedBlocks()) {
                        let child = block
                        // child.textNode.setText('New text content');
                        console.log(block)
                        console.log(block.getChild(0))
                        console.log(block.getChild(0).data)

                    }
                });
            });
            return button;
        });
    }
}

Can someone give an example of how to replace text in a tag?
I get a block, I get children and data, but I don’t understand how to replace the text.
Object field “data” is read only and have only getter.

var download =  function(uri, filename, callback){
    console.log("inside download function");
    request.head(uri, function(err, res, body){
      request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);
    });
    console.log("downloaded image")
};

This code is supposed to download a picture and save it , works once and brakes the second time giving me a unknown error

This code brakes the second time i run it , and if i restart it , it works for once and brake again giving me this error

node:events:492
      throw er; // Unhandled 'error' event
      ^

Error: UNKNOWN: unknown error, open 'C:Users7A7zDocumentszumi image processingcashe234pfp.png'
Emitted 'error' event on WriteStream instance at:
    at WriteStream.onerror (node:internal/streams/legacy:62:12)
    at WriteStream.emit (node:events:514:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4094,
  code: 'UNKNOWN',
  syscall: 'open',
  path: 'C:\Users\7A7z\Documents\zumi image processing\cashe\234pfp.png'
}

In the following setup, I’m requesting for a certain action to take place if I so happen to find DOM elements that have a specific textContent value…

    //CHECKING TO MAKE SURE IM ON THE RIGHT PAGE
    var mTarget = document.querySelector(".mCustomPage #my-table-listing");

    if (mTarget) {
    //LETS GET ALL THE TABLE TD ELEMENTS THAT HAVE A TEXT VALUE OF "VALUE A"
    var mItems = Array.from(mTarget.querySelectorAll("td font")).find((el) => el.textContent === "ValueA");

        //IF ANY OF THEM EXIST...
        if (mItems) {
            //DO SOME ACTION...
            mItems.closest("tr").classList.add("d-none");
        }
     }
     

…but how should I think about expanding my logic if I want “mItems” to not only check against “ValueA”, but if el.textContent “could also be” “ValueB”, or “ValueC”, etc..?

I know the easy way is to just keep creating multiple variables. But whats the fun in that when learning how to advance a single arrow function to do this.

Many thanks on any tips!

I have created a child component of a MUI TextFiled inside a MUI card.

import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import TextField from '@mui/material/TextField';

const bull = (
  <Box
    component="span"
    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
  >
  </Box>
);

export default function BasicCard({ dataObj }) {
 const [value, setValue] = React.useState(0);
 const location = useLocation();

 React.useEffect(() => {
   setValue(dataObj.weight);
 }, [location, dataObj])

  return (
    <Card sx={{ minWidth: 75}}>
      <CardContent>
        <TextField type="number" value={value} />
      </CardContent>
    </Card>
  );
}

Based on the existing below data I have dynamically rendered the textfields. So basically i have called the same child component 3 times for each data in the object

[
{ "metric": "AAA", "weight": 10},
{ "metric": "BB", "weight": 20},
{ "metric": "CCC", "weight": 30},
]

If we manually change the values of the TextField, how to get the value of all three data (changed or not changed) on clicking a button in the parent component

Any help is much appreciated

Thanks,

i have a component that have two children, one overlay and the Google Maps component. I have markers in the map and when I click on it, I want it to open a tooltip and apply a black overlay all over the map. The tooptip should be above it. How can i achieve it? Here’s what i tried so far

Main Component

  return (
    <section className="h-svh w-full">
      <MapOverlay />
      <GoogleMap
        apiKey={key}
        defaultZoom={15}
        onGoogleApiLoaded={onGoogleApiLoaded}
        defaultCenter={{
          lat: defaultCenter!.latitude,
          lng: defaultCenter!.longitude,
        }}
      >
        {orders.map((e) => (
          <DriverMarker
            key={e.id}
            lat={defaultCenter!.latitude}
            lng={defaultCenter!.longitude}
            order={e}
          />
        ))}
      </GoogleMap>
    </section>
  );

Overlay Component

export function MapOverlay() {
  const [active, setActive] = useActiveOrder((s) => [s.active, s.setActive]);

  return (
    <div
      onClick={() => active && setActive(false)}
      className={`fixed top-0 left-0 h-svh w-full  ${
        active ? "bg-stone-800 bg-opacity-25 z-20" : ""
      }`}
    ></div>
  );
}

Marker Component

  return (
    <div
      className="relative bg-pink-500 z-[9999] h-40 w-40"
      onClick={onClick}
    ></div>
  );

The overlay works fine, but nothing gets on top of it

I need to check 4 condition based on 2 variable.
Type of Insurance value is either Group Policy or Individual Policy; AND
Condition value is any value EXCEPT Unsure or Other.
I used below code but that is not working. anyone can know me why it is not working

if (
          (formData.insuranceType == 'Group Policy' ||
            formData.insuranceType == 'Individual Policy') &&
          (formData.condition != 'Unsure' || formData.condition != 'Other')
        ) {
          console.log('HQL');
        }

It is giving me HQL in console if formData.condition value either Unsure/Other

I am experimenting displaying some 3D scenes through a WebView in Android using ThreeJS, and it is working fine except when it comes to interacting with the web layer and calling functions defined in it.

I need to call a JS function from within Android code when a pager is scrolled. I am achieving this with:

LaunchedEffect(key1 = pagerState) {
        snapshotFlow { pagerState.currentPage }.collect { page ->
             println("Android: Page selected $page")
             webView?.evaluateJavascript("onPageSelected($page);", null)
             //webView?.loadUrl("javascript:onPageSelected($page);")
       }
}

This unfortunately doesn’t work, I get this error:

[INFO:CONSOLE(1)] "Uncaught ReferenceError: onPageSelected is not defined", source: http://192.168.0.15:5173/ (1)

I tried both evaluateJavascript and the commented-out loadUrl and none of them work.

This is how my WebView is setup. I think everything is OK because the 3D is rendering as expected

AndroidView(
      factory = { context ->
                WebView(context).apply {
                   settings.apply {
                       javaScriptEnabled = true
                       javaScriptCanOpenWindowsAutomatically = true
                       domStorageEnabled = true
                   }
                webViewClient = CustomWebViewClient().apply {}
                loadUrl("http://192.168.0.15:5173/")
            }
     },
     update = { webView = it },
     modifier = modifier
)

And this is the HTML + JS code being displayed in the WebView:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - lights - point lights</title>
    <meta charset="utf-8">
    <meta content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
          name="viewport">
    <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>

<script type="importmap">
            {
                "imports": {
                    "three": "../build/three.module.js",
                    "three/addons/": "./jsm/"
                }
            }

</script>
<script type="module">

            import * as THREE from 'three';

            import Stats from 'three/addons/libs/stats.module.js';

            import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

            let camera, scene, renderer,
                light1, light2, light3, light4,
                object, stats;

            const clock = new THREE.Clock();

            init();
            animate();
            onPageSelected(0);

            function init() {

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 100;

                scene = new THREE.Scene();

                //model

                const loader = new OBJLoader();
                //const objPath = 'models/obj/walt/WaltHead.obj'
                const objPath = 'models/obj/male02/male02.obj'
                loader.load(objPath, function ( obj ) {

                    object = obj;
                    object.scale.multiplyScalar( 0.8 );
                    object.position.y = - 30;
                    scene.add( object );

                } );

                const sphere = new THREE.SphereGeometry( 0.5, 16, 8 );

                //lights

                light1 = new THREE.PointLight( 0xff0040, 400 );
                light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
                scene.add( light1 );

                light2 = new THREE.PointLight( 0x0040ff, 400 );
                light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
                scene.add( light2 );

                light3 = new THREE.PointLight( 0x80ff80, 400 );
                light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
                scene.add( light3 );

                light4 = new THREE.PointLight( 0xffaa00, 400 );
                light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
                scene.add( light4 );

                //renderer

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                //stats

                stats = new Stats();
                document.body.appendChild( stats.dom );

                window.addEventListener( 'resize', onWindowResize );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                render();
                stats.update();

            }

            function render() {

                const time = Date.now() * 0.0005;
                const delta = clock.getDelta();

                if ( object ) object.rotation.y -= 0.5 * delta;

                light1.position.x = Math.sin( time * 0.7 ) * 30;
                light1.position.y = Math.cos( time * 0.5 ) * 40;
                light1.position.z = Math.cos( time * 0.3 ) * 30;

                light2.position.x = Math.cos( time * 0.3 ) * 30;
                light2.position.y = Math.sin( time * 0.5 ) * 40;
                light2.position.z = Math.sin( time * 0.7 ) * 30;

                light3.position.x = Math.sin( time * 0.7 ) * 30;
                light3.position.y = Math.cos( time * 0.3 ) * 40;
                light3.position.z = Math.sin( time * 0.5 ) * 30;

                light4.position.x = Math.sin( time * 0.3 ) * 30;
                light4.position.y = Math.cos( time * 0.7 ) * 40;
                light4.position.z = Math.sin( time * 0.5 ) * 30;

                renderer.render( scene, camera );

            }

            function onPageSelected(page) {
                console.log("hello world " + page);
            }

</script>
</body>
</html>

Interesting observation:
The onPageSelected(0); called from within the JS code itself works as expected and I get this logged:

[INFO:CONSOLE(122)] "hello world 0", source: http://192.168.0.15:5173/index.html?html-proxy&index=0.js (122)

It’s curious that the “source” is different than the function call that failed.

Another interesting thing is that if I move the function definition out of this
<script type="module"> block, into it’s own <script> block, it works! But I need it to be in that block because I need it to alter a variable that is used during 3D rendering.

So my assumption is that this type="module" thing is changing the visibility of the function and preventing it from being accessible from Android. I found a similar unanswered question from years ago with the same problem: Android Webview evaluateJavascript not able to find function inside a ES6 module file
I wonder what can be done to fix it?

I can set the read status of a whatsapp message through the meta API: https://developers.facebook.com/docs/whatsapp/cloud-api/guides/mark-message-as-read

However, I can’t seem to find if there is a way to do it through twilio api.

Does anyone know if this is possible?

Would be incredibly useful 🙂

I tried using the update method here: https://www.twilio.com/docs/whatsapp/api/message-resource#update-a-message-resource, but that is only for certain use cases listed here

Updates the body of a Message resource. Send a POST request to a Message resource's URI containing the updated parameters.

This action is primarily used to redact Message content. To redact a Message resources's Body, send a POST request to the Message resource's URI and set the Body parameter as an empty string: "". This redacts the Body of a message while keeping the other Message resource properties intact.

I am trying to solve issue where html element needs to follow mouse. It works as expected when I have scale(1) but once I increase or decrease scale, I cannot find way to factor in scale. Below is my code and I have created demo as well.

Link to :https://jsfiddle.net/up4b6g9x/6/

Any help is appreciated. Thank you.

HTML

<div id="box1">
  <div id="nestedBox1">
  
  </div>
</div>

CSS

#box1 {
  width: 500px;
  height: 500px;
  background: red;
  transform: translate(0px, 0px) scale(1);
}

#nestedBox1 {
  width: 200px;
  height: 200px;
  background: green;
}

* {
  padding: 0;
  margin: 0;
}

JS

const nestedBox1 = document.getElementById("nestedBox1")
const box1 = document.getElementById('box1')

const scale = 1

box1.addEventListener('mousemove', (e) => {
    nestedBox1.style.transform = `translate(${(e.clientX)}px, ${e.clientY}px)`
})

I am trying to solve issue where html element needs to follow mouse. Its work as expected when I have scale(1) but once I increase or decrease scale, I cannot find way to factor in scale. Below is my code and I have created demo as well.

Link to :https://jsfiddle.net/up4b6g9x/6/

Any help is appreciated. Thank you.

HTML

<div id="box1">
  <div id="nestedBox1">
  
  </div>
</div>

CSS

#box1 {
  width: 500px;
  height: 500px;
  background: red;
  transform: translate(0px, 0px) scale(1);
}

#nestedBox1 {
  width: 200px;
  height: 200px;
  background: green;
}

* {
  padding: 0;
  margin: 0;
}

JS

const nestedBox1 = document.getElementById("nestedBox1")
const box1 = document.getElementById('box1')

const scale = 1

box1.addEventListener('mousemove', (e) => {
    nestedBox1.style.transform = `translate(${(e.clientX)}px, ${e.clientY}px)`
})

The way of managing the network is different on Windows and Linux. I have no problem under Windows. However, on Ubuntu, after connecting to Discord, when I turn off my internet connection, I get a DNS error after 30 seconds. This doesn’t happen on Windows. The problem is that I don’t know exactly where the error is coming from and therefore I can’t manage it. What to do ?

The error:

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error: getaddrinfo EAI_AGAIN discord.com
    at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:118:26) {
  errno: -3001,
  code: 'EAI_AGAIN',
  syscall: 'getaddrinfo',
  hostname: 'discord.com'
}

I searched a lot of topics on the internet, a little source code, and put try-catch everywhere in my code.

I am trying to get my side bar text to come out when the sidebar button is clicked one at a time with a slight delay. However only one of the text comes out and the second comes out only after i close the sidebar. There is also the issue of the text overlapping. I have tried a lot of methods and cant get it to stop overlapping.

const sidebarBut = document.querySelector('.sideBarBut');
let openClose = false;
let animationInProgress = false;
const list = document.querySelectorAll('.projects');
sidebarBut.addEventListener('click', animate);

function animate(){
    if (animationInProgress) return;
    animationInProgress = true;
    const sidebar = document.getElementById('sidebar');
    
    if (openClose !== true) {
        sidebar.classList.remove('animate2');
        sidebar.classList.add('animate1');
        document.querySelector('.animate1').style.animationPlayState = "running";
        list.forEach((link, index) => {
            setTimeout(function() {
                link.classList.remove('animate4');
                link.classList.add('animate3');
                document.querySelector('.animate3').style.animationPlayState = "running";
              }, 100);
        });
        openClose = true;
    } else {
        sidebar.classList.remove('animate1');
        sidebar.classList.add('animate2');
        document.querySelector('.animate2').style.animationPlayState = "running";
        list.forEach((link, index) => {
            link.classList.remove('animate3')
            link.classList.add('animate4');
            document.querySelector('.animate4').style.animationPlayState = "running";
        });
        openClose = false;
    }

    setTimeout(() => {
        animationInProgress = false;
    }, 600);
}

body {
    margin: 0;
    background-color: black;
}

/*--------Header--------*/

#header {
    position: sticky;
    top: 0;
    z-index: 999;
}

.header1 {
    text-align: center;
    max-width: 100%;
    width: 100%;
    height: 50px;
    background-color: black;
}

.aboutButton {
    display: inline-block;
    height: 50px;
    width: 150px;
    line-height: 50px;
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 20px;
    position: relative;
    left: 5px;
}

.homeButton {
    display: inline-block;
    height: 50px;
    width: 150px;
    line-height: 50px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-family: sans-serif;
}

.projectButton {
    display: inline-block;
    height: 50px;
    width: 150px;
    line-height: 50px;
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 20px;
    position: relative;
    right: 5px;
}

.aboutButton:hover {
    color: rgb(200, 200, 200);
}

.homeButton:hover {
    color: rgb(200, 200, 200);
}

.projectButton:hover {
    color: rgb(200, 200, 200);
}

.githubButton {
    position: absolute;
    top: -223.8px;
    left: 83.3%;
    transform: scale(0.0675);
}

.linkedinButton {
    position: absolute;
    top: -230px;
    left: 80%;
    transform: scale(0.065);
}

.instagramButton {
    position: absolute;
    top: -230px;
    left: 76.65%;
    transform: scale(0.065);
}

.githubButton:hover {
    transform: scale(0.075);
}

.linkedinButton:hover {
    transform: scale(0.075);
}

.instagramButton:hover {
    transform: scale(0.075);
}

.header2 {
    max-width: 100%;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, black, white, black);
}

/*--------Sidebar--------*/

.sideBarBut {
    transform: scale(0.065);
    background-color: black;
    position: fixed;
    bottom: 742.5px;
    left: -235px;
    cursor: pointer;
}

.sideBarBut:hover {
    filter: brightness(80%);
}

.sidebarTitle {
    color: white;
    position: fixed;
    top: -50px; /*7px*/
    left: 95px;
    font-size: 28px;
    font-family: sans-serif;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

@keyframes titleDrop {
    0% {
        width: 0;
        border-right: 0px solid transparent;
    }
    100% {
        width: 250px;
        border-right: 2px solid white;
    }
}

#sidebar {
    z-index: 1000;
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    border-right: 0px solid transparent;
}

.animate1 {
    animation-play-state: paused;
    animation-name: sidebarOpen;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.animate2 {
    animation-play-state: paused;
    animation-name: sidebarClosed;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

@keyframes sidebarOpen {
    0% {
        width: 0;
        border-right: 0px solid transparent;
    }
    100% {
        width: 250px;
        border-right: 2px solid white;
    }
}

@keyframes sidebarClosed {
    0% {
        width: 250px;
        border-right: 2px solid white;
    }

    100% {
        width: 0;
        border-right: 0px solid transparent;
    }
}

.projectLinks {
    width: 200px;
    position: fixed;
    color: white;
    list-style: none;
    padding-left: 0;
}

.projects {
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    font-family: sans-serif;
    position: fixed;
    left: -1000px;
    top: 60px;
}

.projects:hover {
    color: rgb(200, 200, 200);
}

.animate3 {
    animation-play-state: paused;
    animation-name: sidebarLinks1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.animate4 {
    animation-play-state: paused;
    animation-name: sidebarLinks2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes sidebarLinks1 {
    0% {
        left: -500px;
    }
    100% {
        left: 35px;
    }
}

@keyframes sidebarLinks2 {
    0% {
        left: 35px;
    }
    100% {
        left: -500px;
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link rel="stylesheet" href="css/projectsSheet.css">
        <title>Projects Page</title>
    </head>
    <body>
        <header id="header">
            <div class="header1">
                <div class="mainBut">
                    <a href="index.html" class="aboutButton">About Me</a>
                    <a href="index.html" class="homeButton">Home</a>
                    <a href="projects.html" class="projectButton">Projects</a>
               </div>
                <div class="sideBut">
                    <a href="https://github.com/aidanbh16" target="_blank"><img src="img/github.512x499.png" alt="github" class="githubButton"></a>
                    <a href="https://www.linkedin.com/in/aidan-holton/" target="_blank"><img src="img/linkedin-app-white-icon.png" alt="linkedin" class="linkedinButton"></a>
                    <a href="https://www.instagram.com/holton_aidan/" target="_blank"><img src="img/instagram-white-icon.png" alt="instagram" class="instagramButton"></a>
                </div>
            </div>
            <div class="header2"></div>
        </header>
        <section>
            <div id="sidebar" class="animate1">
                <button type="button" class="sideBarBut"><img src="img/sidebar.png"></button>
                <span class="sidebarTitle">Projects</span>
                <ul class="projectLinks">
                    <li><a class="projects" href="projects/Tic Tac Toe Project copy/index.html">Tic Tac Toe Project</a></li>
                    <li><a class="projects" href="projects/color changer proj/index.html">Color Changer Project</a></li>
                </ul>
            </div>
        </section>
        <script src="sidebar.js"></script>
    </body>
</html>

Be gentle, I am a very very new newb!

I am trying to show only the data of a single item. My function in the backend for retrieval from MySQL does what it should (shows all the data for a single id). I am passing the ID successfully from a click using useSearchParams. However, I am showing everything for all items in the database in my return. This is progress, I wasn’t getting the id previously!

I think I need to use useEffect to conditionally access id specific data but I have tried so many things at this point i’ve got myself tied in some knots. Any help appreciated!

import React from "react";
import { Link, useSearchParams } from "react-router-dom";
import { useEffect, useState } from "react";


export default function Singleitem() {
const [singleItem, setSingleItem] = useState([])
const [searchParams, setSearchParams] = useSearchParams();

const id = searchParams.get("item");

useEffect(() => {
  getItem();
}, [id]);

const getItem = async function () {
  console.log(id)
  try {
    const response = await fetch(`/api/items?item=${id}`);
    const data = await response.json();
    setSingleItem(data);
  } catch (err) {
    console.log(err);
  }
};

return (

  <div>
  <ul>
  {singleItem.map((item) => (
      <li key={item.id}>
        {item.type}, {item.era}
      </li>
    ))}
  </ul>
</div>
);

}

I would like to display a row of 2-5 figures containing an image and a caption.
The figures must have the same height and the aspect ratio of the images must be maintained.
HTML would look something like this:

<div class="container">
  <figure style="--w:100; --h:100;">
    <img src="https://placehold.co/100x100/f08/fff" style="--w:100; --h:100;">
    <figcaption>caption</figcaption>
  </figure>
  <figure style="--w:200; --h:40;">
    <img src="https://placehold.co/200x40/0f8/fff" style="--w:200; --h:40;">
    <figcaption>caption</figcaption>
  </figure>
  <figure style="--w:150; --h:200;">
    <img src="https://placehold.co/150x200/8f0/fff" style="--w:150; --h:200;">
    <figcaption>caption</figcaption>
  </figure>
  <figure style="--w:250; --h:200;">
    <img src="https://placehold.co/250x200/f80/fff" style="--w:250; --h:200;">
    <figcaption>caption</figcaption>
  </figure>
</div>

codepen

I’ve found something similar here, but it doesn’t work right with the figure element, unless I use object fit cover on the img tag.

Display images side-by-side with equal height