React Machine coding

https://github.com/imran-mind/reactjs-frontendeval-challenges/tree/main

website:

https://sadanandpai.github.io/frontend-mini-challenges/

https://frontendeval.com/

question

1. bar chart component

   1. https://youtu.be/4UH9c8h-n2M?si=sF8T3gKNC_obrtiV

   2. https://frontendeval.com/questions/data-fetching

   3. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/bar-chart

   4. steps:

      1. fetch the data(text) using useEffect

         1. create the map to group the x-axis data -> {x-axis(value) : y-axis(count)} -> {1:10,2:18} --> forEach loop -> key is present in map then increment by one , otherwise add the key with initial value 1

         2. now set the map to freq state

      2. prepare data for y-axis using useEffect (since freq changes in every call) ~ if max value is 15 then ---> y-axis --> [20,10,0] ,

         if max value is 35 then ---> y-axis --> [40,3020,10,0]

         1. now set the array to yAxis state

      3. now create the bar chart (x-axis(count),y-axis(array) )

         1. App -> container -> box -> box-y-axis

2. Drag N Drop Task Manager App

   1. https://youtu.be/6UBEOP3K41Y?si=_wnitiXcwpYl3X6w

   2. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/task-app-drag-n-drop

   3. functionality

      1. initially added todo

      2. we can drag and drop to doing and done , viseversa

      3. edit and delete todo

   4. steps:

      1. ui --> heading,input, 3section(todo,doing,done)

         1. App-> h1,input,3section(board->todo->[h2(todo-col),div(inputText,btn(edit,delete))],doing,done)

      2. logic

         1. input

            1. onChange --> setValue(e.target.value)

            2. onKeyDown --> if(e.keyCode === 13) (enter key is pressed)

               1. obj={id: Date.now(),status: TODO,title:value}

               2. setTask((prevTask)=>[...prevTask, obj])

               3. setValue("")

         2. now map through task array in todo,doing and done section

            1. task.status === TODO / DOING / DONE

         3. each todo

            1. onDrag -->setDragTask(task)

            2. draggable

         4. TODO , DOING ,DONE --> applied on 3 section

            1. onDrop -->handleOnDrop

               1. status = e.target.getAttribute('data-status')

               2. if(status === TODO /DOING /DONE) --> handleDrangNDrop(TODO /DOING /DONE) ->copy task and update status

            2. onDragOver

            3. data-status={TODO/DOING/DONE}

         5. Delete ->copy task and filter out that id

         6. Edit ->

3. Image Carousel

   1. https://youtu.be/7yfpdcgweGU?si=pw2OkDbAPOdKEf4Q

   2. https://frontendeval.com/questions/image-carousel

   3. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/image-carousel

   4. logic

      1. fetch data from url with useEffect

         1. then filter out data such that it only includes '.jpg'

         2. then extract only img url in '--.jpg'

         3. set that list of img url to setImage

         4. initially index =0

      2. handleClick on button

         1. < --> handleClick('left') -> if(index===0)

         2. > -->handleClick('right') -> if(index===lastIdx)

      3. auto slide the image using setInterval-->handleClick('right') in useEffect

4. infinite scroll

   1. https://youtu.be/XeVDlrGhGgY?si=yUaub1Yes0woDCyc

   2. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/infinite-scrolling

   3. logic

      1. useEffect -> to call firstPage data on initial load

         1. seImages to set images

         2. then map images -> <img />

      2. dummy element ->useRef ->(loaderRef)

         1. useEffect -> to call nextPages from 2 onwards

         2. create IntersectionObserver--> to observe and unobserve loaderRef

         3. then fetch the data -->append to seImages

         4. and then increment the page count

5. Job Board

   1. https://youtu.be/Tanp7D57hbw?si=3zPQluc8LtueYc41

   2. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/job-board

   3. https://frontendeval.com/questions/job-board

   4. logic

      1. 2 api call ---> 1st for get all ids, and 2nd to get data to displayed based on id --> at a time call 9 ids

      2. create a common fuction to call api -> getData()

      3. useEffect

         1. fetchPostIds() ->fetchPostMetaData()

            -> data transformation

            getJobTitle()

            getJobInfo()

            getFormattedDate()

         2. now store the formatted data into postMetadata

      4. now map through postMetadata in cards

      5. handle load more functionality --> 6 more cards

6. Tic Tac Toe

   1. https://youtu.be/MPppkYrd9Zw?si=7-xVlxMwB5kqNf4P

   2. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/tic-toc-toe

   3. logic

      1. initially create matrix array of 9 --->Array(9).fill(null)

      2. map matrix array --> pass id

      3. event delegation --> only add a click event to parent not every child --> handleUserClick()--> update value to matrix

      4. useEffect --> decideWinner() when matrix change

      5. resetGame()

7. Product Filter App

   1. https://youtu.be/gg8Yehm4cVY?si=JiF_3TDvMIF3lJG9

   2. https://github.com/imran-mind/reactjs-frontendeval-challenges/tree/main/product-filter-app

   3. logic

      1. filter ---> map to display button --> event delegation --> only add a click event to parent not every child --> handleFilterClick()--> toggle activeFilter value --> if already present then remove , otherwise add

      2. filteredData --> map to display product cart

      3. useEffect --> filterProducts() when activeFilter change

8. Selectable Grid

   1. https://youtu.be/RH5-DzhFE48?si=P2S4vTw1smCy2Ql8

   2. https://frontendeval.com/questions/selectable-grid

   3. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/selectable-grid-hard

   4. logic

9. two factor input

   1. https://youtu.be/puEIMYJw0fg?si=gdcoQj6S2lsEswH0

   2. https://github1s.com/imran-mind/reactjs-frontendeval-challenges/blob/main/OTP-code-input

   3. https://frontendeval.com/questions/code-input

   4. logic

      1. create emtyArray =[' ', ' ', ' ', ' '] -->then map it and return <input>

      2. const refs = [useRef(), useRef(), useRef(), useRef()];

      3. const [inputs, setInputs] = useState(emptyArr);

      4. logic

         refs[0].current.focus(); --> default focus to first input using useEffect

         1. input

            1. onChange-> handleInputChange(e,i)

               1. if not a Number , then return

               2. ref to focus on next input --> refs[i+1].current.focus()

               3. create a copy of inputs, before update --> val

               4. setInputs -> to set updated value

            2. onKeyDown -> backspace for delete ->

               1. ref to focus on previous input --> refs[i-1].current.focus()

               2. create a copy of inputs, before update --> " "

               3. setInputs -> to set updated value

            3. onPaste ->

            4. maxLength='1'

            5. key={i}

            6. value={inputs[i]}

            7. ref ={refs[i]}--> to give focus to input

            8. type='text'

               button -> onSubmit -->

               1. check if any input box is empty , then change color to red ->

               2. if input ===CODE then alert success or otherwise fail