Skip to content
Submitted 4 months ago

Tip Calculator App

Jan Kotvaš•290
@DrakeHermit
Preview site (opens in new tab)View code (opens in new tab)
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.

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 4 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
    1
    Jan Kotvaš•290
    @DrakeHermitPosted 4 months ago

    Hello @danielmrz-dev

    Thanks a lot for the suggestion, I kinda forgot to add that part, I only realized after submitting the solution.

    I'll make sure to go over your github because I have a feeling I will learn a lot from you.

    1

Please log in to post a comment

Log in with GitHub

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