Dude, this is super cool and a great post-set! Thank you for sharing.
I do have some serious issues with your code.
(From the earlier article - Never substitute a fancy div for a <button> if what you want is a button.)
In CSS going button:focus { outline: none; }, while perhaps improving styling, kills keyboard navigation! Now you have a completely "inaccessible" calendar. Unless you replace that setting, there are no visual clues that the user has highlighted anything.
Right now, as it stands, the mobile display is wonky for me.
Perf wise maybe a bunch of transparent divs over a canvas to do the drawing? Because...
Not knowing the original, I wonder how you would handle highlights a dragged range of dates...
Of course, it is a matter of taste, but putting anything in the * CSS selector other than box-sizing:border-box; in a * selector is unusual. ESPECIALLY putting a text-transform: capitalize !important; or ANY !important selector is very odd. The html/body selectors are more appropriate. Even variable definitions usually live at :root
Hi @the_riz
,
Thank you for going through all the posts and giving your feedback 🙂
I did not get your points 3,4,5; if you could elaborate on that, please...
For the rest,
My aim was to give effect to any non-input element...button/div/p/span etc. So I just used div for demonstration purpose and win-btn class name is just for analogy purpose. In actual apps, it can be any target element. So the purpose was not at all to replace the button; it was just for demo.
Accessibility wise it is not a good practice to remove the outline, but again I didn't care about accessibility in this.
More than a matter of taste, I was not building a big production application, this is just a small piece of code where I wanted everything to be in upper case..hence the approach.
This is definitely not the best CSS code, I agree...its just that I wanted to create this quickly and many things were trial and error based.😂
Hope you get my point (*Don't think of this reply as a rude one,🙈 as it isn't meant to *)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Dude, this is super cool and a great post-set! Thank you for sharing.
I do have some serious issues with your code.
<button>if what you want is a button.)button:focus { outline: none; }, while perhaps improving styling, kills keyboard navigation! Now you have a completely "inaccessible" calendar. Unless you replace that setting, there are no visual clues that the user has highlighted anything.box-sizing:border-box;in a * selector is unusual. ESPECIALLY putting atext-transform: capitalize !important;or ANY !important selector is very odd. Thehtml/bodyselectors are more appropriate. Even variable definitions usually live at:rootHi @the_riz ,
Thank you for going through all the posts and giving your feedback 🙂
I did not get your points 3,4,5; if you could elaborate on that, please...
For the rest,
win-btnclass name is just for analogy purpose. In actual apps, it can be any target element. So the purpose was not at all to replace the button; it was just for demo.This is definitely not the best CSS code, I agree...its just that I wanted to create this quickly and many things were trial and error based.😂
Hope you get my point (*Don't think of this reply as a rude one,🙈 as it isn't meant to *)