Дайвинг в JavaScript: Как создать Hex2RGB Color Converter

Автор оригинала: Vaibhav Kandwal.

Обновление (23/07/2019): Я корректировал несколько грамматических ошибок и немного изменил код App.js, удалив функцию CheckBG.

В этой статье мы будем создавать веб-приложение, которое преобразует цветные коды между шестнадцатеричной формой и формой RGB.

Вы можете найти Демо здесь и Исходный код здесь Отказ

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

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

index.html : Содержит структуру приложения.
still.css : Стили страницы.
app.js : Содержит весь волшебный код.

Идея:

Вот список вещей, которые я хотел, чтобы это приложение выступило:

Всякий раз, когда что-то набирается в текстовом поле для Hex, приложение должно проверить, действителен ли цвет. Если это, преобразуйте его в RGB, установите его в качестве фона, а затем поместите значение RGB в текстовом поле RGB и наоборот.
Если в текстовое поле введите короткий шестилетковый код, разверните его, когда текстовое поле теряет фокус (пользователь нажимает за пределами текстовой области).
Автоматически подготовить символ «#» на шестнадцатеричный ввод.

Давай начнем!

index.html.






  
  
  
  Hex to RGB Converter
  



  
    HEX <--> RGB

Мы создали два текстовых поля с идентификатором «Hex» и «RGB» соответственно. Рядом с каждым входом является значок SVG для ошибки, который имеет класс скрытых, по умолчанию.

still.css

:root {
     --color: rgba(255,255,255,0.9);
     --tweet: white;
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 ::placeholder {
     color: var(--color)!important;
}
 body {
     padding: 50px;
     width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #28a745;
     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
 .head {
     position: absolute;
     top: 30px;
     text-align: center;
     color: var(--tweet);
     font-size: 3rem;
     border-bottom: 2px solid var(--tweet);
}
 #content {
     display: block;
}
 input {
     color: var(--color)!important;
     margin: 1rem 0;
     width: 400px;
     border: none;
     border-bottom: 1px solid var(--color);
     font-size: 2.5rem;
     background-color: transparent;
}
 input:focus {
     outline: none;
}
 img {
     width: 24px;
}
 .hidden {
     visibility: hidden;
     opacity: 0.8;
}
 .dark {
     --color: rgba(0,0,0,0.75);
     --tweet: rgba(0,0,0,0.95);
}
 @media only screen and (max-width: 560px){
     #content input {
         margin: 0.75rem 0;
         width: 90%;
         font-size: 1.875rem;
    }
     #content img {
         width: 16px;
    }
     .head {
         font-size: 2rem;
    }
}

Вот базовый макет, чтобы сделать разметку выглядеть немного лучше. Мы определили два класса здесь, .hidden и .темный . .hidden используется, чтобы скрыть/показать ошибку значок SVG и .темный Чтобы изменить цвет текста на основе цвета фона. По умолчанию я установил текст на темный цвет (для ярких фонов).

app.js.

Вот волшебная часть. Я буду ломать код в куски:

Во-первых, мы определили переменные, которые нацелены на входы с идентификатором «Hex» и «RGB». Далее у нас есть функции для проверки, если входной шестнадцатеричный/RGB действителен или нет. Они используют базовое установку Regex и возвращают логию. Если вы запугивали их, я рекомендую вам попробовать этот Regextutorial Отказ

Здесь мы написали функцию разбора под названием ModifyHex который проверяет, является ли входная шестигранка длиной 4 символа; То есть содержит «#» и является сокращением (например, # 333) и заменяет «#» с пустым символом. Тогда он проверяет, если длина сейчас 3 и расширяет его до 6 символов (например, # 123 = # 112233).

Мы определили две функции, которые преобразуют Hex в RGB и наоборот. Вот пошаговая поломка для HEX к RGB (Этот процесс написан в расширенной форме для лучшего понимания):

