Category: javascript

I’ve open an account on Supabase to host my database and though of connecting it to my Java Android project through Javascript. Is this possible? How can I do it?

Thanks in advance

I am trying to create a custom post header background for a forum website. But because I always want to make my life more difficult I tried to make it fancy. I also need to link to that script in every post.

When I duplicate the post (or simulate it by just ctrl+a ctrl+c ctrl+v ctrl+v the HTMP code) only the last post gets any smoke effect background. I tried to add the function to the window on init and loop it for every element with the SiffrinSmoke class but still only one smoke is displayed – at the bottom.

HTML:

<div class="SiffrinBody">
    <div class="SiffrinHeader">
        <div class="SiffrinSmoke">
            <!--h1>Siffrin<br>Drauglir</h1-->
            <h1 data-heading="Siffrin&#xa;Drauglir"></h1>
        </div>
        <div class="SiffrinCanvasBackground" id="SiffrinCanvasBackground"></div>
        <div class="SiffrinCanvasForeground" id="SiffrinCanvasForeground"></div>
        <img id="SiffrinHeaderBackground" src="https://i.imgur.com/iYnkBdZ.jpg">
        <img id="SiffrinWolf" src="https://i.imgur.com/MBLqG00.png">
    </div>
</div>

CSS:

 @import url('https://fonts.googleapis.com/css2?family=Arvo:ital@0;1&family=Carter+One&family=Dosis:wght@400;500;600&display=swap');

    .SiffrinBody .SiffrinHeader .SiffrinCanvasBackground{
        height: 330px;
        width: 656px;
        position: absolute;
        left: inherit;
        top: inherit;
        z-index: 5;
    }

    .SiffrinBody .SiffrinHeader .SiffrinCanvasForeground{
        height: 330px;
        width: 656px;
        position: absolute;
        left: inherit;
        top: inherit;
        z-index: 7;
    }

    .SiffrinBody .SiffrinHeader img{
        position: absolute;
        height: 330px;
        width: 656px;
        grid-row: 1;
    }

    .SiffrinBody .SiffrinHeader .SiffrinSmoke{
        width: 328px;
        height: 330px;
        position: relative;
        z-index: 6;
        float: right;
        display: block;
    }

    .SiffrinBody .SiffrinHeader .SiffrinSmoke canvas{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -4;
    }

    .SiffrinBody .SiffrinHeader #SiffrinHeaderBackground{
        z-index: 4;
    }

    .SiffrinBody .SiffrinHeader #SiffrinWolf{
        z-index: 6;

    }

    .SiffrinBody .SiffrinHeader h1{
        font-family: Carter One;
        z-index: 1000;
        color: white;
        grid-column: 2;
        font-size: 50;
        margin-top: 32%;
        text-align: center;
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
        -webkit-background-clip: text;
        background-size: cover;
        width: 100%;
        color: transparent;
        font-weight: 900;
        display: block;
        white-space: pre-wrap !important;
        line-height: 1.1em;
        text-shadow:  2px 2px 6px rgba(46,146,211,0.8);
    }

    .SiffrinBody .SiffrinHeader h1::before{
        content: attr(data-heading);
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        background: linear-gradient(45deg, rgba(255,255,255,0) 45%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%);
        -webkit-background-clip: text;
        color: transparent;
        mix-blend-mode: screen;
        animation: SiffrinShine 15s infinite linear;
        background-size: 200%;
    }

    .SiffrinBody .SiffrinHeader #SiffrinName{
        z-index: 22;
        transform: scale(0.8);
        left: 150px;
    }

    .SiffrinBody .SiffrinHeader{
        grid-row: 1;
        mask-image: linear-gradient(
            to top,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 1) 15px
        );
    }

    .SiffrinBody .SiffrinHeader > *{
        user-select: none;
    }

    .SiffrinBody{
        color: white;
        display: grid;
        grid-template-rows: 330px auto auto;
        grid-template-columns: 1fr;
        margin: 0;
        padding: 0;
        width: 656px;
        /*background-image: linear-gradient(#bad4eb, #bad4eb, #a7c8e7, #4789c6, #037ccf);*/
        background-image: url("https://i.imgur.com/UqFcRzS.jpg");
        background-repeat: repeat;
    }

    .SiffrinBody *::selection{
        background: rgba(225, 0, 255, 0.3);
        color: inherit;
    }

    .SiffrinBody .SiffrinHeader{
        /*
        z-index: 7;
        text-align: center;
        font-family: Oleo Script;
        margin: auto;
        font-size: 30px;
        transition-duration: 2s;
        transition-timing-function: ease-in-out;
        background-image: radial-gradient(#0e111800, #232b3e00, #24212a00, #403b6600);
        user-select: none;
        */
    }

    .SiffrinBody .SiffrinBody:hover .SiffrinHeader{
        /*
        letter-spacing: 0.35em;
        transition-duration: 3s;
        transition-timing-function: ease-in-out;
        transform: translate(0px, 40px);
        */
    }

    .SiffrinBody .SiffrinText{
        z-index: 7;
        margin: 10px 50px;
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        font-family: Dosis;
        font-size: 17px;
        margin-bottom: 0;
        line-height: 1.235em;
        font-weight: 500;
    }

    .SiffrinBody .SiffrinText::before{
  
        border-top: 3px solid blue;
        border-right: 3px solid blue;
    }

    .SiffrinBody .SiffrinText::after{

        border-bottom: 3px solid orange;
        border-left: 3px solid orange;
    }

    .SiffrinBody .SiffrinText p{
        padding: 0;
        margin-bottom: 1em;
    }

    .SiffrinBody .SiffrinText p u,
    .SiffrinBody .SiffrinText p i,
    .SiffrinBody .SiffrinText p q{
        font-family: Arvo;
        font-size: 16px;
    }

    .SiffrinBody .SiffrinText p u{
        text-decoration: none;
        color:rgb(250, 210, 255);
    }

    .SiffrinBody .SiffrinText p u::before {
        content: "“"
    }

    .SiffrinBody.SiffrinText p u::after {
        content: "”"
    }

    .SiffrinBody .SiffrinText p i{
        font-family: Arvo;
        color:rgb(250, 210, 255);
        font-style: italic;
    }

    .SiffrinBody .SiffrinText p q{
        text-decoration: none;
        color:rgb(219, 223, 255);
    }

    .SiffrinBody .SiffrinText p:last-child{
        margin: 0;
    }

    .SiffrinBody .SiffrinText p:first-child{
        margin-top: 0;
    }

    .SiffrinBody .SiffrinFooter{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin: 0;
    }

    .SiffrinBody .SiffrinFooter p{
        text-align: center;
        font-size: 20px;
        color: #f8f7fd;
        text-align: center;
    }

    @keyframes SiffrinShine {
        0% {background-position: 110%;}
        60% {background-position: -90%;}
        100% {background-position: -90%;}
    }

