Day 189: FCC, "Wikipedia Viewer" and AJAX Basics on Treehouse

Today I'm continuing my work on the Wikipedia Viewer project.  I made a breakthrough yesterday, and the rest should be pretty straightforward, working with the API itself, instead of with debugging code.

All right, it turns out it was not pretty straightforward to work with Wikipedia's API, so I'm still hacking away at this.

Also, I renewed my Treehouse subscription, and I'll be taking courses on there that cover the same topics I'm covering at FCC.  The one I'm currently taking is called "AJAX Basics," and my goal is to get a deeper understanding of working with API's by taking this course, so as to be better prepared to complete the API projects on FCC.

I'm going over XML, JSONP, and JSON right now.  The video also talked about CORS and JSONP as ways to get around some of AJAX's limitations.  I worked with something similar to this:

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }

And then the send() at the end.  

I put in about another 3 hours of work today, and I made some progress, but this challenge does feel like I'm going around in circles.  This is one of the drawbacks of self-teaching, if you know what you don't know, then you know what to read to get up to speed, but often times, you don't know what you don't know, and then this leads to a wall in front of which you go in circles.  That's when you should probably reach out for help.

In any case, every day I'm so glad I was accepted to the UT Boot Camp, because in a traditional schooling format, there is no way that a teacher would spend two months, for example, on one problem.  That's thousands of dollars of wasted effort, when, having the teacher available to us, we could be guided in the right direction when we get stuck.

So it is what it, self-teaching has many positives, but it also has some massive pitfalls, one is that it is only free if your time is worthless.  If you value your time, then that changes the calculations.

I worked with this code today (from Treehouse):

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var employees = JSON.parse(xhr.responseText);
    var statusHTML = '<ul class="bulleted">';
    for (var i=0; i<employees.length; i += 1) {
      if (employees[i].inoffice === true) {
        statusHTML += '<li class="in">';
      } else {
        statusHTML += '<li class="out">';
      }
      statusHTML += employees[i].name;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', '../data/employees.json');

xhr.send();

It uses AJAX to get some data and manipulate it.  The final result was like this (again, from Treehouse):

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var employees = JSON.parse(xhr.responseText);
    var statusHTML = '<ul class="bulleted">';
    for (var i=0; i<employees.length; i += 1) {
      if (employees[i].inoffice === true) {
        statusHTML += '<li class="in">';
      } else {
        statusHTML += '<li class="out">';
      }
      statusHTML += employees[i].name;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', '../data/employees.json');
xhr.send();

var xhr1 = new XMLHttpRequest();
xhr1.onreadystatechange = function () {
  if(xhr1.readyState === 4 && xhr1.status === 200) {
    var rooms = JSON.parse(xhr1.responseText);
    var statusHTML = '<ul class="bulleted">';
    for (var i=0; i<rooms.length; i += 1) {
      if (rooms[i].available === true) {
        statusHTML += '<li>' + rooms[i].room + ' ' + 'Available' + '</li>';
      } else {
        statusHTML += '<li>' + rooms[i].room + ' ' + 'Not Available' + '</li>';
      }
      
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('roomList').innerHTML = statusHTML;
  }
};
xhr1.open('GET', '../data/rooms.json');

xhr1.send();

So it displays if rooms are available and if employees are in or out of the office.  Here's rooms.json:

[
  {
   "room": 101,
   "available": false
  },
  {
   "room": 102,
   "available": true
  },
  {
   "room": 103,
   "available": false
  },
  {
   "room": 104,
   "available": false
  },
  {
   "room": 105,
   "available": true
  },
  {
   "room": 106,
   "available": true
  }

]  

And here's employees.json:

[
  {
   "name": "Aimee",
   "inoffice": false
  },
  {
   "name": "Amit",
   "inoffice": false
  },
  {
   "name": "Andrew",
   "inoffice": true
  },
  {
   "name": "Ben",
   "inoffice": true
  },
  {
   "name": "Elizabeth",
   "inoffice": true
  },
  {
   "name": "Guil",
   "inoffice": false
  },
  {
   "name": "Hampton",
   "inoffice": true
  },
  {
   "name": "Jason",
   "inoffice": true
  },
  {
   "name": "Lainie",
   "inoffice": true
  },
  {
   "name": "Kenneth",
   "inoffice": false
  }, 
  {
   "name": "Pasan",
   "inoffice": true
  },
  {
   "name": "Shawna",
   "inoffice": true
  },
  {
   "name": "Zac",
   "inoffice": false
  }

]

And here's the index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX Office Status Widget</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <script src="js/widget.js"></script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Corporate Intranet</h1>
          </div>
        </div>
        <section class="grid-70 main">
          <h2>Lorem Ipsum Headline</h2>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        </section>
         <aside class="grid-30 list">
        <h2>Meeting Rooms</h2>
          <div id="roomList">
          

          </div>
          <h2>Employee Office Status</h2>
          <div id="employeeList">

          </div>
        </aside>
        <footer class="grid-100">
          <p>Copyright, The Intranet Corporation</p>
        </footer>
      </div>
    </div>
  </div>
</body>

</html>

So much code!  I'm moving along in the course, so far so good.  This is useful:

Neat.  So, the items in data get appended to the url, so firstname : "Dave" becomes firstname=Dave in the url.

SUMMARY OF CODING SKILLS

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

Treehouse (and other) Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
HTML and CSS (Codecademy) 
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)

Books Read or in Progress:                                                                     Status
"Head First HTML and CSS," by E. Robson & E. Freeman                           Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                               Complete

"HTML and CSS," by Jon Duckett                                                             Complete

"JavaScript and JQuery," by Jon Duckett                                                 Complete

Free Code Camp (FCC)                                                                            Status

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                                                Complete

10. JSON API's and Ajax                                                                          Complete
11. Intermediate Algorithm Scripting                                                      Complete

12. Intermediate Front End Development Projects                                   On 3 of 6

13. Claim Your Front End Development Certificate

14. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects

20. Dynamic Web Application Projects

21. Claim Your Back End Development Certificate

The Coding Boot Camp at UT Austin                                             Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) 

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel) 

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen: http://codepen.io/Adancode/

GitHub: https://github.com/Adancode

LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 4

Total Hours Coding: 936