I felt that I had a solid grasp on JavaScript (JS) while completing the JS section labs for, but when I reached the final project, I had to go back and review everything before I could put my ideas into motion. So, the project took me a lot longer than expected; however, I am glad I dedicated the time and now feel much more comfortable with JS.
The project set forth a few requirements to add onto our rails application. My application is a World Wonder travel application that allows users to track all of the trips they have taken, add countries to these trips, and add World Wonders, if visited. Trips can be in planned for the future or documented from the past. The user can also rate the World Wonders (based on a score of 1-100) and you can change around your ratings as you see more world wonders and new wonders move to the top of your list.
The first requirement of the JS lab asks students to translate the JSON responses from your Rails app into JavaScript Model Objects using either ES6 class or constructor syntax. JSON (JavaScript Object Notation) is a readable format for structuring data that is used to transmit data between a server and a web app (an alternative to XML). The DOM is the Document Object Model, which is basically the web page as you see it (you can view page source to see the actual HTML). The DOM represents that HTML in an object format basically. The objects are organized in a hierarchy (Window, Document, Form, Form Controls). In JavaScript, you can create classes with constructors, but it is different from classes in Ruby. JS a Prototype-based language. All objects can inherit from another object (class and instance are not distant entities). An object hierarchy is established by assigning an object as the prototype associated with a constructor function. You can define and create a set of objects with constructor functions and the prototype specifies an initial set of properties but you can add or remove properties to an individual object or the whole set.
In my application, the user is able to login and navigate to their profile page and click on the “country index” which is then rendered to the current page (their profile page) without a page refresh. After the index is loaded, the user can click on a specific country to see that show page for that country (the show page info) which is translated to the page via a JSON response to a class constructor and then appended to the DOM. This allows for a more user-friendly experience. This application still has a few page navigations but eventually I would like to change it entirely into a single-page application.
The second requirement of the JS lab asks students to render at least one index page (index resource - ‘list of things’) via JavaScript and an Active Model Serialization JSON Backend. The country and world wonder index are both rendered to the user show page via an AJAX request and rely on the Active Model Serialization to serialize the model attributes (like id, name, climate, region, etc.) into a useable format for JSON. The serialization also allows associated collections to be formatted (i.e. countries have many world wonders).
The third requirement of the JS lab asks students to render at least one show page (show resource - ‘one specific thing’) via JavaScript and an Active Model Serialization JSON Backend. For this requirement, the user is able to click on one of their trips (which all are listed on their profile page) and upon clicking the specific trip they wish to see details about, this trip is appended to the DOM via an AJAX request and a class constructor for Trip that creates a Trip object.
The forth requirement of the JS lab asks students to dynamically render on the page at least one serialized ‘has many’ relationship through JSON using JavaScript. For this, I decided to show the has-many relationship between countries and world wonders (countries have many world wonders). When the country index is clicked on, the country index list is appended to the page as well as any associated world wonders. I used a template literal and an arrow function and the .map method to display this information.
For the fifth and final requirement ask students to render a form for creating a resource that is submitted dynamically and displayed through JavaScript and JSON without a page refresh. The lab suggests the use of template literals, which are string literals allowing embedded expressions. You can use multi-line strings and string interpolation with them. The literals are enclosed within backticks (``). And placeholders are created with ${}. The expressions and the text between the two back ticks all get passed into the function. You can create a tagged template with an expression (a function) before the template literal and this function will get called on the text and allow you to manipulate the outcome. I rendered the trip form onto the user profile page and then submitted the user responses dynamically via an AJAX request and a Trip constructor. Overall, I learned a lot from this project and I had a lot of fun with it. I look forward to continuing to learn more about JavaScript and see what else I can do it.