README.md

Tip calculator app

Hi! This is my solution to the Tip calculator app challenge on Frontend Mentor.

Live Site URL

https://buneeisslo.github.io/tipCalculatorApp/

Built with

• Not so semantic HTML5 markup
• CSS
• Mobile first workflow
• Javascript
• Node.js
• Webpack
• Anime.js

What I learned

• Basics of Node.js
• Webpack and some of its helplful plugins
• Importing and exporting javascript files
• How to effectively use the data tag in HTML
• Animating SVGs with Anime.js
• Tips and Tricks
  • Align text to right using direction: rtl to be able to use the text-indent property. Credit: Stackoverflow Answer
  • One way to achieve curved outline on inputs, box-shadow: 1 1 1 1pt green. Credit: Stackoverflow Answer
  • Focus can be added to a div element using tabindex. eg: tabindex=0
  • A button element can be disabled using the :disabled pseudo class
  • Manipulate a dynamically linked SVG using getSVGDocument() method

Resources

• Video tutorial on creating SVG text stroke animation using anime.js
• Website to create beautiful CSS background patterns
• Video tutorial on getting started with webpack 5
• Video tutorial on creating the Toggle theme animation using anime.js
• Useful stackoverflow thread related to getSVGDocument method

Acknowledgement

1. I'd like to thank @tediko for writing clean and understandable code. This solution from him was extremely vital in coding my application.
2. Shout out to @Syafiqjos. I found a very useful trick to limit user input from His solution to the same challenge.