kylewehrung / fruit-advice

Welcome to Fruit Advice! This is your go to webpage for learning fruit nutrition from a selection of fruit we've handpicked for you. We also give you the opportunity to add any fruit of your choice as well as its nutritional values if you deem our fruit list inadequate. Finally, we make the whole experience enjoyable and fresh with our added-in Shiba Inu generator. Each time you refresh the page you're welcomed by a new random Shiba to encourage you on your journey to learning about fruit nutrition. Please note, the Shiba Inu has a "like" feature so be sure to rack up those likes for each generated Shiba to show your appreciation.

Our sleek and minimalist webpage has four event listeners all eagerly waiting for you to do a specific action.

We have two separate click event listeners, the first of which is for when you click on the fruit names on the left side of the page. Doing this will display all of that particular fruits nutritional facts on the right side of the page. Our next event listener that we utilized for our robust fruit advice webpage is the submit event listener. You're able to type in the nine provided inputs that we've labeled. Hitting the submit button will then generate a whole new fruit on the left side of the page, wow! This fruit that you've now so generously created will also have a click event listener attached to it, all done with the power of callback functions. Our two next event listeners are unrelated to fruit, but no less important! The next click event listener is attached to our like button so that each time you click that like button you will be increasing the likes for the randomly generated Shiba. The final event listener is the underappreciated DOMContent loaded, doing its job to make sure all of our JavaScript code runs before our html, ensuring a fast and easy user experience.

To gain access to this exquisite experience in a more hands-on way, simply start by forking and cloning our repo down to your local machine. From there once you open up our code you'll see we're using a db.json to host the data for our fruits. Not to single out any particular protocol (CORS protocol) that prevented us from using the actual fruit api that we so dreamed of, but that unnamed policy is the reason why we have our data hosted locally. From there you'll see our proud HTML doing its thing as well as a family tree of JavaScript files showing the progression of our code and ideas. Our other fetch that you'll be able to play around with if you so choose is our fetch to a variety of Shiba Inu pictures. You now have the power to create and add on to our masterpiece, whatever you do with it we can guarantee a pretty "ok" time, good luck!