Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

html css and js

@AminaArif0005

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


this is my second challenge. Please review my website and provide some feedback on CSS and js code.

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hey! @AminaArif0005, Great job on this challenge, Your site responds pretty well. Here are my suggestions:

  • The reset button needs to inactive by default and should be activated once the user inputs values. you can use the "input" event listener to achieve this.
  • You're missing the box-shadow. Use this box-shadow: 0px 32px 43px rgba(79 166 175 / 20%);.

That is all. Hope this helps :)

P.S. Why did you use a heading tag as the logo instead of the SVG? I'm curious.

Marked as helpful

1

@AminaArif0005

Posted

@buneeIsSlo totally missed the logo now I have seen it because you mentioned it and it would have been far much easier. As for using the heading someone in my previous challenge mentioned that there should be one h1 heading on a page of the website so I thought I should use h1 this way and by the way I have made the changes according to your suggestions.

1
bunee 2,060

@buneeIsSlo

Posted

@AminaArif0005 "totally missed the logo" Yup I've done this too XD. It looks like you've deleted the images folder hence the logo doesn't load, I'm sure you can fix that. Keep Coding!

0

@AminaArif0005

Posted

@buneeIsSlo thnx for mentioning I just added it back. happy coding to you too!.

1

@muhammadshajjar

Posted

@AminaArif0005 hello, I think I created a misconception in your mind by asked to use one h1 per page or you took it as a misconception by putting your logo into h1 xD. So here are some explanation about using it,

  • Just remember that your h1s are used to indicate context, not layout.
  • Semantically, I prefer using one h1 on the page, mainly for the title of the page, so as for there is not any visible tittle of the page which you would apply h1, As I , WE know that this is A tip calculator App but for those who are visually impaired, they can not see the screen, so how they will know this is a Tip calculator app ?? .

here is the solution for it..

HTML
<h1 class=sr-only>Tip calculator app </h1>
CSS
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

This link would help you Invisible Content Just for Screen Reader Users

Hope it would helps you :)

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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