Herbal Healers Javascript Project
Welcome to my blog reader, where I will be taking you through my Javascript project for Phase 4 of the Flatiron Software Engineering Program. If you had read my blogs on my other projects, you would know that they were on books and stories. For this project, I went in a different direction. I decided to do my project people being able to create homemade remedies for different illnesses.
Requirements
The requirements on the frontend for this project are that the application has to be a single page where it should not reload or refresh, the application must use object-oriented Javascript, must be asynchronous, the application must have at least 3 fetch requests to cover 2 CRUD actions and something else, and must use JSON communication format.
The requirements on the backend for this project are rails API has to be the backend, has to have has_many/belongs_to relationship, and API should follow restful conventions.
The Setup
When it comes to object-oriented programming, we always have to think of separation of concern. That is why the classes have been broken up into different files. The files inside the src folder are for that specific object which has its own job to do. Index.html is the only HTML page that will be used to follow the requirement of the project being a single page application. Index.html is where we also load up our Javascript files using script tags. The script tags should have the ‘defer’ attribute so the script is downloaded along with parsing the page. Either that or you could place the script tags towards the end of the index page so that the page is not blank because the javascript is loading.
remedy_api.js & illness_api.js
The files have classes to make fetch requests. There is a constructor that takes in a URL that creates and initializes a new object.
Fetch requests can be used to make requests(obviously) to the backend to get information from the database. You can also send data to the backend using fetch requests.
As you can see getRemedies is sending a fetch request using the URL object plus an additional string to go the right method. It goes to the .then which make a promise to get a response. If this promise is not fulfilled then it gets an error which .catch catches. If it does fulfill the promise it then goes to the next .then which makes a promise to get the data, create new instances and attach it to the DOM.
The next fetch request is being used to create new remedies, so it is sending data to the backend to be saved. First, you set a variable to an object which will hold the information that was submitted. configObject is basically a map that makes configuration entries which in this case would be to post. The JSON.stringify takes the new data and converts it to a JSON string. It then makes the fetch request with the URL and configObject. The new data gets saved and get that saved data back in a response which will be used to create a new Remedy instance in JavaScript.
remedy.js
this is where a lot of behavior is being held.
This Remedy class starts with a constructor to instantiate new instances. It also attaches elements tags, id, and an event listener that will be used to for that specific instance. The Remedy class is where I get to choose my display of the remedy in a function. It has an event listener that works with the handleClick function to edit and delete the remedy. If someone were to click on “Edit Remedy”, it would create the form with the values inside the textboxes. Once someone finishes editing their remedy and hits “Save Remedy”, makes the fetch request to the backend to update in the database.
index.js
This file is not a class, but it is being used to save get specific information from the DOM and save it as a variable to be used in other classes. It also calls The RemedyApi and IllnessApi with taking in a URL saved as ‘port’ to fetch all of the data from that ‘port’ and attach it to the DOM. The form is also on the index.html page, so index.js includes the event listener to submit the form working handleSubmit() function to send the data to the backend.
Conclusion
My biggest obstacle for me was that I find Javascript to be confusing(for now) which I believe, with that and the time I had open, held me back from making this a fulfilling project instead of just trying to meet the requirements. There is a lot more work to be done on this project after I pass the assessment which is promised ready to be fulfilled.
