Category: javascript

I am currently learning React and have ran into an issue which does have some answers on stackoverflow however none of them seemed to have helped me

I am making a simple hero section which contains an image background and then some text in front of that image:

The only thing wrong is that when i change the brightness of the image, it also alters the text as shown in the image above (the text should be pure white).

Here is my current JS code:

import React from 'react';
import './Panel.css'; 

const Panel = ({image, title, text}) => {
  return (
    <div className="panel" style={{backgroundImage: `url(${image})`}}>
      <div className="panel-content">
        <h1>{title}</h1>
        <p>{text}</p>
      </div>
    </div>
  );
};

export default Panel;

And the CSS:

.panel {
    position: relative;
    width: 100%;
    height: 700px; 
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
    filter: brightness(50%);

    
  }

.panel-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff; 
  
    
  }
  
  .panel-content h1 {
    font-size: 28px; 
    margin-bottom: 10px;
  }
  
  .panel-content p {
    font-size: 16px; 
  }
  

Here is another solution using CSS which I did try, it uses pseudo-elements to create an overlay on top of the image, but this yielded the same results (perhaps I missed something or implemented it wrong):

.panel {
  position: relative;
  width: 100%;
  height: 300px; 
  background-image: url('image.jpg'); 
  background-size: cover;
  background-position: center;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
}

.panel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff; 
  z-index: 1;
}

.panel-content h1 {
  font-size: 28px; 
  margin-bottom: 10px;
}

.panel-content p {
  font-size: 16px; 
}

Using backgroundBlendMode: 'darken' as inline CSS also yielded the same results

I have also noticed that this brightness setting seems to be persistent even after I remove it from my CSS. The image stays dark, even after reloading the page.

I have a feeling it may be due to the structure of the elements, however most examples have shown that this is the way to do it. Apologies if the solution is very simple, or has been listed somewhere.

I’ve got this code working fine. But The delete() function deletes all entries with the key equal to “foo”.

`let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search);

 //Add a second foo parameter.
 url.searchParams.append("foo", 4);

 console.log(params.getAll("foo")); //Prints ["1","4"].
 console.log(url)
 url.searchParams.delete("foo", 4);
 console.log(url)`

The goal is to delete only one of entry (foo=4) and

