Category: javascript

I am trying to take user input from dropdown boxes and text fields to carry out a calculation however I cannot seem to show the output in the boxes I want to.

Below is the code I have used to try and output the values but the boxes in the image attached don’t seem to change:

$w(“#text5”).text = (100 * (1 – Treatment1Year1)) >= 90 ? “>90%” : (100 * (1 – Treatment1Year1)) <= 10 ? “<10%” : (100 * (1 – Treatment1Year1)) + “%”;

$w("#text6").text = (100 * (1 - Treatment1Year3)) >= 90 ? ">90%" : (100 * (1 - Treatment1Year3)) <= 10 ? "<10%" : (100 * (1 - Treatment1Year3)) + "%";

$w("#text7").text = (100 * (1 - Treatment2Year1)) >= 90 ? ">90%" : (100 * (1 - Treatment2Year1)) <= 10 ? "<10%" : (100 * (1 - Treatment2Year1)) + "%";

$w("#text8").text = (100 * (1 - Treatment2Year3)) >= 90 ? ">90%" : (100 * (1 - Treatment2Year3)) <= 10 ? "<10%" : (100 * (1 - Treatment2Year3)) + "%";

enter image description here

I am new to javascript and wix so any help would be greatly appreciated 🙂

I have a simple React component that uses a state hook. The initial state is false, and when a button is clicked, the state is set to true. I have a console.log statement in the component to log when it renders.

Here is my code:

import { useState } from 'react';

function App() {
  const [value, setValue] = useState(false);

  function changeState() {
    setValue(true);
  }

  return (
    <>
      {console.log('rendered!')}
      <button onClick={changeState}>Click</button>
    </>
  );
}

export default App;

When I click the button multiple times, I see the message “rendered!” logged three times in the console. I expected it to be logged twice – once for the initial render, and once for the re-render after the state change. Can anyone explain why it’s being logged an extra time?

I’m using AWS style dictionary to generate UI properties from Figma Tokens. I could not get custom transformer working.

Custom transform and my config file:

import StyleDictionary from "style-dictionary-utils";
import pkg from 'style-dictionary-utils';
const { transform } = pkg;

StyleDictionary.registerTransform({
  name: 'font/createUIFont',
  type: 'value',
  matcher: function(token) {
    return token.attributes.category === 'font';
  },
  transformer: function(token) {
    console.log("hello", token);
    const fontName = token.original.value;
    const fontSize = token.attributes.size.value;

    // Update the transformed value to return UIFont object instantiation
    return `UIFont(name: "${fontName}", size: ${fontSize}) ?? UIFont.systemFont(ofSize: ${fontSize})`;
  }
});

const config = {
  source: ["tokens/**/*tokens.json"],
  platforms: {
    "ios-swift-separate-enums": {
      "transformGroup": "ios-swift-separate",
      "buildPath": "build/ios/",
      "files": [{
          "destination": "FontTokens.swift",
          "format": "ios-swift/class.swift",
          "className": "FontTokens",
          "filter": {
            "attributes": {
              "category": "font"
            }
          },
          "transforms": [
            "font/createUIFont"
          ]
        }]
    }
  },
};

StyleDictionary
  .extend(config)
  .buildAllPlatforms();

the font token:

{
  "font": {
    "headingg": { "$size": 20, "$value": "HelveticaNeue-Bold", "$weight": "bold" }
  }
}

the output I get is:

public class FontTokens {
   public static let headingg = "HelveticaNeue-Bold"
}

What I’m trying to achieve is to create a UIFont property

public class FontTokens {
   public static let headingg = UIFont(name: "HelveticaNeue-Bold", size: 20)
}

I am trying to achieve the same animation as the on in the second section: better for byuers/sellers/agents https://www.flyp.co/about-us in Webflow but I am not sure where to start. I would be thankful for any tips. An example solution in pure html, css, javascript is also fine

I have a slider and have achieved a smiliar effect so far I just can’t make the images rotate and appear in the same way

initial state :

before removing one input field:

after removing 2nd row input fields:

As we can clearly see that 2nd object in the list contains “e” and “f” but 2nd row displays “c and “d”.

for detailed code explanation please visit this link:
text

I want my discord bot to reply to the interaction based on what options are selected for example say i have a command called favourite pet depending on what option the user choose say the options where dog and cat if the user choose dog the bot would reply with ‘my favourite pet is dog too’ or say the user choose cat the bot would reply with ‘my favourite animal is cat too’ I cant manage to figure out how to do that

if (interaction.commandName === 'favourite-pet') {
    if (interaction.options === 'dog') {
      interaction.reply(`My favourtie pet is also a dog `)
    }
if (interaction.options === 'cat') {
      interaction.reply(`my favourite animal is also a cat  `)
    }
  }

I have an HTML simple web form to find a specific store in Google Maps by just entering the zip code or the city name. The search form must be targeted to the map like this:

https://www.google.com/maps/search/storename+cityname

Because people know they are going to get results of only Storename, they only write in the input text the zip code or city name so the store name is hidden but parsed after clicking to submit.

I am trying to achieve it like this:

<form action="https://www.google.com/maps/search/storename+city" method="get">
<input type="text" name="city"><input type="submit">
</form>

Any idea how to achieve this ?

Lets say the store name is: Apple
People will only enter the city name for example Miami (in the text field) and the form will in some way redirect the user to https://www.google.com/maps/search/apple+miami

I have few strings that could be in this format:

const s1 = "https://test1.com/testPage";
const s2 = "https://test2.com/testPage?specificParam=1"
const s3 = "https://test3.com/someOtherPage?specificParam=2&restParam=3";

So when i read it in a function, I have to check if a string has query params included, if yes then I have to encode it using it window.btoa() to all the query params. If not directly redirect. Can someone assist as to how to do this?

function test(path){
   const href = window.location.origin + path;
   if(href.includes('?')){
      // split all the query params and then attach `btoa` to it and then openthe url 
       with encoded params
   }
   window.open(href, '_blank', 'no-referer');
} 

Slides 1-3 in this horizontal accordion are working great, but when you click on the 4th slide you will see the text slide across white space and into position. The background is also slightly smaller than slides 1-3. I tried a few changes but the text would unwrap into position and I want it to remain static as it is right now.

I assume it has to do with the container width but even when I make the container large, the 4th panel still swipes across that bit of white space first and the background is still smaller than the rest of the slides.

Here’s my code – any advice is appreciated!

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:[email protected]&family=Vina+Sans&display=swap" rel="stylesheet">

<style>
      
    
  .holder {
  max-width: 640px;
  height: 450px;    
}
    
.slide__content {
  padding: 50px;
}
    
    .slide__content p {
  width: 300px;
}

    .slide__content h2 {
  width: 600px;
}    
    
#slide1 button {
  background: #FFC8FD;
}    
    
#slide2 button {
  background: #FDC9B2;
}
    
#slide3 button {
  background: #E4E0A4;
}  
  
#slide4 button {
  background: #FFC8FD;
}     
    
/*EDIT DESKTOP LAYOUT*/ 
@media screen and (min-width: 1024px) {  
    .holder h2 {
        font-family:arial;
        color:#CD8039;
        font-size:30px;
    }

    .holder p {
        font-family:darker grotesque;
        font-size:17px;
        padding:0px 200px 0px 0px;
    }    
        
.slides {
  display: flex;
  flex-direction: row;
  background: #FFF0E9;
  height: 100%;
  margin: 0;
  padding: 0;
    }
   
.slide {
  display: flex;
  width: 75px;
  overflow: hidden;
  flex-shrink: 0;
   transition: width 0.5s ease;    
    }   
      
.selected {
  width: calc(100% - 150px);
    }
     
.slide button {
  height: 100%;
  cursor: pointer;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  border-style: solid;
  border-width:1px;
    border-color:#fff;
  width: 75px;
  display: flex;
    }
    
 .slide button span {
  font-family:vina sans;
    color:#CD8039;
    font-size:50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom:-30px;  
  width: 450px;
  text-align: left;
  transform: rotate(-90deg);
  transform-origin: top left;
    }
    } 
    
/*EDIT MOBILE*/
@media screen and (max-width:640px) { 
    
.slides {
        display: flex;
        flex-direction: column;
        background: #FFF0E9;
        height: auto;
        margin: 0;
        padding: 0;
    
    }   
    
.slide button span {
        font-family: vina sans;
        color: #CD8039;
        font-size: 20px;
        text-align: center;
        flex-grow: 1;
    
    }
     
.slide {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        flex-shrink: 0;
    
    }
         
.selected {
  height: auto;
    
    }
   
.slide button {
        cursor: pointer;
        flex-direction: row;
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
        width: 100%;
        display: flex;
    
    }
    

    .holder h2 {
        font-family:arial;
        color:#CD8039;  
        font-size:20px;
        width:100%;
    }

    .holder p {
        font-family:darker grotesque;
        font-size:17px;
        width:100%;
    } 
 
        .slide button {
            height: auto;
            flex-direction: column;
            align-items: flex-start;
            
        }

        .slide button span {
            font-size: 40px;
            padding: 10px;
            text-align: left;
            
        }

        .slide__content {
            padding: 20px;
            
        }
    }
</style>

