Category: javascript

I’m trying to utilize the bootstrap 5 framework to create a carousel for an art gallery with the following template. (Excuse the poorly drawn template)

However I can’t seem to access the next/prev slides in order to translate them correctly.
How can I properly create a multi item bootstrap carousel to achieve this.

(Currently a Vue.js component)

<template>
  <div id="carousel_1" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item">
        <img
          src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
          class="img-thumbnail w-25"
          alt="..."
        />
      </div>
      <div class="carousel-item active">
        <img
          src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
          class="img-thumbnail w-25"
          alt="..."
        />
      </div>
      <div class="carousel-item">
        <img
          src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(20).jpg"
          class="img-thumbnail w-25"
          alt="..."
        />
      </div>
      <div class="carousel-item">
        <img
          src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(21).jpg"
          class="img-thumbnail w-25"
          alt="..."
        />
      </div>
    </div>
    <button
      class="carousel-control-prev"
      type="button"
      data-bs-target="#carousel_1"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button
      class="carousel-control-next"
      type="button"
      data-bs-target="#carousel_1"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</template>

<style scoped>
@media (min-width: 768px) {
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}
.carousel-control-next,
.carousel-control-prev {
  filter: invert(100%);
  width: 25%;
}
</style>

<script>
export default {
  mounted() {
    let items = document.querySelectorAll(".carousel-item");
    items.forEach((el) => {
      // number of slides per carousel-item
      const minPerSlide = 3;
      let next = el.nextElementSibling;
      for (var i = 1; i < minPerSlide; i++) {
        if (!next) {
          // wrap carousel by using first child
          next = items[0];
        }
        let cloneChild = next.cloneNode(true);
        el.appendChild(cloneChild.children[0]);
        next = next.nextElementSibling;
      }
    });
  },
};
</script>

So i tried to make a tts functionfor my discord.js bot using this code:

const { SlashCommandBuilder } = require("@discordjs/builders")
const { getAudioUrl } = require('google-tts-api');

module.exports = {
    data: new SlashCommandBuilder().setName("talk").setDescription("Nói tin nhắn trong voice channel").addStringOption((option) =>
    option.setName("text").setDescription("Your text").setRequired(true)),

    _run: async ({ client, interaction }) => {
        if (!interaction.member.voice.channel)
            return interaction.editReply("Mày phải vào một ``voice channel`` để sử dụng lệnh này.");

        const queue = client.player.getQueue(interaction.guildId);
        if (queue)
            return await interaction.editReply("Nhạc đang được bật. Vui lòng thử lại khi nhạc được tắt.");

        const text = interaction.options.getString("text");
        if (text > 200)
            return await interaction.editReply("Tin nhắn không được quá 200 chữ.");

        const voiceChannel = await client.player.createQueue(interaction.guild);
        const audioURL = await getAudioUrl(text, {
            lang: 'vi',
            slow: false,
            host: 'https://translate.google.com',
            timeout: 10000,
        });
        try {
            voiceChannel.connect(interaction.member.voice.channel).then(connection => {
                const dispatcher = connection.play(audioURL);
                dispatcher.on('finish', () => {
                    voiceChannel.disconnect();
                    message.reply('đã xong.');
                });
            });
        }
        catch (e) {
            await interaction.editReply('T lại bị lỗi rồi, đm <@877004766956363828> cứu t ;-;');
            console.error(e);
        };
    },
    get run() {
        return this._run;
    },
    set run(value) {
        this._run = value;
    },
}

but then this error appeared:

