In order to do that, I'll have to access the FCC news API, which is located at this url:
http://www.freecodecamp.com/news/hot
To do that, I'll be using the same requests I used to access the weather API I used for the weather app, then parsing the data so as to place it into an object, then manipulating the properties and values in the object to output html which will display something similar to the screenshot. I'll then style the page.
I'm going to learn a lot with this project!
So, here's my humble beginnings, I now have the data from the API in an object. The code blow writes a headline to the site and also logs a headline to the console. Now I need to create functions that access the data object and turn it into html...I'm thinking a for loop or a for...in loop. You'll notice that there's a lot of notes in this code that have to do with the weather app, and that's because I started off with my weather app notes and then modified the code to my new needs.
$(document).ready(function() {
url = "http://www.freecodecamp.com/news/hot";
console.log(news);
// The code below enters the url above into the sendRequest() function
function sendRequest(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
data = JSON.parse(xmlhttp.responseText);
news = {};
news.headline = data[0].headline;
headline = news.headline;
console.log(headline);
document.write(headline);
}
};
// The code below specifies the type of request that is being sent to the server.
xmlhttp.open("GET", url, true);
// The code below sends the request to the server.
xmlhttp.send();
}
sendRequest(url);
console.log(news);
});
var url;
var data;
var news;
var headline;
It's a mess, but it's a start, I have the data, now I can manipulate it!
I'm getting really far on this project, here's what I've got so far:
And here's the code so far:
$(document).ready(function() {
url = "http://www.freecodecamp.com/news/hot";
console.log(news);
// The code below enters the url above into the sendRequest() function
function sendRequest(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
data = JSON.parse(xmlhttp.responseText);
news = {};
news.headline = data[0].headline;
headline = news.headline;
console.log(headline);
for (var i = 0; i < data.length; i++) {
document.getElementById("mainDiv").innerHTML = document.getElementById("mainDiv").innerHTML + "<div class='divStyle'>" + "<img src=" + data[i].author.picture + ">" + "<h4 class='headingStyle text-left'>" + data[i].headline + "</h4>" + "<a href=" + data[i].link + ">" + data[i].link + "</a>" + "<h5 class='headingStyle text-left'>" + "Author's Username: " + data[i].author.username + "</h5>" + "<h5>" + data[i].upVotes.length + " Upvotes!" + "</h5>" + "</div>";
}
}
};
// The code below specifies the type of request that is being sent to the server.
xmlhttp.open("GET", url, true);
// The code below sends the request to the server.
xmlhttp.send();
}
sendRequest(url);
console.log(news);
});
var url;
var data;
var news;
var headline;
var campNews;
Still working on it! I finished it! Here's the CSS:
.top {
margin-top: 50px;
}
.title {
text-align: center;
font-size: 47px;
font-family: Monospace, Verdana;
color: black;
}
.containerDiv {
text-align: center;
margin-top: 30px;
}
.divStyle {
font-family: Monospace, Verdana;
display: inline-block;
width: 220px;
margin: 20px;
padding: 6px;
}
.divStyle:hover {
background-color: #ECFAFF;
border-radius: 10px;
}
img {
width: 220px;
height: 220px;
border-radius: 10px;
margin-bottom: 10px;
}
.anchorLink1 {
text-align: left;
font-size: 19px;
font-weight: bold;
margin-bottom: 3px;
}
.anchorLink2 {
text-align: left;
font-size: 18px;
}
a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 205px;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
display: block;
}
The code targeting the anchor element serves to align all the elements, otherwise the links overflow the borders of the div and cause alignment issues.
The JavaScript:
$(document).ready(function() {
url = "http://www.freecodecamp.com/news/hot";
// The code below enters the url above into the sendRequest() function
function sendRequest(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
data = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < data.length; i++) {
document.getElementById("mainDiv").innerHTML = document.getElementById("mainDiv").innerHTML + "<div class='divStyle'>" + "<img src=" + data[i].author.picture + ">" + "<div class='text-left'>" + "<a class='anchorLink1' href=" + data[i].link + ">" + data[i].headline + "</a>" + "</div>" + "<div class='text-left'>" + "<a class='anchorLink2' href=" + "http://www.freecodecamp.com/" + data[i].author.username + '>' + "By: " + data[i].author.username + "</a>" + "</div>" + "<h4 class='text-left'>" + data[i].upVotes.length + " Upvotes!" + "</h4>" + "</div>";
}
}
};
// The code below specifies the type of request that is being sent to the server.
xmlhttp.open("GET", url, true);
// The code below sends the request to the server.
xmlhttp.send();
}
sendRequest(url);
});
var url;
var data;
A screenshot:
var url = "http://www.freecodecamp.com/news/hot";
var data;
// The code below defines the sendRequest function, within which the getDataOntoPage function is called.
function sendRequest(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
data = JSON.parse(xmlhttp.responseText);
getDataOntoPage(data);
}
};
// The code below specifies the type of request that is being sent to the server.
xmlhttp.open("GET", url, true);
// The code below sends the request to the server.
xmlhttp.send();
}
// The sendRequest function is called below, which triggers everything else.
sendRequest(url);
// The code below is a funtion to get the data from the API onto the site, it is called within the sendRequest function.
function getDataOntoPage(data) {
for (var i = 0; i < data.length; i++) {
document.getElementById("mainDiv").innerHTML = document.getElementById("mainDiv").innerHTML + "<div class='divStyle'>" + "<img src=" + data[i].author.picture + ">" + "<div class='text-left'>" + "<a class='anchorLink1' href=" + data[i].link + ">" + data[i].headline + "</a>" + "</div>" + "<div class='text-left'>" + "<a class='anchorLink2' href=" + "http://www.freecodecamp.com/" + data[i].author.username + '>' + "By: " + data[i].author.username + "</a>" + "</div>" + "<h4 class='text-left'>" + data[i].upVotes.length + " Upvotes!" + "</h4>" + "</div>";
}
}
I'm leaving good notes now, it's just a good habit to get into. :)
The next project requires us to build a Wikipedia viewer (we access Wikipedia's API and format the results onto the page). However, before I work on that, I want to keep studying several topics, such as recursion, scope, and API's. The last few days of studying some of those topics strengthened the foundation which allowed me to complete Camper News in a few hours. So, I'm going to explore those areas deeper before I move on.
So in the code below:
function b() {
//var myVar;
console.log(myVar);
}
function a() {
var myVar = 2;
//console.log(myVar);
b();
}
var myVar = 1;
a();
The output on the console is 1. The reason is that each function has it's own execution context, and when a function is declared in the global execution context and doesn't have a variable declared within it, it does not go up the chain to a prior function (unless it is actually defined within another function), it goes immediately looking for the variable in its own context, the global context in this case. If instead you ran this:
function b() {
var myVar;
console.log(myVar);
}
function a() {
var myVar = 2;
//console.log(myVar);
b();
}
var myVar = 1;
a();
The output on the console would be undefined, because myVar is set to undefined within the execution context of the function in which it is called. If instead you ran this:
function b() {
//var myVar;
console.log(myVar);
}
function a() {
var myVar = 2;
console.log(myVar);
b();
}
var myVar = 1;
a();
console.log(myVar);
The output would be 2 1 1. The a() function runs first, outputting 2, the b() function runs second, outputting 1 (the var declaration is commented out, otherwise that output would be undefined), and then finally, the console.log on the final line runs, outputting 1, set in the global execution context. This is all very interesting and affects the way I write, and think of, my code. In the code below, we get an error:
function a() {
function b() {
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
b();
The function b() is not defined, at least in the global context, so when we try to run it, in the global context, we will get that error, because the b(), right below a(), will not be able to find where it is defined. This is because the b() at the bottom is in the global context, and b() was defined within the a() function. This won't work. This, however:
function a() {
function b() {
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
Will work, it will output a 2. The function b() in the code above is defined and called in the same execution context, within the a() function. So, in sum, where a function sits determines its execution context. This path it takes is called the scope chain.
ES 6 is introducing a new way of declaring a variable, called "let," which is a substitute for "var". This new way, "let" should only be used inside a block (inside curly braces). We can use both let and var in ES 6.
Now, in reference to setting variables, we should not set variables to undefined (but we can test for it), we should set them to null if we want to set a variable to equal to nothing.
In ES 6, there's a new primitive data type, called Symbol. The tutorial I was watching didn't go into any details on this. They did note that it is not supported yet in all browsers. So, the primitive data types are undefined, null, boolean, number, string, and symbol.
This:
var a = 1 + "2";
Will make the a var be a string, "12". So JavaScript converts a data type, number, to a string. Other programming languages might return an error in a case like this.
Just for my own reference, I'm at the 2 hour 30 minute mark in the video I've been going over today. Time for bed.
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)
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 DuckettCompleted: "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.
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 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. 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: 9
Total Hours Coding: 897
No comments:
Post a Comment