Category: javascript

Category Added in a WPeMatico Campaign

JSON data is not visible on Network while opening React App in mobile [duplicate]

I’m running my react app in PC using npm start

You can now view musical-world in the browser.   

  Local:            http://localhost:3000        
  On Your Network:  http://xxx.xxx.xx.xxx:3000

I want to see this app on my mobile so, I follow this link http://xxx.xxx.xx.xxx:3000 in mobile and App is visible but my JSON server data is not visible means everything is showing or working fine except JSON data.

My JSON server data is available here http://localhost:3001/songs

So what I need to do here?

Like when i worked on php i used xampp in that case i was able to see my data in mobile even it was on mysql server.

api search bar doesn’t refresh after first search

I created a search bar with vanilla js that loads items from an API array. When I search for the first time, it loads an image, title, and price. but when you type in a second search, the list does not refresh. You also can’t click out of it.

<body>
<input type="text" id="searchBar" onkeyup="getItemList()"   class="blgSearch" name="search bar" placeholder="Type In Item"><button id="searchBtn" onclick="btnFunction" type="submit">search</button> 
<div id="itemsFilter">
   <!-- <div class="item">
       <img src="" alt="image"/> 
       <h2>Item Title</h2>
       <div>cost</div></div> -->

</div>

  <script src="/search.js"></script>

and script

  //connect to API
let path = "<path>"; 
let devKey = "<key>";
let token =  "<token>";

const api = path+ devKey + token;
const url = encodeURI(api) 
let itemsList= [];

window.addEventListener('DOMcontentLoaded', loadContent)

//displays loaded content
function loadContent(){
    getItemList();
    btnfunction();   
}

fetch(url)
    .then (res => res.json()) 
    .then(data => {console.log(data); itemsList= data})

//activate on keyup
const searchBar = document.getElementById('searchBar');
//activate onclick
// const searchBtn = document.getElementById('searchBtn');

//searchBar.addEventListener("keyup", getItemList); 
const itemsFilter = document.getElementById('itemsFilter');


//filter out items by name 
function getItemList(){
    console.log(itemsList);
    let filteredItems= itemsList.rows.filter(item=> item.name.includes(searchBar.value));

    //create the filtered items element
    filteredItems.forEach(filteredItem => {
        let itemDiv = `
        <div class="item">
        <img src="${filteredItem.picture}" class="filteredImg" alt=""/> 
        <h2 class="itemName" >${filteredItem.name}</h2>
        <div class="itemPrice" >$${filteredItem.base_cost}</div>
        </div>
        `
        itemsFilter.insertAdjacentHTML("beforeend", itemDiv);
    });
}

function searchBnt() { 

}

any tips?

How to remove black background from this JS coding?

I’m trying to make this particle text be on a transparent background to add onto a slideshow. Can someone assist? I cannot seem to find where it is stated within the code.

Here is the JS code. Sorry I can’t seem to get it to fit properly within the code section of the post.

class Particles { constructor(x, y, texture, size) {
this.x = x;
this.y = y;

this.sprite = new PIXI.Sprite(new PIXI.Texture.from(texture));

this.sprite.texture.frame = new PIXI.Rectangle(x, y, size, size);

this.sprite.x = x;
this.sprite.y = y;

this.speedX = 0;
this.speedY = 0;

this.radius = 100;

this.gravity = 0.1;

this.maxGravity = 0.01 + Math.random() * 0.03;

this.friction = 0.9;

this.dirX = Math.random() - 0.5;
this.dirY = Math.random() - 0.5;   }

update(mouse) {
const distanceX = mouse.x – this.sprite.x;
const distanceY = mouse.y – this.sprite.y;

const distanceSqrd = distanceX * distanceX + distanceY * distanceY;

if (distanceSqrd < this.radius * this.radius && distanceSqrd > 0) {
  const distance = Math.sqrt(distanceSqrd);

  let normalX = distanceX / distance;
  let normalY = distanceY / distance;

  this.speedX -= normalX;
  this.speedY -= normalY;

  this.gravity *= this.friction;
} else {
  this.gravity += 0.1 * (this.maxGravity - this.gravity);
}

let oDistX = this.x - this.sprite.x;
let oDistY = this.y - this.sprite.y;

this.speedX += oDistX * this.gravity;
this.speedY += oDistY * this.gravity;

this.speedX *= this.friction;
this.speedY *= this.friction;

this.sprite.x += this.speedX;
this.sprite.y += this.speedY;   } }

