Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Comments Section [vanilla JS]

Jo Youngβ€’ 840

@Jo-cloud85

Desktop design screenshot for the Interactive comments section coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This challenge was completed with:

  • dark and light theme toggle
  • the ability to switch users that also comes with a tiny bit of animation
  • pop-up alerts when users try to send an empty response or vote more than once
  • sync data with localStorage for any CRUD operations

Due to this challenge's multiple state management requirements, I used a lot of function declarations, instead of function expressions, which I understand is not ideal. Also, there still might be some bugs lying around. Nevertheless, I had fun drilling my Javascript skills.

Community feedback

P
visualdennisβ€’ 8,255

@visualdenniss

Posted

Hey Jo,

great work! This one is a quite tricky challenge and u have did an amazing job :)

There seems to be little issue with the vote system. Once u vote, if u can only cancel that vote but u cannot vote the opposite way. E.g. if u upvote, it goes up to 5, but if u downvote it never goes to 3, which should be the case. I've listed here Vote System States. Also i dont think it is necessary to put an explicit warning to a user. The standard practice on web is to toggle when clicked twice, instead of a pop up alert.

Its also very nice that u added little menu to switch users. I've also initially wanted to make a menu like u and display users with animation onClick, then i thought since this is a demo, people might not spend time much, so i wanted to make it very explicit. But if it was a real-world thing, i'd hide them into a menu too.

Hope you find this feedback helpful! Keep up the great work ;)

Marked as helpful

0

Jo Youngβ€’ 840

@Jo-cloud85

Posted

Hi @visualdenniss, thanks for the encouragement! It was definitely tedious for me to complete the challenge using plain Javascript.

Yeap, you noticed the bug at the vote buttons.πŸ˜…I have just fixed it! Instead of a pop-up alert, when the user has either upvoted or downvoted, the icon should stay blue as a way to notify the user that he/she has voted. The user should be able to vote the opposite way now as well.

On the other hand, I am still keeping the pop-up alert if the user is attempting to send an empty response.

1
P
visualdennisβ€’ 8,255

@visualdenniss

Posted

@Jo-cloud85 Looks amazing!

1
Andreiβ€’ 530

@Xeotheosis

Posted

Fantastic work

1

Jo Youngβ€’ 840

@Jo-cloud85

Posted

Hi @Xeotheosis, thank you!

1
NizarMjrβ€’ 390

@NizarMjr

Posted

You have made a nice work , i like what you have done but there are some updates could make your project more efficient : try to make the alert notification disappear after an interval of time as well as only one notification appear on the top of screen and delete reply does not work

1

Jo Youngβ€’ 840

@Jo-cloud85

Posted

Hi @NizarMjr, there is already a set timeout function for the pop-up to disappear as well as functions to delete the replies both of which seemed fine to be working on my side.

Nevertheless, thank you for raising this issue up as this tells me the code is still buggy. I think it is probably because of the conflicting addEventlisteners that there are times that one of these addEventlisteners becomes buggy. This is something I definitely need to relook at, not just the delete function, but the entire code as a whole.

Anyway, thanks for the feedback! I will try to fix this in the near future!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord