DEV Community

Cover image for Color Cycle in ReactJs
vasanthkumar
vasanthkumar

Posted on

Color Cycle in ReactJs

app idea

Youtube Speed Code

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"

   });

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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)
   }
Enter fullscreen mode Exit fullscreen mode

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)
     }

   }
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode
style={{backgroundColor:`#${state.red+state.green+state.blue}`}}

Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

Thank you

Discussion (0)