chingu-voyages / v47-tier1-team-03

Look Ahead | Voyage-47 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs
0 stars 2 forks source link

How can we attribute classes or ids dynamically to place each item on GRID? #40

Open cris-valente opened 8 months ago

cris-valente commented 8 months ago
          ## index.js

I used Carlos POC_002 adding backticks (``) and $ signs to attribute each element an unique class using its index.

Categories: .c-0, .c-1, .c-2, .c-3 Activities: .a-0-0, .a-0-1, .a-1-0, .a-1-1, .a-2-0, .a-2-1, .a-3-0, .a-3-1

styles.css

I used ChatGPT to generate CSS styles (just for preview visualization) to each attributed classes created in 'index.js' and place each element on its grid row.

But how can I attribute these classes dynamically?

[!NOTE] Maybe using the .map method to generate an array of objects and attribute data to each category, activity and task that will eventually be created by the user.

I'm thinking that all of the following CSS information should be stored in a matrix created by the JS loop.

Originally posted by @cris-valente in https://github.com/chingu-voyages/v47-tier1-team-03/issues/38#issuecomment-1902099342