<div class="holder">
  <div class="slides">
    <div id="slide1" class="slide selected">
      <button onclick="selectSlide(1)">
        <span>Item 1 </span>

      </button>
      <div class="slide__content">
        <h2>Item 1 content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div id="slide2" class="slide">
      <button onclick="selectSlide(2)">
        <span>Item 2</span>
      </button>
        
      <div class="slide__content">
        <h2>Item 2 content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
      
    <div id="slide3" class="slide">
      <button onclick="selectSlide(3)">
        <span>Item 3</span>
      </button>
      <div class="slide__content">
        <h2>Item 3 content</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
     
      
        <div id="slide4" class="slide">
      <button onclick="selectSlide(4)">
        <span>Item 4</span>
      </button>
      <div class="slide__content">
        <h2>Item 4 content</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>  
      
      
  </div>
</div>

<script>
  function selectSlide(selectedIndex) {
    const slides = document.querySelectorAll('.slide');
    slides.forEach((slide, index) => {
      if (index + 1 === selectedIndex) {
        slide.classList.add('selected');
      } else {
        slide.classList.remove('selected');
      }
    });
  }
</script>

I’m working for a client who has a wordpress site that uses WP stability ai plugin as their service, also wooCommerece as the means to obtain credits for their users. Their issue is that in order to get their free credits for the free trial, the user must first click the button, be taken to the cart to create an account put in information and then is taken to the design page.

The design page uses php to either show the AI generator if the user has credits, or display the pricing plans if they are out of credits.

They want to be able to take the user straight to the design page with some free credits to test the ai generator twice, then be locked out of getting the free credits again I’m thinking if it’s too much hassle to make a cloned subdomain to have the function i want then make a link to it with reduced image quality and a link back to the original domain to purchase.

Anyone have experience or resources you may know of that would assist.

So far i know from inspecting their site the image generator id=”ai-text-image-form” class=”frm-ai-text-image-form” and it’s in an ajax.php file. The credit is class = ‘available_credits”

I’m not going to edit their original site as that would be a bad practice but the limited customization of WordPress and plugins makes it very difficult. I’m creating a clone website and editing the source code to test out a workable solution.

In my navbar when i hover over Resources there many items like Roadmap,Quiz etc,nw problem is when i click on Roadmap or any list except Methodology it shows https://base_url/#/roadmaps
but it must be
https://base_url/#/resources/roadmaps
because roadmaps are part of resources

App.js code

import ToolsRoutes from "./components/Tools/ToolsRoute";
import CtfRoute from "./components/CaptureTheFlag/CTFRoute";
import RoadmapsRoute from "./components/Learn/Roadmaps/RoadmapsRoute";
import VictimHelp from "./components/Other/Victimhelp/Victimhelp";
import Methodology from "./components/Resources/Methodology/MethodologyMain";
const App=()=>{
      #other code 
return(

 <ScrollToTop>
                    <Routes>
                        <Route index exact path={"/"} element={<Homepage />} />

                        <Route path={"/*"} element={<AuthRoute />} />

                        <Route exact path={"/victimhelp"} element={<VictimHelp />} />

                        <Route path={"/forum/*"} element={<ForumRoute />} />

                        <Route path={"/ctf/*"} element={<CtfRoute />} />
                        <Route path={"/ctf/mainpage"} element={<MainPage />} />

                        <Route exact path={"/leaderboard"} element={<Leaderboard />} />
                        <Route exact path={"courses/:title"} element={<Course />} />

                        <Route path={"/websecurity/*"} element={<WebSecurityRoutes />} />

**#following is roadmap component route which lie in different folder** 
                        <Route path={"/roadmaps/*"} element={<RoadmapsRoute />} />
                        <Route path={"/tools/*"} element={<ToolsRoutes />} />
                        <Route path={"/resources/methodology"} element={<Methodology />} />
                        <Route path={"/internship"} element={<Jobs />} />
                        <Route path={"/quiz"} element={<Quiz />} />
                        <Route path={"/createquiz"} element={<MakeQuiz />} />
                        <Route path={"/quiz/:type"} element={<QuizPage />} />
                        <Route path={"/interviewQuestions"} element={<InterviewQuestions />} />
<Route path={"*"} element={<NotFound />} />
                    </Routes>
                </ScrollToTop>
)
}

RodmapsRoute.js

import React from "react";
import { Route, Routes } from "react-router-dom";
import { NotFound, Roadmap, Roadmaps } from "src/components/index";

const RoadmapsRoute = () => {
    return (
        <Routes>
            <Route index element={<Roadmaps />} />
            <Route path={":title"} element={<Roadmap />} />
            <Route path={"*"} element={<NotFound />} />
        </Routes>
    );
};

export default RoadmapsRoute;

Note : each component is in different folder

I have a number of strings with this format:

'The model of that car is [assignment: any car model] and it has [assignment: any number] horsepower'