Import THREE:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>

JS:

function initiateSmoke() {
        smokeBackgrounds = document.getElementsByClassName('SiffrinSmoke');
        clock = new THREE.Clock();
        renderW = smokeBackgrounds[0].offsetWidth;
        renderH = smokeBackgrounds[0].offsetHeight;
        renderer = new THREE.WebGLRenderer({ alpha: true });
        renderer.setSize( renderW, renderH );

        scene = new THREE.Scene();
    
        camera = new THREE.PerspectiveCamera( 75, renderW / renderH , 1, 10000 );
        camera.position.z = 1300;
        scene.add( camera );
    
        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshLambertMaterial( { color: 0xaa6666, wireframe: false } );
        mesh = new THREE.Mesh( geometry, material );
        cubeSineDriver = 0;
    
        textGeo = new THREE.PlaneGeometry(300,300);
        THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS

        light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(-1,0,1);
        scene.add(light);
    
        smokeTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Smoke-Element.png');
        smokeMaterial = new THREE.MeshLambertMaterial({color: 0x333333, opacity: 1, map: smokeTexture, transparent: true});
        smokeGeo = new THREE.PlaneGeometry(650,650);
        smokeParticles = [];

        for (p = 0; p < 36; p++) {
            particle = new THREE.Mesh(smokeGeo,smokeMaterial);
            particle.position.set(Math.random() * 950 - 500, Math.random() * 620 - 300, Math.random() * 200 - 100);
            particle.rotation.z = Math.random() * 360;
            particle.scale.set(2,2,2);
            scene.add(particle);
            smokeParticles.push(particle);
        }
        for(i = 0; i < smokeBackgrounds.length; i++) {
            smokeBackgrounds[i].appendChild( renderer.domElement );
        }
    }
        
    function animateSmoke() {
        // note: three.js includes requestAnimationFrame shim
        delta = clock.getDelta();
        requestAnimationFrame( animateSmoke );
        evolveSmoke();
        render();
    }
        
    function evolveSmoke() {
        var sp = smokeParticles.length;
        while(sp--) {
            smokeParticles[sp].rotation.z += (delta * 0.2);
        }
    }

    function render() {
        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        cubeSineDriver += .01;
        mesh.position.z = 100 + (Math.sin(cubeSineDriver) * 500);
        renderer.render( scene, camera );
    }

    window.onload = function Snowfall(){
        initiateSmoke();
        animateSmoke();
}

