Gunther's Garden Planner (https://github.com/gxnther/phase-1-project) is a simple app that queries the growstuff.org plant API and provides information about the crop queried. At this moment in early development, it displays an image, basic info, and the scientific names of the plant queried. It also allows you to save/favorite the plant in "My Garden" if you're interested in growing the plant. In the future, it will provide "companion" plants that grow well with the queried plant. More info about companion gardens can be found at (https://en.wikipedia.org/wiki/Companion_planting). My original idea was to be more focused on companion planting but growstuff.org's API wasn't as functional as I thought. I do like what growstuff.org is trying to achieve and having a streamlined simple app that lets the user know what plants work well together and then lets you save a list of plants to organize your garden. They also use the https://openfarm.cc/ API, which is useful but equally confusing with little documentation. In the future, I will consider contacting the devs to see if there can be a way to streamline the APIs.
I searched the web quite a bit for a robust plant API and at the moment at least with public APIS, they're pretty limited with little documentation. The USDA used to have one, but they switched to a different system and people are working on working with them to host an archived version of the API. At the moment, growstuff.org's API has no way to search the database. That's why in order to use the app you must type in a case insensitive, singular form of the crop to be queried. I almost scrapped the project altogether when I figured this out but realized growstuff.org had an older API version that lets the URL of any crop (i.e. have some accessible JSON data by adding .json at the end . The newer version of the API that they provide documentation for on their website does not allow you to fetch all the crops. After searching, I found documentation on github for their older API which seemed to fit the needs of this app more. I then decided to keep going with the garden planner and added an event listener on the form to store a query into a variable. This is case insensitive from using the .toLowerCase() method.
Now that I know my idea can provide an MVP, I wrote up some notes on how to deliver an MVP and make the requirements of the project. I would make sure it would list the crop with some basic info and a picture and make it so you can save a crop.
Now I could begin development with a plan. I make a fetch request to receive information for the queried crop. I was having issues with the API not allowing fetch requests because of Cross-Origin Requests settings. I looked up why I was having an issue and seemed like in order to deliver an MVP I would use a workaround for the moment. Moesif Origin & CORS Changer browser extension would be necessary to use the app. In the future, I could use a proxy server or potentially contact the growstuff.org devs for assistance. There's a hidden button on the page that becomes unhidden once a crop is successfully displayed. The fetched data is handled and stored and then assigned to some HTML elements stored as JS variables.
For the scientific names to be listed, I would need to iterate through an array as some crops had several scientific names. For each scientific name, an HTML listed item will be created with the scientific name This will repeat at the end of the array. Following the list of the scientific names, a picture of the crop is provided from a URL from the JSON data as well as a description of the crop.
I made a separate function to handle the button. In future of development, I will clean up the code and make things more modular in general. The button appends the queried crop to "My Garden" to help with your garden planning. I was having an issue with the button appending too many redundant listed items with the same queried crop name. To fix this, I used the .removeEventListener on the button right after the fetch request. The .addEventListener on the button is at the end things to do after the fetch request.
If a queried plant is not found, an alert will pop up telling the user that it wasn't found and reminding them to use the singular form of the queried crop. In the future, I will work on the aesthetic of the app, make it so you can delete things from "My Garden," optimize the code, and see if it's possible to access the companion plants in the API. At the moment it seems like the JSON data provided for the companion plants is for the older version of their API which doesn't work with the format of their new website directory structure.
Top comments (0)