zela7alex / love-match-calculator Goto Github PK

Description
The initial css and html code to be created by Joel, using another API other than bootstrap. The main page will consist of a container (for the love calculator) and modal that pops up to explain/describe what the love calculator does and how to use it.

User Story
-AS A user on Valentines day,
-I WANT to calculate if my crush is a perfect match.
-IF my crush is a match, I want to see a curated Spotify "love" playlist and recommended love movies.
-IF my crush IS NOT a match, I want to see a curated "I hate love" Spotify playlist and movies to get over them.***

To Produce

• Must use alternative API grid systems for Html / Css.

• Proper ID's, classes and tags for easy Javascript integration.

• Must be Responsive on smaller devices. (The alternative bootstrap API's grid system should be able to do this automatically in most cases)

• Must have (7) HTML pages total-

1. Main Page (calculator w/ description)

---

2. "If compatible" buttons page (one for a playlist, one for a movies list")
3. "love songs" playlist page.
4. "love movies" list page.

---

5. "If NOT compatible" buttons page (one for a playlist, one for a pexels image list")
6. "I HATE love" playlist page.
7. "Who needs love?" pexels images list page.

** An 8th page will later be added as a 404 page in case of bugs.
** Project will be deployed with Git pages

Description
This code will consist of integrating the Pexels images
**This API gives us the possibility of randomly generating a list of images based off the "love" keyword. We will be creating code that generates a pexels image list for "Love clips/date ideas" and one for "Action/Funny" movies that a user can look through and see details of a movie they'd like to watch.

To Produce
-Code must use tags, ID's and Classes created by Joel's Code.
-Jquery used if possible to show "our skills" and to reduce lines of code.

**Possibilities to produce

• API Url at top of page
• A Function created that loops through specified amount of data results we want per page.

Description
We will need to ensure all of our javascript code is being linked perfectly with Joel's CSS. We will also be reviewing the UX/UI to ensure we all like the design. Any changes of the design will be made at this point in the process.

Finalization
-We will each play the "love calculator" game a few times on our own devices to ensure it works properly.
-Deployed project will be sent to Felicia.

Description
The code for this assignment will consist of integrating two Spotify API's, one for "love songs" and one for "getting over them/ I hate love songs."

User Story
-AS A user on Valentines day
-I WANT to be redirected to a Spotify playlist based on my love match percent.
-SO that I can listen to more songs about love, or listen to songs about hating love.

To Produce
-The code must use ID's and classes specified by Joel's CSS for Integration.
-JQuery used if possible to show our "skills" and for shorter code.

Possibilities for Production

• API URL included at top of page.
• API should pull either a specific playlist with various songs/artists OR various random songs into an array which can then be looped through.
• Amount of data we want to include ex) 10-20 songs from a Spotify playlist will be how we loop through the data.

** Javascript to be checked by collaborators in tandem.