C:UsersAdministratorDropboxPCDesktopim innocentdiscord-music-botnode_modulesdiscord-playerdistStructuresQueue.js:646
            if (["youtube", "spotify"].includes(track.raw.source)) {
                                                          ^

TypeError: Cannot read properties of undefined (reading 'source')

What should I do now? And if u guys wanna see anything else please let me know. Like I have other files but i wonder if I should show them all or not or like just the main file or smth like that? I’m a node.js beginner.

Okay. So here is the deal. Without this component – everything was fine in my project. While with it, it points out this warning.

Warning: Each child in a list should have a unique “key” prop. Check the render method

I am currently using it in only one place in my project. And if I will comment it out, the problem will vanish. So for sure there is something wrong with it.

Here is the component code. Just a simple timer.

https://pastebin.com/dj2jy7wi

The problem with it and why I am here. It’s because I cannot understand why it makes this error.

For convinience I will post the place where I am using it. So you will see, that I am not iterating through it.

<WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/>
This is it!

  return (
<Card className={className}>
  <div>
    <div className="font-bold text-xs">Next Patient:</div>
    {visitNext ?
      <div>
        <CardHeading>{visitNext.ehrPatient?.name}</CardHeading>
        <WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/>
        <ul className="pl-5">
          <Field label="Reason for Visit" value={visitNext.ehrAppointment.reason} />
          <Field label="Gender" value={visitNext.ehrPatient?.gender} />
          <Field label="Language" value={visitNext.ehrPatient?.language} />
          <Field label="Translator" value={visitNeedTranslator} />
          <Field label="Preexisting Conditions" value={(visitNext.ehrPatient && visitNext.ehrPatient.conditions) ? visitNext.ehrPatient.conditions.join(',') : ''}/>
          <Field label="Current Medications" value={(visitNext.ehrPatient && visitNext.ehrPatient.medications) ? visitNext.ehrPatient.medications.join(',') : ''}/>
          {visitNext.ehrAppointment.references.length > 0 ? (
            <li>
              <label className="text-bold">Attached Files:</label>
              {visitNext.ehrAppointment.references.map((e, i) => (
                <a
                  key={i}
                  className="flex rounded-lg my-3 border border-link py-3 px-4 text-link text-xs items-center cursor-pointer"
                  href={"http://localhost:3000/" + e}
                  target="_blank"
                  rel="noreferrer"
                >
                  <span className="flex-grow underline">{e.replace(/^.*[\/]/, '')}</span>
                  <Icon name="file_download" outline />
                </a>
              ))}
            </li>
          ) : (
            <Field label="Attached Files" value="None" />
          )}
        </ul>
        <div className="mt-5 text-center">
          <Button as="button" onClick={startVisit}>
            Start Visit
          </Button>
        </div>
      </div> :
      <LoadingSpinner/>
    }
  </div>
</Card>

);

This upper piece of code is flowing directly intro index.tsx
Here. As NextPatientCard

 return (
<Layout>
  <div className="grid gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1" >
    <div>
      <NextPatientCard className="my-2" visitNext={visitNext}/>
      <InviteCard />
    </div>
    <div>
      <PatientQueueCard className="my-2" onDemandQueue={onDemandQueue} visitQueue={visitQueue} isNewVisit={isNewVisit} setIsNewVisit={setIsNewVisit}/>
      <ContentManagementCard className="my-2" contentAssigned={contentAssigned} contentAvailable={contentAvailable}/>
      <SurveyResultsCard className="my-2"/>
    </div>
    <div className="order-first lg:order-last">
      <AudioVideoCard />
    </div>
  </div>
</Layout>

);

My question is the following. Why I am reciving this error and how to fix it in this case ?

I’ve tried nearly everything. Putting key property on the outside div’s.
Passing data to my function with an WaitTimerProps interface and ect..

Nothing is working. And the best and most curious part is the following..
As you can see on the outer render where I am using my
<WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/>

We have another custom component. Just on the upper lane

<CardHeading>{visitNext.ehrPatient?.name}</CardHeading>

If it was working before with it and without any errors (thus it is passing data to it)
And they are even in the same place in the project. So it is made in a way, to not have this warning, right ?

Here is it’s code:

export interface CardHeadingProps {
  children: React.ReactNode;
}
export const CardHeading = ({ children }: CardHeadingProps) => {
  return (
    <h1 className="text-2xl text-primary whitespace-pre-wrap">{children}</h1>
  );
};

Really simple huh ?

I’ve converted my WaitTimer to this similar signature and props interface.
And it was even working as before.
But still… with this warning 🙁

I don’t know what to do and try next.
Maybe the problem lies here in the render function of my WaitTimer

  return (
      <div className="font-bold text-light text-xs">
        <div>
          {textLabel} {timerComponents}
        </div>
      </div>
  );

I’ve also tried to put key on these div’s. But it was pointless as always.

What is really wrong with it and with React itself ?
And why I am having this warning ONLY with my component!

Could anyone point me to the right direction, please ?

my website has a search button where a user can type in what they want to search for and the website removes all of the products that don’t match what was searched and leaves all of the products that match the product name typed in, and then once the search button is clicked, the page goes down to the products section showing the matching searched products. I want to make it so that users also have the option to click the ‘Enter’ key on their computers and the search button on their phones to trigger the same effect where the page scrolls down to the #products section in the website.

I appreciate any help that I receive and just let me know if more information or clarification is needed.

Project Code

HTML Code

         <div class="icons">
                <div class="fas fa-search" id="search- 
btn"></div>
                <div class="fas fa-bars" id="menu- 
btn"></div>
            </div>

            <div class="search-form">
                <input id="searchbar" 
onkeyup="search_products()" type="text"
                name="search" placeholder="Search 
Products">
                <a href="#products"><label 
for="search-box" class="fas fa-search"></label></a>
            </div>

JS Code

        function search_products() {
            let input = 
document.getElementById('searchbar').value
            input=input.toLowerCase();
            let x = 
document.getElementsByClassName('box')
            
            for (i = 0; i < x.length; i++) { 
                if 
(!x[i].innerHTML.toLowerCase().includes(input)) {
                    x[i].style.display="none";
                }
                else {
                    x[i].style.display="list-item";                 
                }
            }
        }

Example Snippet

let navbar = document.querySelector('.navbar');

document.querySelector('#menu-btn').onclick = () =>{
    navbar.classList.toggle('active');
    searchForm.classList.remove('active');
    cartItem.classList.remove('active');
}

let searchForm = document.querySelector('.search-form');

document.querySelector('#search-btn').onclick = () =>{
    searchForm.classList.toggle('active');
    navbar.classList.remove('active');
    cartItem.classList.remove('active');
}

let cartItem = document.querySelector('.cart-items-container');

document.querySelector('#cart-btn').onclick = () =>{
    cartItem.classList.toggle('active');
    navbar.classList.remove('active');
    searchForm.classList.remove('active');
}

window.onscroll = () =>{
    navbar.classList.remove('active');
    searchForm.classList.remove('active');
    cartItem.classList.remove('active');
}





function search_products() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('box')
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="list-item";                 
        }
    }
  }

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root{
    --main-color:#6e987c;
    --black:#13131a;
    --bg:#010103;
    --border:.1rem solid rgba(255,255,255,.3);
}

*{
    font-family: 'Roboto', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar{
    width: .8rem;
}

html::-webkit-scrollbar-track{
    background: transparent;
}

html::-webkit-scrollbar-thumb{
    background: #fff;
    border-radius: 5rem;
}

body{
    background: var(--bg);
}

section{
    padding:2rem 7%;
}

.heading{
    text-align: center;
    color:#fff;
    text-transform: uppercase;
    padding-bottom: 3.5rem;
    font-size: 4rem;
}

.heading span{
    color:var(--main-color);
    text-transform: uppercase;
}

.btn{
    margin-top: 1rem;
    display: inline-block;
    padding:.9rem 3rem;
    font-size: 1.7rem;
    color:#fff;
    background: var(--main-color);
    cursor: pointer;
}



.header{
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:1.5rem 7%;
    border-bottom: var(--border);
    position: fixed;
    top:0; left: 0; right: 0;
    z-index: 1000;
}

.header .logo img{
    height: 6rem;
}

.header .navbar a{
    margin:0 1rem;
    font-size: 1.6rem;
    color:#fff;
}

.header .navbar a:hover{
    color:var(--main-color);
    border-bottom: .1rem solid var(--main-color);
    padding-bottom: .5rem;
}

.header .icons div{
    color:#fff;
    cursor: pointer;
    font-size: 2.5rem;
    margin-left: 2rem;
}

.header .icons div:hover{
    color:var(--main-color);
}

#menu-btn{
    display: none;
}

.header .search-form{
    position: absolute;
    top:115%; right: 7%;
    background: #fff;
    width: 50rem;
    height: 5rem;
    display: flex;
    align-items: center;
    transform: scaleY(0);
    transform-origin: top;
}

.header .search-form.active{
    transform: scaleY(1);
}

.header .search-form input{
    height: 100%;
    width: 100%;
    font-size: 1.6rem;
    color:var(--black);
    padding:1rem;
    text-transform: none;
}

.header .search-form label{
    cursor: pointer;
    font-size: 2.2rem;
    margin-right: 1.5rem;
    color:var(--black);
}

.header .search-form label:hover{
    color:var(--main-color);
}

