My first project in 4 months

Code Feedback
1

this is my first project in 4 months, and I couldn’t have done it without some help from this lovely community

Any feedback? I’m getting kinda rusty and I decided to use arrow functions, which I rarely do before.

Thanks in advance

2

One of the most basic rules of building web pages is to always use the most semantically correct element. You’ve got three clickable elements on the page but you aren’t using the correct html tags for them. I would refer to the “Generater colour” element as a button, wouldn’t you? So I think that it should be marked up as a <button> in the HTML. The Simple/Complex toggles at the top are mutually exclusive (you can only choose one at a time), so you would want to use an element that reflects this. You could use a group of radio buttons, or a single toggle switch/button, or even a select. There are a lot of ways to approach this but using <h3>s and adding a click handler to them is not one of them. And because you aren’t using the correct elements for these things your application is not keyboard accessible at all.

I don’t mean to be too critical here and come off sounding like a jerk. It sounds like you’ve taken some time off and thus perhaps you are a little rusty. I think a lot of developers overlook the importance of semantically correct HTML because they don’t take HTML seriously and think they can brute force everything with JS. I’m not implying that is your attitude here, it’s just a pet peeve of mine and thus I wanted to point it out.

Welcome back and by all means keep building things, that’s how you learn. Just remember to always start by making sure your HTML reflects what you are trying to do and uses the best possible elements to do that.

1 Like
3

Hey man, I don’t mind the criticism, in fact I welcome it, especially considering semantic HTML is my weakest point in some regards and accessibility being a topic I’m highly interested in. How do my Javascript and CSS code look though in your opinion. Really apperciate you taking your time for me man, it’s good to be back in this amazing community

4

I would suggest making the .container and your generate button a different color then the white background. Then add box-shadow: 2px 2px 5px black; to your containers.

You could also keep your containers white and simply make the background a different color.

1 Like
5

Nice one mate, would help with accessibility, thanks !

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.