Определите пустой массив для хранения результата.
Замените символ «#», если он существует, и если длина не равна 6 (то есть, сторонняя версия), вызовите вышеупомянутые ModifyHex функционировать и расширить ее.
Очень основным образом, Hex RGB работает, преобразуя код шестнадцатеричного кода (в базу 16) в код RGB (в базе 10). Каждое два символа в шестнадцатеричном коде представляют значение в цветовом коде RGB. Например, в #aabbcc, красный – это (AA к базе 10), зеленый (BB к основанию 10) и синего цвета (CC до основания 10). Таким образом, в функции мы нарезаем шестнадцатеричное значение, преобразуя его в базу 10, используя Парсент И затем хранить его в определенном массиве.
Наконец, мы возвращаем выходную строку, присоединившись к вышеуказанному массиву.

Для RGBTOHEX функция (Это написано с более короткой логикой):

Мы напрямую используем Regex для извлечения только числовых значений – то есть RgB (123,21,24) вернет 123,21,24.
Далее мы используем функцию карты для возврата нового массива, который преобразует номер на базу 16, затем прокладывает значение.

Регенс, который мы использовали выше, возвращает данные типа «строка». Чтобы преобразовать его в базу 16, мы должны использовать TOSTRING () Способ с параметром «16».

Теперь TOSTRING () Метод применим только к числовым типам данных, поэтому мы используем Парсент Чтобы сначала преобразовать каждый элемент массива на номер, затем используйте ToString (16) Чтобы преобразовать его в шестнадцатеричную форму, а затем, наконец, добавьте прокладку, чтобы сделать его точно 2 символа. Доступ необходим, если у вас есть что-то вроде «14», которое вы хотите преобразовать в шестнадцатеричный, он вернется «E». Но Hex Color Code нуждается в 2 символа для каждой части, поэтому требуется, что запрещено, что делает его «0e».

Примечание: Padstart Это функция ES8, которая может не поддерживаться в каждом браузере. Чтобы сохранить этот урок простой, я не транслировал его на ES5.

3. Наконец, мы возвращаем результирующее массив, присоединившись к нему и преобразовав его в верхний регистр.

errormark () Функция используется для отображения или скрытия значка SVG ошибки. Это просто передает содержимое входа ( hex.value и RGB.Value ) через их соответствующие функции проверки и использует возвращенные логические, чтобы добавить/удалить .hidden класс.

Теперь мы определяем функцию, которая занимает цвет фона, а затем определяет, если оно темно или ярко (я получил этот код из Stackoverflow). Он умножает отдельных цветовых значений с некоторыми расчетными числами и возвращает «черный» или «белый». Затем я использую другую функцию, чтобы изменить цвет текста, добавив/удаляя .dark класс.

Добавление слушателей событий:

Наконец, мы подключаем все функции через добавление слушателей событий.

Во-первых, мы добавляем keyup событие на шестнадцатеричный Вход. Это событие срабатывает каждый раз, когда выпущен ключ. Вот разбивка процесса:

Проверьте, действует ли код ввода и расширить его, если это сокращение.
Потапите цвет фона тела до входного значения.
Проверьте контрастность цвета и измените текстовый цвет соответственно.
Вызовите функцию Convert и поместите преобразованный цвет в поле ввода RGB.

Другой слушатель событий, который мы использовали, это размытие . Он срабатывает каждый раз, когда входные теряет «фокус», или у терминов непрофессионала, каждый раз, когда вы нажимаете/нажатием за пределами ввода элемента, размытие срабатывает. Так что приятно изменить входную гекс!

Итак, мы проверяем, действительно ли Hex Color действителен или нет, мы расширяем его, если оно короткое, и, наконец, мы добавим «#», если оно не существует. Обратите внимание, что мы проверяем, если индекс 0 и 1 содержат «#». Это сделано, чтобы функция не подготовила «#» дважды.

То же самое keyup Прослушатель событий добавляется в вход RGB, и он также следует одинаковую серию шагов, что и прослушиватель событий Hex.