Do you know how to apply that same effect as background for every element with that class? Maybe another tool would be better for the job?

I tried to querySelector a span element within a paragraph, but couldn’t access it. Result is null. Here’s my code. Would appreciate any suggestion.

<p data-typeTime = "40">
Hey I'm Modeo 
<span class="loading"> . . . . . </span>
</p>

const loading = document.querySelector('.loading');
console.log(loading)

I study on javascript, create an online game. I have a problem: it is necessary to remove the player from the room (by closing the tab, by closing the browser, by going to another page); I try to use the beforeunload and unload events, but I can’t track it. Share your experience, there may be another way to remove a player from a room?

addEventListener('unload', (event) => {
    /**
     * Send notify of your absence in room.
     */
    $.post("/ajax/player/remove", {
        userID: window.user.id,
        roomID: window.room.id
    });
});

So Im coding in javascript a discord bot and then what happens is i get an Declaration Or Statment expected error even if its not needed

const client = new Discord.Client({ intents: 32767 });

client.on("ready", () => {
    console.log("✔✔ online")
})

client.on("messageCreate", message => {
    const prefix = ">"
    if(!message.content.startsWith(prefix)) return;

    const messageArray = message.content.split(" ");
    const cmd = messageArray[0];
    const args = messageArray.slice(1);



    if (message.content === `${prefix}test`) {
        message.reply("Working")
    }

    if (cmd == `${prefix}kick`) {
        if(!args[0]) return message.reply("Please Mention Someone or Put That Persons ID or Put That Persons Username to Kick The User Out Of The Server!");
        const member = (message.mentions.members.first() || message.guild.members.cache.get(args[0]) || message.guild.members.cache.find(x => x.user.username.toLowerCase() === args.slice.join(" ") || x.user.username === args[0]));
        if(!message.member.permissions.has("KICK_MEMBERS")) return message.reply("Since When You Have a kick members perm" || "You need to have the kick permission perm to use this command");
});

client.login("not showing token ");```

I have a question regarding the console output of the DomTokenList(in general live lists).
Why does the first console output also show the 3 values instead of 2.
Although I added the third class afterwards.
I already set a timeout but the result is the same.

Thanks & Have a nice Sunday

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

<head>

    <style>
.eins {background-color:orange;height:50px;}
.zwei {color:red;}
.drei {width:50px;}

    </style>

</head>

<body>
    <div class="eins zwei">JS</div>

    <script>
var eins=document.querySelector("div");
var klasse=eins.classList;
console.log(klasse);
setTimeout(b,1000);
function b(){
eins.classList.add("drei");
console.log(klasse);}

    </script>

</body>

</html>

Screenshot console output

So I have this form where users can select, whether their product is rentable or not. If not, the price inputtag should be disabled. If yes, it should be enabled so they can enter a price. The script works for the submission (index.php).

I have another form (main.php), where their product is rendered and they can edit it later on, if it is rentable then. So I tried to solve it with the same script, but it didn’t work. The inputtag was always disabled. Then I tried to change the ID’s as below, but the tag behaved the same.

I know that there are threads about this topic, but not on this specific issue.

How can I solve it? Thanks in advance.

index.php

//modal start

<div class="row mb-3">
<div class="form-floating col">
<select class="form-select" id="mieten" name="mieten" placeholder="Mietbar?" required>
<option value="" selected="selected">Auswählen</option>
<option value="Ja">Ja</option>
<option value="Nein">Nein</option>
</select>
<label for="mieten">Mietbar?</label>
</div>

<div class="form-floating col">
<input type="text" class="form-control" id="preis" name="preis" placeholder="Preis" pattern="[0-9,]+|auf Anfrage" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title='Erlaubte Zeichen:<br>0-9 , "auf Anfrage"' disabled required>
<label for="preis">Preis</label>
</div>
</div>

//modal end

<script>
    var $mieten = $('#mieten'),
    $preis = $('#preis');
$mieten.change(function() {
    if ($mieten.val() == 'Ja') {
        $preis.removeAttr('disabled');

    } else {
        $preis.attr('disabled', 'disabled').val('');
    }
}).trigger('change');
</script>

main.php

//modal start

<div class="row mb-3">
<div class="form-floating col">
<select class="form-select" id="mieten2" name="mieten" placeholder="Mietbar?" required>
<option value="'.$val->get_mieten().'" selected="selected">'.$val->get_mieten().'</option>
<option '.(($val->get_mieten() === "Ja")?"style='display: none'":"").' value="Ja">Ja</option>
<option '.(($val->get_mieten() === "Nein")?"style='display: none'":"").'value="Nein">Nein</option>
</select>
<label for="mieten">Mietbar?</label>
 </div>

<div class="form-floating col">
<input type="text" class="form-control" id="preis2" name="preis" placeholder="Preis" pattern="[0-9,]+|auf Anfrage" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title='Erlaubte Zeichen:<br>0-9 , "auf Anfrage"' value="'.$val->get_preis().'" disabled required>
<label for="preis">Preis</label>
</div>
</div>

//modal end

<script>
    var $mieten2 = $('#mieten2'),
    $preis2 = $('#preis2');
$mieten2.change(function() {
    if ($mieten2.val() == 'Ja') {
        $preis2.removeAttr('disabled');

    } else {
        $preis2.attr('disabled', 'disabled').val('');
    }
}).trigger('change');
</script>

when I run below code

let a =function(){
    return{ 
      'age':55,
       'name':"Jhon"
    }
}

console.log(a()); 

And in console when I expand [[prototype]] I find constructor property and in constructor property I again find prototype and inside that I again find constructor and which continues in similar way why??

I am trying to work out an average value for a collection in my database using Mongoose and Express. I want to use this value in the render for the “calculator” page, hence it being inside a post for the page “calculator”.

However, when I do the model.find({}) function, the value is gone after the function is executed and it does not send the modified value to the page.

I have tried putting it inside a function and calling it to assign to the value but I have a feeling I may be returning the value wrong.

If anybody has any understanding of how to do this please let me know.

Below is the code for the JS file:

// Calculation POST Handler:
router.post("/calculator", ensureAuthenticated, (req, res) => {
  /*BEGINNING OF CALCULATION METHOD*/
  const ethAddress = req.body.ethereumAddress;
  const KG_CO2_PER_GAS = 0.0001809589427;
  const CO2T_COST = 40; // The cost of Co2 by the Tonne(1000kg) for electricity, found from page 26 of https://www.lse.ac.uk/GranthamInstitute/wp-content/uploads/2019/05/GRI_POLICY-REPORT_How-to-price-carbon-to-reach-net-zero-emissions-in-the-UK.pdf
  var hourlyFlightCo2 = 250; // 250kg Co2 per flight.

  var addressChecked = ethAddress;
  var kilosOfCO2Created = 0;
  var userTransactions = []; // Stores the data retrieved from Etherscan API.
  var totalGasValueForAverage = 0;
  var totalNumofTransactionsForAverage = 0;
  let totalAverageGasValue = 0;
  var totalValue = 0;
  var numOfTransactions = 0;
  var priceOfOffset = 0;
  var userID = req.user._id;
  var flightHours = 0;
  var totalAverageGasValueToDisplay = 0;
  /* PART 1: For getting data, using node-fetch .json to convert the data into an array of objects*/
  fetch(
    `https://api.etherscan.io/api?module=account&action=txlist&address=${ethAddress}&startblock=0&endblock=99999999&sort=asc&apikey=${APIKey}`
  )
    .then((data) => {
      return data.json();
    })
    .then((retrievedData) => {
      // Extract just the results from the Javascript object for a Javascript object of just the transactions.
      userTransactions = retrievedData.result;
      // console.log(userTransactions)
      /* PART 2: Create a loop that takes all gasUsed values from all previous transactions and adds them together for a number to be used in the calculation of emissions. */
      for (const value of userTransactions) {
        // Save transaction to db.
        let dbGasUsed = value.gasUsed;
        let dbEthereumAddress = ethAddress;
        let dbTransactionHash = value.transactionHash;
        // Find all transactions by hash, if they are not already in the database then add them to the database.
        Transaction.findOne({ transactionHash: dbTransactionHash }).then(
          (transaction) => {
            if (transaction) {
              // Check if the user already exists
            } else {
              const newTransaction = new Transaction({
                userID,
                dbGasUsed,
                dbEthereumAddress,
                dbTransactionHash,
              });
              newTransaction.save();
            }
          }
        );
        let currentValue = Number(value.gasUsed); // Calculate the total amount of gas used by the user.
        totalValue = totalValue + currentValue;
        numOfTransactions++;
      }
      // Calculate average of stored transactions gasUsed
      Transaction.find({})
        .then((transactions) => {
          for (const value of transactions) {
            totalNumofTransactionsForAverage++;
            totalGasValueForAverage = (totalGasValueForAverage+value.dbGasUsed);
          }
          // TODO: NEED TO FIGURE OUT HOW TO STORE THIS VARIABLE FOR USE ON PAGE.
          totalAverageGasValueToDisplay = totalGasValueForAverage/totalNumofTransactionsForAverage;
        });
        

      
      /* PART 3: Calculate values that will be useful for the user to see, such as the total number of transactions tracked, the size of their carbon footprint and the cost to offset it.*/
      kilosOfCO2Created = Math.round(totalValue * KG_CO2_PER_GAS);
      priceOfOffset = (kilosOfCO2Created / 1000) * CO2T_COST; // Calculate cost: ((user emissions(kg) / 1000(kg)) * cost by the tonne (£40))
      flightHours = kilosOfCO2Created / hourlyFlightCo2;
      res.render("calculator.ejs", {
        numOfTransactions: numOfTransactions,
        totalValue: totalValue,
        kilosOfCO2Created: kilosOfCO2Created,
        priceOfOffset: priceOfOffset,
        addressChecked: addressChecked,
        flightHours: flightHours,
        totalAverageGasValue: totalAverageGasValue,
        totalAverageGasValueToDisplay: totalAverageGasValueToDisplay
      });
    });
});

