I'm facing a challenge with creating dynamically colored divs based on different sections in the background.
While I can achieve this using CSS, I wonder if there's a more efficient way to handle the colors with JavaScript.
In my current setup, each section has a unique color:
<section class="l-section js-section"></section>
<section class="l-section js-section"></section>
<section class="l-section js-section"></section>
<section class="l-section js-section"></section>
<section class="l-section js-section"></section>
<div class="l-container-test js-container-test"></div>
The SCSS styling for these sections and containers is as follows:
.l-section{
height: 100vh;
width: 100vw;
&:nth-child(1){
background-color: red;
}
// More styles for different colors...
}
.l-container-test{
display: flex;
height: 100vh;
width: 100vw;
& > * {
flex: 1;
}
& :nth-child(1){
background-color: red;
}
// More styles for container...
}
And here's the JavaScript function that creates the divs and assigns colors to them:
function createDivs(){
// Logic for creating divs with corresponding colors
}
createDivs();
View the working example here.
However, I believe there could be a more streamlined approach, especially in ensuring the color sequence logic from sections to divs is maintained. Any suggestions or insights are welcome!