Tip calculator

Congratulation 🚀😁 complete your challenge. Used this code want your card in center position :

in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

in Card Design CSS Code used this property: align-self: center;

Hello there! 👋

Congratulations on finishing your challenge! 🎉

I have some feedback on this solution:

• Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info
• Form elements must have labels
• add to the reset button cursor:pointer; so that the users know its clickable

i hope this is helpful and goodluck

Hello! Not a bad solution! Also, I have some tips for improving your result:

1)For left-side p, use "font-weight" property and another "color". This will make your solution look more like a layout. And reduce padding till 5px;

For example:

.left-side p {

padding: 0 0 5px;
margin-top: 20px;
font-weight: 700;
color: hsl(186, 14%, 43%);

}

2)When I click .input-num all things inside twitch. It happens so you change the input side by adding a border. You can fix this, but you need to change your approach. Add a border to this input in general styles and set "color": transparent and then change only color but not border. Then use :hover and :focus pseudo-classes for triggering. And add "transition property for smooth animation", add this property for all elements where you want smooth animation. Also add "cursor":pointer.

For example:

.input-num {

border-radius: 5px;
min-height: 30px;
text-align: right;
font-family: "Space Mono", sans-serif;
background-color: hsl(185, 41%, 84%);
border: 1px solid transparent; 
transition: all 0.3s linear;
cursor: pointer;
padding: 5px;

}

.input-num:hover {

border-color: hsl(172, 67%, 45%);

}

.input-num:focus {

border-color: hsl(172, 67%, 45%);

}

1. <input class="input-num" type="number" id="bill-num" value="0" onchange="getBill(this)" />

Replace value = 0 on placeholder="0" and add style using pseudo-class :placeholder;

For example:

<input class="input-num" type="number" id="bill-num" placeholder="0" onchange="getBill(this)" />

4)You can hide arrows in .input-num using next code:

.input-num::-webkit-inner-spin-button { -webkit-appearance: none; }

That is only part of the changes but if you use this your solution will be better!

You are doing well, have a good day!