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

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
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)
        
        obj={id: Date.now(),status: TODO,title:value}
        
        setTask((prevTask)=>[...prevTask, obj])
        
        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
        
        status = e.target.getAttribute('data-status')
        
        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 ->
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
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
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
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()
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
Selectable Grid
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)
        
        if not a Number , then return
        
        ref to focus on next input --> refs[i+1].current.focus()
        
        create a copy of inputs, before update --> val
        
        setInputs -> to set updated value
      2. onKeyDown -> backspace for delete ->
        
        ref to focus on previous input --> refs[i-1].current.focus()
        
        create a copy of inputs, before update --> " "
        
        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 -->
        
        check if any input box is empty , then change color to red ->
        
        if input ===CODE then alert success or otherwise fail

Gokul Pisharody's Blog

Gokul Pisharody's Blog

React Machine coding