This is an open-ended assignment for you to practice the skills you've learned so far in order to make a custom calculator application.
This assignment will reinforce core concepts used in programming with JavaScript. You'll get a chance to practice using Flex Box, CSS styling, querySelector, and event listeners in JavaScript.
Your goal is to make a calculator application to calculate a result using a custom formula. Here is an example of a calculator that evaluates the side lengths & angles of a triangle using mathematical theorems. Your calculator must have a theme & meaningful purpose.
Your site must have the following features:
- Include base HTML code (doctype, html, head, body tags)
- Use Flex Box for positioning the calculator elements
- CSS styles - Use at least 6 styles to make your calculator look presentable. for example:
- font-size, font-family, margin, padding, border, color, background-color etc.
- Uses form with at least 3 inputs
- One of those inputs must be a select dropdown
- Uses all of the inputs to calculate the result
- Result is calculated whenever an input field is modified
If you need an idea for a project, here are a few:
- Geometric Shapes Volume Calculator - Calculate the volume of a cone, sphere, or cylinder by inputting their dimensions! You can use the formulas here to get you started.
- You might use the select menu to choose the shape.
- Inputs might be length, width, height, diameter, etc.
- Trip Calculator - How long will it take to get from a starting point to a destination, based on your mode of transportation, time of day, etc?
- You might use the select menu to choose miles or kilometers
- Inputs might be distance in miles, miles per gallon, ...
- Pet Calculator - How many cats/dogs should you own, based on things like your floor space, number of family members, & amount of free time?
- You could the select menu to choose a pet type.
- inputs might be number of pets, free time, available area, ...
- Pokemon Calculator - How much damage will a particular Pokemon move do, based on the Pokemon types, strength, defense, etc? If you want, check out this Bulbapedia article on calculating damage.
- Use the selecto menu to choose the Pokemon, or the type.
- Inputs might be: attack, defense, HP, power
No starter code for this one! However, if you are having trouble getting started, we would encourage you to use your Tip Calculator assignment code as starter code.
Push your work to a GitHub repo, and then submit the repo to Gradescope!
After completing the homework to the description above try these stretch challenges:
- Publish your work to GitHub Pages
- Create a README for your repo
- Document your code with comments
- Set some CSS styles via JS based on the calculation
- For example: choosing a type (air, fire, water, etc.) might change the background color.
Class 14, Tue Oct 6
| Expectations | Does not meet | Meets | Exceeds |
|---|---|---|---|
| Completion | Your work is not complete, doesn't meet the description provided above. | Your page is complete, and meets the description of the assignment | Besides meeting requirements in the base assignment you have tackled one or more of the stretch challenges outlined in the assignment and or adds new features of your own invention not described above. |
| Code Quality | Your code is sloppy and lacks organization. Naming of variables and functions is unintuitive. Formatting is inconsistent. | Your code uses consistent indentation, spacing, and consistent coding style. Names are well chosen and self documenting. | Your code passes validation, runs without errors or warnings. |
| Design | Your design does not inspire you | Your design inspires you | Your design inspires others |