Tip calculator app

Hi, cool result! The app looks very close to the design and is totally responsive. I had a chance to test it and noticed some details that can be improved to make it look even better 🙂

First of all, as a user, I couldn't figure out how I should get the result of the calculations. Surely, in the end, I pressed the RESET button and there it was😅 However, the name of the button is too misleading; People like me will expect the Reset button to clear the inputs but not to provide them with the result of the calculations. I suggest that you'd better either rename the button to "Calculate" or write a function that will display the result automatically whenever all the inputs are filled in and also another function that will clear all the inputs whenever the Reset button is pressed.

Then there is a slight shift in the layout when a user hovers over the inputs. This happens because you add a 2px border for hover while the initial element doesn't have this border. So this additional border on hover makes the input 4px larger and correspondingly forces the elements under it to move down. You can use an outline instead of a border. An outline doesn't influence the layout.

Just instead of

.precent:hover,
.result-card button:hover,
input:hover {
border: 2px #5ea89f solid;
}

use

.precent:hover,
.result-card button:hover,
input:hover {
outline: 2px #5ea89f solid;
}

So, these are all my ideas. Thanks for attention and happy coding 🙂