.header .cart-items-container{
    position: absolute;
    top:100%; right: -100%;
    height: calc(100vh - 9.5rem);
    width: 35rem;
    background: #fff;
    padding:0 1.5rem;
}

.header .cart-items-container.active{
    right: 0;
}

.header .cart-items-container .cart-item{
    position: relative;
    margin:2rem 0;
    display: flex;
    align-items: center;
    gap:1.5rem;
}

.header .cart-items-container .cart-item .fa-times{
    position: absolute;
    top:1rem; right: 1rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--black);
}

.header .cart-items-container .cart-item .fa-times:hover{
    color:var(--main-color);
}

.header .cart-items-container .cart-item img{
    height: 7rem;
}

.header .cart-items-container .cart-item .content h3{
    font-size: 2rem;
    color:var(--black);
    padding-bottom: .5rem;
}

.header .cart-items-container .cart-item .content .price{
    font-size: 1.5rem;
    color:var(--main-color);
}

.header .cart-items-container .btn{
    width: 100%;
    text-align: center;
}

.home{
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:url(../images/backgroundimg.jpeg) no-repeat;
    background-size: cover;
    background-position: center;
}

.home .content{
    max-width: 60rem;
}

.home .content h3{
    font-size: 6rem;
    text-transform: uppercase;
    color:#fff;
}

.home .content p{
    font-size: 2rem;
    font-weight: lighter;
    line-height: 1.8;
    padding:1rem 0;
    color:#eee;
}

.about .row{
    display: flex;
    align-items: center;
    background:var(--black);
    flex-wrap: wrap;
}

.about .row .image{
    flex:1 1 45rem;
}

.about .row .image img{
    width: 100%;
}
.about .row .content{
    flex:1 1 45rem;
    padding:2rem;
}

.about .row .content h3{
    font-size: 3rem;
    color:#fff;
}

.about .row .content p{
    font-size: 1.6rem;
    color:#ccc;
    padding:1rem 0;
    line-height: 1.8;
}

.menu .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}

.menu .box-container .box{
    padding:5rem;
    text-align: center;
    border:var(--border);    
}

.menu .box-container .box img{
    height: 10rem;
}

.menu .box-container .box h3{
    color: #fff;
    font-size: 2rem;
    padding:1rem 0;
}

.menu .box-container .box .price{
    color: #fff;
    font-size: 2.5rem;
    padding:.5rem 0;
}

.menu .box-container .box .price span{
    font-size: 1.5rem;
    text-decoration: line-through;
    font-weight: lighter;
}

.menu .box-container .box:hover{
    background:rgb(35, 36, 38);
}

.productbtn:hover {
    background-color: #adefc3;
    color: rgb(0, 0, 0);
}

.products .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}

.products .box-container .box{
    text-align: center;
    border:var(--border);
    padding: 2rem;
}

.products .box-container .box .icons a{
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    border:var(--border);
    color:#fff;
    margin:.3rem;
}

.products .box-container .box .icons a:hover{
    background:var(--main-color);
}

.products .box-container .box .image{
    padding: 2.5rem 0;
}

.products .box-container .box .image img{
    height: 25rem;
}

.products .box-container .box .content h3{
    color:#fff;
    font-size: 2.5rem;
}

.products .box-container .box .content .stars{
    padding: 1.5rem;
}

.products .box-container .box .content .stars i{
    font-size: 1.7rem;
    color: var(--main-color);
}

.products .box-container .box .content .price{
    color:#fff;
    font-size: 2.5rem;
}

.products .box-container .box .content .price span{
    text-decoration: line-through;
    font-weight: lighter;
    font-size: 1.5rem;
}

.review .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}

.review .box-container .box{
    border:var(--border);
    text-align: center;
    padding:3rem 2rem;
}

.review .box-container .box p{
    font-size: 1.5rem;
    line-height: 1.8;
    color:#ccc;
    padding:2rem 0;
}

.review .box-container .box .user{
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    object-fit: cover;
}

.review .box-container .box h3{
    padding:1rem 0;
    font-size: 2rem;
    color:#fff;
}

.review .box-container .box .stars i{
    font-size: 1.5rem;
    color:var(--main-color);
}

.contact .row{
    display: flex;
    background:var(--black);
    flex-wrap: wrap;
    gap:1rem;
}