class ParticlesText { constructor({ text, size }) {
this.app = new PIXI.Application({ width: innerWidth, height: innerHeight });

document.querySelector("#content-canvas").append(this.app.view);

this.text = text;
this.size = size;

this.cols = 500;
this.rows = 200;

this.pSize = 2;
this.particles = [];

this.mouse = {x: 0, y: 0}

this.container = new PIXI.particles.ParticleContainer(50000);
this.app.stage.addChild(this.container);

this.onResize = this.onResize.bind(this);   }

init() {
const that = this;
opentype.load(
“https://raw.githack.com/AlainBarrios/Fonts/master/LeagueSpartan-Bold.otf”,
function(err, font) {
if (err) {
alert(“Font could not be loaded: ” + err);
} else {
const canvas = document.createElement(“canvas”);

      // Now let's display it on a canvas with id "canvas"
      const ctx = canvas.getContext("2d");

      // Construct a Path object containing the letter shapes of the given text.
      // The other parameters are x, y and fontSize.
      // Note that y is the position of the baseline.
      const path = font.getPath(that.text, 0, that.size, that.size);
      const width = font.getAdvanceWidth(that.text, that.size);

      that.cols = width;
      that.rows = that.size;

      canvas.width = width;
      canvas.height = that.size;

      path.fill = "rgba(255,255,255,1)";
      // If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).
      path.draw(ctx);

      that.addObjects(canvas, ctx);
    }
  }
);   }

isEmpty(x, y, ctx) {
const image = ctx.getImageData(x, y, this.pSize, this.pSize);

let emptyCounter = 0;

for (let i = 0; (length = image.data.length), i < length; i += 4) {
  if (image.data[i + 3] !== 0) {
    continue;
  }
  emptyCounter++;
}

return emptyCounter === this.pSize * this.pSize;   }

addObjects(canvas, ctx) {
this.container.x = this.app.renderer.width / 2 – this.cols / 2;
this.container.y = this.app.renderer.height / 2 – this.rows / 2;

for (let i = 0; i < this.cols; i += 1) {
  for (let j = 0; j < this.rows; j += 1) {
    const x = i * this.pSize;
    const y = j * this.pSize;

    if (this.isEmpty(x, y, ctx)) continue;

    const p = new Particles(x, y, canvas, this.pSize);

    this.particles.push(p);
    this.container.addChild(p.sprite);
  }
}

this.container.interactive = true;

this.onResize();
window.addEventListener("resize", this.onResize);

this.container.on("mousemove", e => {
  this.mouse = e.data.getLocalPosition(this.container);
});

this.animate();   }

onResize() {
const { innerWidth, innerHeight } = window;
const size = [innerWidth, innerHeight];
const ratio = size[0] / size[1];

if (innerWidth / innerHeight >= ratio) {
  var w = innerHeight * ratio;
  var h = innerHeight;
} else {
  var w = innerWidth;
  var h = innerWidth / ratio;
}

//this.app.renderer.view.style.width = w + "px";
//this.app.renderer.view.style.height = h + "px";   }

animate() {
this.app.ticker.add(() => {
stats.begin();

  this.particles.forEach(p => {
    p.update(this.mouse);
  });

  stats.end();
});   } }

const particles = new ParticlesText({ text: “KILL THE ROBOTS”, size:
150 }); particles.init();

SwiperJS w/ SyntaxError: Cannot use import statement outside a module error

I can’t seem to figure out what is causing this error, so I will go into more detail below on what I have done and if anyone can spot anything off, let me know.

Here is the error that I am getting:

Uncaught SyntaxError: Cannot use import statement outside a module

Here is everything that I have done:

Here is the package.json:

{
  "scripts": {
    "imagemin": "imagemin src/images/* -p --out-dir=dist/images",
    "start": "gulp style & gulp scripts"
  },
  "devDependencies": {
    "bulma": "^0.9.3",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-sass": "^5.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-uncomment": "^0.3.0",
    "imagemin-cli": "^7.0.0",
    "node-sass": "^7.0.1",
    "rough-notation": "^0.5.1",
    "sass": "^1.47.0",
    "swiper": "^7.4.1",
    "three": "^0.122.0",
    "vanta": "^0.5.21"
  }
}

Here is me enqueuing the node_modules swiperjs:

wp_register_script(
    'Swiper',
    get_template_directory_uri() . '/node_modules/swiper/swiper-bundle.min.js',
    null, null, true
);
wp_enqueue_script('Swiper');

I switched over the script to support the type="module" on SwiperJS:

enter image description here

Here is my swiper.js file that gets compacted into main.min.js:

document.addEventListener('DOMContentLoaded', function() {

    import Swiper, { Navigation, Pagination } from 'swiper';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';

    Swiper.use([Navigation, Pagination]);

    new Swiper(".mySwiper", {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
});

Here is the final output which is enqueued and minified:

document.addEventListener("DOMContentLoaded",()=>{const e=Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"),0);0<e.length&&e.forEach(o=>{o.addEventListener("click",()=>{var e=o.dataset.target;const t=document.getElementById(e);o.classList.toggle("is-active"),t.classList.toggle("is-active")})})}),document.addEventListener("DOMContentLoaded",function(){import e,{Navigation as t,Pagination as o}from"swiper";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";e.use([t,o]),new e(".mySwiper",{direction:"vertical",slidesPerView:1,spaceBetween:30,mousewheel:!0,pagination:{el:".swiper-pagination",clickable:!0}})}),document.addEventListener("DOMContentLoaded",function(){VANTA.BIRDS({el:"#main-hero",mouseControls:!0,touchControls:!0,gyroControls:!1,minHeight:200,minWidth:200,scale:1,scaleMobile:1,colorMode:"lerpGradient",color1:2829099,quantity:3,backgroundColor:16251129,birdSize:1.5})});

Does anyone know what might be happening?

How to add hard coded values into a JSON response

I am trying to use PHP to generate JSON to specifically take a desired shape.
Below is a snippet of my PHP code:

      if($con){
    $sql="select * from people";
    $result=mysqli_query($con,$sql);
    if($result){
          header("Content-Type: JSON");
        $i=0;
        while($row = mysqli_fetch_assoc($result)){
            $response[$i]['gender']=$row['gender'];
            $response[$i]['first']=$row['first'];
            
            $i++;
        }
        echo json_encode($response, JSON_PRETTY_PRINT);
    }
}

Here is my current JSON response

  [
   {
      "gender":"male",
      "first":"Angela"
   },
   {
      "gender":"female",
      "first":"Krista"
   }
]

And here is my desired response:

{
    "inputs": [
      {

        "values": {
          "gender": "male",
          "first": "Angela"
        }
      },
      {
        "values": {
          "gender": "female",
          "first": "Krista"
        }
      }
    ]
  }

Firebase – Create subcollection only if the parent doc exists

In Firestore, when you are deleting a doc, you can specify a condition like { exists: true }, in order to avoid deleting the document if it doesn’t exist.

In a concurrent scenario, it is possible that we would only like to add a doc to a subcollection if the parent document exists.

For example, imagine the following NoSql structure:

   -comment (doc)
       /likes (subcollection created when the first like is given)
          -like1
          -like2
          ...

Is it possible to do something like

likeRef.create(data, { parent_exists: true });

??

Is the only way to handle this situation with Transactions (reading the parent doc, and throwing an error when .exists() is false)?

I am afraid of this type of situation because if the sub-collection is created at the same time as the container document is deleted, there could be orphan “entities” in the database that may even break the UI if it is not prepared for these extreme cases.

Set value and trigger action when dropdown value is changed [duplicate]

I have this React select dropdown:

const handleSyncList = () => {
    ......
};
const [exchangeId, setExchangeId] = useState('');

<select onSelect={e => setExchangeId(e.target.value)} onChange={handleSyncList}>
  <option value="">All Exchanges</option>
  {exchangesList.map(otherEntity => (
        <option value={otherEntity.exchangeId}>
          .......
        </option>
      ))
    : null}
</select>

I need to set the selected value to exchangeId and call handleSyncList.
Is it possible first to set the option value and then call handleSyncList?

React – What is the Best Way to use Multiple createContexts?

I’ve just learned about the createContext hook and I’m wondering what’s the best approach to using multiple contexts globally throughout the project.

From what I’ve seen if you want to create and use multiple contexts it looks kinda messy having multiple nested Context tags and I’m wondering if there is a cleaner looking way of doing this?

(Example of how I think a project using four contexts would look)

import React, { createContext, useState } from "react";

export const OneContext = createContext();
export const TwoContext = createContext();
export const ThreeContext = createContext();
export const FourContext = createContext();

export default function App(){
    const [one, setOne] = useState(null);
    const [two, setTwo] = useState(null);
    const [three, setThree] = useState(null);
    const [four, setFour] = useState(null);

   return(
        <>
            <OneContext.Provider value={one}>
                <TwoContext.Provider value={two}>
                    <ThreeContext.Provider value={three}>
                        <FourContext.Provider value={four}>            
                            "Insert components here"
                        <FourContext.Provider />
                    <ThreeContext.Provider />
                <TwoContext.Provider />
            <OneContext.Provider />
        </>
   )
}

Printify API product update put call gives 401 error

The problem Overview

  • When getting products using a get method everything works
  • when trying to update a product using put method I get 401 unauthorized
  • I use same credentials for both methods
  • The bearor token is global scope, I should be authorized to do anything to a given product

The code

get

const axiosOptions = {
  headers: {
    "Authorization": `Bearer ${token}`
  }
}

const onAllClick = async () => {
  const result = await axios.get(`https://api.printify.com/v1/shops/${shopId}/products.json?limit=30`, axiosOptions );
  const products = result.data.data; 
  console.log(products);
}

put

const axiosTagUpdateOptions = {
  headers: {
    "Authorization": `Bearer ${token}`
  },
  data: {
    title:"New product title"
  }
}


const onEditTagsClick = async (productID, tags) => {
  await axios.put(`https://api.printify.com/v1/shops/${shopId}/products/60e0a5c198be4c1296798c27.json`, axiosTagUpdateOptions)
  .catch(err => console.log(err));
}

Problem

The get function works perfectly fine. But whenever I try to modify a product using the put method, like the documentation says, I get a 401 unauthorized error. But I’m using the same token for both the get and the put method. The token is set to global scope (for testing purposes) so I should be able to edit and delete products at will.

I read through the API documentation and it looks like I got everything right. I have the bearer token as the header and in the body I included the value I want to modify. Obviously the request is going through, I just don’t know why it keeps saying I’m unauthorized to edit the product. I would have liked to edit the product from the printify UI, but the UI won’t let me add tags (which is really annoying)… So I’m forced to update via a put method.

I couldn’t find any reason for why I am getting this error, can anyone help me?

How can I fix the text overflowing out of the box?

When hover effect working i wanna show hero name in flexbox items. Now when hover effect not working too you can see hero names. Names must be inside the boxes when the effect works and must not overflow out. In the solution I found, flex items are created with javascript. I could do it if it was done manually in html, but I don’t know how fixing with javascript. How can I solve this problem?

    const data = { result: { data: { heroes: [ { id: 1, name: "npc_dota_hero_antimage", name_loc: "Anti-Mage", name_english_loc: "Anti-Mage", primary_attr: 1, complexity: 1, }, { id: 2, name: "npc_dota_hero_axe", name_loc: "Axe", name_english_loc: "Axe", primary_attr: 0, complexity: 1, }, { id: 3, name: "npc_dota_hero_bane", name_loc: "Bane", name_english_loc: "Bane", primary_attr: 2, complexity: 2, }, { id: 4, name: "npc_dota_hero_bloodseeker", name_loc: "Bloodseeker", name_english_loc: "Bloodseeker", primary_attr: 1, complexity: 1, }, { id: 5, name: "npc_dota_hero_crystal_maiden", name_loc: "Crystal Maiden", name_english_loc: "Crystal Maiden", primary_attr: 2, complexity: 1, }, { id: 6, name: "npc_dota_hero_drow_ranger", name_loc: "Drow Ranger", name_english_loc: "Drow Ranger", primary_attr: 1, complexity: 1, }, { id: 7, name: "npc_dota_hero_earthshaker", name_loc: "Earthshaker", name_english_loc: "Earthshaker", primary_attr: 0, complexity: 2, }, { id: 8, name: "npc_dota_hero_juggernaut", name_loc: "Juggernaut", name_english_loc: "Juggernaut", primary_attr: 1, complexity: 1, }, { id: 9, name: "npc_dota_hero_mirana", name_loc: "Mirana", name_english_loc: "Mirana", primary_attr: 1, complexity: 2, }, { id: 11, name: "npc_dota_hero_nevermore", name_loc: "Shadow Fiend", name_english_loc: "Shadow Fiend", primary_attr: 1, complexity: 2, }, { id: 10, name: "npc_dota_hero_morphling", name_loc: "Morphling", name_english_loc: "Morphling", primary_attr: 1, complexity: 3, }, { id: 12, name: "npc_dota_hero_phantom_lancer", name_loc: "Phantom Lancer", name_english_loc: "Phantom Lancer", primary_attr: 1, complexity: 2, }, { id: 13, name: "npc_dota_hero_puck", name_loc: "Puck", name_english_loc: "Puck", primary_attr: 2, complexity: 2, }, { id: 14, name: "npc_dota_hero_pudge", name_loc: "Pudge", name_english_loc: "Pudge", primary_attr: 0, complexity: 2, }, { id: 15, name: "npc_dota_hero_razor", name_loc: "Razor", name_english_loc: "Razor", primary_attr: 1, complexity: 1, }, { id: 16, name: "npc_dota_hero_sand_king", name_loc: "Sand King", name_english_loc: "Sand King", primary_attr: 0, complexity: 2, }, { id: 17, name: "npc_dota_hero_storm_spirit", name_loc: "Storm Spirit", name_english_loc: "Storm Spirit", primary_attr: 2, complexity: 2, }, { id: 18, name: "npc_dota_hero_sven", name_loc: "Sven", name_english_loc: "Sven", primary_attr: 0, complexity: 1, }, { id: 19, name: "npc_dota_hero_tiny", name_loc: "Tiny", name_english_loc: "Tiny", primary_attr: 0, complexity: 2, }, { id: 20, name: "npc_dota_hero_vengefulspirit", name_loc: "Vengeful Spirit", name_english_loc: "Vengeful Spirit", primary_attr: 1, complexity: 1, }, { id: 21, name: "npc_dota_hero_windrunner", name_loc: "Windranger", name_english_loc: "Windranger", primary_attr: 2, complexity: 2, }, { id: 22, name: "npc_dota_hero_zuus", name_loc: "Zeus", name_english_loc: "Zeus", primary_attr: 2, complexity: 1, }, { id: 23, name: "npc_dota_hero_kunkka", name_loc: "Kunkka", name_english_loc: "Kunkka", primary_attr: 0, complexity: 2, }, { id: 25, name: "npc_dota_hero_lina", name_loc: "Lina", name_english_loc: "Lina", primary_attr: 2, complexity: 1, }, { id: 31, name: "npc_dota_hero_lich", name_loc: "Lich", name_english_loc: "Lich", primary_attr: 2, complexity: 1, }, { id: 26, name: "npc_dota_hero_lion", name_loc: "Lion", name_english_loc: "Lion", primary_attr: 2, complexity: 1, }, { id: 27, name: "npc_dota_hero_shadow_shaman", name_loc: "Shadow Shaman", name_english_loc: "Shadow Shaman", primary_attr: 2, complexity: 1, }, { id: 28, name: "npc_dota_hero_slardar", name_loc: "Slardar", name_english_loc: "Slardar", primary_attr: 0, complexity: 1, }, { id: 29, name: "npc_dota_hero_tidehunter", name_loc: "Tidehunter", name_english_loc: "Tidehunter", primary_attr: 0, complexity: 1, }, { id: 30, name: "npc_dota_hero_witch_doctor", name_loc: "Witch Doctor", name_english_loc: "Witch Doctor", primary_attr: 2, complexity: 1, }, { id: 32, name: "npc_dota_hero_riki", name_loc: "Riki", name_english_loc: "Riki", primary_attr: 1, complexity: 1, }, { id: 33, name: "npc_dota_hero_enigma", name_loc: "Enigma", name_english_loc: "Enigma", primary_attr: 2, complexity: 2, }, { id: 34, name: "npc_dota_hero_tinker", name_loc: "Tinker", name_english_loc: "Tinker", primary_attr: 2, complexity: 2, }, { id: 35, name: "npc_dota_hero_sniper", name_loc: "Sniper", name_english_loc: "Sniper", primary_attr: 1, complexity: 1, }, { id: 36, name: "npc_dota_hero_necrolyte", name_loc: "Necrophos", name_english_loc: "Necrophos", primary_attr: 2, complexity: 1, }, { id: 37, name: "npc_dota_hero_warlock", name_loc: "Warlock", name_english_loc: "Warlock", primary_attr: 2, complexity: 1, }, { id: 38, name: "npc_dota_hero_beastmaster", name_loc: "Beastmaster", name_english_loc: "Beastmaster", primary_attr: 0, complexity: 2, }, { id: 39, name: "npc_dota_hero_queenofpain", name_loc: "Queen of Pain", name_english_loc: "Queen of Pain", primary_attr: 2, complexity: 2, }, { id: 40, name: "npc_dota_hero_venomancer", name_loc: "Venomancer", name_english_loc: "Venomancer", primary_attr: 1, complexity: 1, }, { id: 41, name: "npc_dota_hero_faceless_void", name_loc: "Faceless Void", name_english_loc: "Faceless Void", primary_attr: 1, complexity: 2, }, { id: 42, name: "npc_dota_hero_skeleton_king", name_loc: "Wraith King", name_english_loc: "Wraith King", primary_attr: 0, complexity: 1, }, { id: 43, name: "npc_dota_hero_death_prophet", name_loc: "Death Prophet", name_english_loc: "Death Prophet", primary_attr: 2, complexity: 1, }, { id: 44, name: "npc_dota_hero_phantom_assassin", name_loc: "Phantom Assassin", name_english_loc: "Phantom Assassin", primary_attr: 1, complexity: 1, }, { id: 45, name: "npc_dota_hero_pugna", name_loc: "Pugna", name_english_loc: "Pugna", primary_attr: 2, complexity: 2, }, { id: 46, name: "npc_dota_hero_templar_assassin", name_loc: "Templar Assassin", name_english_loc: "Templar Assassin", primary_attr: 1, complexity: 2, }, { id: 47, name: "npc_dota_hero_viper", name_loc: "Viper", name_english_loc: "Viper", primary_attr: 1, complexity: 1, }, { id: 48, name: "npc_dota_hero_luna", name_loc: "Luna", name_english_loc: "Luna", primary_attr: 1, complexity: 1, }, { id: 49, name: "npc_dota_hero_dragon_knight", name_loc: "Dragon Knight", name_english_loc: "Dragon Knight", primary_attr: 0, complexity: 1, }, { id: 50, name: "npc_dota_hero_dazzle", name_loc: "Dazzle", name_english_loc: "Dazzle", primary_attr: 2, complexity: 1, }, { id: 51, name: "npc_dota_hero_rattletrap", name_loc: "Clockwerk", name_english_loc: "Clockwerk", primary_attr: 0, complexity: 2, }, { id: 52, name: "npc_dota_hero_leshrac", name_loc: "Leshrac", name_english_loc: "Leshrac", primary_attr: 2, complexity: 1, }, { id: 53, name: "npc_dota_hero_furion", name_loc: "Nature's Prophet", name_english_loc: "Nature's Prophet", primary_attr: 2, complexity: 2, }, { id: 54, name: "npc_dota_hero_life_stealer", name_loc: "Lifestealer", name_english_loc: "Lifestealer", primary_attr: 0, complexity: 2, }, { id: 55, name: "npc_dota_hero_dark_seer", name_loc: "Dark Seer", name_english_loc: "Dark Seer", primary_attr: 2, complexity: 1, }, { id: 56, name: "npc_dota_hero_clinkz", name_loc: "Clinkz", name_english_loc: "Clinkz", primary_attr: 1, complexity: 2, }, { id: 57, name: "npc_dota_hero_omniknight", name_loc: "Omniknight", name_english_loc: "Omniknight", primary_attr: 0, complexity: 1, }, { id: 58, name: "npc_dota_hero_enchantress", name_loc: "Enchantress", name_english_loc: "Enchantress", primary_attr: 2, complexity: 2, }, { id: 59, name: "npc_dota_hero_huskar", name_loc: "Huskar", name_english_loc: "Huskar", primary_attr: 0, complexity: 1, }, { id: 60, name: "npc_dota_hero_night_stalker", name_loc: "Night Stalker", name_english_loc: "Night Stalker", primary_attr: 0, complexity: 1, }, { id: 61, name: "npc_dota_hero_broodmother", name_loc: "Broodmother", name_english_loc: "Broodmother", primary_attr: 1, complexity: 2, }, { id: 62, name: "npc_dota_hero_bounty_hunter", name_loc: "Bounty Hunter", name_english_loc: "Bounty Hunter", primary_attr: 1, complexity: 1, }, { id: 63, name: "npc_dota_hero_weaver", name_loc: "Weaver", name_english_loc: "Weaver", primary_attr: 1, complexity: 2, }, { id: 64, name: "npc_dota_hero_jakiro", name_loc: "Jakiro", name_english_loc: "Jakiro", primary_attr: 2, complexity: 1, }, { id: 65, name: "npc_dota_hero_batrider", name_loc: "Batrider", name_english_loc: "Batrider", primary_attr: 2, complexity: 2, }, { id: 66, name: "npc_dota_hero_chen", name_loc: "Chen", name_english_loc: "Chen", primary_attr: 2, complexity: 3, }, { id: 67, name: "npc_dota_hero_spectre", name_loc: "Spectre", name_english_loc: "Spectre", primary_attr: 1, complexity: 2, }, { id: 69, name: "npc_dota_hero_doom_bringer", name_loc: "Doom", name_english_loc: "Doom", primary_attr: 0, complexity: 2, }, { id: 68, name: "npc_dota_hero_ancient_apparition", name_loc: "Ancient Apparition", name_english_loc: "Ancient Apparition", primary_attr: 2, complexity: 2, }, { id: 70, name: "npc_dota_hero_ursa", name_loc: "Ursa", name_english_loc: "Ursa", primary_attr: 1, complexity: 1, }, { id: 71, name: "npc_dota_hero_spirit_breaker", name_loc: "Spirit Breaker", name_english_loc: "Spirit Breaker", primary_attr: 0, complexity: 1, }, { id: 72, name: "npc_dota_hero_gyrocopter", name_loc: "Gyrocopter", name_english_loc: "Gyrocopter", primary_attr: 1, complexity: 1, }, { id: 73, name: "npc_dota_hero_alchemist", name_loc: "Alchemist", name_english_loc: "Alchemist", primary_attr: 0, complexity: 1, }, { id: 74, name: "npc_dota_hero_invoker", name_loc: "Invoker", name_english_loc: "Invoker", primary_attr: 2, complexity: 3, }, { id: 75, name: "npc_dota_hero_silencer", name_loc: "Silencer", name_english_loc: "Silencer", primary_attr: 2, complexity: 2, }, { id: 76, name: "npc_dota_hero_obsidian_destroyer", name_loc: "Outworld Destroyer", name_english_loc: "Outworld Destroyer", primary_attr: 2, complexity: 2, }, { id: 77, name: "npc_dota_hero_lycan", name_loc: "Lycan", name_english_loc: "Lycan", primary_attr: 0, complexity: 2, }, { id: 78, name: "npc_dota_hero_brewmaster", name_loc: "Brewmaster", name_english_loc: "Brewmaster", primary_attr: 0, complexity: 3, }, { id: 79, name: "npc_dota_hero_shadow_demon", name_loc: "Shadow Demon", name_english_loc: "Shadow Demon", primary_attr: 2, complexity: 2, }, { id: 80, name: "npc_dota_hero_lone_druid", name_loc: "Lone Druid", name_english_loc: "Lone Druid", primary_attr: 1, complexity: 3, }, { id: 81, name: "npc_dota_hero_chaos_knight", name_loc: "Chaos Knight", name_english_loc: "Chaos Knight", primary_attr: 0, complexity: 1, }, { id: 82, name: "npc_dota_hero_meepo", name_loc: "Meepo", name_english_loc: "Meepo", primary_attr: 1, complexity: 3, }, { id: 83, name: "npc_dota_hero_treant", name_loc: "Treant Protector", name_english_loc: "Treant Protector", primary_attr: 0, complexity: 2, }, { id: 84, name: "npc_dota_hero_ogre_magi", name_loc: "Ogre Magi", name_english_loc: "Ogre Magi", primary_attr: 2, complexity: 1, }, { id: 85, name: "npc_dota_hero_undying", name_loc: "Undying", name_english_loc: "Undying", primary_attr: 0, complexity: 1, }, { id: 86, name: "npc_dota_hero_rubick", name_loc: "Rubick", name_english_loc: "Rubick", primary_attr: 2, complexity: 3, }, { id: 87, name: "npc_dota_hero_disruptor", name_loc: "Disruptor", name_english_loc: "Disruptor", primary_attr: 2, complexity: 2, }, { id: 88, name: "npc_dota_hero_nyx_assassin", name_loc: "Nyx Assassin", name_english_loc: "Nyx Assassin", primary_attr: 1, complexity: 2, }, { id: 89, name: "npc_dota_hero_naga_siren", name_loc: "Naga Siren", name_english_loc: "Naga Siren", primary_attr: 1, complexity: 2, }, { id: 90, name: "npc_dota_hero_keeper_of_the_light", name_loc: "Keeper of the Light", name_english_loc: "Keeper of the Light", primary_attr: 2, complexity: 2, }, { id: 91, name: "npc_dota_hero_wisp", name_loc: "Io", name_english_loc: "Io", primary_attr: 0, complexity: 3, }, { id: 92, name: "npc_dota_hero_visage", name_loc: "Visage", name_english_loc: "Visage", primary_attr: 2, complexity: 3, }, { id: 93, name: "npc_dota_hero_slark", name_loc: "Slark", name_english_loc: "Slark", primary_attr: 1, complexity: 2, }, { id: 94, name: "npc_dota_hero_medusa", name_loc: "Medusa", name_english_loc: "Medusa", primary_attr: 1, complexity: 1, }, { id: 95, name: "npc_dota_hero_troll_warlord", name_loc: "Troll Warlord", name_english_loc: "Troll Warlord", primary_attr: 1, complexity: 2, }, { id: 96, name: "npc_dota_hero_centaur", name_loc: "Centaur Warrunner", name_english_loc: "Centaur Warrunner", primary_attr: 0, complexity: 1, }, { id: 97, name: "npc_dota_hero_magnataur", name_loc: "Magnus", name_english_loc: "Magnus", primary_attr: 0, complexity: 2, }, { id: 98, name: "npc_dota_hero_shredder", name_loc: "Timbersaw", name_english_loc: "Timbersaw", primary_attr: 0, complexity: 2, }, { id: 99, name: "npc_dota_hero_bristleback", name_loc: "Bristleback", name_english_loc: "Bristleback", primary_attr: 0, complexity: 1, }, { id: 100, name: "npc_dota_hero_tusk", name_loc: "Tusk", name_english_loc: "Tusk", primary_attr: 0, complexity: 1, }, { id: 101, name: "npc_dota_hero_skywrath_mage", name_loc: "Skywrath Mage", name_english_loc: "Skywrath Mage", primary_attr: 2, complexity: 1, }, { id: 102, name: "npc_dota_hero_abaddon", name_loc: "Abaddon", name_english_loc: "Abaddon", primary_attr: 0, complexity: 1, }, { id: 103, name: "npc_dota_hero_elder_titan", name_loc: "Elder Titan", name_english_loc: "Elder Titan", primary_attr: 0, complexity: 2, }, { id: 104, name: "npc_dota_hero_legion_commander", name_loc: "Legion Commander", name_english_loc: "Legion Commander", primary_attr: 0, complexity: 1, }, { id: 106, name: "npc_dota_hero_ember_spirit", name_loc: "Ember Spirit", name_english_loc: "Ember Spirit", primary_attr: 1, complexity: 2, }, { id: 107, name: "npc_dota_hero_earth_spirit", name_loc: "Earth Spirit", name_english_loc: "Earth Spirit", primary_attr: 0, complexity: 3, }, { id: 109, name: "npc_dota_hero_terrorblade", name_loc: "Terrorblade", name_english_loc: "Terrorblade", primary_attr: 1, complexity: 2, }, { id: 110, name: "npc_dota_hero_phoenix", name_loc: "Phoenix", name_english_loc: "Phoenix", primary_attr: 0, complexity: 2, }, { id: 111, name: "npc_dota_hero_oracle", name_loc: "Oracle", name_english_loc: "Oracle", primary_attr: 2, complexity: 3, }, { id: 105, name: "npc_dota_hero_techies", name_loc: "Techies", name_english_loc: "Techies", primary_attr: 2, complexity: 2, }, { id: 112, name: "npc_dota_hero_winter_wyvern", name_loc: "Winter Wyvern", name_english_loc: "Winter Wyvern", primary_attr: 2, complexity: 2, }, { id: 113, name: "npc_dota_hero_arc_warden", name_loc: "Arc Warden", name_english_loc: "Arc Warden", primary_attr: 1, complexity: 3, }, { id: 108, name: "npc_dota_hero_abyssal_underlord", name_loc: "Underlord", name_english_loc: "Underlord", primary_attr: 0, complexity: 2, }, { id: 114, name: "npc_dota_hero_monkey_king", name_loc: "Monkey King", name_english_loc: "Monkey King", primary_attr: 1, complexity: 2, }, { id: 120, name: "npc_dota_hero_pangolier", name_loc: "Pangolier", name_english_loc: "Pangolier", primary_attr: 1, complexity: 2, }, { id: 119, name: "npc_dota_hero_dark_willow", name_loc: "Dark Willow", name_english_loc: "Dark Willow", primary_attr: 2, complexity: 2, }, { id: 121, name: "npc_dota_hero_grimstroke", name_loc: "Grimstroke", name_english_loc: "Grimstroke", primary_attr: 2, complexity: 2, }, { id: 129, name: "npc_dota_hero_mars", name_loc: "Mars", name_english_loc: "Mars", primary_attr: 0, complexity: 1, }, { id: 126, name: "npc_dota_hero_void_spirit", name_loc: "Void Spirit", name_english_loc: "Void Spirit", primary_attr: 2, complexity: 2, }, { id: 128, name: "npc_dota_hero_snapfire", name_loc: "Snapfire", name_english_loc: "Snapfire", primary_attr: 0, complexity: 1, }, { id: 123, name: "npc_dota_hero_hoodwink", name_loc: "Hoodwink", name_english_loc: "Hoodwink", primary_attr: 1, complexity: 2, }, { id: 135, name: "npc_dota_hero_dawnbreaker", name_loc: "Dawnbreaker", name_english_loc: "Dawnbreaker", primary_attr: 0, complexity: 1, }, { id: 136, name: "npc_dota_hero_marci", name_loc: "Marci", name_english_loc: "Marci", primary_attr: 0, complexity: 2, }, ], }, }, };
const container = document.querySelector("#photo");

data.result.data.heroes.forEach(item => {
    const li = document.createElement("li");
    li.classList.add("flex-item");

    const heroName= item.name_loc;
    const linkparameter = item.name
        .toLowerCase()
        .replace("npc_dota_hero_","");

    li.innerHTML = `
        <img
            src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/${linkparameter}.png"
            alt="${heroName}"
        />
        <li>${heroName}</li>
        
        
    `;

    container.appendChild(li);
});
body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: black;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: block;
  float: right;
}

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.flex-container {
  text-align: center;
  max-width: 1200px;
  margin: 10em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
  column-gap: 20px;
}

.flex-item {
  background: tomato;
  width: 200px;
  height: 150px;
  margin-top: 20px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  transition: all 0.5s ease-in-out;
}
.flex-item:hover {
  transform: scale(1.4);
  transition: all 0.4s ease;
  cursor: pointer;
}

img {
  width: 200px;
  height: 150px;
}

.balancer {
  height: 0;
  width: 200px;
  margin: 0px 5px;
  visibility: hidden;
}
.hover-value {
  font-size: 0px;

  -webkit-transition: font-size 1s;
  transition: font-size 1s;
}

button:hover .hover-value {
  font-size: inherit;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width= , initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </li>
    </ul>
    <div>
        <ul id="photo" class="flex-container"></ul>
    </div>
    
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    
    

</body>

</html>

Codepen

Puppeteer – Iterate over span and click on text when it matches

I want to iterate over the span elements and when I find the matching text, I would like to click on it

The HTML looks like this, please click on the image

HTML Image

What I am trying to do is select the option in span using its “text”. I cannot use class since the class name is similar everywhere

Currently what I am doing is

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('label > span.slds-form-element__label')];
  const targetElement = elements.find(e => e.innerText == 'Event Badge Scans');
  if (targetElement) targetElement.click();
});
})

How to implement a like button for posts in a React Social Media Application

So currently, I have an app that takes posts from the NASA Astronomy photo of the day API and uses that for my picture, date, and description data for posts.

enter image description here

I get the json data from this API (stored in variable yeet) and then I pass it to a map function that puts it in a post format. This is where I do that:

enter image description here

And this is the beginning of the soloPost function that takes the data and puts it in the post format I want:

enter image description here

I got my like button component from an npm library called “react-animated-heart,” and it is added to every post (within the soloPost function):

enter image description here

However, I realized that my current implementation of the like button was flawed, as all buttons were updating the same “isClick” state variable, and thus when one like button is clicked for one post, all of the like buttons get updated. However, I cannot declare a state for each post, as I do not know how many posts the API may render at any given time.

Thus, I need a way to add an autonomous like button to each post on my site that doesn’t trigger another button, preferably using state since I am not sure if the npm library I am using would allow for another way.