๐งฎTip Calculator | HTML, CSS | Javascript | Anime.js | Webpack

Solution retrospective
๐ฌYikes! did this challenge take me a long time to complete... Glad to be finally done with it.
Acknowledgment
First off, I'd like to thank @tediko for writing code that's clean and comprehensive. I spent a lot of time studying his Solution to the Calculator app by FEM. This solution forced me to learn a lot of new technologies and concepts that I found extremely helpful.
Secondly, I want thank @Syafiqjos. I found a very useful way to limit user input from his Solution.
Some not so necessary Features
- Added a punny intro animation
- Flipped some colours around and added a dark theme mode
- A toggle button to switch between the two theme modes
Questions
- What tag would be more appropriate for the intro element in my markup?
- I'd like to know your thoughts on my javascript code, I found it a bit challenging to stick to the DRY principle.
- I'm fairly new to webpack, so I'd appreciate it if you could give some tips on writing a better config file.
Click here to view the Live Site
P.S. If you have any questions for me, Please feel free to message me on slack :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pikapikamart
Hey, awesome work on this one. That animation is cool to be honest, haven't seen anything like that so great. The layout in desktop looks great as well and the mobile layout is great as well.
- For the tag, it is fine to use
header
on this one since it contains the website's logo. - For javascript, I don't really dive into js when reviewing a site, unless there is a specific question about how they used js or a part.
- I haven't use webpack:>
Some other suggestions would be:
- I would rather use
img
instead ofobject
, if there are element that do a specific task that you want to do, use that element. - if that were an
img
, you need to usealt="splitter"
, a website logo should be named as the website's name. I haven't useobject
to be honest, but usingaria-label="logo"
for the logo is not good. Avoid using words that relates to "graphic" such as "logo, icon, image.." when describing an image, since it is already one. - Theme toggle should be using
button
so that it will be more explicit instead of usingdiv
withtabindex
. - If you are going to build a color theme, using
input type="radio"
are the ones that you should use. Since it is a selection, radio buttons are intended for those. Those radio button should be inside afieldset
along with alegend
which can be hidden or not, depending on the design. Using this kind of structure, it is more accessible for all users. Have a look at my sample snippet about using radio buttons. svg
on the theme toggler should be hidden so usearia-hidden="true"
on it, if you are using ansvg
and it is meaningful, use antitle
element inside thesvg
along with ansr-only
class on it.- You don't need to use
aria-label
on the billinput
since it already uses alabel
associated with it. - Using
label
that associates with adiv
will not work. So this element<label for="input--percentage" calss="input__label">Select Tip %</label>
won't work since it points to a containerdiv
.label
are forinput
. - No need for
aria-label
for eachbutton
since the textselect tip 5
gives the overview of what thebutton
will do. But to be honest, I won't usebutton
for this, instead I will useinput type="radio"
inside of a fieldset sincebutton
alone is not accessible, unless you make like anaria-live
element, that announces that thebutton
has been selected or pressed. - Again,
aria-label
not needed for the nextinput
which is thenumber of person
. - Using
::after
to hold thecan't be zero
is not accessible for NOT sighted users, since there will be no text-content that their assistive tech will read. It would be great to make use of aspan
for example. Thespan
will contain the error-message and it will have anid
attribute. Theid
will be referenced by theinput
element, if theinput
is wrong, that is where you addaria-describedBy
attribute on theinput
and the value of that attribute, will be theid
of the error-message. This way, users will know what kind of error they had made. Also, when theinput
is wrong, add anaria-invalid="true"
attribute on it, so that users will know their input is wrong. - Avoid using multiple
h1
on a single page. On the result section, you don't needh1
or heading tag to wrap the result of the calculator. The result will be better to just usep
tag, since theTip Amount
is already a heading, giving overview on what the section will contain. - An addition as well, for the
reset
button, creating anaria-live
element, that announces the calculator has reset. Sincebutton
does not inform that much, you kind of uses this kind of methods to inform users.
Aside from those, great work again on this one.
Marked as helpful - For the tag, it is fine to use
- @FlorianJourde
A piece of art !
- @imparassharma
I was looking to your code and saw that you never use height. I mean how ...for the main container I have to define some height because without it then I cannot design my inner components accordingly. So can you tell me should I use vh in my body or main containers? Or how to proceed? https://imparassharma.github.io/Price-Component-Toggle-sections-/
This was the last project I did on frontendmentor but took me a lot time to adjust heights for 1440px dimension. Can you help me!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord