1 / 10

Micro Contributions

Micro Contributions. spec: - an html/javascript calculator todo: - think of some todo items. <html> </html>. spec: - an html/javascript calculator todo: - think of some todo items - think of how you want the calculator to look - do we want modes? - think about how to implement that.

stacy-crane
Download Presentation

Micro Contributions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MicroContributions

  2. spec: - an html/javascript calculator todo: - think of some todo items <html> </html>

  3. spec: - an html/javascript calculator todo: - think of some todo items - think of how you want the calculator to look - do we want modes? - think about how to implement that <html> </html>

  4. spec: - an html/javascript calculator todo: - think of some todo items - think of how you want the calculator to look - do we want modes? - think about how to implement that -organize the buttons and text area to look like a calculator (probably in a table) done: - made some buttons and a text area <html> <div id=calculator> <textarea rows="1" col="20"></textarea> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button>0</button> <button>+</button> <button>-</button> <button>x</button> <button>/</button> </div> </html>

  5. spec: - an html/javascript calculator todo: - think of some todo items - think of how you want the calculator to look -write some CSS - do we want modes? - think about how to implement that -organize the buttons and text area to look like a calculator (probably in a table) done: - made some buttons and a text area <html> <div id=calculator> <textarea rows="1" col="20"></textarea> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button>0</button> <button>+</button> <button>-</button> <button>x</button> <button>/</button> </div> </html>

  6. spec: - an html/javascript calculator todo: - think of some todo items - think of how you want the calculator to look -write some CSS - do we want modes? -define modes - think about how to implement that -organize the buttons and text area to look like a calculator (probably in a table) done: - made some buttons and a text area <html> <div id=calculator> <textarea rows="1" col="20"></textarea> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button>0</button> <button>+</button> <button>-</button> <button>x</button> <button>/</button> </div> </html>

  7. spec: - an html/javascript calculator todo: - think of some todo items - think of how you want the calculator to look -write some CSS - do we want modes? -define modes - think about how to implement that -organize the buttons and text area to look like a calculator (probably in a table) - improve the positioning of the buttons done: - made some buttons and a text area <html> <div id=calculator> <textarea rows="1" col="20"></textarea> <table> <tr> <td> <button>1</button> </td> <td> <button>2</button> </td> <td> <button>3</button> </td> </tr> <tr> <td> <button>4</button> </td> <td> <button>5</button> </td> <td> <button>6</button> </td> </tr> <tr> <td> <button>7</button> </td> <td> <button>8</button> </td> <td> <button>9</button> </td> </tr> <tr> <td> <button>0</button> </td> <td> <button>+</button> </td> <td> <button>-</button> </td> </tr> <tr> <td> <button>x</button> </td> <td> <button>/</button> </td> <td> </td> </tr> </div> </html>

  8. spec: - an html/javascript calculator todo: - think of some todo items make the button have the effect do the calculation show the result - think of how you want the calculator to look -check the result is correct -write some CSS to change the outlook -align the result to the correct position - do we want modes? -define modes - think about how to implement that -organize the buttons and text area to look like a calculator (probably in a table) - improve the positioning of the buttons done: - made some buttons and a text area <html> <div id=calculator> <textarea rows="1" col="20"></textarea> <table> <tr> <td> <button>1</button> </td> <td> <button>2</button> </td> <td> <button>3</button> </td> </tr> <tr> <td> <button>4</button> </td> <td> <button>5</button> </td> <td> <button>6</button> </td> </tr> <tr> <td> <button>7</button> </td> <td> <button>8</button> </td> <td> <button>9</button> </td> </tr> <tr> <td> <button>0</button> </td> <td> <button>+</button> </td> <td> <button>-</button> </td> </tr> <tr> <td> <button>x</button> </td> <td> <button>/</button> </td> <td> </td> </tr> </div> </html>

  9. spec: - an html/javascript calculator todo: - need to decide on full set of operations (right now only basic ops) - need to decide reverse polish notation vs. standard notation - make the buttons have some effect - do the calculation - show the result - decide on look & feel (currently minimal) - not sure what the below items are: -check the result is correct -write some CSS to change the outlook -align the result to the correct position - do we want modes? no -organize the buttons and text area to look like a calculator (probably in a table) - improve the positioning of the buttons done: - made some buttons and a text area <html> <head> </head> <script> // TODO state of calculator // e.g. store previous number when operation is clicked // TODO functions to implement calculator function handle(something) { alert(something); // TODO handle the click } </script> <body> <div id=calculator> <textarea rows="1" col="20"></textarea> <table> <tr> <td> <button onclick="handle(1);">1</button> </td> <td> <button>2</button> </td> <td> <button>3</button> </td> </tr> <tr> <td> <button>4</button> </td> <td> <button>5</button> </td> <td> <button>6</button> </td> </tr> <tr> <td> <button>7</button> </td> <td> <button>8</button> </td> <td> <button>9</button> </td> </tr> <tr> <td> <button>0</button> </td> <td> <button>+</button> </td> <td> <button>-</button> </td> </tr> <tr> <td> </td> <td> <button>x</button> </td> <td> <button>/</button> </td> </tr> </div> </body> </html>

  10. Michael spec: - an html/javascript calculator todo: - need to decide on full set of operations (right now only basic ops) - need to decide reverse polish notation vs. standard notation - make the buttons have some effect - do the calculation - show the result - decide on look & feel (currently minimal) - pow function to deal with negative powers - not sure what the below items are: -check the result is correct -write some CSS to change the outlook -align the result to the correct position - do we want modes? no But lots of calculators have temporary modes, e.g. a 2nd or 3rd function button that modulates the characters. Maybe we should follow the typical approach? -organize the buttons and text area to look like a calculator (probably in a table) - improve the positioning of the buttons done: - made some buttons and a text area <html> <head> </head> <script> // TODO state of calculator // e.g. store previous number when operation is clicked // TODO functions to implement calculator function handle(something) { alert(something); // TODO handle the click } function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } function pow(x, powNum) { if (powNum == 0) return 1; else { return x * (pow(x, powNum-1)); } } </script> <body> <div id=calculator> <textarea rows="1" col="20"></textarea> <table> <tr> <td> <button onclick="handle(1);">1</button> </td> <td> <button>2</button> </td> <td> <button>3</button> </td> </tr> <tr> <td> <button>4</button> </td> <td> <button>5</button> </td> <td> <button>6</button> </td> </tr> <tr> <td> <button>7</button> </td> <td> <button>8</button> </td> <td> <button>9</button> </td> </tr> <tr> <td> <button>0</button> </td> <td> <button>+</button> </td> <td> <button>-</button> </td> </tr> <tr> <td> </td> <td> <button>x</button> </td> <td> <button>/</button> </td> </tr> </div> </body> </html>

More Related