Deployed Version: http://kytramintbean.us-west-2.elasticbeanstalk.com/#/stalks
$25 CAD Amazon gift card + bragging rights.
Tip: Read the [General Information Document]("./General\ Information.md") for more info on how to get started and submit.
Interactive calculators are a beautiful way to inform, entertain, and educate people. Some of them are very beautiful, featuring graphs, charts, and animations. Many of them are simple, practical, and pragmatic. They find uses in marketing, engineering, finance, medicine -- pretty much every field. At some point in their careers, most developers have been involved in a calculator project or two.
Here are some examples of interesting interactive calculators. Notice that they all vary in feature sets, functionality, objective, and scope. Some of them focus on beauty and aesthetics, while others focus on practicality and simplicity.
- https://goodcalculators.com/meat-cooking-time-calculator/
- https://www.bills.com/debt/tools/ways-to-save
- https://paulhoughton.github.io/mortgage/
- http://www.diablo3gemcalculator.com/
- https://calculator.numerologist.com/
Today's objective is to create a simple interactive calculator of your own design.
Create an interactive calculator!
The design can be of your own choosing, and so this project is very open-ended. Here are some suggestions:
Tip: Make sure you choose an EASY problem! You only have 2h15m to finish while also writing clean code.
Take a restaurant bill and calculate how much tip you have to add on top of it. Easy peasy!
Inputs: bill amount, tip percentage Outputs: tip amount, grand total
Take a restaurant bill and split it between a number of parties.
Inputs: bill amount, number of parties. Outputs: amount of money each party has to pay
To make it more fun, you can maybe create some kind of way to assign greater or lower ratios of the bill to different parties.
Create a growth chart that tells you how fast a number will grow over time, given a growth rate.
Input: initial number, growth rate Output: a chart or table that shows you how much the number has grown over time.
You can create something cooler if you wish. Please don't copy/paste old projects, though -- write from scratch, even if you're inspired by the old project :-)
You must be able to deploy your project online. Your project must use JavaScript.
There are no other restrictions.
- Templated HTML
- React
- Vue
- Angular
- Pure Express API - see StackOverflow link in "Library Suggestions" below
Avoid D3.js unless you're already experienced at it. D3 is very powerful for custom graphs, but has an extremely steep learning curve, making it unsuitable for this project.
Good libraries to use:
- Google Charts - https://developers.google.com/chart
- Plotly - https://plotly.com/javascript/plotly-fundamentals/
- ChartJS - https://www.chartjs.org/
- If you're using strictly backend, see https://stackoverflow.com/questions/44543729/how-to-render-a-graph-as-image-in-node. We have not tested any of these suggestions, but Vega looks great so far.
- The project is intentionally simple so you can focus on code quality.
- The requirements are intentionally minimalistic so you can get as creative as you'd like.
- You get a LOT of time for code review comments. So you can win even if you feel your project isn't great, simply on the strength of your code review comments!
- Keep in mind, 33% of your score is based on aesthetic appeal! So try to make it look nice.