The part I want to use in the render is the value “totalAverageGasValueToDisplay”, found being assigned inside the transaction.find({})

this is my code which is getting an JSON from post request
I have connected the database in other file and it is getting connected
when I send data from JSON empty object getting printedd

 const express=require('express');
    const app =new express()
    const User=require('../2-mongoose/3-user')
    require('../2-mongoose/1-basic');// have to add this ccompulsory


app.use(express.json())// will convert string into obj
app.post('/users',(req,res)=>{
    console.log(req.body);// to console.log data sent through json
    res.send("testing");
    // const user=new User(req.body);
    // user.save().then(()=>{
    //     res.send(user);
    // }).catch((error)=>{
    //     res.status(400).send(error);
    // })
})
app.listen(8000,()=>{
    console.log("server fired off");
})

I have friends of the multi-page application. On one page there is a calculator mode in which three actually have a text box. And in the first two, you enter values, and then in the third, you enter a number. Now if I enter numbers and move from the page, the numbers will be deleted. But I do not want this to happen and I want the numbers to remain in the text boxes

Hey my question has three 3 parts and it is about React.js. If i had a website and it has an admin panel in which i can control the whole website that is showing to all over the world.

• Is it possible that i can change images on the website through admin panel with react .js
• If it is possible then how to do it with react.js then can you refer me something.
• if it is not then what should i do to make it happen and change the images on the website.

My objective is to create a JSON dataset as follows:
JSON:

    {
        "category": {
            "id": "10100",
            "name": "Dessert",
            "products": [
                {
                    "id": "10101",
                    "name": "Cheese Cake",
                    "description": "New York Style",
                    "price": 1.55,
                    "price_before_discount": 1.55,
                    "imageURL": "image2.jpg"
                },
                {
                    "id": "10102",
                    "name": "Apple Pie",
                    "description": "Old Fashion Home Made Pie.",
                    "price": 1.75,
                    "price_before_discount": 1.75,
                    "imageURL": "image3.jpg"
                }
            ],
            "id": "10104",
            "name": "Breakfast",
            "products": [
                {
                    "id": "10104",
                    "name": "Ham and Eggs",
                    "description": "With Hash Browns and Toast.",
                    "price": 4.75,
                    "price_before_discount": 4.75,
                    "imageURL": "image4.jpg"
                }
            ]
        }
    }

Javascript code:

    var menu = {};
    var category = {}
    var products = []
    
    menu.category = category;
    
    var catID = "10100";
    var catName = "Dessert";
    
    var catItems = {
        "id": catID,
        "name": catName
    }
    Object.assign(menu.category, catItems)
    
    menu.category.products = products;
    
    var itemID = "10101";
    var itemName = "Cheese Cake";
    var itemDescription = "New York Style"
    var itemPrice = 1.55
    var itemPrice_before_discount = 1.55
    var itemImageURL = "image.jpg"
    
    var items = {
        "id": itemID,
        "name": itemName,
        "description": itemDescription,
        "price": itemPrice,
        "price_before_discount": itemPrice_before_discount,
        "imageURL": itemImageURL
    }
    
    menu.category.products.push(items);
    
    var itemID = "10102";
    var itemName = "Apple Pie";
    var itemDescription = "Old Fashion Home Made Pie."
    var itemPrice = 1.75
    var itemPrice_before_discount = 1.75
    var itemImageURL = "image.jpg"
    
    var items = {
        "id": itemID,
        "name": itemName,
        "description": itemDescription,
        "price": itemPrice,
        "price_before_discount": itemPrice_before_discount,
        "imageURL": itemImageURL
    }
    
    menu.category.products.push(items);
    
    var cat2ID = "10102";
    var cat2Name = "Breakfast";
    
    catItems = {
        "id": cat2ID,
        "name": cat2Name
    }
    Object.assign(menu.category, catItems)
    
    menu.category.products = products;
    
    var itemID = "10104";
    var itemName = "Ham and Eggs";
    var itemDescription = "With Hash Browns and Toast"
    var itemPrice = 4.75
    var itemPrice_before_discount = 4.75
    var itemImageURL = "image4.jpg"
    
    var items = {
        "id": itemID,
        "name": itemName,
        "description": itemDescription,
        "price": itemPrice,
        "price_before_discount": itemPrice_before_discount,
        "imageURL": itemImageURL
    }
    
    menu.category.products.push(items);
    
    
    console.log(JSON.stringify(menu, null, 2));

