Monday, May 4, 2015

App work

I'm really happy with how much work I'm getting to do; we've been going at a pretty good clip in class and have either made or iterated on a front-end web app about once per day.

My creations so far are the renamed ArMoleGeddon:


http://s.codepen.io/johnwquarles/debug/NqPoEo?

A weather app that makes a JSON request to the Weather Underground API to retrieve info for a particular ZIP code, or can detect the user's geolocation via the browser and include it in the JSON request instead of the ZIP:

http://s.codepen.io/johnwquarles/debug/ZGGQRj?

A stock application that I amused myself with by naming "Stocksbocks", etc. This one pulls quotes for particular stock symbols, and then pretends to let you buy shares while generating a table that tracks your imaginary investments. That was the first part-- today we needed to have the table save itself to a Firebase database and then re-write that data with each new pageload. So any stocks you "buy" will remain there unless I go in and delete the data through Firebase. Have fun! This was an interesting exercise in that the quantity attribute for each stock purchase doesn't come from the markitondemand (stock price) API-- it's entered in by the user, so in order to save *all* of the table's data to Firebase, I had to generate a new data object, include the quantity, and write it.

Which becomes a problem given that the writeTableRow function that I'd written wants to pull that quantity value from the text input HTML element, but we now need it to pull quantity from the data object written earlier and pulled from Firebase upon an intial pageload. Nothing too heavy, but it involved short-circuit evaluations in order to deal with edge cases (if there's no data in the database, there's no object to check for a quantity attribute and Javascript will throw an error; need to use && to make sure there's an object, and if there is, check for its quantity attribute) and to choose what kind of data we're writing (check for the presence of a data object passed in as an argument, using && as above; if we have it, use its quantity attribute, and if we don't (ie, it evaluates to falsey), it means that we're writing in info that the user has requested instead of loading/writing data from Firebase, and we should include/write the quantity as specified in the HTML input.

Then we changed all of the Javascript selectors and methods (that we could) to jQuery in order to learn more about jQuery.

Whew! In any case it all worked out, which you can verify below. Only thing remaining is to check for and catch user input errors in the quantity text input (it's already working for the stock symbol input). Oh, and if you make multiple purchases of the same stock, it doesn't combine them into a single line in the table. That would be good to add.

http://s.codepen.io/johnwquarles/debug/LVpVOG?
http://s.codepen.io/johnwquarles/debug/LVpVOG?


No comments:

Post a Comment