Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Dom
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Feature enhancement details:

Currently, several DOM examples are not executed in the reference. It is always helpful to have the example code executed so that novice programmers can get a clear idea of how the code works. For some examples, making them work and look good might require small changes to the code, especially when canvas size is greater than 100x100 and when DOM functions add HTML elements that take a lot of space (i.e.: go beyond 100x100 px).

Here's a list of the examples that could be executed:

• removeElements()
• selectAll()
• input()
• createDiv()
• createP()
• createImg()
• createA()
• createButton()
• createCheckbox
• createInput
• createInput
• createCapture()
• createElement()
• createSpan()

Hi👋 For this issue I would need to edit the code here - p5.js-website - correct?

Hi@1lias! I hope you and your loved ones are safe and healthy! The reference is generated in the p5.js repo you can learn more in the inline documentation section of the contributor docs. The code for all the DOM examples in the reference mentioned above is in p5.js/src/dom/dom.js.
Hope this helps!

The reference examples for dom (or any reference example) won't render if in the <div> tag that contains the example code has the class norender. To get them to run, just remove that class.

I think it will also require re-thinking some of the examples so that they look good once rendered on the site.

Hi@1lias! I hope you and your loved ones are safe and healthy! The reference is generated in the p5.js repo you can learn more in the inline documentation section of the contributor docs. The code for all the DOM examples in the reference mentioned above is in p5.js/src/dom/dom.js.
Hope this helps!

Thankfully we are all safe and sound @lm-n 🙏 I hope you find yourself in a similar position. I understand a bit better now what needs to be done. In my understanding some parts of the documentation have examples and some do not have. I should try to create some examples for the ones without them. Is there any way I can see the results on my local machine?

To view the reference you can run grunt yui:dev which will spin up a server that serves a pared down version of the final reference. It isn't very usable at the moment though. I have a PR filed yesterday that fixes it #4649, you can use that or wait for it to be merged.

Hello! Wanted to see if I could tackle some of the examples (except for the ones @1lias might be currently working on, of course). Are there any examples up for grabs?

@pedrotpo As far as I know, there isn't any of them that are being worked on. If you like, leave a comment here with a shortlist of examples you are working on then we can track who is working on what. Thanks!

Hello! I am working on this issue.
I have already worked on the code (removed norender class from the required divs). The examples are now executing. But when I preview the website locally there seems to be some problem with the CSS. I have not changed any code exept the one mentioned.

Is this Ok?

I'm doing some work on the CSS at the moment as things are not looking right on the website. Maybe you will need to wait until that is done, I'm estimating a couple days to finish.

Ok! I will wait then.

@Aloneduckling The changes are merged now so you can start with this if you like.

Ok thanks!

hello! I have created a pull request. Please check it.
Thanks,
Aloneduckling