Гмуркане в JavaScript: Как да създадете цветен конвертор Hex2RGB

Снимка на Фотис Фотопулос на Unsplash

В тази статия ще създадем уеб приложение, което преобразува цветни кодове между шестнадесетичен и RGB.

Можете да намерите демонстрация тук и изходния код тук.

Структура на проекта:

Структурата на проекта е доста проста.

  1. index.html: Съдържа структурата на приложението.
  2. style.css: Стилизира страницата.
  3. app.js: Съдържа целия код, необходим за стартиране на проекта.

Идея:

Ето списъка с неща, които исках да изпълнява това приложение:

  1. Всеки път, когато нещо е въведено в текстово поле за шестнадесетичен, приложението трябва да проверява дали цветът е валиден. Ако е, преобразувайте го в RGB, задайте го като фон и след това поставете RGB стойността в текстовото поле RGB и обратно.
  2. Ако в текстовото поле бъде въведен кратък шестнадесетичен цветен код, разширете го, когато текстовото поле загуби фокуса (потребителят кликва извън текстовата област).
  3. Автоматично добавете символ „#“ към шестнадесетичния вход.

Нека да започнем!

index.html

Създадох две текстови полета с идентификатори съответно „шестнадесетичен“ и „rgb“. Освен всеки от тях е SVG икона за грешка, която има клас скрити по подразбиране.

style.css

Ето основно оформление, за да направите маркировката да изглежда малко по-добре. Дефинирам тук два класа, .hidden и .dark. Първият се използва за скриване / показване на SVG иконата за грешка, а последният за промяна на цвета на текста въз основа на цвета на фона. По подразбиране зададох текста на тъмен цвят (за светли фонове).

app.js

Ето и вълшебната част. Ще разбивам кода на парчета:

Първо, ние определяме променливи, които са насочени към входовете с id „шестнадесетичен“ и „rgb“. След това имаме функции за проверка дали входният Hex / RGB е валиден или не. Те използват основна настройка на регекс и връщат булева стойност. Ако се сплашите от тях, препоръчвам ви да изпробвате този RegexTutorial.

Ето, направих функция за анализ на име, наречена modifyHex, която проверява дали входният шестнадесет е дълъг 4 знака; тоест, съдържа „#“ и е стенограма (например # 333) и заменя „#“ с празен знак. След това проверява дали дължината сега е 3 и го разширява до 6 знака (например, # 123 = # 112233).

Сега дефинираме две функции, които могат да конвертират шестнадесетичен в rgb и обратно. Ето стъпка по стъпка разбивка за hexToRgb (Този код се разширява, за да се обясни по-добре как работи процесът):

  1. Определете празен масив, който да съхранява резултата.
  2. Заменете символа „#“, ако той съществува и ако дължината не е равна на 6 (тоест стенограмата), извикайте горната функция modifyHex и я разширете.
  3. По много основен начин, шестнадесетичен към rgb работи чрез преобразуване на шестнадесетичен код (в база 16) в rgb код (в база 10). Всеки два знака в шестнадесетичния код представляват стойност в rgb цветовия код. Например в #aabbcc, червено е (aa към основа 10), зелено е (bb към основа 10), а синьото е (cc към основа 10). Така че във функцията ние нарязваме шестнадесетичната стойност, превръщаме я в база 10 с помощта на parseInt и след това я съхраняваме в определения масив.
  4. Накрая връщаме изходния низ.

За функцията rgbToHex (това е написано с по-кратка логика):

  1. Ние директно използваме регекс, за да извлечем частите в скобите - тоест rgb (123,21,24) ще върне 123,21,24.
  2. На следващо място, ние използваме карта карта, за да върнем нов масив, който преобразува числото в база 16, след което подрежда стойността.

Нека обясня тази част. Когато използваме регекс, за да съпоставим частите в скобите, връщаме данни от тип „низ“. За да го преобразуваме в Base 16, трябва да използваме метода toString с параметър „16“.

Сега методът toString е приложим само за числови типове данни, така че използваме parseInt, за да преобразуваме първо всеки елемент от масива в число, след това използваме toString (16), за да го преобразуваме в шестнадесетична форма и след това накрая добавяме подплънки, за да го направим точно 2 символи дълги. Подплатата е необходима, ако имате нещо като „14“, което искате да преобразувате в шестнадесетично, то ще върне „e“. Но шестнадесетичен цветен код се нуждае от 2 знака за всяка част, така че се изисква подплънка, което го прави „0e“.

Забележка: padStart е ES8 функция, която може да не се поддържа във всеки браузър. За да запазя този урок прост, не съм го прехвърлил в ES5.

3. Накрая връщаме получения масив, като го присъединяваме и го преобразуваме в големи букви.

Тази функция се използва за добавяне на този малък знак за грешка в дясната страна на входа, в случай че въведеният тип вход е грешен.

Той просто изпълнява съдържанието на входа (hex.value и rgb.value) чрез съответните им функции за проверка и използва върнатия булев сигнал за добавяне / премахване на .hidden клас.

Сега дефинираме функция, която приема цвета на фона и след това определя дали е тъмен или светъл (получих този код от StackOverflow). Той умножава стойностите на отделните цветове с някои изчислени числа и връща „черно“ или „бяло“. След това използвам друга функция, за да променя цвета на текста, като добавям / премахвам клас .dark.

Добавяне на слушатели на събития:

И накрая, ще използваме всички горепосочени функции, като добавим слушатели на събития.

Първо, ние добавяме събитие за клавиатура към шестнадесетия вход. Това събитие се задейства всеки път, когато се пусне ключ. Ето какво прави функцията:

  1. Проверяваме дали въвежданият код е валиден и го разширяваме, ако е стенограма.
  2. Ние задаваме цвета на фона на тялото на входната стойност.
  3. Проверяваме дали цветът е светъл / тъмен и съответно променяме цвета на текста.
  4. И накрая, ние се обаждаме на функцията за преобразуване и след това поставяме преобразувания цвят във вход RGB.

Другият слушател на събития, който използвахме, е замъгляване. Той се задейства всеки път, когато входът губи „фокус“, или в слоево изражение, всеки път, когато щракнете / натиснете извън входния елемент, се задейства размазване. Така че е добре да промените входния шестнадесетичен!

И така, проверяваме дали шестнадесетичният цвят е валиден или не, след това го разширяваме, ако е кратък и накрая добавяме „#“, ако не съществува. Обърнете внимание, че проверяваме дали индекс 0 и 1 съдържат „#“. Това се прави, така че функцията да не се добавя „#“ два пъти.

Сега ние добавяме един и същ слушател на събитие за клавиатура към rgb вход и той също следва същата серия от стъпки като шестнадесетичния слушател на събития.

И накрая, ние добавяме клавиш на слушател на събития към целия документ, тоест той ще се задейства за всеки от двата входни елемента. Вътре в него извикваме функцията errorMark, която добавя иконата за грешка, в случай че има грешка или я премахва, ако всичко е валидно.

Ето окончателния код за app.js:

заключение

Имате го! Знам, че кодът не е перфектен и може да бъде реконструиран, но ей, това е само началото. Ако искате да подобрите този код, можете да продължите напред и да отворите PR на github repo.

Честито кодиране!