Day 171: FCC, Calculator Project

All right, today I'm starting on the FCC Calculator Project by reading several articles exploring the various ways to build a calculator project.  The code to do so is already out there on the net, so the main focus of this exercise, for me anyhow, is to truly understand how to build a calculator in JavaScript.  That is, to be able to do so myself, from scratch.  
The key is to truly learn every part of the code so that I understand exactly what's going on and am able to apply the lessons learned to future projects.  That's my focus for this day in my life.  Also, I want to get to crack the 800 hour mark today, I'm at 795 hours of coding studied so far.  So close!

So, this is what I have so far:

<div id="calcFrame"><form>
  <div id="calcScreenDiv"><input id="calcScreen" name=display placeholder="0"></input></div>
    <table id="buttonsDiv">
      <tr>
        <td><button type="button" onclick="display.value = ">AC</td>
        <td><button type="button">CE</td> 
        <td><button type="button">%</td>
        <td><button type="button">/</td>
      </tr>
      <tr>
        <td><button type="button" onclick="display.value += '7'" value="7">7</td>
        <td><button type="button" onclick="display.value += '8'">8</td> 
        <td><button type="button" onclick="display.value += '9'">9</td>
        <td><button type="button">x</td>
      </tr>
      <tr>
        <td><button type="button" onclick="display.value += '4'">4</td>
        <td><button type="button" onclick="display.value += '5'">5</td> 
        <td><button type="button" onclick="display.value += '6'">6</td>
        <td><button type="button">-</td>
    </tr>
    <tr>
        <td><button type="button" onclick="display.value += '1'">1</td>
        <td><button type="button" onclick="display.value += '2'">2</td> 
        <td><button type="button" onclick="display.value += '3'">3</td>
        <td rowspan="2"><button type="button">+<br><br><br></td>
    </tr>
    <tr>
        <td><button type="button">0</td>
        <td><button type="button">.</td> 
        <td><button type="button">=</td>
    </tr>
  </table>

</div>

And here's a pic!

The calculator looks fine, and it can pass some values to the screen, but it can't do calculations yet.

I got the reset button to work!  Here's the code I added/changed!  

<div id="calcFrame"><form>
  <div id="calcScreenDiv"><input id="calcScreen" name=display placeholder="0"></input></div>
    <table id="buttonsDiv">
      <tr>
        <td><input type="reset" value="AC" id="resetButton"></td>
        <td><button type="button">CE</td> 
        <td><button type="button">%</td>
        <td><button type="button">/</td>

      </tr>

Neat, huh?  I'm stoked, little by little, I'm putting it together!  Hmmmm...I just noticed that display has no quotes around it.

Ok, I had a bug, and I finished fixing it now.  The calculator works now.  Here's what I have so far:

<div id="calcFrame"><form>
  <div id="calcScreenDiv"><input id="calcScreen" name="display" placeholder="0"></input></div>
    <table id="buttonsDiv">
      <tr>
        <td><input type="reset" value="AC" id="resetButton"></td>
        <td><button type="button" onclick="removeLast(calcScreen)">CE</td> 
        <td><button type="button" onclick="display.value += '%'">%</td>
        <td><button type="button" onclick="display.value += '/'">/</td>
      </tr>
      <tr>
        <td><button type="button" onclick="display.value += '7'">7</td>
        <td><button type="button" onclick="display.value += '8'">8</td> 
        <td><button type="button" onclick="display.value += '9'">9</td>
        <td><button type="button" onclick="display.value += '*'">x</td>
      </tr>
      <tr>
        <td><button type="button" onclick="display.value += '4'">4</td>
        <td><button type="button" onclick="display.value += '5'">5</td> 
        <td><button type="button" onclick="display.value += '6'">6</td>
        <td><button type="button" onclick="display.value += '-'">-</td>
    </tr>
    <tr>
        <td><button type="button" onclick="display.value += '1'">1</td>
        <td><button type="button" onclick="display.value += '2'">2</td> 
        <td><button type="button" onclick="display.value += '3'">3</td>
        <td rowspan="2"><button type="button" onclick="display.value += '+'">+<br><br><br></td>
    </tr>
    <tr>
        <td><button type="button" onclick="display.value += '0'">0</td>
        <td><button type="button">.</td> 
        <td><button type="button" onclick="display.value = eval(display.value)">=</td>
    </tr>
  </table>
  </form>

</div>

I'm woking on the CE button.  It's supposed to remove the last entry, as opposed to AC, which removes every entry, resetting the display field.  It would be pretty neat if I could finish it today.

I finished the project.  Here's the final code, well, the final rough draft, there may be a loose end here and there!

<div id="calcFrame"><form>
  <div id="calcScreenDiv"><input id="calcScreen" name="display" placeholder="0"></input></div>
    <table id="buttonsDiv">
      <tr>
        <td><input type="reset" value="AC" id="resetButton"></td>
        <td><button type="button" id="clearLast">CE</td> 
        <td><button type="button" onclick="display.value += '%'">%</td>
        <td><button type="button" onclick="display.value += '/'">/</td>
      </tr>
      <tr>
        <td><button type="button" onclick="display.value += '7'">7</td>
        <td><button type="button" onclick="display.value += '8'">8</td> 
        <td><button type="button" onclick="display.value += '9'">9</td>
        <td><button type="button" onclick="display.value += '*'">x</td>
      </tr>
      <tr>
        <td><button type="button" onclick="display.value += '4'">4</td>
        <td><button type="button" onclick="display.value += '5'">5</td> 
        <td><button type="button" onclick="display.value += '6'">6</td>
        <td><button type="button" onclick="display.value += '-'">-</td>
    </tr>
    <tr>
        <td><button type="button" onclick="display.value += '1'">1</td>
        <td><button type="button" onclick="display.value += '2'">2</td> 
        <td><button type="button" onclick="display.value += '3'">3</td>
        <td rowspan="2"><button type="button" onclick="display.value += '+'">+<br><br><br></td>
    </tr>
    <tr>
        <td><button type="button" onclick="display.value += '0'">0</td>
        <td><button type="button" onclick="display.value += '.'">.</td> 
        <td><button type="button" onclick="display.value = eval(display.value)">=</td>
    </tr>
  </table>
  </form>
</div>

And the CE button works now, it deletes the last entry.  It does so via the use of this JQuery code:

$('#clearLast').on('click',function () { 
    //get the input's value
    var textVal = $('#calcScreen').val();
    //set the input's value
    $('#calcScreen').val(textVal.substring(0,textVal.length - 1));

});

This is awesome.

Here's the final pic, although it looks the same, haha:

And I'll wrap it up there for the day.  Coding is awesome.  :)

I cracked 800 hours today.  Closing the day out at 801 hours.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,503
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
JavaScript:                      1,239

Treehouse Ranking (%): "You have more total points than 93% of all students."

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers 

Completed: "HTML and CSS," by Jon Duckett
Completed: "JavaScript and JQuery," by Jon Duckett

My Progress on The Odin Project:

1.  Introduction to Web Development                                             100% Complete

2.  Web Development 101                                                               33% Complete 
Note: I switched to FCC for the great online community and better updates/support.

My Progress on Free Code Camp (FCC): 
1. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                           Complete
5. jQuery                                                                                              Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                   Complete
9. Basic Front End Development Projects                                                 On 5 of 5
10. Intermediate Algorithm Scripting                 On 4 of 21 (#13 and #14 also done)
11. JSON API's and Ajax
12. Intermediate Front End Development Projects
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate

After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.

Hours Spent Coding Today: 6

Total Hours Coding: 801