The above code results are:

    {
      "category": {
        "id": "10102",
        "name": "Breakfast",
        "products": [
          {
            "id": "10101",
            "name": "Cheese Cake",
            "description": "New York Style",
            "price": 1.55,
            "price_before_discount": 1.55,
            "imageURL": "image.jpg"
          },
          {
            "id": "10102",
            "name": "Apple Pie",
            "description": "Old Fashion Home Made Pie.",
            "price": 1.75,
            "price_before_discount": 1.75,
            "imageURL": "image.jpg"
          },
          {
            "id": "10104",
            "name": "Ham and Eggs",
            "description": "With Hash Browns and Toast",
            "price": 4.75,
            "price_before_discount": 4.75,
            "imageURL": "image4.jpg"
          }
        ]
      }
    }

The problem I am having is adding the category node, currently the data to be appended overlays/updates the previous category node.

My question is how to add/append the category node in the proper position.

Thank you.

I am using BS modal in my project. I am using a button to open the model but as I open the modal I get this error in my console.

Error:

modal.js:418 Uncaught TypeError: Cannot read properties of null (reading 'hide')
    at HTMLButtonElement.<anonymous> (modal.js:418:23)
    at HTMLDocument.s (event-handler.js:119:21)

HTML:

<div class="card my-2 mx-2 mt-4" style="width: 18rem;">
<button class="btn btn-primary" data-bs-target="#mymodal" data-bs-toggle="modal"  
style="position: absolute; bottom: 0; right: 0">Get Quote</button>
</div>

