Free Code Camp – Local Weather App (FINISHED!)

I guess doing something new really was the way to kick myself into gear. A few days later and I have successfully fufilled all user stories for this project on Free Code Camp.

  1. User Story: I can see the weather in my current location.
    When you load the app, it will request that you share your location. If you hit “Allow,” it will display your current city/town and the weather there. If you deny, it should throw an error at you.
    I do this by using

    navigator.geolocation.getCurrentPosition

    to send a notification to the user that requests the location. Then, there’s an AJAX function that takes in the coordinates from the navigator, returns the weather for those coordinates (in Fahrenheit), the weather conditions. It also converts those coordinates to a city and state, and displays those on the page.

  • User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather. 
    I used this icon set by Erik Flowers and Lukas Bischoff. to display icons that match the current weather conditions. When I first started coding, the weather here in Austin was consistently ‘clear’ so I had no idea if it actually worked well. Then, when I took the screenshot, I noticed it had changed to “Partly Cloudy.” Yay!
    They have nice functionality that works with the Weather Underground API, and some other popular APIs as well.
  • User Story: I can push a button to toggle between Fahrenheit and Celsius.
    When you hover over the temperature, the cursor will change to indicate that it is clickable. When you click it, it toggle between Celcius and Fahrenheit.

And, now, I have a functioning weather app! And I never would have gotten it done if I hadn’t been willing to shift my focus elsewhere for some time.

I noticed when I went for my screenshot that it displays the weather in decimals, which I don’t typically see (or look for) in weather apps. I am considering adding some code to round that number to the nearest whole number.

Screenshot 2016-02-29 23.14.10 (2)

Advertisements

AJAX and APIs

 

I followed my last thought from my previous post and, instead of spinning my wheels and staying stuck, I decided to do something new. This past weekend, I completed the Intro to AJAX course on Udacity.

I got to build a basic web app that allows the user to put in a potential future address, street and city. Then, I used Google Maps to load an image in the background for the address.And I used the New York Times and Wikipedia APIs to pull up articles relating to the specified city.

Screenshot 2016-02-27 13.52.39 (2).png

At the end of this course, I definitely didn’t find myself any closer to figuring out the Pomodoro Timer. I did, however, know exactly what project I could work on instead: a Local Weather App. For this app, the browser will ask the user for their location. Once they hit “allow,”  your location, current temperature, and current weather conditions display onscreen (if you deny, it should throw an error).

It’s not the most visually exciting app right now, but I FIGURED OUT HOW TO MAKE IT FUNCTIONAL ALL BY MYSELF! BOOYAH!

I have used AJAX for another course in the past, but never quite got it. This time, I was able to navigate my way around the web (and my brain I guess) to get this working. Switching up my focus was incredibly helpful this past week, and probably one of the best ideas I’ve had lately.

Screenshot 2016-02-27 17.00.38

 

You can check out the current CodePen below!

AJAX Basics: jQuery, APIs

Time to cross another course off of my list: AJAX Basics. Done.

AJAX is definitely no walk in the park, but it’s also a little bit less intimidating than it seemed when I first started this course. While there’s still some things I didn’t completely understand from the lecture-type videos, I was able to complete this course and it’s DIY challenges without a headache. Win.

jQuery and AJAX

We revisited the Office Status project from the previous section. Nothing changed in the details of the project except changing the vanilla JavaScript to jQuery. And, once again, the challenge for this project was to add AJAX for the room numbers, this time using jQuery.

Challenge

The challenge

Office Status Code

My code

Office Status

AJAX and APIs

API stands for Application Programming Interface.

We used Flickr’s API to build an app that lets you click on a button with a type of animal (cat, dog, or moose) and AJAX displays recent photos with the appropriate tag.

The big challenge this time was to change the code to use a search form field instead of the pre-selected animal buttons from before.  To do this, I had to replace the button’s click event handler with a form submit handler. Since I’m using AJAX, I don’t want the submit button to open up a new HTML page which means preventing the browser’s default action.

Screenshot 2015-01-25 17.06.52

Should you choose to accept it…

Workspaces

My code

I was able to complete the challenge with my own knowledge once again! By now, I shouldn’t be surprised that I was able to handle it, but I spent most of the lecture-type videos scratching my head going “WTH?!” I may not completely understand everything about AJAX, but I can create working code which is still pretty awesome in my book.

After the challenge, I added a change to the submit button that changes its text to “searching…” after you hit submit and switches back to its original text when the AJAX request is over.

Flickr API

It’s Always Cold In Chicago

jQuery definitely helps to make working with AJAX easier (which is great becuase jQuery is here to make our lives easier) and I feel like I’m really starting to get the hang of using jQuery, especially with extra practice using CodeSchool’s Try jQuery course.


Now, all I’ve got left are Console Foundations and Git Basics before I complete this track. Wish me luck!

Team Treehouse: AJAX Concepts + Programming AJAX

AJAX Concepts

AJAX stands for Asynchronous JavaScript and XML and it is used to create fast and dynamic webpages.

AJAX uses JavaScript to send out an AJAX request, process the response, and  then update the request.  This all happens asynchronously,  which means that you can send out multiple requests to the server. This makes it possible to load new content without reloading the entire page. Think web apps like Google Maps, or Twitter’s endless scroll, or Facebook’s Like button.

There are 4 parts to how AJAX works.

  1.  Create an XML HTTP Request Object – Tells the browser that you want to send an AJAX request and to create an object that can send and receive the necessary data.
  2. Create a callback function – The callback is where you process the data that is returned from the server, then update the HTML on the page.
  3. Open a request – Here, you give the browser the method it will use to send the request (GET or POST) and the URL to send it to.
  4. Send the request – Now, we can finally send the request.

Programming AJAX

In this project, I built a widget that shows if employees are in or out of office.

Dave moves through the project faster than I felt comfortable with, but that’s what the pause button and speed controls are for, right?

Ironically, my favorite part of this project was the Stage 2 Code Challenge where I had to add on to the project we completed by adding a widget that shows available meeting rooms.  I say ironically because I struggled through the mini code-challenges in between videos and panicked a little when I realized I’d have to do this part on my own. But, I pulled through it like a champ and got my code working without a headache!

Finished Product

Finished Product

Dave gave hints as to what we should be including in our new code and even suggested copying and pasting the code from the first part of the challenge and modifying it. Although I’m sure that would have been easier, I wanted to make sure I really understood what was going on. So, I typed out the entire thing by myself, following the 4 parts of an AJAX request. When I finished that, it looked a lot like the earlier code and I gave myself a high five.

When I opened it in my browser,  it didn’t show up. This time, instead of staring at my code endlessly, I opened up the Console straight away. Lo and behold, I forgot a semi-colon and had an extra curly brace in there!  It probably would have taken me ages to find it on my own.


var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(request.readyState === 4 && request.status === 200) {
var rooms = JSON.parse(request.responseText);
var statusHTML = '<ul class="rooms">';
for (var i=0; i<rooms.length; i += 1) {
if(rooms[i].available === true) {
statusHTML += '<li class="full">';
} else {
statusHTML += '<li class="empty">';
}
statusHTML += rooms[i].room;
statusHTML += '</li>';
}
statusHTML += '</ul>';
document.getElementById('roomList').innerHTML = statusHTML;
}
};

request.open('GET', '../data/rooms.json');
request.send();