zexceed
KPCKevin Powell - Community
•Created by zexceed on 9/18/2024 in #front-end
How to add input entries to a list
but I'm not really satisfied: if I change my useState into an array of object, those entries don't get affected by the e.target.value. What I would like to achieve is that I would like to show a brief summary of the entries I added I tried to create another handleChange function that could only change the useState entries and add it to the onChange along the other function, but obviously it doesn't work!
I would like to understand how to do it, so even if you have to remind me to some documentations it would be nice, thank you so much at the top of the form field so I can either modify or delete it.
2 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
thank you so much for your advice! Actually I would like to remove the <audio> and <source> tag and insert the <New Player> npm package so I think I can have more control over it. right now the sounds dont play automatically but when another button is pressed, the previous keeps playing.
22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
Every button is associated to a soundscape , I created an array of object containing { name, color, description, sound }
22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
Oh yes! that could be a good idea too. In my case im using Tailwind... now i managed to implement the color and the sounds when clicking the button... it's pretty cool . I have to add a timer now
22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
Like selecting nth-child pattern of numbers like (2nd,4th and so on)?
22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
Yes I have now 4 buttons ( because there are only 4 soundscapes) following the pattern color1 color2 color2 color1 , into a 2 columns 2 rows grid ( mobile view)
22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
thank you all! hopefully i can ask you more about that!!
22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
const soundsColor = [
{
name: "Suikinkutsu",
color: "#daff6f",
},
{
name: "Cicadas",
color: "#A8AEEF",
},
{
name: "Temple Bells",
color: "#A8AEEF",
},
{
name: "Shomyo Falls",
color: "#daff6f",
},
];
function Buttons() {
return (
<>
{/* Destructuring per rilevare le properties dall'oggetto */}
{soundsColor.map(({ name, color }, index) => (
<button
className="p-20 relative rounded-[10px] "
style={{ backgroundColor: color }}
key={index}
>
<span className="text-[#000] absolute top-5 left-2">{name}</span>
</button>
))}
</>
);
}
export function SoundScapes() {
return (
<div className="grid grid-cols-2 grid-rows-2 gap-3 p-6 mt-44">
<Buttons />
</div>
);
}
I solved following Chris advice, creating an array of objects then mapping thru the array and destructuring so I can access to the properties. Now I "just' have to call an API that will select the sounds once i click the buttons...22 replies
KPCKevin Powell - Community
•Created by zexceed on 7/30/2024 in #front-end
How to render multiple button with different bg color
const sounds = ["Suikinkutsu", "Cicadas", "Temple Bells", "Shomyo Falls"];
let colors = ["#daff6f", "#a8aeff"];
function Button({ color }) {
return (
<>
{sounds.map((name, index) => (
<button
style={{ backgroundColor: color }}
className=" p-16 relative bg-slate-600"
key={index}
>
<span className="text-white absolute top-5 left-2">{name}</span>
</button>
))}
</>
);
}
export function SoundScapes() {
return (
<div className="grid grid-cols-2 grid-rows-2 gap-3 p-4 mt-10">
<Button />
</div>
);
}
I was trying to proceed this way but it wont work22 replies
KPCKevin Powell - Community
•Created by zexceed on 11/19/2023 in #front-end
compiled .css files not pushed in repo
Perfect, thank you so much for your help guys, I will try to inform myself better about this matter !
16 replies
KPCKevin Powell - Community
•Created by zexceed on 11/19/2023 in #front-end
compiled .css files not pushed in repo
Do you think it was a good idea to copy the main.css in another folder and push it? I’d run a script to copy any changes made to the files with that
16 replies
KPCKevin Powell - Community
•Created by zexceed on 11/19/2023 in #front-end
compiled .css files not pushed in repo
I added the folder later on in the .gitignore because I had already pushed the dist previously .
I just can’t understand the goal of that 😭
16 replies