DEV Community

loading...

Discussion on: Windows 10 calendar hover effect using HTML, CSS, and vanilla JS

Collapse
the_riz profile image
Rich Winter

Dude, this is super cool and a great post-set! Thank you for sharing.

I do have some serious issues with your code.

  1. (From the earlier article - Never substitute a fancy div for a <button> if what you want is a button.)
  2. 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.
  3. Right now, as it stands, the mobile display is wonky for me.
  4. Perf wise maybe a bunch of transparent divs over a canvas to do the drawing? Because...
  5. Not knowing the original, I wonder how you would handle highlights a dragged range of dates...
  6. 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
Collapse
jashgopani profile image
Jash Gopani Author

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,

  1. 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.
  2. Accessibility wise it is not a good practice to remove the outline, but again I didn't care about accessibility in this.
  3. 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 *)