Stick to the JavaScript
For my JavaScript portfolio project, I have decided to create an application that allows the user to keep track of upcoming trips and to add activities to a trip that a user would like to take part in over the course of their vacation. Although I do have previous experience in functional JavaScript, transitioning to an object-oriented JavaScript approach was indeed complex. My main objectives in order to accomplish this applications were as follows:
- Construct a Rails API background
- Construct a frontend using HTML, JavaScript, and CSS
- Separate frontend concerns between and index.js file and Model/Adapter files
- Manipulate the DOM using JavaScript native Event Listeners
Constructing a backend API using rails is actually rather easy. By running the command `rails new ` with the ` — api` flag attached to it automatically sets up our rails application to be used as an api. Our cors file dictates where we allow requests to come in from, as well as what types of requests are allowed.
From here, it’s simply a matter of setting up your controller actions to expect as well as return json responses.
The frontend, however, was not so cut and dry. Ultimately, there is one index.js file that dictates the control flow of the application. The destination.js and activity.js files establish class models that allow us to interact with the database. The destinationAdapter.js and activityAdapter.js are in charge of coordinating all of the fetch requests.
One thing that I did to assist in my unique application was create the dateParser class. This class allowed me to easily take date input data (in the format of yyyy/mm/dd) and to return a more readable date.
I added a slew of customized event listeners to handle all clicks and update the DOM without refreshing the page. The index.js houses this functionality.
If you would like to explore this application more:
