[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]

I can suggest using react-codemirror for playground. I have create my own coding editor, refer this repo: https://github.com/Vishal-raj-1/code_deck

Live Preview: http://code-deck.vercel.app/

[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

[Huzaifa785]

I'll give it a try like how @ManishBisht777 described it. That would be better I guess.

[Kiranism]

CodePen-like UI; I used an iframe to showcase the results. @ManishBisht777 , is this what you meant?

[ManishBisht777]

yeah something like this but i think @Huzaifa785 was also working on this so you can collaborate together to come up with something really cool :)

[Vishal-raj-1]

Hey @Kiranism iframe is good, but there are lots of problem in simple iframe (like spacing, auto correction, auto closing bracket, and many more basic editor functionalities are missing)

I can suggest using react-codemirror for playground. I have create my own coding editor, refer this repo: https://github.com/Vishal-raj-1/code_deck

Live Preview: http://code-deck.vercel.app/

[Kiranism]

Hy @Vishal-raj-1 the editor that used is react-codemirror , which support options like autoclosing and all. The output visible in the screen is with the help of iframe as we injecting html css and js code.

[sridharrajaram]

@ManishBisht777 Issue Inside Learn >Semantic Tags notes are missing #169.
Its merged. can you solve this open issue.