Category: javascript

I tried to make a d3 voronoi map using this plugin with svelte

generally I’m following from this block

I debugging the step one by one, the <svg> attribute are changing, the <g> are appended, but likely the <path> “d” attribute is not drawing.

App.svelte

<script>
    import Voronoi from './Voronoi.svelte'
</script>

<Voronoi />

Voronoi.svelte

<script>
    import * as d3 from 'd3'
    import { voronoiMapSimulation } from 'd3-voronoi-map'
    import { onMount } from 'svelte'

    let el;

    var svgWidth = 300,
        svgHeight = 300,

    const data = Array(50) // array of random weight data
        .fill()
        .map(() => {
            return {
            name: 'Lorem Ipsum',
            weight: Math.random() * 10,
            color: 'indianred'
            }
        })

    var simulation = voronoiMapSimulation(data)
        .weight((d) => { return d.weight})
        .clip([[0,0], [0,height], [width, height], [width,0]])
        .stop();
    
    var state = simulation.state(); 

    while (!state.ended) {
        simulation.tick();
        state = simulation.state();
    }

    var polygons = state.polygons;

    console.log(polygons)                       // logging the polygons data
    console.log("M" + polygons.join(",") + "z") // logging the join() function

    onMount(() => {
        let container = d3.select(el) //all this part is working just fine
        .attr('width', svgWidth)
        .attr('height', svgHeight)
        .style('background-color', 'steelblue')
        .append('g')
        .classed('cells', true)

        let cells = container.select('.cells')
        .selectAll('cell')
        .data(polygons)

        cells.enter()
        .append('path') // no path are appended
        .classed('cell', true)
        .merge(cells)
        .attr("d", (d) => { return "M" + d.join(",") + "z"; }) // this is not working
        .style("stroke", "blue")
        .style("fill", (d) => {
                return d.site.originalObject.data.originalData.color;
            }) // fill color not working, I think because the path isn't drawing
    })
</script>

<svg bind:this={el}>
</svg>

I tried to logged the polygons and the join() and it’s all works

When I logged the console.log("M" + polygons.join(",") + "z"), I found some e- in the middle of it, but I don’t know if it’s a problem

raw joined data:

M209.6394882056722,217.76062259711614,219.42214407592596,220.71658449764695,234.0138478892624,206.53431131421576,228.5165979310529,177.208426003887,197.4853179971005,186.41562396678216,209.6394882056722,217.76062259711614,178.3735779994064,227.4558182808313,168.21077190089068,246.70089924035258,171.7040449179756,262.52611665364,186.89310684521044,280,220.72567208302175,280,233.35340337206247,245.5035233326811,219.42214407592596,220.71658449764695,209.6394882056722,217.76062259711614,197.4853179971005,186.41562396678216,193.57555189055475,185.2087397816168,166.13924406602845,214.1544295658894,178.3735779994064,227.4558182808313,82.21067155063123,224.6943258375931,48.92937799382137,219.69303326753993,35.00204547718623,248.46584194163455,44.28155228176286,280,87.9590507628975,280,94.97020286206087,238.62435553119815,82.21067155063123,224.6943258375931,94.63620810293207,202.41073752194703,83.08693585693416,186.84266735137402,59.64348348742079,189.15440852222932,48.42376757375917,218.6108056245493,48.92937799382137,219.69303326753993,82.21067155063123,224.6943258375931,94.97020286206087,238.62435553119815,111.11411486203988,233.15769900415094,110.18676671497265,206.08731035498698,94.63620810293207,202.41073752194703,273.19762214942193,220.93476608019907,234.0138478892624,206.53431131421576,219.42214407592596,220.71658449764695,233.35340337206247,245.5035233326811,249.49566663035924,245.61916298707754,273.19762214942193,220.93476608019907,280,219.55472766742125,280,171.05642440945795,253.11974482703565,163.50173433695755,230.12443658612182,174.71448532603955,228.5165979310529,177.208426003887,234.0138478892624,206.53431131421576,280,219.55472766742125,273.19762214942193,220.93476608019907,249.49566663035924,245.61916298707754,270.5519054979295,280,280,280,55.040257009505204,94.99527708231432,66.55721194150495,93.38443171386717,71.86381939512091,89.46265542646103,71.28823242293244,51.09955482632813,46.07344966286643,54.047160935084236,36.14479135970286,70.24518393350495,55.040257009505204,94.99527708231432,45.48903689955725,119.91411961625694,52.10581889556727,127.95480417222322,78.7410000401472,121.37424947129921,80.86505739177431,112.29359480152539,66.55721194150495,93.38443171386717,55.040257009505204,94.99527708231432,36.14479135970286,70.24518393350495,0,74.85791443445417,0,120.50990139508698,45.48903689955725,119.91411961625694,48.92937799382137,219.69303326753993,48.42376757375917,218.6108056245493,0,208.95894658367183,0,247.8273296890119,35.00204547718623,248.46584194163455,136.70743987736478,178.14227442960427,121.32967845900127,154.37646962399447,95.00053839040741,152.9664237717475,85.99271773835625,162.86935304352193,83.08693585693416,186.84266735137402,94.63620810293207,202.41073752194703,110.18676671497265,206.08731035498698,135.02364802439817,190.69575060779133,136.70743987736478,178.14227442960427,174.23540685820797,158.1816752389342,174.68350745690972,149.9576760066293,142.95931884050395,129.54930662306106,121.32967845900127,154.37646962399447,136.70743987736478,178.14227442960427,135.02364802439817,190.69575060779133,161.24574733340532,214.24663127017712,166.13924406602845,214.1544295658894,193.57555189055475,185.2087397816168,174.23540685820797,158.1816752389342,210.3531919874576,89.2269090808164,199.3410352689765,94.29144876451383,203.29846160632607,127.84412393808651,224.05462343628366,131.94709667189576,229.33597782418317,97.06955376564063,210.3531919874576,89.2269090808164,225.20656124318964,61.31029126769361,208.97373109436558,37.125024826736706,201.995438067238,34.31231042753116,178.38500088006657,37.85550609344152,161.53749513012312,59.63998063992319,167.6368138874493,81.51177696542273,199.3410352689765,94.29144876451383,210.3531919874576,89.2269090808164,229.33597782418317,97.06955376564063,239.7238527628775,88.9471064167723,230.64494123815066,62.788809798929165,225.20656124318964,61.31029126769361,280,132.63591591541677,252.1370141049501,144.02995184879057,253.11974482703565,163.50173433695755,280,171.05642440945795,279.99999999999994,2.7150392342192953e-14,267.2626310475531,2.842170943040401e-14,257.8589351465698,8.573787931699899,270.64018992021767,40.34912823558824,280,42.55289021993038,197.4853179971005,186.41562396678216,228.5165979310529,177.208426003887,230.12443658612182,174.71448532603955,226.37482403311284,134.6552594274345,224.05462343628366,131.94709667189576,203.29846160632607,127.84412393808651,174.68350745690972,149.9576760066293,174.23540685820797,158.1816752389342,193.57555189055475,185.2087397816168,203.29846160632607,127.84412393808651,199.3410352689765,94.29144876451383,167.6368138874493,81.51177696542273,139.40400196347252,103.6393596991219,142.95931884050395,129.54930662306106,174.68350745690972,149.9576760066293,230.12443658612182,174.71448532603955,253.11974482703565,163.50173433695755,252.1370141049501,144.02995184879057,226.37482403311284,134.6552594274345,83.08693585693416,186.84266735137402,85.99271773835625,162.86935304352193,50.958261288213336,160.5944968165375,49.4503901141156,162.6990558402386,59.64348348742079,189.15440852222932,71.86381939512091,89.46265542646103,88.54900634312853,100.98791397082051,122.20073004101161,91.87336634445683,126.9707473970839,55.66912290970013,121.02627284307691,48.53937248341679,76.50348854377961,46.033896483710286,71.28823242293244,51.09955482632813,71.86381939512091,89.46265542646103,66.55721194150495,93.38443171386717,80.86505739177431,112.29359480152539,88.54900634312853,100.98791397082051,-5.684341886080802e-14,74.85791443445419,36.14479135970286,70.24518393350495,46.07344966286643,54.047160935084236,18.847809394674925,16.815275809380985,0,20.525474213015897,142.95931884050395,129.54930662306106,139.40400196347252,103.6393596991219,122.20073004101161,91.87336634445683,88.54900634312853,100.98791397082051,80.86505739177431,112.29359480152539,78.7410000401472,121.37424947129921,95.00053839040741,152.9664237717475,121.32967845900127,154.37646962399447,168.21077190089068,246.70089924035258,178.3735779994064,227.4558182808313,166.13924406602845,214.1544295658894,161.24574733340532,214.24663127017712,151.98527642701538,239.2216046466324,168.21077190089068,246.70089924035258,151.98527642701538,239.2216046466324,134.65038495788767,246.26372944630424,133.05692458714134,280,161.6067033858581,280,171.7040449179756,262.52611665364,111.11411486203988,233.15769900415094,134.65038495788767,246.26372944630424,151.98527642701538,239.2216046466324,161.24574733340532,214.24663127017712,135.02364802439817,190.69575060779133,110.18676671497265,206.08731035498698,111.11411486203988,233.15769900415094,94.97020286206087,238.62435553119815,87.9590507628975,280,133.05692458714134,280,134.65038495788767,246.26372944630424,85.99271773835625,162.86935304352193,95.00053839040741,152.9664237717475,78.7410000401472,121.37424947129921,52.10581889556727,127.95480417222322,50.958261288213336,160.5944968165375,186.89310684521044,280,171.7040449179756,262.52611665364,161.6067033858581,280,226.37482403311284,134.6552594274345,252.1370141049501,144.02995184879057,280,132.63591591541677,280,95.01615601514837,239.7238527628775,88.9471064167723,229.33597782418317,97.06955376564063,224.05462343628366,131.94709667189576,233.35340337206247,245.5035233326811,220.72567208302175,280,270.5519054979295,280,249.49566663035924,245.61916298707754,122.20073004101161,91.87336634445683,139.40400196347252,103.6393596991219,167.6368138874493,81.51177696542273,161.53749513012312,59.63998063992319,126.9707473970839,55.66912290970013,71.28823242293244,51.09955482632813,76.50348854377961,46.033896483710286,75.70534099535581,0,24.967871750559674,2.842170943040401e-14,18.847809394674925,16.815275809380985,46.07344966286643,54.047160935084236,0,0,-5.684341886080802e-14,20.52547421301591,18.847809394674925,16.815275809380985,24.96787175055968,0,2.842170943040401e-14,166.27543867540044,49.4503901141156,162.6990558402386,50.958261288213336,160.5944968165375,52.10581889556727,127.95480417222322,45.48903689955725,119.91411961625694,0,120.50990139508698,280,95.01615601514837,280,42.552890219930376,270.64018992021767,40.34912823558824,230.64494123815066,62.788809798929165,239.7238527628775,88.9471064167723,166.5619255367633,0,127.1374427032487,0,121.02627284307691,48.53937248341679,126.9707473970839,55.66912290970013,161.53749513012312,59.63998063992319,178.38500088006657,37.85550609344152,127.1374427032487,0,75.70534099535581,0,76.50348854377961,46.033896483710286,121.02627284307691,48.53937248341679,166.5619255367633,0,178.38500088006657,37.85550609344152,201.995438067238,34.31231042753116,196.8236241974641,0,0,280,44.28155228176286,280,35.00204547718623,248.46584194163455,0,247.8273296890119,196.82362419746414,0,201.995438067238,34.31231042753116,208.97373109436558,37.125024826736706,235.83974755823002,0,49.4503901141156,162.6990558402386,-7.105427357601002e-15,166.27543867540044,0,208.95894658367183,48.42376757375917,218.6108056245493,59.64348348742079,189.15440852222932,270.64018992021767,40.34912823558824,257.8589351465698,8.573787931699899,243.97251889316868,0,235.83974755823002,0,208.97373109436558,37.125024826736706,225.20656124318964,61.31029126769361,230.64494123815066,62.788809798929165,243.97251889316868,-4.440892098500626e-16,257.8589351465698,8.573787931699899,267.2626310475531,-1.7763568394002505e-15z

