Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2019, 14:04
Новичок на форуме
Отправить личное сообщение для Evgeny-n-n Посмотреть профиль Найти все сообщения от Evgeny-n-n
 
Регистрация: 02.09.2019
Сообщений: 1

Просмотр цветовых схем, как это реализовать.
Народ, все привет! Сразу скажу, вопрос возможно покажется очень тупым... Пытаюсь пройти вступительные на фронт разработчика, и последнее задание 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. Показать информацию об общем количестве плиток.

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2019, 16:36
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создать цитатник? WGN Общие вопросы Javascript 10 29.01.2017 01:39
Индексация AJAX сайтов - Как это работает? byFahrenheit AJAX и COMET 4 21.02.2013 17:09
Кто как учит/учил/ будет учить Английский ? DjDiablo Оффтопик 53 18.12.2012 21:01
http://gigalit.info - Мои контакты Маэстро Ваши сайты и скрипты 70 08.12.2011 03:12
Как реализовать? Fliand Элементы интерфейса 4 22.08.2009 19:47