This website was created for plant lovers. The user could use this website to find out information in regards to a specific plant. Using the search bar, the user could look up the name of a plant. The search bar includes an autocomplete widget that will list all of the different types of species associated with the searched word. The user could save certain plants and a list of all the saved searches will display on the bottom of the page using local storage. This website also includes a location feature on the navigation bar. Once the user clicks on the location button, a map will appear. The user could input their location in the form of an address or area code. The map will then display all of the plant stores located near that location. The user could click on a plant store and the address of the plant shop will pop up on the side. This website contains notes on HTML, CSS, and JavaScript. The perenual API and google maps API was used within this website.
Here is the link to the website: https://jssoyoung.github.io/Leafy-locators/
Here is an image of the website: 
Here is an image of the website when using a mobile device:
Here is an image of our website on dark-mode: 
Here is an image of our website on dark-mobile when using a mobile device: 
No installation is required for this website. The website is deployed using GitHub pages. Click on the link above to access the website.
Young Jang https://github.com/jyoungjoon
Dahn Bey https://github.com/dbey21
Michael Manhxaythavong https://github.com/mmanhx90
Jessica Yun https://github.com/jssoyoung
This website is divided into different sections. The header of the website includes the title, logo and a navigation bar. Within the body section of the website, there is a search bar where the user could look up a plant name. Once a name is clicked on or searched, information in regards to the plant will show up such as their scientific names, any other names they go by, information on their watering cycle, and the amount of sunlight that plant needs. A picture of the plant will also pop up next to the information. The bottom of the website contains a list of all of the user's saved searches which is saved and displayed using local storage. If the user clicks on the locations button on the navigation bar, the plant information will disappear and a map will display. The user could input a location within the search bar and all the plant stores near that location will pop up with a leaf marker. The user could then click on the different markers to find out the address of the plant shop. All of the select plant shops will be added to a list on the side of the map. The perenual API was used to get all of the plant information and to complete the autocomplete widget on the search bar. The map used in the location feature is tied with google maps API.
- Background Image from Unsplash
- Icons from Flaticon
- Emojis from Emoji-CSS
- GIF Image from Giphy
- Placeholder Images from ImageOnline
- Google Fonts from Google Fonts
- Perenual Plant API from Perenual API
- Google Maps API from Google Maps API
- GeoAPIfy Geocoding API from GeoAPIfy
- Special thanks to UC Berkeley Coding Boot Camp staff: Samantha (Instructor), Jin Yi (TA), Lalith (TA) and Gunjan (TA) for helping us with this project.
Licensed under MIT License. Please refer to the LICENSE.md in the repo.