I’m working on a youtube clone project for school. I need to make 4 videos be shown in the container when my menu is open (boolean / true) and 5 when it is closed (false). I tried to do this using the following code, but to no avail (the amount doesn’t change in the project no matter what the boolean value

import { ChannelImage, Container, ImagemBanner, TextCard, TextContainer, Title, TitleContainer } from "./styles";

function VideoComponent({ openMenu }: { openMenu: boolean }) {
  return (
    <Container>
      <ImagemBanner src="https://pm1.narvii.com/5929/71e33a3add7f81140ea6fa81a564b98ec377fbb6_hq.jpg"></ImagemBanner>
      <TitleContainer>
        <ChannelImage>
          AZ
        </ChannelImage>
        <TextContainer>
          <Title>Teste</Title>
          <TextCard>Arthur</TextCard>
          <TextCard> 68 mi visualizações - há 1 ano</TextCard>
        </TextContainer>
      </TitleContainer>
    </Container>
  );
}

export default VideoComponent;

import styled from "styled-components";

export const Container = styled.div`
    width: 100%;
`;

export const ImagemBanner = styled.img`
    width: 100%;
    height: 210px;
    border-radius: 12px;
`;

export const TitleContainer = styled.div`
    width: 100%;
    display: flex;
`;

export const ChannelImage = styled.div`
    background-color: beige;
    width: 40px;
    heigth: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
`;

export const TextContainer = styled.div`
    display: flex;
    flex-direction: column;
`;

export const Title = styled.span`
    font-weight: 600;
    color: #0f0f0f;
`;

export const TextCard = styled.span`
    color: 8c8c8c;
    font-size: 14px;
`;

import VideoComponent from "../../components/videoComponent";
import { Container } from "./styles";

interface IProps {
  openMenu: boolean;
}


function Home({ openMenu }: IProps) {
  return (
    <Container openMenu={openMenu}>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      <VideoComponent openMenu={openMenu}/>
      
    </Container>
  );
}

export default Home;

import { styled } from "styled-components";

export const Container = styled.div<{ openMenu: boolean }>`
    width: 100%;
    max-width: 1600px;
    display: grid;
    grid-template-columns: ${({ openMenu }) => openMenu? 'repeat(4, 1fr)' : 'repeat(5, 1fr)'};
    column-gap: 20px;
    row-gap: 50px;

`;

I need to make the column change according to the boolean, however the main objective, leaving the boolean completely aside, is to change the number of columns with my side menu open and closed

is there a way to update my discord bot’s code without killing its process ?

Like if I change a single letter in a command code, do I have to restart the bot entirely to update it ? And what about non-command code ?

I’m restarting my bot to update/test the code a lot lately, and discord sent me a message saying my bot restarts too often.

Should i ignore the message, or do you have a solution for updating without restarting it?

Thanks.

I have a list of market pairs that also make up the link for trading page. The selection menu has got a list of market pairs coming from a vue component called AppMarkets.vue. The function is as following (I have commented it cause it is not working at the moment).

 gotoMarketView: function(base, rel) {
      this.newmarket.base.ticker = base
      this.newmarket.rel.ticker = rel
      console.log("market selected going to trader view: " + this.newmarket.base.ticker + "/" + this.newmarket.rel.ticker);
      this.$emit("closeDialog");
      // window.location.href = "/traderview?base=" + base + "&rel=" + rel;
      //this.$router.push("/traderview?base=" + this.base + "&rel=" + this.rel);
      // this.$router.push({
      //   name: "TraderView",
      //   query: {
      //     base: base,
      //     rel: rel
      //   }
      // });
      // window.location.href='/traderview?base='+base+'&rel='+rel
      // window.location.href='/traderview/'+base+'/'+rel;
      //this.$router.push({name: "TraderView", params: {base: base, rel: rel}})
      //this.$forceUpdate()
      //this.$router.go(this.$router.currentRoute)

      // this.forceRerender();
      // "http://" +
      //   process.env.VUE_APP_WEBHOST +
      //   // "localhost:8000/#/traderview?base="+
      //   ":8000/#/traderview?base=" +
      //   base +
      //   "&rel=" +
      //   rel
    },

The component is being used on the App.vue page which is the main menu as follows:

              <AppMarkets v-on:closeDialog="gotoMarket" :key="componentKey" />

The gotoMarket function in App.vue as follows which I have made static at the moment to a specific pair because base and rel does not work at the moment.

gotoMarket: function() {
      // console.log("Going to new market..." + base + "/")// + rel)
      console.log(this.componentKey)
      this.componentKey += 1
      this.dialog = !this.dialog
      
      this.$router.push("/traderview/RICK/MORTY");
      //this.$router.push("/traderview?base=" + base + "&rel=" +rel); 
      //window.location.href='/traderview/'+base+'/'+rel;
    },

I want the link to be dynamic according to the selection made by the user from the menu here is the live example you have go to the Markets menu button on the top right corner to see the pairs.

http://v3dev.komodefi.com:17077/dashboard

I’m making ecommerce website using angular.
I defined some roles in module.

const routes: Routes = [
  {path: 'category/:id', component: ProductsComponent},
  {path: 'subcategory/:id', component: ProductsComponent},
  {path: 'category', component: ProductsComponent},
  {path: 'products', component: ProductsComponent},
  {path: '', redirectTo: '/products', pathMatch: 'full'},
  {path: '**', redirectTo: '/products', pathMatch: 'full'}

When i go default route /products everithing working fine as you see.

I made dropdown menu

and i binded routes above to it

<li class="has-children">
      <a href="#">Categories</a>
      <ul class="dropdown">
      <li class="has-children">
         <a routerLink="/category/1" class="dropdown-item" href="#">Clothes</a>
         <ul class="dropdown">
               <li><a routerLink="/subcategory/1" class="dropdown-item" href="#">Coats</a></li>
               <li><a routerLink="/subcategory/2" class="dropdown-item" href="#">T-Shirt</a></li>
         </ul>
      </li>
      <li><a routerLink="/category/2" class="dropdown-item" href="#">Digital technology</a></li>
      </ul>
</li>

When i follow menu route i get errors.

As you see it trying to find images by route http://localhost:4200/subcategory/assets/img/h4-slide2.png
but i dont have images by this route i only have them by route http://localhost:4200/assets/img/h4-slide2.png. and also as you see javascript stops working (slider broken and also lost images). Anybudy have idea why it happens and how can i fix it?

I cant find anything about that and i lost a lot of time. help

I was searching about this without success so I want to know your opinions, I’m a newbie in Facebook SDK and APIs. I’ll appreciate your knowledge about this.

I found this guide but It doesn’t respond the Why question https://developers.facebook.com/docs/graph-api/advanced/api-upgrade

I researched a lot in order to find the answer

I have an issue regarding the table2excel (https://www.npmjs.com/package/table2excel) library. The codes are also being printed in the generated excel file.

Here is the problem:
https://imgur.com/a/oMIR2VU

Here is my code,

$('#to_excel').click(function(e){
    e.preventDefault()
    $("#jv_table").table2excel({
       name: "JV SUMMARY",
       filename: "jv_summary_excel.xls", // do include extension
       preserveColors: false // set to true if you want background colors and font colors preserved
     });
})

my table:

<?php if(!isset($_GET['summary'])) {
            foreach($newArr as $arr){
                if(array_keys(array_values($arr)[0])[0] =="GL ACCOUNT" || array_keys(array_values($arr)[0])[0] == "COST CENTER") continue;
                ?>
                <tr class="<?=array_keys(array_values($arr)[0])[0] == "A/P - KLASSIC" ? "end" : ""?>">
                    <td><?=explode('_',array_keys($arr)[0])[0]?></td> <!-- DEPARTMENT -->
                    <td><?=$gl_accounts[array_keys(array_values($arr)[0])[0]]?></td> <!-- GL ACCOUNT NUMBERS -->
                    <td><?=array_keys(array_values($arr)[0])[0]?></td> <!-- GL ACCOUNT NAMES -->
                    <td><?=$cost_centers[explode('_',array_keys($arr)[0])[0]]?></td> <!-- COST CENTER -->
                    <td><?=$profit_centers[explode('_',array_keys($arr)[0])[0]]?></td> <!-- PROFIT CENTER (P90-SOMETHING) -->
                    <td><?=number_format((array_values(array_values($arr)[0])[0] * 0.32),2)?></td>
                    <td><?=number_format((array_values(array_values($arr)[0])[0] * 0.20),2)?></td>
                    <td><?=number_format((array_values(array_values($arr)[0])[0] * 0.20),2)?></td>
                    <td><?=number_format((array_values(array_values($arr)[0])[0] * 0.26),2)?></td>
                    <td><?=number_format((array_values(array_values($arr)[0])[0] * 0.02),2)?></td>
                </tr>
            <?php }} ?>

I also check my table and there is no code in there. I want to remove it as soon as possible. Thanks for the help.

I’m trying to have the selected option from a dropdown list show in a form when selected. The program is a label program, that will (eventually) allow the user to input one number and it will populate all the info from that particular order using MySQL. Then the user can select from a few dropdown lists how they want to ship it, etc. The system acts as if the code doesn’t exist. What am I missing?
You can view the entire project here: label pro

<fieldset class="input" onclick="showPkg()">
    <label for="pkg-type">PKG TYPE
        <select id="pkg-type" name="pkg-type">
            <option value="">(select type)</option>
            <option value="1">BOX</option>
            <option value="2">BUNDLE</option>
            <option value="3">CRATE</option>
            <option value="4">LIFT</option>
            <option value="4">PALLET</option>
         </select>
               
<div class="pkg-type" id="pkg-type">
    <div class="info-title2">package</div>
    <div class="text-box2"></div>
        <script>
            function showPkg() {
                var x = document.getElementById('pkg-type').selectedIndex;

            }
        </script>
     </div>

Ive tried selected index and get getting the value in an assortment of ways such as the following

function myFunction() {
                            var pT = document.getElementById("pkg-type").value;
                            pT.innerHTML = ('Selected text: ' + sT[sT.selectedIndex].text

I know you can access to all nested children:

renderChildren = children => 
    React.Children.map(children, (child) => {
       const props = {};
       if (!React.isValidElement(child)) return child;
 
       if (child.props.children) {
          props.children = this.renderChildren(child.props.children);
       }
       return React.cloneElement(child, props);
    }
);

It works very well for:

<div>
   <div>
      <div>Some text</div>
   </div>
</div>

But how to access to <div>Some text</div> here:

<div><MemoComponent a={a} /></div>

const MemoComponent = ({a}) => {
    return useMemo(
        () => (
            <Childrens
                {...{
                    a: a,
                }}
            />
        ),
        [a]
    );
}

const Childrens = () => {
    return (
        <div>
            <div>Some text</div>
        </div>
    )
}

I am building a chrome extension who need to download video from a source website. And i have created this code

fetch(url)
        .then(response => response.blob())
        .then(blob => {
          // Create a temporary link element
          const link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          link.download = fileName;
          link.type = 'video/mp4'; // Set the MIME type explicitly
  
          // Trigger the download
          link.click();
  
          // Clean up
          URL.revokeObjectURL(link.href);
        })
        .catch(error => {
          console.error('Error downloading the video:', error);
        });

This run inside a downloadVideo(some parameters) function. And this function really download each video i click the download button, but there is another problem: Some videos are not opening from my player. Some video open but let say if i download 20 video only 2 – 3 open from player. Others show me this error

I’m getting into coding after being using only wordpress for a while, but im still pretty much new to this, if you can provide the full code so i can study would be very much appreciated

I’m trying to build carousel like the one here https://www.enfoca2sstudios.com/diseno-de-social-media-copy/#carousel the one with blurry pics, i would like to have the full source code so i can study and learn how to build that one please

I am currently building an electron app where i need to store something in the app. For that I am using electron-store which works perfectly. Now I need to initialize an ipcMain.on(“get-license-key”). Them I am calling ipcRenderer.send(“get-license-key”, “”) now I want the ipcMain.on(“get-license-key”) to return the license key from electron-store so I can use it like this:

const licenseKey = ipcRenderer.send("get-license-key", "");

I am using NestJS as a backend framework and when doing Login service it is not returning a valid HTTP code. I used GlobalPipes on the app as it will be shown in the code provided. Also, the part of the code that is sending the error message is being activated and it sends the error message I put there but still the response has a bad code.

This is login code

async login(dto: LoginDto) {
    try {
      const user = await this.prisma.user.findUnique({
        where: {
          email: dto.email,
        },
      });

      if (!user) throw new ForbiddenException('Credentials incorrect');

      const pwMatches = await argon.verify(user.password, dto.password);

      if (!pwMatches) throw new ForbiddenException('Credentials incorrect');
      return this.signToken(user.id, user.email);
    } catch (error) {
      return error;
    }
  }

I’m using TestRail API .NET bindings in combination with JavaScript TestComplete CLR bridge functionaity. I have built the Guorok.Testrail library referencing the Newstonoft.Json library in Visual Studio and I can see the TestRail biding APIClient method in TestComplete (so assuming the bridge is working). When attempting to login TestRail API via script in TestComplte I am encountering this error with the APIClient:

System.Net.WebException: The request was aborted: Could not create SSL/TLS secure channel.
   at System.Net.HttpWebRequest.GetResponse()
   at Gurock.TestRail.APIClient.SendRequest(String method, String uri, Object data) in D:UsersqaDesktopGurock DO NOT DELETEtestrail-api-masterdotnetGurockTestRailAPIClient.cs:line 189
   at Gurock.TestRail.APIClient.SendPost(String uri, Object data) in D:UsersqaDesktopGurock DO NOT DELETEtestrail-api-masterdotnetGurockTestRailAPIClient.cs:line 95

I am able to authenticate via Postman but I am having issues doing the same with TestComplete. I’m attempting to update a test case to passed via TestRail API in TestComplete’s CLR bridge passing the apiArgsasString, runId, caseId, and dataObj. I’ve also confirmed the apiArgsAsString are indeed a string, “add_result_for_case/278/43381”. I’ve ensured TestAPI access has been checked in both places in administartion.

Example passCase:

testrail = {};

testrail.passCase = function(runId, caseId, additionalFields) {
    testrail.addStatusAndResultForCase(runId, caseId, additionalFields, 1);
};

testrail.addStatusAndResultForCase = function(runId, caseId, additionalFields, statusId) {
    additionalFields = additionalFields || {};
    additionalFields.status_id = statusId;
    testrail.addResultForCase(runId, caseId, additionalFields);
};


testrail.addResultForCase = function(runId, caseId, additionalFields) {
    dataObj = testrail.dataDictonary(additionalFields);
    testrail.sendPost("add_result_for_case/" + runId + "/" + caseId, dataObj);
};

testrail.sendPost = function(apiArgsAsString, dataDictionaryObj) {
    testrail.apiClient().SendPost(apiArgsAsString, dataDictionaryObj);
};

testrail.dataDictonary = function(jsonObj) {
    var dataD = dotNET.System_Collections.Hashtable.zctor();
    for (var key in jsonObj) {
        if (jsonObj.hasOwnProperty(key)) {
            dataD.Add(key, jsonObj[key]);
        }
    }
    
    return dataD;
};

testrail.apiClient = function() {
    var client = dotNET.Gurock_TestRail.APIClient.zctor("myTestRailURL");
    client.User = "myUsername"; 
    client.Password = "myPassword"; 
    return client; 
   
};

//USEUNIT
function testUpdateTestRail() {
    testrail.passCase(278, 43381, {comment: 'Updated to Passed'});
};

When running the above function I am getting SSL/TLS error above. Has anyone faced this issue before or has had success integrating TestRail and TestComplete? Any suggestions on what to do next would be appreciated!