The basic idea is to increment the value of hexadecimal color for every .25sec .
Hexadecimal color consists of RGB:(red,green,blue each ranging from 00 to FF).
so, the complete Hex code has 6 letters.
defining the state:
const [state,setState]=useState({
red:"00",
blue:"00",
green:"00",
start:"Start"
});
start is to check whether the animation started or not.
form for taking input and to submit:
<form onSubmit={handleSubmit} >
<center >
<input placeholder="Red" value={state.red} name="red" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
<input placeholder="Green" value={state.green} name="green" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
<input placeholder="Blue" value={state.blue} name="blue" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
</center>
<center>
<button type="submit" name="Submit" value={state.start}>{state.start}</button>
</center>
</form>
handleInput to update the values of red , green ,blue:
const handleInput=e=>{
const value=e.target.value;
setState({
...state,
[e.target.name]:value
});
console.log(value)
}
On Submit , we need to check whether the given input is valid hex or not and alert the user
function isHex(x){
if(x.length!==2)return 1;
var re=/[0-9A-Fa-f]{2}/g;
if(re.test(x))
return 0;
return 1;
}
......
......
const handleSubmit=e=>{
e.preventDefault();
if(state.start==="Start")setState({
...state,
start:"Stop"
});
else setState({
...state,
start:"Start"
});
var msg="";
if(isHex(state.red))
{
msg+="Red should be between 00 and FF\n";
}
if(isHex(state.blue))
{
msg+="Blue should be between 00 and FF\n";
}
if(isHex(state.green))
{
msg+="Green should be between 00 and FF\n";
}
if(msg.length!==0)
{
alert(msg)
}
}
setInterval of .25sec to update the rgb and change the background.
useEffect(()=>{
var intervalId;
if(state.start==="Stop")
{
intervalId=setInterval(()=>{
var hex= state.red+state.green+state.blue;
var dec=hextodec(hex);
const red=dec.substring(0,2);
const green=dec.substring(2,4);
const blue=dec.substring(4)
setState({
...state,
red:red,
green:green,
blue:blue
});
},25)
}
return ()=>clearInterval(intervalId);
},[state])
.....
.....
.....
function hextodec(x)
{
var n=parseInt(x,16);
n+=1;
return n.toString(16).padStart(6,'0');
}
style={{backgroundColor:`#${state.red+state.green+state.blue}`}}
the final App.js is
import React ,{useState,useEffect}from 'react'
import './App.css'
export default function App() {
const [state,setState]=useState({
red:"00",
blue:"00",
green:"00",
start:"Start"
});
useEffect(()=>{
var intervalId;
if(state.start==="Stop")
{
intervalId=setInterval(()=>{
var hex= state.red+state.green+state.blue;
var dec=hextodec(hex);
const red=dec.substring(0,2);
const green=dec.substring(2,4);
const blue=dec.substring(4)
setState({
...state,
red:red,
green:green,
blue:blue
});
},25)
}
return ()=>clearInterval(intervalId);
},[state])
const handleInput=e=>{
const value=e.target.value;
setState({
...state,
[e.target.name]:value
});
console.log(value)
}
const handleSubmit=e=>{
e.preventDefault();
if(state.start==="Start")setState({
...state,
start:"Stop"
});
else setState({
...state,
start:"Start"
});
var msg="";
if(isHex(state.red))
{
msg+="Red should be between 00 and FF\n";
}
if(isHex(state.blue))
{
msg+="Blue should be between 00 and FF\n";
}
if(isHex(state.green))
{
msg+="Green should be between 00 and FF\n";
}
if(msg.length!==0)
{
alert(msg)
}
else{
}
}
return (
<div style={{backgroundColor:`#${state.red+state.green+state.blue}`,height:"100vh",width:"100vw"}}>
<div style={{backgroundColor:state.start==="Stop"?'white':'grey'}}>
<center><h1 style={{backgroundColor:'white'}}>COLOR CYCLE</h1></center>
<form onSubmit={handleSubmit} >
<center >
<input placeholder="Red" value={state.red} name="red" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
<input placeholder="Green" value={state.green} name="green" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
<input placeholder="Blue" value={state.blue} name="blue" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
</center>
<center>
<button type="submit" name="Submit" value={state.start}>{state.start}</button>
</center>
</form>
</div>
</div>
)
}
function isHex(x){
if(x.length!==2)return 1;
var re=/[0-9A-Fa-f]{2}/g;
if(re.test(x))
return 0;
return 1;
}
function hextodec(x)
{
var n=parseInt(x,16);
n+=1;
return n.toString(16).padStart(6,'0');
}
Thank you
Top comments (0)