Tip-Calculator-App Vanilla JS only mobile solution

Solution retrospective
I am really tired and would like to move on to other projects to practice my JS so I am skipping the part where I would build out the desktop style :D
In this one I learned the importance of having tidy code haha, my code is chaos but it works
In the future I will definitely focus on creating functions step by step and writing more pseudocode in advance.
There was also many bugs I did not anticipate and proved good challenges!
Cheers, Jakov
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pikapikamart
Hey, awesome work on this one. Like what you said, only mobile but it looks great though^^
Also, you can have a look at other solution on this one if you go to the challenge hub for this challenge. There you can see their structuring and how they approach this challenge.
Some other suggestions on the site would be:
- Avoid using
height: 100vh
on a large container like thebody
tag as this limits the element's height based on the remaining screen's height. Instead usemin-height: 100vh
, this takes full height but lets the element expand if needed. - Also don't add
width: 100vw
as this adds an extra horizontal scroll since this doesn't account the scrollbar's size and it just create a horizontal scrollbar. - Website-logo
img
should be using the website's name as thealt
likealt="splitter"
. Remember that a website's logo is meaningful so always make sure it uses the properalt
value. - Also, it would be great to use:
<header /> #nest the website-logo <main /> #nest the rest of the element
This way, element will be inside landmark elements.
- Your
for
attribute on the bill-label is currently incorrect, check that one out. - Those icons on the
input
you could add an extraaria-hidden="true"
attribute on it so that it will be totally hidden for all screen-reader users or in general, if you have an image that is just decoration, hide it always by usingalt="'
andaria-hidden="true"
. - The
select tip
could be a heading tag or alegend
if you implemented using radio buttons but not alabel
. - Use
button
instead ofinput type="button"
. - Since you are using only
button
in here, you would need to have anaria-live
element that will announce the certainbutton
has been pressed or selected, becausebutton
alone is not informative. - Your custom-input tag lacks an associated
label
tag on it. Since there are visible-label, thelabel
would be a screen-reader only label, meaning it would make user of likesr-only
class. The text-content should describe what theinput
needs like the value on theplaceholder
. - The text
Tip Amount
andTotal
could use a heading tag since it describes what the section is about. - The resulting number is not a heading tag, because by making one, it doesn't convey any information right,
p
tag would be great. - Also, I almost forgot. A page must have a single
h1
on a page. Since there are no text-content that are visible that could beh1
, you will make theh1
screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search aboutsr-only
stylings and see how it is used. Theh1
text should describe what is the main content is all about, thish1
would be placed as the first text-content inside themain
element.Have a look at this simple snippet about screen-reader only h1 I already included comments in there^^.
Now, you might find yourself confused for some suggestions that I made but that's fine. if you can't implement those right away, that's fine, being aware of those is the important thing.
If you have any queries, just let me know okay. Aside from those, great job again on this one.
Marked as helpful - Avoid using
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