Tip calculator

Community feedback

• 

  Dev Rathore•2,540

  @GitHub-dev12345

  Posted over 3 years ago

  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;

  12

  Marked as helpful
• Account deletedPosted over 3 years ago

  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

  10

  Marked as helpful
• 

  Anton Sukhadolets•330

  @SuhodolecA

  Posted over 3 years ago

  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%);
  

  }

  3. <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!

  00