Frontend Mentor - Tip Calculator App 🎯💡📊

Check the demo

This is my implementation of the Tip Calculator App challenge from Frontend Mentor. The goal was to create an interactive tip calculator that accurately replicates the appearance and functionality of the original design. 🏆✨📱

Challenge 🎯🚀🔍

The biggest challenge in this project was accurately reproducing the look and behavior of the application. I believe I have achieved this goal, and I am satisfied with the final result. ✅💪😊

Technologies 🛠️📜⚡

The project was built using:

• TypeScript
• ESBuild
• HTML5
• SCSS (Mobile-first workflow)
• Flexbox & CSS Grid

What I Learned 📚🎓🖥️

While working on this project:

• I created my own starter with package.json for ESBuild,
• I reviewed and reinforced my knowledge of various event listeners in JavaScript,
• I discovered the CSS caret-color property, which allows changing the cursor color in an input field. ✍️🎨🔍

input {
    caret-color: transparent;

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

Thanks to this, the placeholder disappears when the input field is active, and the cursor remains invisible. 🧐🎯✅

Acknowledgments 🙌🎉👏

Thank you to Frontend Mentor for providing the project and Kevin Powell for inspiring CSS content. 🎥💡❤️

Author ✍️👨‍💻🌟

Adam Zajler