Day 187: FCC, "Wikipidia Viewer" and Working with Primes and JQuery

I feel like taking a break from the video, so I'm going to work on the Wikipedia Viewer. 

I helped my friend Mike work on a project today with prime numbers, we used rgba(0,0,0,5); for the background of a div, and that fourth number determines the transparency.  That's great, I've used that before, but it's been a while.

We can use the RGBA as a background for text over an image to make the text stand out.

So, Mike wanted to get a portfolio going, and there was a Euler Problem we solved together a while back, which we decided to expand into a basic site.  Here's the HTML:

<!--Worked on this project with Michael Desantis-->
<h1 class='text-primary text-center title'>Working With Primes and Manipulating HTML Via JQuery</h1>
<div id="desDiv">
<h4 class="text-center">Give me any number between 1 and 10,000, and I will give you the prime factors of that number, from smallest to largest!</h4>
  </div>
  <div class="inputBox text-center">
  <input id="typeMe" type="text">
    <div class="inputButton">
  <input class="myButtons" id="clickMe" type="button" value="Calculate">
  <input class="myButtons" id="clearField" type="button" value="Clear Output">
      </div>
  </div>

<div class="text-center"><p id="answerSpot"><p></div>

And here's the JavaScript, with JQuery, and with notes on the JavaScript version of the JQuery code, as I was exploring how to manipulate HTML with both:

//Worked on this project with Michael Desantis.
$(document).ready(function() { 

$('#clickMe').click(
  function() {
  x = document.getElementById('typeMe').value;
  console.log(x);
  euler3(x);
    function maxP(a) {
    var answer;
    var b = a - 1;
    var IsPrime = true;
    while (b !== 1) {
      if (a % b === 0)
      IsPrime = false;
      b = b - 1;
    }
    if (IsPrime === true) {
    myArray.push(a);
    //Below is the JavaScript version, but in JQuery we can push the data out using $.each and an array, but set the  initial value of myHTML to an empty "<p></p>" to avoid having undefined print to the screen.
    /*answer = "Prime ";
    answer += a;
    document.getElementById('answerSpot').innerHTML = document.getElementById('answerSpot').innerHTML + answer + ", ";*/
 }
}
  
 $.each(myArray, function(i) {
    myHtml += "<p>" + "Prime Factor" + " " + myArray[i] + "</p>";
  });
 $('#answerSpot').html(myHtml);

function euler3(x) {
  for (i = 2; i <= 10000; i++) {
    if (x % i === 0 && maxP(i) === true) {
    }
  }
  

}
  }
);
  
$('#clearField').click(function() {
  myHtml = "<p></p>";
  myArray = [];
  $('#typeMe').val(''); //  The JavaScript only way is: document.getElementById('typeMe').value = '';
  $("#answerSpot").html(myHtml);
});
  
});

//The <p> element was added to prevent the printout of undefined, which html is on the first iteration of the $.each.
var x;
var myHtml = "<p></p>";

var myArray = [];

Neat!  Here's the CSS:

.title {
  margin-top: 80px;  
}

.myButtons {
  margin-top: 10px;
  margin-bottom: 20px;

}

Check out my screenshot:

So, that's my version above, and here's Mike's version below:

Our front end development tastes are different, I prefer simplicity and order, I'm pretty spartan in my design aesthetic.  All right, back to the Wikipedia Viewer!

For the "Wikipedia Viewer" project, I've got to create a search box that plugs into the Wikipedia API and outputs results, onto the webpage.  I also need to create a button that outputs a random result onto the webpage.

All right, time to research the Wikipedia API.  

Okay, I've created the search box and can store a query entered into the search box on click in a variable.  Now I'm working on pulling data from the API.

Okay, I've pulled data from the API, but I need to be able to pull data based on the variable stored when a query is entered into the search box and submitted.  I'm working on passing the variable to the API.  I can pass a set variable to the API and return a result, and now I'm working on passing the variable set by the click from the variable it goes into to the code that passes the API.

SUMMARY OF CODING SKILLS

Treehouse Points (5,503) by Subject Matter (miscellaneous not included): 
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

Hours Spent Coding Today: 9

Total Hours Coding: 912