- Follow this tutorial from
mmtuts and refactor your finished code into the files of this repository. Be sure to organize your development process using Git Branches
- To learn more about how to organize your code & how to write development-strategies for this project, you can study the using-user-input exercises
- And of course, don't be limited by the tutorial! It's just a starting point. After making the base project work, follow your imagination
A simple program that allows users to add, subtract, divide and multiply two numbers.
| tag name |
attributes |
role |
<section> |
id='user-interface' |
the section that contains all user interface elements |
<form> |
id="calculator" class="forma" |
the form that allows us to handle user's input |
<input> |
<input type="text" id="value1" name="value1" |
this is text field for the first number |
<input> |
<input type="text" id="value2" name="value2" |
this is text field for the second number |
<select> |
id="operator |
this drop-down menu allows user to select desired math operation |
<option> |
value="add" |
this option describe add action |
<option> |
value="min" |
this option describe subtract action |
<option> |
value="div" |
this option describe divide action |
<option> |
value="mul" |
this option describe multiply action |
<button> |
type="button" id="calculate" class="button" |
this button activate the calculation process and display the result. |
| class name |
description |
role |
.forma |
sets position & font styling for <form> |
make input form more user-friendly |
.button |
sets button with specific margin around it |
make button more visible |
.result |
sets parameters of output field |
make output value more visible |
| type |
attached to |
callback |
'click' |
id='calculate' |
calculateHandler |
| syntax |
parameters |
return value |
behavior |
calculateHandler(event) |
Event: a user-triggered event |
Boolean: should the browser continue as normal? |
reads numbers and operation user filled in and return the correct result: passes input through core logic, renders result for user, logs action for developer, and alerts the browser 'OK' |
| syntax |
parameters |
return value |
behavior |
doMath(operation, a, b) |
operation(String) and a,b(Number) |
Number |
it takes a and b and executes math operation prescribed by operation |