Html - I want to increment a number and insert $i values from a csv array #confused

ThakaakaRashardShaadiiman
March 26, 2024
182 views
0 votes
2 Answers

i made this #Swatch(https://codepen.io/ricoThaka/pen/YzMVdXj?editors=1100 <~) i want to expand it to a flexible layout that can contain unlimited colors for the swatch

`
    .swatch div:nth-child(1) { background: DeepPink;}
    .swatch div:nth-child(2) { background: cyan;}
    .swatch div:nth-child(3) { background: GreenYellow;}
    .swatch div:nth-child(4) { background: CornflowerBlue;}
    .swatch div:nth-child(5) { background: Coral;}
`

Thats the values that i want to exponentially increment and manipulate in a nice #CSSGRid that kinda spider webs to my wife phone screen, thats how we talk @normani

`    i=1
    until [ $i -gt 8 ];
    do
     echo ".swatch div:nth-child($i){ background: ;}"
      ((i=i+1))
    done 

    .swatch div:nth-child(1){ background: ;}
    .swatch div:nth-child(2){ background: ;}
    .swatch div:nth-child(3){ background: ;}
    .swatch div:nth-child(4){ background: ;}
    .swatch div:nth-child(5){ background: ;}
    .swatch div:nth-child(6){ background: ;}
    .swatch div:nth-child(7){ background: ;}
    .swatch div:nth-child(8){ background: ;}
`

how do i get the background hex values loaded? im storing them in a file ~>

`    ``` for i in `cat colorvalues.csv`; do echo "$i"; done ``` 
#9acd32
#efcc00
#ffd300
#ffae42
#ffef00
#fefe33
#0014a8
#2c1608... like i want to feed that list like this 
    .swatch div:nth-child(1){ background: #xxxxxx ;}
    .swatch div:nth-child(2){ background: #xxxxxx ;}
    .swatch div:nth-child(3){ background: #xxxxxx ;}
    .swatch div:nth-child(4){ background: #xxxxxx ;}
`

#BASH_iNTERPETER = https://www.onlinegdb.com/edit/0LXwgPkFV

its supposed to create a bunch of divs i just paste into my css file the divs in the html r empty enter image description here
`

  i=1
    until [ $i -gt 8 ];
    do
      echo ".swatch div:nth-child($i){ background: ;}"
      ((i=i+1))
    done 

    .swatch div:nth-child(1){ background: ;}
    .swatch div:nth-child(2){ background: ;}
    .swatch div:nth-child(3){ background: ;}
    .swatch div:nth-child(4){ background: ;}
    .swatch div:nth-child(5){ background: ;}
    .swatch div:nth-child(6){ background: ;}
    .swatch div:nth-child(7){ background: ;}
    .swatch div:nth-child(8){ background: ;}


    ...Program finished with exit code 0
    Press ENTER to exit console.`

Answers

You’re close. Maybe something like:

#!/bin/bash
#set -x
make_swatches() {
    counter=1
    swatches=''
    input_file=$1
    limit=$2
    template=".swatch div:nth-child(%d){ background: %s; }"
    while read swatch; do
        swatches+="$(printf "$templaten" "$counter" "$swatch")"$'n'
        ((counter++))
        [[ "$counter" -gt "$limit" ]] && break
    done < "$input_file"
    echo "$swatches"
}

make_swatches colorvalues.csv 8

If the main requirement is to take lines from colorvalue.csv and generate a series of .swatch div:... lines:

cnt=0                     # initialize counter

while read -r line
do
    printf ".swatch div:nth-child(%s){ background: %s ;}n" $((++cnt)) "${line}"
done < colorvalues.csv

This generates:

.swatch div:nth-child(1){ background: #9acd32 ;}
.swatch div:nth-child(2){ background: #efcc00 ;}
.swatch div:nth-child(3){ background: #ffd300 ;}
.swatch div:nth-child(4){ background: #ffae42 ;}
.swatch div:nth-child(5){ background: #ffef00 ;}
.swatch div:nth-child(6){ background: #fefe33 ;}
.swatch div:nth-child(7){ background: #0014a8 ;}
.swatch div:nth-child(8){ background: #2c1608 ;}

NOTE: I’m guessing this is the desired output since OP hasn’t (yet) provided the expected output

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I want to increment a number and insert $i values from a csv array #confused

Answers