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.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Calculate the correct tip and total cost of the bill per person
- Solution URL: See how I code it
- Live Site URL: See live site here
- Semantic HTML5 markup
- CSS custom properties
- SASS & Dart
- BEM pattern
- Flexbox
- CSS Grid
- Mobile-first workflow
- Webpack
- Javascript
- JS modules
- JS Classes
I decided to use Webpack (which is a module bundler) for this project. This is my first one where I have done Webpack configuration all by myself (with some help of my Mentor, shoutout in credits!). Before that I used Babel for my projects. It is said Babel is much easier to install and to use than Webpack because, as I mentioned before, Webpack requires the user to get this sneaky configuration done, before even starting to code.
So for anyone interested you can take a look at the config file. To use Webpack you need to first download npm and install it along with webpack Command Line Interface. As mentioned before, to use Webpack we need to config it in webpack.config.js. To use developer mode I needed to get DevServer. Alright, ready to code! So I thought. But I still needed to get a compiler - so I got babel-core, babel/preset-env and babel-loader so all those new syntax can be understood by older browsers. Oh, and then I needed to get something that will copy my index.html file and add all those js files so I got HTML Webpack Plugin. In the middle of the project, I realized my source map is not correct (command lines in google tools didn't match those in my VSCode) so for this problem, I got Source map loader. Oh, and if you need your image file to be copied to the production file I can recommend getting Copy Webpack Plugin.
Alright! So I am done with describing HTML & JS part, let's move to compiling styles. Because I wanted to use SASS modules feature which is not supported by the old version of npm sass I had to get Dart Sass. @import in SASS will not be supported in the future so it is good to get a grip on Dart Sass already. To connect SASS files I used Sass loader. For from SASS to CSS compilation I used CSS loader and recommended CSS loader. Phuh, easy-peasy! For everyone who needs a shortcut, I can recommend getting Laravel Mix which is a simple, fluent API for dynamically constructing Webpack configuration. But for me this time it was extremely important to get to know Webpack on a good level.
In this project, I wanted as well use Javascript Classes. I had some experience using them but felt like I need some practice to get a better understanding of this concept.
I am planning to move to testing and React and then start coding projects from Frontend Mentor in React framework.
- Webpack - All documentation for webpack that might be needed while using it.
- How to configure Webpack from Scratch for a basic website - Very good article to start from when configuring Webpack for a project. Unfortunately, it does not cover Dart Sass as the article was written at the beginning of 2019.
- Dart Sass - documentation.
- Stop using @import with Sass | @use and @forward explained - by Kevin Powell.
- Stackoverflow: Why before & after pseudo elements does not work on an input field - if anyone wonders.
- Customize radio buttons
- Github - Axseinga
- Frontend Mentor - @Axseinga
- LinkedIn - @Agnieszka Urbanowicz
Thanks to my Mentor for helping me out with all Webpacks problems! Big thanks to Tediko for all comments and helping me out with refactoring the code! :)