Hello in the past I made this python code that randomly generates an equation takes the user’s input and does it for a minute. This is the Python

import random 
import time 
correct=0 
wrong=0 
def random_problem(num_operations):
  eq = str(random.randint(1, 100))
  for _ in range(num_operations):
    eq += random.choice(["+"])
    eq += str(random.randint(1, 100))
  return eq 
start = time.time()
while True:
  elapsed = time.time() - start
  if elapsed > 60: 
    total_questions=correct+wrong
    print(correct,"Correct",wrong,"Wrong,",total_questions," total questions") 
    break
  problem = random_problem(1) 
  ask=int(input(problem +": ")) 
  solution = eval(problem)
  if ask == solution: 
    correct=correct+1
    print("Correct")
  else:
    wrong=wrong+1
    print("Wrong, the correct answer is",solution)

Now I want to put it on a website in Javascript. This is the Javascript code the I have so far

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

return(getRandomInt(10));

This randomly generates an equation. I would like help doing the other parts because I have not found a way to do the other parts Thanks.

So basically I’m using textnodes which I’m not overly familiar with in an html document.
It uses IDs to go to the next part of the code and outputs text to screen.
My problem is I want to use a variable in the text but it wont let me, here is the code:

//This is one of the middle text nodes I didn't copy all the code
  },
    {
        id: 5,
        text: 'Welcome ' + name + ' let us start the day!',
        options: [
            {
                text: "Let's go",
                nextText: 6
            }

        ]
    },

