[Feat] Playground

[ManishBisht777]

Description

Add a playground for a better experience while learning HTML, CSS, and Javascript

Screenshots

No response

Additional information

No response

[vatan999]

can you explain it in little bit more detail.

[ManishBisht777]

Actually, it is an initial thought of having an editor or something like that to test the code directly without moving back and forth from site to editor, need som more thought on this though

[Huzaifa785]

Hey!

What's coming to my mind is, that we can add the code editor on the right side of the documentation page and make the left sidebar collapsable, so that we get more space.

I think maybe we can use the react-codemirror package for integrating the code editor, will think more about how to implement it.

[Vishal-raj-1]

Hey @Huzaifa785 Yes, We are planning to use react-codemirror package for code editor. Do you want to give it a try?

Code Editor will be the fourth tab

[ManishBisht777]

It would be a little hassle to put the code editor in there because in each page we have to mount a new code editor instead

• we can make a single code editor page
• which would have 2 section (like leetcode)
  • sidebar for the task you are going to attempt
  • code editor

When on the Assignments tab a button for try now should be there which fill the code editor with

• task
• initial boiler plate for that task