Color Cycle in ReactJs
Tags: react, javascript
Published: 2021-02-04 06:13:05

[app idea ] (https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Color-Cycle-App.md)

[Youtube Speed Code](https://youtu.be/411lZt6Lp7Q)

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:
```react

   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:

```react
 <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:


```react

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


```react
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.


```react
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');
}
```

```react
style={{backgroundColor:`#${state.red+state.green+state.blue}`}}

```

the final App.js is

```react

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