I want to display this string in my UI and replace every occurrence of [custom: text] with a textbox. My CustomComponent implements a textbox with a placeholder. I want the placeholder to be the text that comes between ‘[custom:‘ and the closing squared bracket.

I’m using reactStringReplace in order to replace string patterns with react components. The main problem is that reactStringReplace will replace every matching occurrence at the same time. Even if I match only the first occurrence, this will result in multiple checkboxes with the same placeholder.

I even tried to match only one occurrence removing ‘/g’ at the end of the regex but still all occurrences are replaced

This is my code:

const reactStringReplace = require('react-string-replace');

const description = 'The model of that car is [custom: any car model] and it has [custom: any number] horsepower'

function formatString(input){
    const regex =  /[assignment: (.*?)]/g;
    const regex_assignment =  /[assignment: (.*?)]/;
    let formattedString = input;
    let match;
    let placeholder;
    let newString = input;

    while ((match = regex.exec(input)) !== null) {
        placeholder = match[1];

        newString = reactStringReplace(newString,regex_assignment, ()=> (<CustomComponent placeholder={placeholder}/>))
    }

    return(newString);
}

return (
    <div class = 'description'>
        <div>{formatString(description)}</div>
    </div>
    );

What is the best approach for using multiple environments in my Playwright tests? Let’s say one for ”Test” and one for ”Production”

I’m starting my tests with npx and I’ll be on playwright.config.ts file with different browsers set up that are going to hardcoded baseUrl.
I start my tests from Azure release pipeline.

I’ve configured all my bot details as PRESENCE INTENT, SERVER MEMBERS INTENT, MESSAGE CONTENT INTENT. I also invited my bot to my channel so it can be found. For those who would like to use it. And all the code I think looks well. What’s wrong with it then?

Here is my code

const axios = require("axios");
const { Client, GatewayIntentBits } = require("discord.js");
const client = new Client({
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,
    GatewayIntentBits.MessageContent,
    GatewayIntentBits.DirectMessages,
  ],
});

client.on("ready", () => {
  console.log(`Zalogowano jako ${client.user.tag}!`);
});

client.on("messageCreate", async (message) => {
  if (message.content.startsWith("!verify")) {
    const userId = message.content.split(" ")[1];
    if (!userId) return message.reply("Proszę podać ID użytkownika.");

    const userExists = await verifyUser(userId);

    if (userExists) {
      const channel = client.channels.cache.get("1226659763505598516");
      if (channel) {
        channel.permissionOverwrites
          .create(message.author.id, { ViewChannel: true })
          .then(() => message.reply("Dodano Cię do kanału."))
          .catch(console.error);
      }
    } else {
      message.reply("Niepoprawny numer konta.");
    }
  } else {
    message.reply("Hej! Wykonaj komendę !verify TWÓJ_NUMER_KONTA aby Cię zweryfikować.")
  }
});

const verifyUser = async (userId) => {
  try {
    const response = await axios.post(
      "https://geografiana100.pl/discord/check-user.php",
      {
        userId: userId,
      }
    );

    if (response.data && response.data.exists === true) {
      return true;
    } else {
      return false;
    }
  } catch (error) {
    console.error("Błąd przy weryfikacji użytkownika:", error);
    return false;
  }
};

client.login(
  "MY_TOKEN"
);

I am new to react so please be kind.

I have an accordion that shows searched terms, I am trying to pass a state down to each child within this accordion but I can’t seem to get the state to toggle when the child is clicked.

So far I have my accordion (I have removed the code around it):

const [isOpen, setIsOpen] = useState(false)

 const toggleAccordion = () => {
     setIsOpen(!isOpen)   
 }

return (
  <div className='grid'>
    {enableSearch && searchComponents}
    {accordionData.length > 0
      ? (
        <section className='accordion' data-kontent-item-id={id}>
          {title &&
            <h2 className='accordion__title'>{title}</h2>}
          {accordionData.map(
            (item, key) =>
              item.title && (
                <AccordionItem
                  key={key}
                  title={item.title}
                  text={item.text}
                  itemId={item.id}
                  onClick={toggleAccordion}
                  onKeyDown={handleKeyDown}
                  isOpen={isOpen}
               />
              )
          )}
        </section>
        )
      : (
          enableSearch && (
            <div
              className='mt-8'
              dangerouslySetInnerHTML={{ __html: noResultsText }}
            />
          )
        )}
  </div>
)

And my accordion item:

const AccordionItem = ({ title, text, itemId, isOpen }) => {

 const contentRef = useRef(null)

  return (
    <div className={`accordion__item ${isOpen ? 'accordion__item-label--expanded' : ''}`} data-kontent-item-id={itemId}>
      <div
        className='accordion__item-label js-accordion__item-label'
        tabIndex={0}
      >
      </div>
      <div
        className='accordion__item-content js-accordion__item-content'
        ref={contentRef}
      >
        <div className='accordion__item-content-wrapper' dangerouslySetInnerHTML={{ __html: text }} />
      </div>
    </div>
  )
}

I would like the isOpen state to change when the accordion item is clicked. I am not getting any errors.