Any suggestions? the output right now is just:
Welcome Let us start the day
but I know that name isn’t null.

I am building my own Virtual DOM implementation. So, for building a patch function, I need to differentiate between attribute (e.g. data-*, title, href, etc.) and property (value, checked, etc.)

The additional complexity lies due to the presence of custom elements (Web Components) which may have random properties. My question is how do I always correctly determine if the incoming key/value should be applied as attribute or property?

I’m missing something here. This is my controller method

public void SubmitSweep(int personID, int DD, int MM, int YYYY, int hh, int mm, int dealId)

This is my button def

<button id="submit@(person.Id)" class="btn btn-secondary" OnClick="submitSweep(@(person.Id), @(person.sweepDay), @(person.sweepMonth), @(person.sweepYear), @(person.sweepHour), @(person.sweepMinutes), @(person.dealId))">Submit Sweep</button>

This is my JS function

function submitSweep(thePersonID, sweepDay, sweepMonth, sweepYear, sweepHours, sweepMinutes, theDealId) {
        
        $.ajax({
            type: 'POST',
            url: '@Url.Action("SubmitSweep", "Home")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify({ personID: thePersonID, DD: sweepDay, MM: sweepMonth, YYYY: sweepYear, hh: sweepHours, mm: sweepMinutes, dealId: theDealId }),
            success: function (data) {
                alert("Success");
            },
            error: function (ob, errStr) {
                alert("An error occured.Please try after sometime." + errStr + " " + ob.responseText);
            }
        });
    }

The function is being hit and the arguments are populated. I’ve hacked around and determined that the issue is with the AJAX data field. If I have no arguments in the controller, I get to my break point, so confident the error is in my data line.

I’m running VS 2022, sp mostly newer libraries I guess.

Any help or pointers would be immensely appreciated.

Cheers

J

My goal is to setApprovalForAll for a token contract before executing the safeTransferFrom function for each tokenId in the NFT collection. This way I will be able to transfer NFTs to another address without MetaMask asking for several approvals.

However I am getting an error upon executing the safeTransferFrom function, the following error is triggered: view image
This happens even after I have called the setApprovalForAll function. The setApprovalForAll transaction seems to have also went through successfully, view MetaMask activity, but calling isApprovedForAll says otherwise (view comment on line 16 in code).

I believe it is possible the error is raised because of me not calling the setApprovalForAll function properly, because why else would isApprovedForAll return false?

document.querySelector('.click-me').onclick = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = await provider.getSigner();

    const CONTRACT_ADDRESS = '0x...';  // token contract address
    const RECEIVER_ADDRESS = '0x...';  // this address expected to get approval for all
    const ABI = [
        'function setApprovalForAll(address operator, bool _approved)',
        'function safeTransferFrom(address from, address to, uint256 tokenId)',
        'function isApprovedForAll(address owner, address operator) view returns (bool)'
    ];

    const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer);
    try {
        const isApproved = await contract.isApprovedForAll(CONTRACT_ADDRESS, RECEIVER_ADDRESS);
        console.log(isApproved);  // returns false even after several attempts

        await contract.setApprovalForAll(RECEIVER_ADDRESS, true);  // seems to work fine, even shows in MetaMask activity

        // ERROR SEEMS TO OCCUR HERE
        const test = await contract.safeTransferFrom(CONTRACT_ADDRESS, RECEIVER_ADDRESS, 749);  // 749 is my NFT tokenId
        console.log(test);
    } catch (error) {
        console.log(error.message)
    }    
};

I hope I was clear… thanks in advance! 🙂

Im creating a project of crypto using jQuery. I created a bunch of cards using $("#div'sId").append inside for loop. each toggle button (input type=checkbox) have the same id name + a specific index number he got from the for loop.

Im trying to do 2 things:

1. limit the selected checkboxes to 5
2. send the specific index number of each selected checkbox to send data to another function

I tried to select the checkboxes id, class, and even [input type=checkbox] without any success.

Html (inside the JavaScript)-

