Hey!
I just finished my 25+5 clock from FCC project curriculum and I really like the design that i came up with, but i think that my code in the part of the design is a little messy, i used a lot of relative positions to make it look the way I wanted and I wonder if there is a better, more sophisticated way to do it . Please let me know what you all think and if there is any improvement or suggestion that you can think of!
Here’s my project: My Pomodoro Clock
Thank you all in advance!
This looks really nice and functions well. Really like the countdown ring around the edge. And now one major change that will make your clock much more accessible to people who can’t/don’t use a mouse. All of those clickable things in your clock, they all need to be <button>s. Right now your clock is completely inaccessible to anyone using a keyboard. Changing those elements to buttons will make it completely accessible to people using keyboards.
One easy test you should always do with anything you create is to make sure all functionality can be accomplished using the keyboard only. And make sure the focus outlines stand out enough to be obvious where the current keyboard focus is. I highly recommend you customize the outline property on the button’s :focus pseudo-class to make it more visible.
Do the above and this gets an A+.
Hey!
Thank you very much for the feedback and for the tip, is really insightful. I’m no used to think on accessibility via keyboard, so keeping that in mind will be very helpful. So, I originally made the clickable elements using button, but I didn’t managed to make it “invisible” in the way that i could use and edit my icons, so I take the easy approach and just use <span>'. Maybe there is a way to make the ` tags accessible via keyboard, to focus via tab? That would make it easier.
Another problem that I had is that I wasn’t able to use hover effects in most of my clickables, which is very annoying and I have no idea why this is happening.
Anyway, I will implement the thing you said, one way or another. Really appreciate the feedback!
Have a nice day!
Technically, yes there is. WAI-ARIA Authoring Practices 1.1 for Buttons. Personally, I think it’s a lot of work just for CSS styling issues. I’m not sure what styling issues you had with <button>s but I think you should be able to make it “invisible” with the right CSS.
For what I read is a lot of work, and it’s better to use the tag that does that by default. I just have to figure it out the proper css to style the buttons the way I want, but I’m sure there is a way and not that hard. Thanks for the reply!
its a great job
looking great and working as intended
on the logic side i see that you copied a lot from the example logic on the project page and you spent much of the time making the app look nice
and i feel that you didnt come with the logic by yourself correct me if I’m wrong other than that it is grate and i wanted my timer also to look nice but after pulling my hair finishing the logic i realized it will make it take much longer to finish
so i submitted without fancy looks
here is the live build for the project
25+5 Clock (greekmido.github.io)
and this is the repo if you would like to have a look on the code
Hey, thanks for you reply!
Well, first of all, it took me sometime to make the app look nice, indeed (and believe me, for me this is the least fun part, since I ratter work with the logic. I just put some effort on it because frontend development is a lot about making things looks nice), but it also took a lot of time to make the application work the way the exercise intended. After I submit the work I went back to styling.
And since you ask me to correct you if you’re wrong I’ll explaing: I came with all the logic by myself (as I said, this is my favorite part), except for the component that control the time (and prevent it from drifting) that in my code is the Heartbeat component (That i took from another page that explains the issue and correct using a very smart solution, I also made a comment on the code explaining that since I don’t want to pretend that I did all by myself). The other thing that I took inspiration from is to make some component to create the buttons (that is something the example project make), and this is a good Idea (and is important to try to do that as often as possible) because i don’t have to write two times the same thing to create the buttons and to style then, but despite using the idea I came up with the code all by self.
By the way, I have another post where I’m trying to make my code pass some tests, and I wouldn’t have this problem if i copied most of the code. And I know you’re not accusing me of not working on the logic, I’m just clarifying things.
And although You said you didn’t put much effort on making your project look fancy I really like it, very clean, organized and minimalist style, congrats!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.