Posts

Showing posts from February, 2024

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

Project 3 from 25 projects (Image Slider)

 1 component ImageSlider. 2 Take {url,limit,page} as props. 3 take 2 useStates images and currentSlides. 4 take useEffect where [url] is dependency and in it if (url !== ""(*empty*) then run the function fetchImages(). 5 make one more usetstate errorMsg which is intially null. 6 create an async function fetchImages which consists of try and catch. 7 In try, a constant response awaits fetch(url, page and limit) from parent. and the other constant data equals response.json. 8 if (data) then setImages(data). 9 Make another useState loading which is initially false. Make the loading true at the start of try and again false at the end of try also make it false at catch. 10 in the parent i.e app.js, send props url, page, limit. 11 Import icons from react-icons. 12 Inside div add 2 icons of  arrows and in between them, if images are there then images.map is done inside of which img tag is written. 13 A span is made for dots at the bottom of the images. Where, if images, images.map i...

Project 3 from 25 projects (star rating)

 1 Create a component called "star-rating". 2 Installed react icons package. 3 Created an array with ...Array .map which returns an icon with key, onClick, inMouseMove, onMouseLeave, size. 4 Created two useStates hover and rating. 5 On icon, onClick handles handleClick, onMouseMove handles handleMouseEnter and onMouseLeave handles handleMouseLeave with props of index. 6 handleClick with gecurrrentIndex setsRating to getCurrentIndex. 7 handleMouseEnter setsHover to getCurrentIndex. 8 handleMouseLeave setsHover to default rating. 9 Set the className in such a way that if index is <=(hover OR rating) then the className is active else it is inactive. 10 Set the color is style.css. Note: ...Array means an array which updates along with previous arrays.

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

Project 1 from 25 projects (Accordion)

 Today, 1 Made a component called Accordion. 2 Made a use state called selected with the initial value of null. 3 Made a data.js with all the values. 4 Made a data.map(Dataitem) taking dataitem as item props which takes each data from the API. Making Dataitem.questions the "h3". 5 On clicking the h3, a function is called "handleSingle" it sets the usestate of selected to the current id from function. 6 After Selected has a value from the clickEvent, if selected===Dataitem.id? a div is called which has the value of {DataItem.answer}. 7 Then we move to multiple Selection. 8 We add two more use state, enableMulti and multiple with initial values of false and [] resp. 9 when clicking on the h3 we also handle handleMulti funciton 10 In handleMulti, we make the multiple an array by setting its value to cpyMultiple. 11 Then we make an constant which takes the index of the array br using cpyMultiple.indexOf(currentId). 12 if the constant has the value of -1, we push the cur...