Latest solutions
Ecommerce Product Page Using HTML, CSS & Javascript
Submitted 26 days agoAll suggestions are welcome and any ideas on how to implement the solution using less lines of code.
News Homepage Using HTML, CSS and JavaScript
Submitted 4 months agoAll suggestions are welcome... I would also love to know if there are any improvements for the header and navigation.
Contact Form Using HTML, CSS Grid and JavaScript
Submitted 4 months agoAny suggestions are appreciated
FAQ Accordion Using HTML, CSS and JavaSript
Submitted 4 months agoAny suggestions to improvement are welcome
Interactive Rating Component Using HTML, CSS and JavaScript
Submitted 4 months agoAny suggestions on how to make the page more accessible to every user is highly appreciated
Tip Calculator App Using JavaScript
Submitted 4 months agoAny feedback particularly with the JavaScript is welcome
Latest comments
- @bandadthunderlight@enochmwanga
The code is well organised and the creativity is top notch
- @Eyu-Gen@enochmwanga
I love the organisation of your code
- P@To-be-Sun@enochmwanga
Well done... I suggest you try implementing custom error messages just for the fun of it. Happy coding
- @somayakhaled@enochmwanga
Very good job. I commend the organisation and preciseness of your code
- @BunchydoWhat are you most proud of, and what would you do differently next time?
I'm most proud of my ability to refactor repetitive code and create more reusable functions. For instance, I realized that I was repeatedly using similar code for handling elements and events, so I started using loops like forEach to make the process more efficient. This helped me write cleaner code that was easier to maintain. If I were to do things differently next time, I'd plan more thoroughly before starting the code to ensure that I can anticipate repetitive patterns earlier and avoid redundancy from the start.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was managing space between elements, especially when it came to the end of a list or array. I initially had trouble with the layout not appearing properly because of the lack of space at the end of containers. To overcome this, I paid closer attention to the CSS margins and padding settings and tested them with different element sizes to ensure the design was responsive and visually balanced.
Another challenge was figuring out how to store and work with dynamic data inside a loop. I needed to store the last clicked button in a variable to manipulate it later. I overcame this by using a forEach loop to go through all the buttons, setting up event listeners, and storing the clicked button in a variable like selectedButton. This allowed me to keep track of the user’s interactions.
What specific areas of your project would you like help with?I’m interested in getting feedback on how I can improve my implementation of the interactive rating component, particularly with spacing and alignment. Specifically, I would appreciate suggestions on how to manage space between elements dynamically, especially when elements are added or removed.
Additionally, I would love to improve the efficiency of storing and updating data in dynamic loops. Right now, I use simple variables like selectedButton, but I feel like there might be a more scalable way to handle multiple data points at once, especially when scaling up the number of interactive components. Any suggestions or best practices on this would be helpful!
@enochmwangaYour code is well-organized—great job! I have a few suggestions to enhance its efficiency and maintainability:
CSS Improvements
Move common rules outside of media queries and keep only necessary overrides within them. This will make your styles cleaner and easier to maintain.
Consider adding state styles using
:hover
and:active
pseudo-classes for buttons. This will improve interactivity and reduce reliance on JavaScript for styling changes.JavaScript Enhancements
Your use of buttons is well-structured! However, updating
selectionNumber.textContent
only after the submit button is clicked (instead of on every button press) would improve efficiency.If you have time, try implementing a radio group instead. This could streamline selection handling and improve accessibility.
Happy coding!
Marked as helpful - @abdulrrahmann@enochmwanga
The JavaScript code is well structured and organised. I commend the unique approach