Skip to content
Submitted about 1 year ago

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

#accessibility#sass/scss#tailwind-css#lighthouse
P
Daniel 🛸•44,770
@danielmrz-dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

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-MaartmesriniPosted about 1 year 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

    1
    P
    Daniel 🛸•44,770
    @danielmrz-devPosted about 1 year ago

    @Ahmad-Maartmesrini

    Thanks! I'm glad you liked it!

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

    1

Please log in to post a comment

Log in with GitHub

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