.contact .row .map{
    flex:1 1 45rem;
    width: 100%;
    object-fit: cover;
}

.contact .row form{
    flex:1 1 45rem;
    padding:5rem 2rem;
    text-align: center;
}

.contact .row form h3{
    text-transform: uppercase;
    font-size: 3.5rem;
    color:#fff;
}

.contact .row form .inputBox{
    display: flex;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background:var(--bg);
    border:var(--border);
}

.contact .row form .inputBox span{
    color:#fff;
    font-size: 2rem;
    padding-left: 2rem;
}

.contact .row form .inputBox input{
    width: 100%;
    padding:2rem;
    font-size: 1.7rem;
    color:#fff;
    text-transform: none;
    background:none;
}

.blogs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}

.blogs .box-container .box{
    border:var(--border);    
}

.blogs .box-container .box .image{
    height: 25rem;
    overflow:hidden;
    width: 100%;
}

.blogs .box-container .box .image img{
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.blogs .box-container .box:hover .image img{
    transform: scale(1.2);
}

.blogs .box-container .box .content{
    padding:2rem;
}

.blogs .box-container .box .content .title{
    font-size: 2.5rem;
    line-height: 1.5;
    color:#fff;
}

.blogs .box-container .box .content .title:hover{
    color:var(--main-color);
}

.blogs .box-container .box .content span{
    color:var(--main-color);
    display: block;
    padding-top: 1rem;
    font-size: 2rem;
}

.blogs .box-container .box .content p{
    font-size: 1.6rem;
    line-height: 1.8;
    color:#ccc;
    padding:1rem 0;
}

.footer{
    background:var(--black);
    text-align: center;
}

.footer .share{
    padding:1rem 0;
}

.footer .share a{
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    color:#fff;
    border:var(--border);
    margin:.3rem;
    border-radius: 50%;
}

.footer .share a:hover{
    background-color: var(--main-color);
}

.footer .links{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding:2rem 0;
    gap:1rem;
}

.footer .links a{
    padding:.7rem 2rem;
    color:#fff;
    border:var(--border);
    font-size: 2rem;
}

.footer .links a:hover{
    background:var(--main-color);
}

.footer .credit{
    font-size: 2rem;
    color:#fff;
    font-weight: lighter;
    padding:1.5rem;
}

.footer .credit span{
    color:var(--main-color);
}













/* media queries  */
@media (max-width:991px){

    html{
        font-size: 55%;
    }

    .header{
        padding:1.5rem 2rem;
    }

    section{
        padding:2rem;
    }

}

@media (max-width:768px){

    #menu-btn{
        display: inline-block;
    }

    .header .navbar{
        position: absolute;
        top:100%; right: -100%;
        background: var(--bg);
        width: 30rem;
        height: calc(100vh - 9.5rem);
    }

    .header .navbar.active{
        right:0;
    }

    .header .navbar a{
        color:var(--main-color);
        display: block;
        margin:3.5rem;
        padding:.5rem;
        font-size: 2.2rem;
        text-align: center;
    }

    .header .search-form{
        width: 90%;
        right: 2rem;
    }

    .home{
        background-position: left;
        justify-content: center;
        text-align: center;
    }

    .home .content h3{
        font-size: 4.5rem;
    }

    .home .content p{
        font-size: 1.5rem;
    }

}