Наконец, мы добавили слушатель события keyup Для всего документа, то есть он будет вызван любой из двух входных элементов. В нем мы называем errormark Функция, которая добавляет значок ошибки, в случае ошибки или удаляет его, если все действительно.

Вот окончательный код для app.js :

const hex = document.getElementById("hex");
const rgb = document.getElementById("rgb");

// Check Functions
function checkHex(hex) {
  const hexRegex = /^[#]*([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i
  if (hexRegex.test(hex)) {
    return true;
  }
}

function checkRgb(rgb) {
  const rgbRegex = /([R][G][B][A]?[(]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\s*,\s*((0\.[0-9]{1})|(1\.0)|(1)))?[)])/i
  if (rgbRegex.test(rgb)) {
    return true
  }
}
// Parse Function
function modifyHex(hex) {
  if (hex.length == 4) {
    hex = hex.replace('#', '');
  }
  if (hex.length == 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  return hex;
}

// Converting Functions
function hexToRgb(hex) {
  let x = [];
  hex = hex.replace('#', '')
  if (hex.length != 6) {
    hex = modifyHex(hex)
  }
  x.push(parseInt(hex.slice(0, 2), 16))
  x.push(parseInt(hex.slice(2, 4), 16))
  x.push(parseInt(hex.slice(4, 6), 16))
  return "rgb(" + x.toString() + ")"
}

function rgbToHex(rgb) {
  let y = rgb.match(/\d+/g).map(function(x) {
    return parseInt(x).toString(16).padStart(2, '0')
  });
  return y.join('').toUpperCase()
}

// Helper Functions
function addPound(x) {
  return '#' + x;
}

// Function to add cross mark on error values
function errorMark() {
  if (checkHex(hex.value)) {
    document.getElementById('hexError').classList.add('hidden');
  } else {
    document.getElementById('hexError').classList.remove('hidden');
  }
  if (checkRgb(rgb.value)) {
    document.getElementById('rgbError').classList.add('hidden');
  } else {
    document.getElementById('rgbError').classList.remove('hidden');
  }
}

// Finding Contrast Ratio to change text color. Thanks https://stackoverflow.com/a/11868398/10796932
function getContrastYIQ(hexcolor) {
  if (checkHex(hexcolor)) {
    hexcolor = hexcolor.replace("#", '')
  } else {
    hexcolor = rgbToHex(hexcolor)
  }
  var r = parseInt(hexcolor.substr(0, 2), 16);
  var g = parseInt(hexcolor.substr(2, 2), 16);
  var b = parseInt(hexcolor.substr(4, 2), 16);
  var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
  return (yiq >= 128) ? document.body.classList.add('dark') : document.body.classList.remove('dark')
}

// Adding Event Listeners
hex.addEventListener('keyup', function() {
  let color = hex.value
  if (checkHex(color)) {
    color = modifyHex(color);
    document.body.style.backgroundColor = addPound(color);
    getContrastYIQ(color)
    rgb.value = hexToRgb(color);
  }
})
hex.addEventListener('blur', function() {
  if (checkHex(hex.value)) {
    hex.value = modifyHex(hex.value)
    if (hex.value[1] != '#') {
      if (hex.value[0] != '#') {
        hex.value = addPound(hex.value);
      }
    }
  }
})
rgb.addEventListener('keyup', function() {
  let color = rgb.value
  if (checkRgb(color)) {
    hex.value = color = addPound(rgbToHex(color))
    document.body.style.backgroundColor = color;
    getContrastYIQ(color)
  }
})
document.addEventListener('keyup', function() {
  errorMark();
})

Там у вас есть! Я знаю, что код не идеален и может быть повторным, но эй, это только начало. Если вы хотите улучшить этот код, вы можете пойти вперед и открыть PR на моем Github Repo Отказ

Счастливое кодирование!

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-hex2rgb-color-converter-ce32d32afd1f/”