Submitted 10 months ago

Tip Calculator App

Jan Kotvaš•360

@DrakeHermit

Preview site View code

This is a solution for...Tip calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned a ton working on this challenge, and I really tested my knowledge with applying either submit or reset state based on the situation. Is it a perfect solution not by a long shot, but I am actually proud of myself for being able to make it work the way I wanted it to work. I also learned that by writing CSS poorly you will end up with a lot of !important statements, but that is something I'm going to keep an eye on in the next challenges I work on. CSS wise even though it's not perfect it looks decently good.

What challenges did you encounter, and how did you overcome them?

I encountered quite a bit of challenges considering the fact this was my first time working on such a challenge. But I overcame all the obstacles by either googling what I didn't know or by asking chatgpt a general question that would then lead me to the correct solution. I never ask chatgpt to solve a problem for me because that is definitely not a way to learn.

What specific areas of your project would you like help with?

I would love if someone reviewed my code, not just JS though. I am doing my best but I know for a fact that there are a lot of features I am not aware of that can help me out structure my code better.

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,780
@danielmrz-dev
Posted 10 months ago
Hello @DrakeHermit!

Your solution looks excellent!

I have just one suggestion:

📌 Make sure you add min-height: 100vh and justify-content: center to the body to place the card in the middle of the page. Like this:
```
body {
    min-height: 100vh; /*  Add this line ✅  */
    display: flex;
    flex-direction: column; /*  Add this line ✅  */
    justify-content: center;
    align-items: center;
    background-color: var(--light-grayish-cyan);
    font-family: 'Space Mono', sans-serif;
}
```
I hope it helps!

Other than that, great job!
Marked as helpful

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