primalorb / find_your_drink Goto Github PK

• Drinklet
• Cheerspace
• Cheersii or Cheersy
• Drinkreel
• Savours
• Drinkspot
• Drinkstop
• TodaysCheers
• Drinkspo
• Cheersifi or Cheersify
• Cheersfacts
• SavourStarter
• Happiest Hour

An important step in our collaborative design is a barebones reactive website

• Design mobile first approach
• Apply either media queries or responsive formatting to adjust to desktop view

HTML Elements to include:

• Header (potentially hold buttons for settings, and view saved calendar events)

• Main Element to include:

• Button or link to generate email
  Field for date picker or date dropdowns

• Article Element to include:

• Display Drink

• Display Drink Image

• Display Drink Recipe

• Display Recipe Ingredients

• Display historical event

Footer Element to include:

• Team names

Good practice would be to use lorem placeholder text, and a photo placeholder service like picsum ( ex: https://picsum.photos/200 ) while building layout to ensure content fits and adjusts appropriately

User has the ability to change settings

• display alcoholic or non-alcoholic drinks
• display only cocktails, beer, or both, etc

• Page deployed and functioning

Create a link the user can click
~~ a modal pops up where a name, email, and personal message can be added~~

• mailto:// email content will be generated, including results from the API queries for the selected date
• this email will open in the users email client for sending
  https://blog.hubspot.com/marketing/html-form-email

We need to make a detailed readme with:

• Purpose
• Image
• Built With
• Website Link
• Application Flow / Logic
• References to any external documentation
• Links to each users GitHub

• build ability to display "something" when there is no image presented

(On first page load, or if storage setting does not exist)

When user loads page, they are asked whether they are 19 or over

• If no, user setting would be stored to only display non-alcoholic drinks

• If yes, the user setting would be stored to display all available drinks

Define for MVP:

• User Stories
• Acceptance Criteria

Does not need to consider 'additional' features

• Cocktails
• Beers
• Historical Facts

After barebones structure is made, additional work will be needed to:

• hook and display content from APIS
• add visual styling
• update any code required to adapt to real data

• When a drink / trivia is presented, store in localstorage
• Display recent items in a list (limit qty?)
• Allow clicking of links to re-display the item on the page

For our MVP, we want to be able to:

• Retrieve a random beer
• Retrieve the photo of the beer? (if possible)

This work can happen before HTML hooks are known for display

Due to the expected difficulty with creating a scheduled back end email service, a best-case scenario might be:

• User inputs date
• User inputs name
• User inputs email
• System applies a boolean FALSE to a 'Sent' tag
• Event is stored in local storage
• Compare date to current on page load

When the page loads, the storage is reviewed for dates which have passed, and the emails have not been send (false boolean value)

The user is then prompted via modal to send an email to the contact

After our MVP ability to display a random cocktail, we may want to be able to:

• Query additional criteria for the drinks, such as
• color
• ingredients
• theme

User Story Additional Features:

WHEN the page loads
THEN I am presented with setting options that are saved to local storage
WHEN I click the settings menu

THEN I can change my previously selected settings

WHEN I choose my desired settings
THEN the page only displays those choices
WHEN I click on New Calendar Event
THEN I can enter a name, email, personal message and date
WHEN I enter my information into New Calendar Event
THEN it is saved and viewed in my settings
WHEN I view my events in settings
THEN I can individually delete them
WHEN the page loads
THEN the calendar events are reviewed for items that need to be sent
WHEN I enter an ingredient in the search bar
THEN I am presented with a drink and recipe with that ingredient
WHEN I choose select annual event
THEN I will be reminded to send an email on that anniversary
WHEN an annual event has past and an email has not been sent
THEN a modal will pop up on page reload with a reminder
WHEN I click send email

THEN an email is generated with a drink and recipe that I can send to my contacts

• Acceptance Criteria

We can address these after we update progress of MVP

Based on the date chosen either from date load or user selection

• Retrieved a fact / historical event

This can happen before HTML hooks are in place

• Andrew
• Aimee
• Marilyn
• Swan

Add this project to your portfolio page

On page load, display a random

• Drink (either beer or cocktail)
• Historical Fact
• Display Date
• Use date to run initial queries

Project Requirements as laid out in Bootcampspot

• Use a CSS framework other than Bootstrap. #1
• Be deployed to GitHub Pages. #18
• Be interactive (i.e., accept and respond to user input). #1
• Use at least two server-side APIs. #2 #4 #6
• Does not use alerts, confirms, or prompts (use modals). #1 #10
• Use client-side storage to store persistent data. #13 #23
• Be responsive. #1 #10
• Have a polished UI. #1 #10
• Have a clean repository that meets quality coding standards (file structure, naming conventions, follows best practices for class/id naming conventions, indentation, quality comments, etc.).
• Have a quality README (with unique name, description, technologies used, screenshot, and link to deployed application). #17
• Finally, you must add your project to the portfolio that you created in Module 2. #19

10 minute presentation to class

• Write Elevator Brief
• Develop presentation media, such as powerpoint
• Determine discussion points
• Delegate who will talk about what
• Ensure we have a technical discussion about what questions we may face

After our MVP ability to display a random cocktail, we may want to be able to:

• [ ] Query additional criteria for the beers, such as
• color
• country? type?
• theme
• [ ] Assign specific drinks to specific dates (themes like St Patricks Day maybe?)
• [ ] Assign drinks based on the month gem stones

For our MVP, we want to be able to:

• Retrieve a random cocktail
• Retrieve the photo of the cocktail
• Retrieve the ingredients / recipe for the cocktail
• Retrieve the ingredient images for the recipe

This work can happen before HTML hooks are known for display