Submitted 8 months ago

Tip Calculator (SASS + JavaScript + Tailwind) + Custom Colors and Font

Daniel 🛸• 44,230

@danielmrz-dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Tip calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello! I'm Daniel and this is my solution for this challenge! 😊

⚒️ Built with:

HTML
SASS
Tailwind
JavaScript
mobile first workflow approach

🛸 Features:

Custom Colors and Font-Family 🎨
Responsive layout using mobile first workflow approach 📲
Added a calculate button so the result only appears after you input the numbers and click on it 🔽

Another very good challenge to practice JavaScript logic. It's been a few weeks since I finished this one... I hadn't yet learned know how to use classList.add/remove/toggle, so the code is much bigger than necessary. But I'll leave that way cause I intend to revisit it in the future and do it again using other techniques and technologies that I'm studying.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Community feedback

Ahmad Maartmesrini• 120

@Ahmad-Maartmesrini

Posted 8 months ago

I love purple 💜 your design looks awesome, I think they used the green color here for this reason 💵 did you forget to update the readme file? it features the green design

Daniel 🛸• 44,230

@danielmrz-dev

Posted 8 months ago

@Ahmad-Maartmesrini

Thanks! I'm glad you liked it!

Yeah, I didn't updated it... totally forgot 😅

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord