I had done the bulk of mine over the weekend and then finished it off on the train to Edinburgh. The task was to recreate the Rocking Ricks Record Store in JavaScript and make record objects and stock Ricks store. He was able to buy and sell records with the cash in the store going up and down depending on sales and stocking. Rick could also do stock checks to get a total value for his store and cash.
The lessons started us off into the world of JavaScript in the browser. Developed specifically to improve the end-user web experience javascript is now very powerful and is used to create lots of functionality in the web front end. Spotify and Airbnb are examples of websites that are now more like apps than websites because of Javascript.
The morning code along introduced us to the DOM (Document Object Model) which lets us talk Javascript to web pages. We built a simple page that has JavaScript writing the HTML to write and read from the browser. The browser of choice is Google Chrome which has an excellent console that lets you debug the javascript in real-time.
Monday's Homework had us doing a quiz on what we had learned during the day and also a task to automate an existing HTML webpage using JavaScript. Yeah, this is day one of JavaScript in a browser!
Tuesday and things start to get more interactive with Event Handlers and Event Listeners and being able to save and retrieve data from local storage. Then wheels became loose on the JavaScript bus with an individual lab to create a ToDo list app in the browser. Seems fairly straightforward and should be but we were given a starter code that had a basic structure and some pseudo-code already in place. The task was to “fill in the blanks”.. however, some of the blanks had not been covered in lessons, and the way the starter code had been structured was not clear what the intent was. It would probably have been easier to start from scratch. It was a bit of a low point trying to get half-finished code working and confidence-sapping. I probably got 80% completed but failed to get my to-do list fully working. I was not alone.
The afternoon improved, however, and wounds started to repair as we started to play with bringing Google Maps API (Application Programming Interface) into our websites and adding markers. Much fun and really powerful. The homework was a set of tasks related to making your own website adding a map and giving it information windows for the markers that you have placed (all with JavaScript)
Wednesday and another API. This time a free API gives countries of the world data. This time we were pulling country data from the web and creating a big list of all countries, their names, capital cities, and their population displayed in the browser. The Homework was the same idea but with a Spotify API, and the task was to make a list of albums and artists thumbnail pictures and a link to the location on Spotify. Loved this homework and was able to fully meet the brief.
Thursday was an introduction to graphing and charting data using an API. Back to countries of the world API and combining it with a charting API. In the morning lab, we were split into teams and given the task of charting some data from the countries of the world. Working as a team one gathered the list of countries and their population into arrays and another prepared the data in the format required by the pie chart. Coming together the data presented well into the browser, with the API clever enough to hide some of the smaller country labels.
In the afternoon we introduced another new concept called Canvas which lets you draw in the browser using JavaScript. Squares, triangles, and circles were quickly put into a window, before the second lab of the day. This time an hour-pair programming task to create an Etch a Sketch type interface. If you had asked me to do this a few weeks ago Id run away but now it was a quick task to create a few buttons (up-down, left-right) in HTML and add some on-click listeners to the buttons and program JavaScript to draw a small 10px line between button clicks.
In the afternoon we introduced another new concept called Canvas which lets you draw in the browser using JavaScript. Squares, triangles, and circles were quickly put into a window, before the second lab of the day. This time an hour-pair programming task to create an Etch a Sketch type interface. If you had asked me to do this a few weeks ago Id run away but now it was a quick task to create a few buttons (up-down, left-right) in HTML and add some on-click listeners to the buttons and program JavaScript to draw a small 10px line between button clicks.
So this has been the hardest week yet, with lots of new concepts to learn and really hard labs. But I've managed it and am pleased to see the end of the week. I have learned heaps this week and am happy that I have all JavaScript in the browser, API interfaces, and canvas in my toolbox now.
Big thumbs up to Code Clan and its instructors. Massive pat on the back to my fellow cohorts, you did well this week, and to the handful of you that dragged me to the pub on Tuesday evening to drown our sorrows thanks, it was much needed and made all the difference!
Here's a picture of the back of the Code Clan offices. Many software companies here...
Big thumbs up to Code Clan and its instructors. Massive pat on the back to my fellow cohorts, you did well this week, and to the handful of you that dragged me to the pub on Tuesday evening to drown our sorrows thanks, it was much needed and made all the difference!
Here's a picture of the back of the Code Clan offices. Many software companies here...