import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
redValue: 0,
greenValue: 0,
blueValue: 0,
resultColor: 'rgb(0,0,0)',
hexColor: '#000000',
copyButtonClicked: false,
presets: [
{
redValue: 255, greenValue: 0,
blueValue: 0, label: 'Red'
},
{
redValue: 0, greenValue: 255,
blueValue: 0, label: 'Green'
},
{
redValue: 0, greenValue: 0,
blueValue: 255, label: 'Blue'
},
{
redValue: 255, greenValue: 255,
blueValue: 0, label: 'Yellow'
},
{
redValue: 255, greenValue: 0,
blueValue: 255, label: 'Magenta'
},
{
redValue: 0, greenValue: 255,
blueValue: 255, label: 'Cyan'
},
],
};
}
generateColor = () => {
const { redValue, greenValue,
blueValue } = this.state;
const finalColor =
`rgb(${redValue}, ${greenValue},
${blueValue})`;
this.setState({ resultColor: finalColor });
this.updateHexColor(finalColor);
document.body.style.backgroundColor = finalColor;
};
updateHexColor = (rgbColor) => {
const hexColor =
this.rgbToHex(rgbColor);
this.setState({ hexColor });
};
rgbToHex = (rgb) => {
const rgbValues = rgb.match(/\d+/g);
const hexColor = `#${Number(rgbValues[0])
.toString(16)
.padStart(2, '0')}${Number(rgbValues[1])
.toString(16)
.padStart(2, '0')}${Number(rgbValues[2])
.toString(16).padStart(2, '0')}`;
return hexColor;
};
copyColorCode = (codeType) => {
const resultInput =
document.getElementById(`${codeType}-input`);
resultInput.select();
document.execCommand('copy');
this.setState({ copyButtonClicked: codeType });
setTimeout(() => {
this.setState({ copyButtonClicked: false });
}, 1000);
};
handleSliderChange = (event, color) => {
this.setState(
{ [`${color}Value`]: event.target.value },
this.generateColor
);
};
handlePresetClick = (preset) => {
this.setState(
{
redValue: preset.redValue,
greenValue: preset.greenValue,
blueValue: preset.blueValue,
},
this.generateColor
);
};
generateRandomColor = () => {
const randomColor = {
redValue:
Math.floor(Math.random() * 256),
greenValue:
Math.floor(Math.random() * 256),
blueValue:
Math.floor(Math.random() * 256),
};
this.setState(randomColor, this.generateColor);
};
render() {
const {
redValue,
greenValue,
blueValue,
resultColor,
hexColor,
copyButtonClicked,
presets,
} = this.state;
return (
<div className="container">
<div className="wrapper">
<label htmlFor="red">R</label>
<input
type="range"
min="0"
max="255"
value={redValue}
id="red"
onChange=
{(e) =>
this.handleSliderChange(e, 'red')}
/>
</div>
<div className="wrapper">
<label htmlFor="green">G</label>
<input
type="range"
min="0"
max="255"
value={greenValue}
id="green"
onChange={
(e) =>
this.handleSliderChange(e, 'green')}
/>
</div>
<div className="wrapper">
<label htmlFor="blue">B</label>
<input
type="range"
min="0"
max="255"
value={blueValue}
id="blue"
onChange={
(e) =>
this.handleSliderChange(e, 'blue')}
/>
</div>
<div className="presets">
{presets.map((preset, index) => (
<button key={index}
onClick={
() =>
this.handlePresetClick(preset)}>
{preset.label}
</button>
))}
</div>
<div className="result">
<input type="text"
id="result-input"
value={resultColor} readOnly />
<button onClick={
() =>
this.copyColorCode('result')}>
{copyButtonClicked ===
'result' ? 'Copied!' :
'Copy RGB Color Code'}
</button>
<input type="text"
id="hex-input"
value={hexColor} readOnly />
<button onClick={
() =>
this.copyColorCode('hex')}>
{copyButtonClicked ===
'hex' ?
'Copied!' :
'Copy Hex Color Code'}
</button>
</div>
<div className="random-color">
<button
onClick=
{this.generateRandomColor}>
Random Color
</button>
</div>
</div>
);
}
}
export default App;