/wish-cycle

An application to help conscious consumers quickly and easily find out whether given items are recyclable and how/where to recycle items.

Primary LanguageJavaScript

Wish Cycle

An application to help conscious consumers quickly and easily find out whether given items are recyclable and how/where to recycle items.

Deployed Webpage

The motivation behind this application was to give people the info they need to help build a more sustainable future. It is not always clear if an item to be disposed of is recyclable or not, or what do with it if it does meet recycling guidelines. It is not always black and white, plastic and apple core. There is a gray area of miscellaneous items people wish they could recycle, hence the name of our app "Wish Cycle".

On the landing page there is a date picker that will show the users next recycling date when chosen.

When a user arrives at the landing page, they have a few different ways to search for the item to be disposed of:

  1. They can input the item into the search field and click "Submit".

            -The user will be taken directly to the recycling instructions.
            -There are three cards on the instructions page. 
                 -The first card shows all possible items associated with the general query.
                 -The second card swill take the user to their local recycling centers.
                 -The third card will lead to a more specific recycling location for electronics. 
                 -If the user has their location blocked, a modal will prompt that a location must be allowed to search the recycling centers.
    
  2. The item can be searched for by picture by clicking the "Search by Picture" button.

            -Upon click, the user is taken to the next page to search which general area of recycling the item might fall under.
            -When a general area is chosen by clicking on the card, the page then moves to specific item cards.
            -Once an item is clicked, recycling instructions are displayed.
    
  3. If the user has the recycling code for the item, it can be entered in the search field where they are taken directly to recycling instructions as seen in option.

The landing page features a help me section next to the search field. When clicked, the user is taken to a page of step-by-step instructions on how to use the application.

Each page features a back button to take the user to the previous page.

Technologies used:

-HTML

-CSS

-Bulma

-JavaScript

-JQuery

-Google

API:

-Open Weather

-Value Serp

-Geolocation API

-Socrata Open Data API

Untitled_ Jun 8, 2022 3_44 PM (2)