Our team loves GAP products and what they stand for. Therefore, we decided to dedicate 36 hours to develop a well functioning website that

What it does

Gap4Lyfe is a website that gives their users an opportunity to voice their opinion on the latest GAP products. Users are allowed to scroll through the website and vote "Like" or "Dislike" on each clothing. After they submit their votes Also, there is a local storage of all the likes and dislikes in a page called LeaderBoards. This will count the number of likes and dislikes the users have submitted. After submitting, users will be encouraged to go on GAP's Facebook page. They would spread GAP products on their social medias. Gap4Lyfe can give GAP an insight of what type of style is more popular.

How I built it

We built GAP4Lyfe as a website, using the standard HTML, CSS, Javascript, and jQuery. There is a homepage with an animation, and it leads to a rating system. Even though it may seem like the whole voting page is one form, there is actually one html form for each pair of like and dislike buttons. When the submit button is pressed, the form data (what buttons are checked) is written in JSON form to local storage, which can be retrieved later and displayed in tabular form on the leaderboard page.

Challenges I ran into

One of the challenges that took a little while to figure out was representing the radio buttons on the page using the like and dislike images. We were looking online for a solution, but we eventually came up with one ourselves, namely setting the radio button opacity to 0 and overlapping it above the image.

Accomplishments that I'm proud of

We are proud of making a well functioning website with several features in 36 hours.

What I learned

We got a good opportunity to practice my web development skills, and we also learned quite a bit about using jQuery with forms and such.

What's next for Gap4Lyfe

We hope that our leaderboard will obtain information for GAP product products. We want to make it easier to gather votes for our leaderboard.

Share this project: