Javascript-форум - Просмотр цветовых схем, как это реализовать.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Просмотр цветовых схем, как это реализовать. (https://javascript.ru/forum/misc/78366-prosmotr-cvetovykh-skhem-kak-ehto-realizovat.html)

Просмотр цветовых схем, как это реализовать.

Народ, все привет! Сразу скажу, вопрос возможно покажется очень тупым... Пытаюсь пройти вступительные на фронт разработчика, и последнее задание JS, не могу понять что от меня хотят, можете "объяснить на пальцах?"

JavaScript

Задание "Просмотр цветовых схем"
Файл стилей содержит в себе цвета, используемые для оформления сайта.
Необходимо эти цвета извлечь и отрисовать на странице в виде плитки.
Пример:

main.css содержит стили: body { background-color: white; color: #00FF00; } header { background-color: #00FF00; color: white; } .icon { box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); }

Тогда при загрузке страницы мы должны увидеть три плитки:
1. одна цвета "white",
2. вторая цвета "#00FF00".
3. третья цвета "rgba(0, 0, 255, .2)"
Обратите внимание что содержимое страницы нас не интересует, анализируются исключительно стили.
Задание содержит 3 уровня сложности:

Level 1: Отрисовать плитки уникальных цветов, содержащиеся в main.css. Показать информацию об общем количестве плиток.

Заранее спасибо!

package.json

{
  "name": "ce",
  "author": "SuperZen :)",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "css-color-extractor": "^0.0.5",
    "serve": "^11.1.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  },
  "scripts": {
    "start": "serve",
    "build": "webpack --config webpack.config.js"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './colorextractor.js',
  mode: 'development',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

colorextractor.js

var extractor = require('css-color-extractor');

// var options = {
//   withoutGrey: false, // set to true to remove rules that only have grey colors
//   withoutMonochrome: false, // set to true to remove rules that only have grey, black, or white colors
//   colorFormat: null // transform colors to one of the following formats: hexString, rgbString, percentString, hslString, hwbString, or keyword
// };

console.log(document.styleSheets[0])
const cssRules = document.styleSheets[0].cssRules // first css file <link rel...
const textCss = Object.keys(cssRules).map(key => cssRules[key].cssText).join(',\n\r')
console.log(textCss)
console.log(extractor.fromCss(textCss))

//result ["white", "rgb(0, 255, 0)", "rgba(0, 0, 255, 0.2)"]

index.html

<html>

<head>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<script type="text/javascript" src="./dist/main.js"></script>
<script>
  // путь джедая
  // const styleElement = document.styleSheets
  // console.log(styleElement)
  // после serve http://localhost:5000 
</script>

</html>

сложить в одну папку, потом:
$ yarn install
$ yarn build
$ yarn start

перейти в localhost:5000

ну плитки рисовать будешь сам %)