Bootcamp
Search…
2.POCE.2: CSS Reader

Setup

Start with the base Node repo.

Base

Read CSS Colours

Create a command line program that reads in a CSS file and lists all the colours inside.

styles.css

body {
background-color: #ffffff;
}
​
p {
background-color: #000000;
}
​
span {
background-color: #000000;
}
Run the program by passing in the path to the CSS file as a param.
node index.js styles.css

Sample Output

#ffffff
#000000
#000000

Output Colour Occurrence Frequency

Without repeating colours, list how many times each colour appeared in the file.

Sample Output

#ffffff: 1
#000000: 2

Comfortable

Bigger CSS File

Try your program on a bigger stylesheet, like Bootstrap: https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css​

Read RGB Colours

If the CSS uses RGB colours, output those RGB colours in hex format along with any other hex colours in the CSS.

styles.css

span {
background-color: rgb(255, 255, 255);
}

Sample Output

#ffffff: 1

Count Style Rule Usage

In addition to colour frequencies, list how many times each CSS style name was used.

Sample Output

-------
colours:
-------
#ffffff: 1
#000000: 2
-------
styles:
-------
background-color: 3

Lint Semicolons

Output the lines in the CSS file that are missing semicolons and their respective line numbers.

More Comfortable

Minified CSS File

Does your program work on a minified stylesheet, i.e. a CSS file with no newlines? https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css​
If helpful, find other versions of the same CSS file here: https://www.bootstrapcdn.com/.

Lint Curly Braces

Output the lines in the CSS file that are missing curly braces and their respective line numbers.

Full Analysis

Give a complete report of the linting above, and how many times each style and colour was used.

Reference solution

Click here to see the reference solution to this post class.