Review for site

[blackNoir2]

Positive Feedback:

1. The choice of typography was a nice touch.
2. The submission animation was captivating and added a unique flair.
3. The site had an eerie feel to it like something was going to jump out from behind you
4. The hover effect on the button to reveal "I submit my soul" was a great addition and pretty funny which intensified the eerie ambience.
5. The slider's smooth opening and closing transitions were well-executed.
6. Navigating through each section was seamless and provided a polished user experience.
7. Clicking on the link for each section was a smooth transition to each of the section
8. The separation of your CSS into separate files e.g nav.css, form.css, etc was cool making it easier to know which CSS belongs to which section
9. Your CSS file was nicely layered, structured and ordered beautifully with headers for readability
10. The use of CSS classes to affect the divs, HTML elements, etc within the index.httml file was beautifully done.
11. Your JS file was nicely placed inside a script file and called in the HTML file, This is great for maintenance and readability, etc
12. The toggleNav function was a nice touch which opens and closes the sidebar menu
13. The carousel was a nice touch which enabled the user to see the haunted houses by clicking either the left or right arrow, it was a nice touch to chain the result from the closet element with the querySelector in one go and the one-line if statement without else part was so cool

Areas to consider:

1. The form disappears after you submit and displays a great animation which is pretty cool but could be a problem, especially in group scenarios where multiple people want to submit, because one has to either hit the back key or refresh the page. Refreshing the page each time may disrupt the flow. Maybe have the animation appear above the form or maybe even have a timeout where it shows for an X-amount of time and disappears revealing the form again or a button that stops the animation and reveals the form again that way the user still gets the benefit of seeing the image appear again after submitting information to the form
2. The text remains after each submission, even after a page refresh, which could become bothersome for multiple submissions since one has to manually remove the text - not a problem if you want to use the same text but if you want to enter a new text then clearing the field each time could be annoying. Clearing the text field upon submission or providing an option to reset it might enhance usability.
3. Implementing an upper limit on the TextArea, inputField and emailField would prevent abuse and ensure the application's robustness. This is one of the ways hackers tend to break an application by overloading the input field with text
4. The form handles media queries beautifully and accommodates small screens nicely (haven't tested it for all the screens - just the smaller one), the only problem is the text doesn't shift and stays small so it might be hard to see when the screen gets small.

Enhancement Suggestions:

1. Implement a pointer cursor when hovering over images for better interactivity.
2. Change the pointer to a cursor when moving over the form to indicate clickable or interactive elements.
3. Consider adding subtle visual effects to the images after someone hovers over it e.g. such as a change in brightness or change the opacity to enhance engagement.

Overall I thought the site was great, cool, fun site which functioned nicely.

Ps Actually, forget about the comment about the media query the only reason I mentioned is I thought you had done it since it responds nicely to a small size but I can't find the media queries inside, so I guess it is not done yet - so scratch that comment.

[electricblues]

Thanks for the feedback! Will try to address some of the things you've mentioned above:

• [ ] Implementing an upper limit on the TextArea, inputField and emailField would prevent abuse and ensure the application's robustness. (This is one of the ways hackers tend to break an application by overloading the input field with text )

• [ ] media queries for text

• [ ] add subtle visual effects to the images after someone hovers over it e.g. such as a change in brightness or change the opacity to enhance engagement.