@media (max-width:450px){

    html{
        font-size: 50%;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    
<!-- header section starts  -->

<header class="header">


   

                <div class="icons">
                    <div class="fas fa-search" id="search-btn"></div>
                    <div class="fas fa-bars" id="menu-btn"></div>
                </div>

                <div class="search-form">
                    <input id="searchbar" onkeyup="search_products()" type="text"
                    name="search" placeholder="Search Products">
                    <a href="#products"><label for="search-box" class="fas fa-search"></label></a>
                </div>


</header>


<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>

<section class="menu" id="products">

    <h1 class="heading"> our <span>Products</span> </h1>

    <div class="box-container">

        <div class="box">
            <img src="images/raworganiclogo.png" alt="porn">
            <h3>Raw Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/mylelogomain-removebg-preview.png" alt="">
            <h3>Myle</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/oozelogo.png" alt="">
            <h3>Ooze Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/airlogologo1.png" alt="">
            <h3>Air Bar Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/pipesandbowls.png" alt="">
            <h3>Pipe & Bowls</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/hookahlogo.png" alt="">
            <h3>Hookah Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/Clipperlogo.png" alt="">
            <h3>Clipper Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/biclogo.png" alt="">
            <h3>Bic Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/elementslogo.png" alt="">
            <h3>Elements Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/hydelogo.png" alt="">
            <h3>Hyde Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/elementslogo.png" alt="">
            <h3>Elements Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/puffbarlogo.png" alt="">
            <h3>Puff Bar Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/realfloomfame-removebg-preview.png" alt="">
            <h3>Flum Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/bobmarleylogo.png" alt="">
            <h3>Bob Marley Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

        <div class="box">
            <img src="images/weedgrinders-removebg-preview.png" alt="">
            <h3>Grinders Products</h3>
            <div class="price">$15.99 <span>20.99</span></div>
            <a href="#" class="btn productbtn">View Collection</a>
        </div>

    </div>

</section>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>

<!-- custom js file link  -->
<script src="js/script.js"></script>

</body>
</html>

hit enter in order to search as well.

I have a file that exports an async function, like this

// api.js


import { getInfo } from "somewhere";

export async function getSomething() {
  await getInfo();
}

and then I’m trying to import it into another file like this.

import { getSomething } from "./api.js";

async created() {
    await getSomething()
  },

but I’m getting this error

Syntax Error: Unexpected reserved word 'await'. (77:26)
 77 | await getSomething()

Of course, this is all pseudo-code but the problem is — why does my file not recognize the imported method as an async call? Is there a different way to import something when it is an async method?

I want to add 10 in tenter image description herehe number.

I have a simple form in javascript. I’m going to calculate a formula like attached image.

I want to select elements by id and then detects operators and finally calculate final result.

I am trying to understand why this code isn’t going back to slideIndex = 0;

Can someone please explain, at the forth click I am getting undefined instead of jumping back to the first index of the slide?

Thank you for explaining.

slideIndex = 0;

    function nextSlide() {

        console.log(slides[slideIndex]);   
               

       slideIndex++;

       if(slideIndex > slides.length){
        slideIndex = 0;
        }
      
    }

I get data via API which returns me a ‘data’ object that has my users and a ‘meta’ object that returns me pagination data.

I would like to know how I could implement this inside a Quasar server side table, I performed some tests reading the documentation but without success. Here I fetch and send the ‘meta’ data to some variables.

const fetchUsersApi = (filters = {}) => {
  users.value.loading = true
  fetchUsers(filters)
    //@ts-ignore
    .then(({ data, meta }) => {          
      users.value.data = data
      metaDates.value.page = meta.current_page
      metaDates.value.perPage = meta.per_page
      metaDates.value.rowsNumber = meta.total
    })
    .finally(() => users.value.loading = false)
}

And here I try to follow the logic of the Quasar documentation, but I had a lot of difficulty with this part because it became very confusing for me.

const filter = ref('')
const rows = ref([])
const metaDates = ref({
  page: 0,
  rowsNumber: 0,
  perPage: 0
})

const pagination = ref({
  page: 0,
  rowsPerPage: 20,
  rowsNumber: 0
})

function fetchFromServer(filter: string) {
  const data = filter
    ? users.value.data.filter((row) => row.name.toLowerCase().includes(filter.toLowerCase())) 
    : users.value.data.slice();
  return data
}    

function onRequest(props: any){
  users.value.loading = true
  const filter: string = props.filter;

  setTimeout(() => {
    const returnedData = fetchFromServer(
      filter,
    );
    rows.value.splice(0, rows.value.length, ...returnedData) 
    pagination.value.page = metaDates.value.page
    pagination.value.rowsPerPage = metaDates.value.perPage,
    pagination.value.rowsNumber = metaDates.value.rowsNumber
    
  }, 1000)
              
  fetchUsersApiParams.value.page = props.pagination.page
  //@ts-ignore
  fetchUsersApi(fetchUsersApiParams.value)         
  
  users.value.loading = false
}
onMounted(() => {
  onRequest({
    pagination: pagination.value, 
    filter: undefined
  })
}) 

I have a working css/html/javascript example of a sidebar that can be toggled to open/close:

https://jsfiddle.net/martinradio/2dx4o18q/4/

I’m trying to convert this example to React, and since my jsfiddle adds/removes a css class in order to toggle the sidebar, im trying to recreate the functionality using states.

Since my sidebar will be on every page of my site, I’m trying to make it so I can pass it a component that will get rendered inside content.

For example, my component below: SidebarColors.js will take another component as an import like so:

<Route exact path="/rendertune" element={ <SidebarColors> <myOtherComponent/> </SidebarColors> } />

Then in my file below, it will get rendered as {children} in the webpage.

But in my file below, none of the state setting works.

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

var isSidebarOpen = false;

function sideNavClicked() {
    isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
    isSidebarOpen = true;
    //this.setShowSidebar(true)
    //document.getElementById('mySidebar').classList.add('sidebar-show');
    //this.setMainShow(true)
    //document.getElementById('main').classList.add('main-show');
}

function closeNav() {
    isSidebarOpen = false;
    //this.setShowSidebar(false)
    //document.getElementById('mySidebar').classList.remove('sidebar-show');
    //this.setMainShow(false)
    //document.getElementById('main').classList.remove('main-show');
}

function toggleMenuItem(element) {
    //console.log('toggleMenuItem')
    //this.setSidebarMenuToggle(false)
    // document.getElementById(element.dataset.ulid).classList.toggle("ul-show");
}


const SidebarColors = ({ children }) => {

    const [showSidebar, setShowSidebar] = React.useState(true);
    const [mainShow, setMainShow] = React.useState(true);

    return (
        <>
            <div>
                <button onClick={() => setShowSidebar(true)}>debug button: open sidebar</button>

                <div className="main-content">
                    <div id="mySidebar" className={"sidebar super-animation " + (showSidebar ? "sidebar-show" : "")}>
                        <a href="" className="closebtn" onClick={closeNav}>×</a>
                        <a href="#">About</a>
                        <a data-ulid="expand_this" onClick={toggleMenuItem(this)} href="#">Expand This ▼</a>
                        <ul id="expand_this">
                            <li><a href="#">Coffee</a></li>
                            <li><a href="#">Coverage</a></li>
                        </ul>

                        <a href="#">Clients</a>
                        <a href="#">Contact</a>
                    </div>

                    <div id="main" className={"super-animation" + (mainShow ? "main-show" : "")}>
                        
                        <p>Below is a button to open sidebar</p>
                        <button className="openbtn" onClick={sideNavClicked}>☰</button>

                        <p>main content below</p>
                        {children}
                    
                    </div>
                </div>


            </div>


        </>
    )
}

export default SidebarColors

I couldn’t use a constructor and instead had to use React.useState, but calling the functions (for example setShowSidebar(true) ) which should cause a class to be added to an element and get rendered, cause no changes to the page.

Am I missing something for how to use state variables to cause a css class to get added/removed for my element? Thanks

I am getting data in JSON format from an ajax call. I want to convert it into an array to be used in the js script.

 {
  "results":[
  {
     "activity":"A12345"
  },
  {
     "activity":"B12345"
  }]}

Array that I want to have

arr = ["A12345", "B12345"]

I tried the following steps –

var response = JSON.parse(data); 
var arr = response`enter code here`.results; 
var newArr = Object.entries(arr);
alert("New" + Object.values(arr));

The result that I am getting is

[object Object], [object Object]

How can I get the values from these objects and store it in an array. Please help!

I am developing force directed graph in JavaScript and WebGL. My concern is draggable feature like one in d3.js.

For that I want to first achieve the selection of node in the graph which I am not able to figure out how to select it.

My node and edge data are array of property of each node which is position x and y whereas edge array is array of target and destination node.

I want to implement the feature where I can drag the node in the graph with mouse pointer.

One naïve way of thinking is to listen to mouse click event and its mouse location. With that location, iterate over all the nodes location to find if any node is selected. I am pretty sure that would take lot of computation power and time. I don’t know if there is any way to achieve this smartly even in this way of implementation.

I don’t know if I am correct or not but since d3 use the circle element to represent the node and listen the mouse event in that event handling. Please correct me if I am wrong.

I will be grateful for any kind of feedback or suggestion or guidance. Thank you in advance.

I have a android studio project with Lucky Wheel activity. The users can spin the wheel and try his luck. I have created lucky wheel and its spinning option. But I cant set its winning target.

There is 1 to 12 numbers in the lucky wheel. I want to set 3 is the winning target. How to set 3 is the winning target. Please help me.

This is my code

public class SpinWheelActivity extends AppCompatActivity {


    //Spinwheel

    private static final String [] sectors = {"1","2","3","4","5","6","7","8","9","10","11","12"} ;
    private static final int [] sectorDegrees = new int[sectors.length];
    private static final Random random = new Random();
    private int degree = 0;
    private boolean isSpinning = false;
    private ImageView wheel;
    //Spinwheel
    private Button btn;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spin_wheel);
        final Button spinbtn = findViewById(R.id.spin_btn);


        btn = findViewById(R.id.backbutton); btn .setVisibility(View.INVISIBLE);
        btn .postDelayed(new Runnable() { public void run() { btn .setVisibility(View.VISIBLE); } }, 10000);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Intent toy = new Intent(SpinWheelActivity.this, MainMenuActivity.class);
                startActivity(toy);
                SpinWheelActivity.this.finish();
            }
        });



        //Spinwheel

        wheel = findViewById(R.id.wheel);
        //final Button spinbtn = findViewById(R.id.spin_btn);

        getDegreeForSectors();

        spinbtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                spinbtn.setEnabled(false);
                if (!isSpinning){
                    spin();
                    isSpinning = true;



                }

            }
        });
        //Spinwheel

    }

    //Spinwheel

    private void spin(){

        degree = random.nextInt(sectors.length-1);
        RotateAnimation rotateAnimation = new RotateAnimation(0,(360 * sectors.length) + sectorDegrees[degree],
                RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);

        rotateAnimation.setDuration(3600);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setInterpolator(new DecelerateInterpolator());
        rotateAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {

                if (sectors.length == 30* sectors.length)
                {
                    Intent toy = new Intent(SpinWheelActivity.this,  TicTacToeMainActivity.class);
                } else
                    {
                        Intent toy = new Intent(SpinWheelActivity.this,  MainMenuActivity.class);
                    }



                //Toast.makeText(SpinWheelActivity.this, "You have got "+sectors[sectors.length - (degree + 1)] + " points.", Toast.LENGTH_SHORT).show();
                isSpinning = false;

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        wheel.startAnimation(rotateAnimation);
        //Spinwheel


    }
    //Spinwheel

    private void getDegreeForSectors(){

        int sectorDegree = 360/sectors.length;

        for (int i=0; i < sectors.length; i++){

            sectorDegrees[i] = (i+1) * sectorDegree;
        }
        //Spinwheel
    }


    @Override
    public void onBackPressed()
    {
        Toast.makeText(SpinWheelActivity.this, "Please use back button", Toast.LENGTH_SHORT).show();
    }

}

