Dynamic Logging window for a webpage

Question

I'm building a website on which users can draw objects.

I want to build a window for logging whatever mistakes that users make

For example, the drawing rule is only circle is allowed inside a triangle. However, one user come and draw a square inside a triangle. The system still allows and perform it as the user wants. But there will be a warning message such as "only circle allowed inside a triangle" appeared in the logging window (located at the bottom of the page). Whenever the user fix the mistake, the warning in the window will be deleted.(Due to this function, I think it should be called dynamic logging window)

I'm using JavaScript with ExpressJS and dojoJS.

Can anyone tell me how to build such a window??? I'm quite new to web developing

Any help would be appreciated.

I want to build a window like this on my website

Answer 1

I'm not sure if you're asking for any part of the error-detection logic or not. I haven't addressed it here.

Here's one simple way of going about this:

1. Create a fixed position div at the bottom or wherever you like. This will hold all the errors.
2. Maintain a shapeId for every shape added and an errorId for every error generated. Map the errorId to the list of shapeIds it affects. For each errorId add an element to the window. Set the id of the element as the errorId of the error.
3. When a shape is added/modified, iterate through all errorIds and modify the affected errors in the list by using their id.

Hope this addresses your issue.

Update: If you're just going to display errors like mentioned in the question, I guess plain old Bootstrap will be enough.

Here's a fiddle

jSlate looks pretty relevant to your case. I'd suggest you take a look at the demo once.