for (let index = 0; index < coins.length; index++) {
    $("#mainDiv").append(
<div class="form-check form-switch position-absolute end-0" style="transform: translateY(-35px);">
                              <input
                                class="form-check-input"
                                type="checkbox"
                                role="switch"
                                id="flexSwitchCheckChecked${index}"
                                style="background-color: rgb(62,138,152); border:rgb(5,19,20);"
                              />
                              <label
                                class="form-check-label"
                                for="flexSwitchCheckChecked"
                              ></label>
                            </div>

})

                                  how can I do it?

**There are other elements inside the .append function but they are not relevant

I have an object like the following:

class obj{
    constructor(name){
        this.name = name
    }

    update(){
        console.log(this.name)
    }
}

then I have an array of those objects, let’s say:

var array = [new obj("A"), new obj("B"), new obj("C")]

How do I programmatically create a button for each one of the objects and link the onclick function of each button to a different object of the array?

In my head this was something like:

for (var i = 0; i < array.length; i++) {
    var button = document.createElement("button")
    button.innerText = array[i].name
    button.addEventListener("click", array[i].update)
}

But this doesn’t work.

Thank you.

I want to add two Div in the page, one Div for the top part, which is ready-only, the other one Div for the lower part, which is editable. What I want to achieve is:

1. Make the lower Div editable and scrollable if content is too long.
2. While scrolling the lower Div, the top Div should stay at the same position

Here is the code I have:

<html>
<body>

<div>
<div>Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>

In the code above, if I click on the lower Div, we can then type, then if we keep pressing Enter, it will show the vertical scroll bar, but if I scroll, the top Div will be scrolled up too, which I want to avoid.

So, how can I make the scroll bar only applied to the lower Div?

I have a string. I also have an object in which one of its properties is the word in that string, and I need to get the value of that property.

I tried accessing it directly with the variable in which the string is contained, but obviously it didn’t work, so I tried many parsing methods. None of them worked. Is there any possible way to do this?

Here’s my code:

var object = {cars : ["fiat","renault"], bikes : ["vespa","kawasaki"]};

let string = "cars";
let parsedString = JSON.parse(string);
//I need to get to the value "fiat", so I tried this:
console.log(object.parsedString[0]);

Sorry if this was weirdly explained, english is not my first language.

I am creating a dropdown menu in my navigation bar but when I click on it, nothing happens(used the dropdown code from w3schools website). I have tried everything I could but it doesn’t solve my problem.

this is what my navbar looks like:

here’s my html code:

     <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "About", "Home")</li>
                    @*<li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        <li>@Html.DropDownList("Services","ALL")</li>*@
                    <li>
                        <div class="My_dropdown">
                            <button class="My_dropbtn" onclick="myFunction()">
                                Services
                                <i class="glyphicon glyphicon-chevron-down glyph-pad"></i>
                            </button>
                            <div class="My_dropdown-content" id="myDropdown">
                                <a href="#">service1</a>
                                <a href="#">service2</a>
                                <a href="#">service3</a>
                            </div>

                        </div>
                    </li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="@Url.Action("SignUp","Account")"><Span class="glyphicon glyphicon-user"></Span> Sign Up </a></li>

                    <li><a href="@Url.Action("Login","Account")"><Span class="glyphicon glyphicon-log-in"></Span> Login </a></li>
                </ul>
            </div>

this is what CSS looks like:

    .navbar-inverse .navbar-nav > li > a {
    color: black;
}

    .navbar-inverse .navbar-nav > li > a:hover, .My_dropdown:hover .My_dropbtn, .My_dropbtn:focus {
        background-color: #8080ff;
        color: white;
    }
   .glyph-pad {
    left: -4px;
    top: 4px;
   }
   .My_dropdown {
    float: left;
    overflow: hidden;
   }

    .My_dropdown .My_dropbtn {
        cursor: pointer;
        font-size: 1em;
        border: none;
        outline: none;
        color: black;
        padding: 13px 12px;
        background-color: inherit;
        font-family: inherit; /* Important for vertical align on mobile phones */
        margin: 0px;
    }

   .My_dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .My_dropdown-content > a {
        float: none;
        color: black;
        padding : 13px 12px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
        .My_dropdown-content > a:hover {
            background-color: #8080ff;
        }

   .My_dropdown:hover .My_dropdown-content {
     display: block;
   }

   .show {
    display: block;
   }

this is my JavaScript file

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function (e) {
    if (!e.target.matches('.My_dropbtn')) {
        var myDropdown = document.getElementById("myDropdown");
        if (myDropdown.classList.contains('show')) {
            myDropdown.classList.remove('show');
        }
    }
}

this is how I rendered my scripts:

  @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/MyScripts")
@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)

