Cookie Consent by Free Privacy Policy Generator 📌 Let’s play a Javascript Frontend Game

🏠 Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeiträge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden Überblick über die wichtigsten Aspekte der IT-Sicherheit in einer sich ständig verändernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch übersetzen, erst Englisch auswählen dann wieder Deutsch!

Google Android Playstore Download Button für Team IT Security



📚 Let’s play a Javascript Frontend Game


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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

...



📌 Let’s play a Javascript Frontend Game


📈 40.67 Punkte

📌 Freeware Advanced Audio Coder 1.28 Frontend frontend/input.c wav_open_read WAV File denial of service


📈 28.22 Punkte

📌 heise+ | Web-Frontend mit Angular 2: Frontend mit Backend verknüpfen


📈 28.22 Punkte

📌 Freeware Advanced Audio Coder 1.28 Frontend frontend/input.c wav_open_read WAV File Denial of Service


📈 28.22 Punkte

📌 Intel: Let's talk about SGX, baby. Let's talk about 2U and me. Let's talk about all the good things, and the bad...


📈 24.35 Punkte

📌 Intel: Let's talk about SGX, baby. Let's talk about 2U and me. Let's talk about all the good things, and the bad...


📈 24.35 Punkte

📌 Let's Build a RUST WebAssembly Frontend App With Yew


📈 22.23 Punkte

📌 Reactivity In Frontend JavaScript Frameworks


📈 21.69 Punkte

📌 Creating animations and transitions in frontend development with CSS and JavaScript


📈 21.69 Punkte

📌 50 Frontend Interview Questions - JavaScript


📈 21.69 Punkte

📌 Frontend Web Development: In-Depth Project Tutorial (HTML, CSS, JavaScript, TypeScript, React)


📈 21.69 Punkte

📌 The Essential JavaScript Libraries for Frontend Development


📈 21.69 Punkte

📌 Setting Up a Modern Frontend Build Process with Rollup for SASS and JavaScript


📈 21.69 Punkte

📌 Let’s play… Does your code suck? JavaScript Variables Edition


📈 21.29 Punkte

📌 JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript


📈 20.44 Punkte

📌 JavaScript Game Dev Tutorial – Build Gorillas with HTML Canvas + JavaScript


📈 20.44 Punkte

📌 5 tailwindcss utility classes to up your frontend game


📈 19.39 Punkte

📌 let's play the uptime game


📈 18.98 Punkte

📌 Let's play a game "Your Topic My Article"


📈 18.98 Punkte

📌 Let’s play a game: what is the deadly bug here?


📈 18.98 Punkte

📌 Let's play everyone's favorite game: REvil? Or Not REvil?


📈 18.98 Punkte

📌 How to create a 3D snake game with Javascript (attached source code and game link)


📈 18.13 Punkte

📌 Give your players seamless continuity across Play surfaces with Google Play Game Services (PGS)


📈 16.46 Punkte

📌 Pokémon Let's Go,Pikachu! & Let's Go, Evoli!: Offizielle Ankündigung des ...


📈 16.23 Punkte

📌 Pokémon: Let's Go, Pikachu! & Let's Go, Evoli! - Erste positive Resonanz für ...


📈 16.23 Punkte

📌 Pokémon: Let's Go, Pikachu! & Let's Go, Evoli! - Erste positive Resonanz für ...


📈 16.23 Punkte

📌 Let's Encrypt plugs hole that let miscreants grab HTTPS web certs for strangers' domains


📈 16.23 Punkte

📌 Pokémon: Let's Go, Pikachu! und Let's Go, Evoli! im Launch-Trailer


📈 16.23 Punkte

📌 Let’s Get Cross-Functional: Learn to Let Go and Embrace DevSecOps


📈 16.23 Punkte

📌 Let’s Talk About ELK Baby, Let’s Talk about You and AD


📈 16.23 Punkte

📌 Let's Encrypt? Let's revoke 3 million HTTPS certificates on Wednesday, more like: Check code loop blunder strikes


📈 16.23 Punkte

📌 Let's Encrypt: OK, maybe nuking three million HTTPS certs at once was a tad ambitious. Let's take time out


📈 16.23 Punkte

📌 Webcast: Let’s Talk About ELK Baby, Let’s Talk About You and AD


📈 16.23 Punkte











matomo