Html Question posted in
Some basic documentation can be found here.

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

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.`
Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search