Skip to content

Latest commit

 

History

History
38 lines (32 loc) · 1.56 KB

README.md

File metadata and controls

38 lines (32 loc) · 1.56 KB
Raw

Frontend Mentor - Tip calculator app solution

demo

This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

The challenge

The most difficult thing to do in this project was to copy 1: 1 look (as much as I can) of original project. I think this case is done good by me :)

Screenshot

comparasion of original project and my

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Webpack

What I learned

Most usefull thing that I learned was using webpack (i created my own "starter" package.json). Also I re-called many event listeners. New think for me was also "caret-color" in CSS (btw. super usefull <3).

input {
  caret-color: transparent;

  &::placeholder {
    color: green;
  }

  &:focus::placeholder {
    color: transparent;
  }
}

Just by writing code above now your input have "|" transparent and it's placeholder has a different color and so more when user clicks, placeholder disappears.

Acknowledgments

Frontend Mentor for bringing project and Kevin Powell for mentioning up in his videos about Frontend Mentor.

Author Adam Zajler