This content originally appeared on DEV Community and was authored by shrey vijayvargiya
Under the Hood
The story begins last week I got a technical assignment for a full-time position as a part of an interview process.
I am not putting the entire assignment here but the problem statement is the real-world case scenario and that is what we will play around with today.
Question
You have one JSON file that represents the file system of any directory in the world.
Now the questions revolve around this one JSON
Each question will represent the stages of the game.
Passing one stage will allow you to go to the next stage and therefore complete the game.
Stage One
Show file structure as a Tree on the screen from JSON
- How will you iterate over the JSON and render it on the website just like Javascript DOM or binary tree?
- The tree should contain all the directories and folders mentioned in the file structure
- The tree should have accordion functionality just like any file folder you s ee on the browser.
Stage Two
Collapse/Expand directories
- Define a method to collapse and expand all directories.
Stage Three
Add Delete file/folder functionality
- Write a javascript function to remove a file/folder from the JSON described above.
Stage Four
Edit the name of any file/folder
- How will you update the name of any of the files/folders,
Stage Five
Create a new file/folder for any position
- How will you add a new file/folder to the required position, for example, inside the directory name components or in the root directory?
The last stage — Stage Six
Add Drag and Drop functionality to the file structure
- You have the children key in the file structure which is an array. Now define a way to move the elements of this array to the position given as an input parameter.
It’s not OVER
Once this is OVER you have successfully completed the GAME.
But that’s not why this GAME is developed.
Now that you have written each method, simply convert those methods into a React code.
Meaning writes each method in whatever frontend language or framework you are comfortable with and your own CODE editor is ready just like codesandbox.
If you are wondering how is this even possible just TRY it on your own.
Advanced
The more advanced version will certainly enable more stages.
Stage 7 can also include the content of each file and you have to show the content to the editor on the screen.
The editor should allow developers to edit the content and save the entire JSON and sends it back to the server.
The server then stores this JSON in the database. Keep playing the game until you want it to end. I mean it can go to whatever extent you want it to take.
But I’ve to certainly end here only.
Cheers
Shrey
iHateReading
This content originally appeared on DEV Community and was authored by shrey vijayvargiya
shrey vijayvargiya | Sciencx (2023-04-26T17:35:52+00:00) Let’s play a Javascript Frontend Game. Retrieved from https://www.scien.cx/2023/04/26/lets-play-a-javascript-frontend-game/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.