Modal:

<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
DO SOMETHING
</div>
</div>
</div>
</div>

I am using Bootstrap5 CDNs:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Soo, im new on react js framework. im trying to make an navigation link. but when it clicked, it re-render the previous component . codes below

  import React, { Component } from 'react';
import {Card, Button , ListGroup }  from 'react-bootstrap'
import { Route, Link, BrowserRouter,Routes } from 'react-router-dom'
import Mappage from '../mapPage';
import Home from '../home';
import 'bootstrap/dist/css/bootstrap.min.css';
class FloorOne extends Component {
    state = { 
     }  
    render() { 
    //   const floors = [1,2,3,4,5,6,7];
        return (
           <BrowserRouter>
            <div className='cardContainer'>
            <ListGroup as ="ul" className='floorCard'>
         
                <ListGroup.Item as ="li">
            
                   <Link to="/mapPage"> link to map</Link>
               
                </ListGroup.Item>
                <ListGroup.Item as ="li">
                    <Link to="/home"> buttom home</Link>
                </ListGroup.Item>
                <Routes >
                          <Route path="/mapPage" element={ <Mappage/>}/>
                          <Route path="/home" element={<Home/>}/>
                </Routes>
              </ListGroup>
            </div>
             </BrowserRouter>
        );
    }
}
export default FloorOne;

i use route and routes and link it to a component as i thought its a “page”. but the previous component still renderd on the page other page that i navigate (either mappage or hompage)

this is homepage

import React, { Component } from 'react';

function Home() {
    return <div>
       <h1>this is homepage</h1>
    </div>
    ;
}

export default Home;