DEV Community

Cover image for Color Cycle in ReactJs
vasanthkumar
vasanthkumar

Posted on • Edited on

Color Cycle in ReactJs

#react #javascript

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

Top comments (0)