Project 2 from 25 projects(Random color Generator)

 1 Created a component random-color-generate.

2 Created few buttons for HEX RGB and Generate a color.

3 Made 2 usestates for setTypeOfColor and setColor.

4 Added OnClicks with few handlers.

While on click clicking on hex, the type of color is set to "hex" and on click clicking the rgb the type of color is set to "rgb". And on click clicking the Generate a color, if type of color is hex then handleRandomHexColor function takes place else handleRandomRgbColor function is executed.

5 Inside the function handleRandomHexColor a constant hex is made with with an array of values.

6 A function is made "random" where random values of props (length) is generated.

7 Now we work on the function handleRandomHexColor ; we make a variable hexColor with the value"#" and a loop where hexColor is added with function "random" with the length of hex.We make the setColor to hexColor.

8 Now we work on the function handleRandomRgbColor ; we make 3 constants r, g, b  where we call the function random with length of 256 in all of them.

9 We then setColor to when handleRandomRgbColor is in action.

10 We set a useEffect so that when typeOfColor is rgb , handleRandomRgbColor is in action else handleRandomHexColor is in place.

11 Now on click of Hex Color, typeOfColor is set to hex ; on click of Rgb Color , typeOfCOlor is set to rgb and while clicking random color, a random color is generated.

Comments

Post a Comment

Popular posts from this blog

Project 4 of 25 Projects (Infinite Scroll)

 1 Component Infinite Scroll. 2 Created 3 useStates; loading to check to load or not, items to set the items from api, count to count the pages. 3 Created a useEffect which calls the function fetchProducts(). 4 An async function fetchProducts is created. where try and catch is applied. 5 In try set loading is set to true, a constant response and data is created to await and fetch the data. 6 If data and data.products and data,products.length is true then setItems is set to data.products. 7 In div return, if items and items.length is true then, item.map is ran with a div with key inside of which is a img and p whose values are set according to the api. 8 A button is made which on Click  sets setCount to count+1. 9 A useState disable is created which is initially true, to disable the button when max 100 products is reached. 10 the setItems in fetchData() function is modified  where prevData is set to ...prevData, ...data.products to that all the products are shown from befo...
Read more