Create a small web-based calculator that takes personal data as input, processes it using a formula of your choice, and displays output.
This task will help you understand:
- Variables
- Conditional logic (
if/else) - Input → Process → Output flow
You are free to choose the type of calculation, but it should be realistic, measurable, and meaningful.
- HTML — for form inputs and output display
- CSS — for styling and layout
- JavaScript — for logic, calculations, and output
Your calculator should take at least two inputs from the user. Examples:
- Weight & height → BMI
- Power & hours → Electricity cost
- Distance & time → Pace
- Any other real-world values you choose
You are encouraged to think creatively. Inputs should be measurable and realistic.
Your JavaScript must:
- Store input values in variables
- Perform at least one calculation
- Use if/else conditions to classify or interpret results
- You may define your own calculation formula, or use a known index like BMI
Your page must:
- Display output directly in HTML (not just console)
- Include a personalized message (e.g., “Hello, [Name]”)
- Show calculated value(s)
- Show category or interpretation if relevant
- Fork this repository
- Create a new branch:
- Complete your assignment in the four files:
index.htmlstyle.cssscript.jsREADME.md(update with your description or notes if needed)
- Commit & push your branch to your GitHub fork
- Be ready for an oral explanation of your solution
During the oral assessment, you should be able to explain:
- What each input represents
- How calculations are done
- How conditional logic determines categories
- What happens if inputs are unusual
- How binary or optional output is calculated
⚠️ Important AI Guidance:
You may use AI tools for suggestions or syntax help, but you must fully understand and be able to explain every line of your code.
The logic, calculations, and outputs must be your own work — AI is a helper, not a replacement.
- You may choose a different calculation than BMI, Electricity, or Pace
- You may add extra outputs or optional features
- You may style your page creatively
The goal is computational thinking, problem-solving, and clear input → process → output understanding.
index.html→ form placeholder for user inputs and outputstyle.css→ styling for the pagescript.js→ JavaScript file for calculations and logicREADME.md→ clear explanation of your project and description of your solution