Generally (in India) there are six digits in a cheque number (If some bank has different number pattern then I don’t know). I don’t know whether any other restriction on digits or not, like the first digit may be ‘zero’ or not. Which regEx or other method, I should use to verify that the cheque number entered in HTML form is valid or not. I don’t know regEx well.

I might go with one of the following, but which is the best ?

function validateChequeNumbers(){
    // class is "cheque-no-cell" for the input elements in tr in table
    var chequeNoCellEls = Array.from(assignChequeNumbersTableEl.querySelectorAll(".cheque-no-cell"));
    var chequeNos = chequeNoCellEls.map(el => el.querySelector(".ChequeNoInput").value )
    console.log("chequeNos")
    console.log(chequeNos)
    var areAllChequeNosValid = chequeNos.every(chequeNo =>{
      return 100000 <= parseInt(chequeNo) <= 999999
    })
    return areAllChequeNosValid;
  }

or

function validateChequeNumbers(){
    // class is "cheque-no-cell" for the input elements in tr in table
    var chequeNoCellEls = Array.from(assignChequeNumbersTableEl.querySelectorAll(".cheque-no-cell"));
    var chequeNos = chequeNoCellEls.map(el => el.querySelector(".ChequeNoInput").value )
    console.log("chequeNos")
    console.log(chequeNos)
    var areAllChequeNosValid = chequeNos.every(chequeNo =>{
      var validateReg = /^d{6}$/;
      Logger.log(chequeNo.match(validateReg));
      if(chequeNo.match(validateReg)){
        return true;
      }else{
        return false;
      }
    })
    return areAllChequeNosValid;
  }

enter image description here

I have searched everywhere for this fix and finally came to he mercy of stack.

enter image description here

enter image description here