I don’t know what I am doing wrong. Please Help

i’m creating a chat for a website and when i display the mesages i want to change the color when the you are the owner.
i dont know how to make it, because the ul tags get stacked when you add more mesages

btw the style that i want to ass is: style=”background-color: #C9DAE4;”

this is the code

socket.on("postmesage", function (mesage, owner) {
      var div = document.getElementById('chat');
      div.innerHTML += `
      <ul class="list-group list-group-horizontal" id="mesage">
          <li class="list-group-item list-group-item-warning">${mesage.mesage}</li>
          <li class="list-group-item list-group-item-warning" id="mesageowner">${mesage.owner}</li>
      </ul>`;

      if owner === document.getElementById("mesageowner").getAttribute('value')) {
alert("change style")
} 
    });

I have tried to get the mesage owner but it returns null.

I’m trying to implement a parallax banner that animates as you scroll similar to https://www.gatlinburg.com.

The animation plays like slides, each slide as you scroll. The page doesn’t scroll down while scrolling but there’s a Skip Intro button that will move the user to the content under the banner.

I haven’t been able to determine how this can be accomplished with just HTML, CSS and JS.

I want to create a list (now it is a scroll view with map()ped items and works well). But I don’t know how to add a slide menu to the items, which is displayed once I press screen from right and swipe to the left, just like the ios list swipe gesture. It is not necessary to be full ios-like elastinized, but I want it to be LOCKED – either show the all or not show any of the menu.

Look at the following prototype, it shows list items with swiped menu:

I’ve searched for it on the web, but the results are not related to my case, such as react-native-swiper, a library I’ve tried and is using. It can only swipe to the full width(or height) of space with pagination, but does not work for me.

And for other libraries, such as the main UI framework of my project, react-native-elements. It provides a swipeable component called ListItem.Swipeable, that works in some situations, but…

its implementation is a hack… the edge component relies on the covering by the card content. When the card moves left horizontally, the button shows. But once the card item is set to translucent, the menu buttons suddenly leaked out. I have thought about whether I could dynamically change a mask or opacity by monitoring the scrolling distance of the card, just like on a web page, but this library does not provide this kind of interface. That is.

What can I do?

I am creating a location management system using C#, SQL and ASP.NET. I want to show the card div if my Item type is equal to “Artificial” in my database and do so with all my item types.

I also want to be able to update their specific counts. I’m currently only updating the general count instead of each count individually. Any suggestions?

Here’s my code is below.

  @foreach (var item in Model.allItems)
            {

                @if (item.ItemType == "Artificial")
                {
            <div class="card-body" style="margin: 20px; padding: 50px; color: white; width: 700px; height: 700px; background-color: black;">

                <div class="hero-text">
                    <h1 style="font-size:50px">@item.Name</h1>
                </div>
                <h1>Category:</h1>
                <h2 class="card-title">@item.ItemType</h2>
                <h1>Item Type:</h1>
                <h2 class="card-title">@item.GroupType</h2>
                <h6 class="card-title">@item.Description</h6>
                <h1>Amount:</h1>
                <p class="card-text">@item.count</p>
                <div class="col">

                    <form method="post" asp-page-handler="update">
                        <input class="form-control" name="count" value="@item.HomebaseCount" type="number" min="0" step="1" />
                        <input type="hidden" name="name" value="@item.Name" />
                        <h1>Homebase Count:</h1>
                        <button class="btn btn-outline-primary">Update</button>
                    </form>

                </div>

                <div class="col">

                    <form method="post" asp-page-handler="update">
                        <input class="form-control" name="count" value="@item.BunkerCount" type="number" min="0" step="1" />
                        <input type="hidden" name="name" value="@item.Name" />
                        <h1>Bunker Count:</h1>
                        <button class="btn btn-outline-primary">Update</button>
                    </form>
                </div>



                <div class="col">

                    <form method="post" asp-page-handler="update">
                        <input class="form-control" name="count" value="@item.PouchCount" type="number" min="0" step="1" />
                        <input type="hidden" name="name" value="@item.Name" />
                        <h1>Pouch Count:</h1>
                        <button class="btn btn-outline-primary">Update</button>
                    </form>

                </div>
            </div>
                        }


                        }



                    </div>
                    
                </div>
</div>