What Are We Getting for style.getPropertyValue('color')?

by Admiral Potato

HTML

<div>
	<div>
		<form id="formey">
			<label>
				<span>Color</span>
				<input
					id="input"
					type="text"
					value="#ff008899"
				>
			</label>
			<input type="submit">
		</form>
	</div>
	<div
		id="output"
	>
		<p>Is this where output lives?</p>	
	</div>
</div>

JavaScript

const formElement = document.getElementById('formey')
const inputElement = document.getElementById('input')
const outputElement = document.getElementById('output')
const updateColor = () => {
	outputElement.style.color = inputElement.value
	const extractRGBRegex = /rgb.*\((\d{1,3}), (\d{1,3}), (\d{1,3}).*\)/gim
	const colorValue = outputElement.style.getPropertyValue('color')
	console.log(colorValue)
	const extractedColor = extractRGBRegex.exec(colorValue)
	const parsedColor = {
		match: extractedColor[0],
		r: 1 * extractedColor[1],
		g: 1 * extractedColor[2],
		b: 1 * extractedColor[3]
	}
	outputElement.innerHTML = `
		<p>What is style.getPropertyValue('color')?</p>
		<h1>${colorValue}</h1>
		<pre>${JSON.stringify(parsedColor, null, '  ')}</h1>
	`	
}

updateColor()

formElement.addEventListener('submit', (submitEvent) => {
	submitEvent.preventDefault()
	updateColor()
})